terra-toggle - npm Package Compare versions

Comparing version 3.39.0 to 3.40.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 3.40.0 - (November 10, 2020)
+
+* Changed
+  * Updated `terra-dev-site` examples to use react hooks.
+
 ## 3.39.0 - (October 27, 2020)
@@ -7,0 +12,0 @@

lib/terra-dev-site/doc/example/AnimatedToggle.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -17,73 +19,42 @@ var _IconInformation = _interopRequireDefault(require("terra-icon/lib/icon/IconInformation"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var ToggleDefault = function ToggleDefault() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var handleOnClick = function handleOnClick() {
+    setIsOpen(!isOpen);
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconInformation.default, {
+    onClick: handleOnClick,
+    "aria-expanded": isOpen,
+    "aria-controls": "toggle"
+  }), /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
+    id: "animated-toggle",
+    isOpen: isOpen,
+    isAnimated: true
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test"
+  }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
+};
 
-var ToggleDefault = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToggleDefault, _React$Component);
-
-  var _super = _createSuper(ToggleDefault);
-
-  function ToggleDefault() {
-    var _this;
-
-    _classCallCheck(this, ToggleDefault);
-
-    _this = _super.call(this);
-    _this.state = {
-      isOpen: false
-    };
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(ToggleDefault, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isOpen = this.state.isOpen;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconInformation.default, {
-        onClick: this.handleOnClick,
-        "aria-expanded": isOpen,
-        "aria-controls": "toggle"
-      }), /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
-        id: "animated-toggle",
-        isOpen: isOpen,
-        isAnimated: true
-      }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", /*#__PURE__*/_react.default.createElement("a", {
-        href: "#test"
-      }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
-    }
-  }]);
-
-  return ToggleDefault;
-}(_react.default.Component);
-
 var _default = ToggleDefault;
 exports.default = _default;

lib/terra-dev-site/doc/example/DefaultToggle.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -17,72 +19,41 @@ var _terraToggle = _interopRequireDefault(require("terra-toggle"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var ToggleDefault = function ToggleDefault() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var handleOnClick = function handleOnClick() {
+    setIsOpen(!isOpen);
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconInformation.default, {
+    onClick: handleOnClick,
+    "aria-expanded": isOpen,
+    "aria-controls": "toggle"
+  }), /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
+    id: "default-toggle",
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test"
+  }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
+};
 
-var ToggleDefault = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToggleDefault, _React$Component);
-
-  var _super = _createSuper(ToggleDefault);
-
-  function ToggleDefault() {
-    var _this;
-
-    _classCallCheck(this, ToggleDefault);
-
-    _this = _super.call(this);
-    _this.state = {
-      isOpen: false
-    };
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(ToggleDefault, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isOpen = this.state.isOpen;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconInformation.default, {
-        onClick: this.handleOnClick,
-        "aria-expanded": isOpen,
-        "aria-controls": "toggle"
-      }), /*#__PURE__*/_react.default.createElement(_terraToggle.default, {
-        id: "default-toggle",
-        isOpen: isOpen
-      }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", /*#__PURE__*/_react.default.createElement("a", {
-        href: "#test"
-      }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
-    }
-  }]);
-
-  return ToggleDefault;
-}(_react.default.Component);
-
 var _default = ToggleDefault;
 exports.default = _default;

lib/terra-dev-site/test/toggle/AnimatedToggle.test.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -15,97 +17,66 @@ var _Toggle = _interopRequireDefault(require("../../../Toggle"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var AnimatedToggle = function AnimatedToggle() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var handleOnClick = function handleOnClick() {
+    setIsOpen(!isOpen);
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    id: "trigger-toggle",
+    onClick: handleOnClick,
+    "aria-expanded": isOpen,
+    "aria-controls": "toggle"
+  }, "Animated Toggle"), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
+    id: "toggle",
+    isOpen: isOpen,
+    isAnimated: true
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", /*#__PURE__*/_react.default.createElement("a", {
+    id: "link",
+    href: "#test"
+  }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "text-input"
+  }, "Text input"), /*#__PURE__*/_react.default.createElement("input", {
+    id: "text-input",
+    className: "test",
+    type: "text"
+  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "select-field",
+    defaultValue: "Option 01"
+  }, "Select field"), /*#__PURE__*/_react.default.createElement("select", {
+    id: "select-field"
+  }, /*#__PURE__*/_react.default.createElement("option", null, "Option 01"), /*#__PURE__*/_react.default.createElement("option", null, "Option 02"))), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "textarea"
+  }, "Textarea"), /*#__PURE__*/_react.default.createElement("textarea", {
+    id: "textarea",
+    cols: "30",
+    rows: "5",
+    defaultValue: "Textarea text"
+  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    id: "button"
+  }, "button"))));
+};
 
-var AnimatedToggle = /*#__PURE__*/function (_React$Component) {
-  _inherits(AnimatedToggle, _React$Component);
-
-  var _super = _createSuper(AnimatedToggle);
-
-  function AnimatedToggle() {
-    var _this;
-
-    _classCallCheck(this, AnimatedToggle);
-
-    _this = _super.call(this);
-    _this.state = {
-      isOpen: false
-    };
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(AnimatedToggle, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isOpen = this.state.isOpen;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "trigger-toggle",
-        onClick: this.handleOnClick,
-        "aria-expanded": isOpen,
-        "aria-controls": "toggle"
-      }, "Animated Toggle"), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
-        id: "toggle",
-        isOpen: isOpen,
-        isAnimated: true
-      }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", /*#__PURE__*/_react.default.createElement("a", {
-        id: "link",
-        href: "#test"
-      }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: "text-input"
-      }, "Text input"), /*#__PURE__*/_react.default.createElement("input", {
-        id: "text-input",
-        className: "test",
-        type: "text"
-      })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: "select-field",
-        defaultValue: "Option 01"
-      }, "Select field"), /*#__PURE__*/_react.default.createElement("select", {
-        id: "select-field"
-      }, /*#__PURE__*/_react.default.createElement("option", null, "Option 01"), /*#__PURE__*/_react.default.createElement("option", null, "Option 02"))), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: "textarea"
-      }, "Textarea"), /*#__PURE__*/_react.default.createElement("textarea", {
-        id: "textarea",
-        cols: "30",
-        rows: "5",
-        defaultValue: "Textarea text"
-      })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "button"
-      }, "button"))));
-    }
-  }]);
-
-  return AnimatedToggle;
-}(_react.default.Component);
-
 var _default = AnimatedToggle;
 exports.default = _default;

lib/terra-dev-site/test/toggle/DefaultToggle.test.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -15,96 +17,65 @@ var _Toggle = _interopRequireDefault(require("../../../Toggle"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var ToggleDefault = function ToggleDefault() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var handleOnClick = function handleOnClick() {
+    setIsOpen(!isOpen);
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    id: "trigger-toggle",
+    onClick: handleOnClick,
+    "aria-expanded": isOpen,
+    "aria-controls": "toggle"
+  }, "Default Toggle"), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
+    id: "toggle",
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    id: "link",
+    href: "#test"
+  }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "text-input"
+  }, "Text input"), /*#__PURE__*/_react.default.createElement("input", {
+    id: "text-input",
+    className: "test",
+    type: "text"
+  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "select-field",
+    defaultValue: "Option 01"
+  }, "Select field"), /*#__PURE__*/_react.default.createElement("select", {
+    id: "select-field"
+  }, /*#__PURE__*/_react.default.createElement("option", null, "Option 01"), /*#__PURE__*/_react.default.createElement("option", null, "Option 02"))), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "textarea"
+  }, "Textarea"), /*#__PURE__*/_react.default.createElement("textarea", {
+    id: "textarea",
+    cols: "30",
+    rows: "5",
+    defaultValue: "Textarea text"
+  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    id: "button"
+  }, "button"))));
+};
 
-var ToggleDefault = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToggleDefault, _React$Component);
-
-  var _super = _createSuper(ToggleDefault);
-
-  function ToggleDefault() {
-    var _this;
-
-    _classCallCheck(this, ToggleDefault);
-
-    _this = _super.call(this);
-    _this.state = {
-      isOpen: false
-    };
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(ToggleDefault, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isOpen = this.state.isOpen;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "trigger-toggle",
-        onClick: this.handleOnClick,
-        "aria-expanded": isOpen,
-        "aria-controls": "toggle"
-      }, "Default Toggle"), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
-        id: "toggle",
-        isOpen: this.state.isOpen
-      }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet,", ' ', /*#__PURE__*/_react.default.createElement("a", {
-        id: "link",
-        href: "#test"
-      }, "consectetur"), ' ', "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: "text-input"
-      }, "Text input"), /*#__PURE__*/_react.default.createElement("input", {
-        id: "text-input",
-        className: "test",
-        type: "text"
-      })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: "select-field",
-        defaultValue: "Option 01"
-      }, "Select field"), /*#__PURE__*/_react.default.createElement("select", {
-        id: "select-field"
-      }, /*#__PURE__*/_react.default.createElement("option", null, "Option 01"), /*#__PURE__*/_react.default.createElement("option", null, "Option 02"))), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: "textarea"
-      }, "Textarea"), /*#__PURE__*/_react.default.createElement("textarea", {
-        id: "textarea",
-        cols: "30",
-        rows: "5",
-        defaultValue: "Textarea text"
-      })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "button"
-      }, "button"))));
-    }
-  }]);
-
-  return ToggleDefault;
-}(_react.default.Component);
-
 var _default = ToggleDefault;
 exports.default = _default;

lib/terra-dev-site/test/toggle/OpenToggle.test.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -15,72 +17,41 @@ var _Toggle = _interopRequireDefault(require("../../../Toggle"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var OpenToggle = function OpenToggle() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var handleOnClick = function handleOnClick() {
+    setIsOpen(!isOpen);
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    id: "trigger-toggle",
+    onClick: handleOnClick,
+    "aria-expanded": isOpen,
+    "aria-controls": "toggle"
+  }, "Open Toggle"), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
+    id: "toggle",
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
+};
 
-var OpenToggle = /*#__PURE__*/function (_React$Component) {
-  _inherits(OpenToggle, _React$Component);
-
-  var _super = _createSuper(OpenToggle);
-
-  function OpenToggle() {
-    var _this;
-
-    _classCallCheck(this, OpenToggle);
-
-    _this = _super.call(this);
-    _this.state = {
-      isOpen: true
-    };
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(OpenToggle, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isOpen = this.state.isOpen;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "trigger-toggle",
-        onClick: this.handleOnClick,
-        "aria-expanded": isOpen,
-        "aria-controls": "toggle"
-      }, "Open Toggle"), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
-        id: "toggle",
-        isOpen: isOpen
-      }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
-    }
-  }]);
-
-  return OpenToggle;
-}(_react.default.Component);
-
 var _default = OpenToggle;
 exports.default = _default;

package.json

 {
   "name": "terra-toggle",
   "main": "lib/Toggle.js",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "description": "Toggle component that transitions content in and out.",
@@ -47,3 +47,3 @@ "repository": {
   },
-  "gitHead": "6e29f8f1dad526259a02fea6a926fb6545998098"
+  "gitHead": "1b981da7df893b44257a6fbffb2cbaccc6714b97"
 }

src/terra-dev-site/doc/example/AnimatedToggle.jsx

@@ -1,38 +0,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import IconInformation from 'terra-icon/lib/icon/IconInformation';
 import Toggle from 'terra-toggle';
 
-class ToggleDefault extends React.Component {
-  constructor() {
-    super();
-    this.state = ({ isOpen: false });
+const ToggleDefault = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
-    this.handleOnClick = this.handleOnClick.bind(this);
-  }
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-  handleOnClick() {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
-  }
+  return (
+    <div>
+      <IconInformation onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
+      {/**
+      * The aria-expanded state is used on the triggering component to indicate the contents are collapsible, and whether a region is currently expanded or collapsed
+      */}
+      <Toggle id="animated-toggle" isOpen={isOpen} isAnimated>
+        <p>
+          Lorem ipsum dolor sit amet,
+          <a href="#test">consectetur</a>
+          {' '}
+          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </Toggle>
+    </div>
+  );
+};
 
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <div>
-        <IconInformation onClick={this.handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
-        {/**
-        * The aria-expanded state is used on the triggering component to indicate the contents are collapsible, and whether a region is currently expanded or collapsed
-        */}
-        <Toggle id="animated-toggle" isOpen={isOpen} isAnimated>
-          <p>
-            Lorem ipsum dolor sit amet,
-            <a href="#test">consectetur</a>
-            {' '}
-            adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-        </Toggle>
-      </div>
-    );
-  }
-}
-
 export default ToggleDefault;

src/terra-dev-site/doc/example/DefaultToggle.jsx

@@ -1,38 +0,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Toggle from 'terra-toggle';
 import IconInformation from 'terra-icon/lib/icon/IconInformation';
 
-class ToggleDefault extends React.Component {
-  constructor() {
-    super();
-    this.state = ({ isOpen: false });
+const ToggleDefault = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
-    this.handleOnClick = this.handleOnClick.bind(this);
-  }
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-  handleOnClick() {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
-  }
+  return (
+    <div>
+      <IconInformation onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
+      {/**
+      * The aria-expanded state is used on the triggering component to indicate the contents are collapsible, and whether a region is currently expanded or collapsed
+      */}
+      <Toggle id="default-toggle" isOpen={isOpen}>
+        <p>
+          Lorem ipsum dolor sit amet,
+          <a href="#test">consectetur</a>
+          {' '}
+          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </Toggle>
+    </div>
+  );
+};
 
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <div>
-        <IconInformation onClick={this.handleOnClick} aria-expanded={isOpen} aria-controls="toggle" />
-        {/**
-        * The aria-expanded state is used on the triggering component to indicate the contents are collapsible, and whether a region is currently expanded or collapsed
-        */}
-        <Toggle id="default-toggle" isOpen={isOpen}>
-          <p>
-            Lorem ipsum dolor sit amet,
-            <a href="#test">consectetur</a>
-            {' '}
-            adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-        </Toggle>
-      </div>
-    );
-  }
-}
-
 export default ToggleDefault;

src/terra-dev-site/test/toggle/AnimatedToggle.test.jsx

@@ -1,55 +0,47 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Toggle from '../../../Toggle';
 
-class AnimatedToggle extends React.Component {
-  constructor() {
-    super();
-    this.state = ({ isOpen: false });
+const AnimatedToggle = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
-    this.handleOnClick = this.handleOnClick.bind(this);
-  }
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-  handleOnClick() {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
-  }
+  return (
+    <div>
+      <button type="button" id="trigger-toggle" onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle">Animated Toggle</button>
+      <Toggle id="toggle" isOpen={isOpen} isAnimated>
+        <p>
+          Lorem ipsum dolor sit amet,
+          <a id="link" href="#test">consectetur</a>
+          {' '}
+          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <div>
+          <label htmlFor="text-input">Text input</label>
+          <input id="text-input" className="test" type="text" />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="select-field" defaultValue="Option 01">Select field</label>
+          <select id="select-field">
+            <option>Option 01</option>
+            <option>Option 02</option>
+          </select>
+        </div>
+        <br />
+        <div>
+          <label htmlFor="textarea">Textarea</label>
+          <textarea id="textarea" cols="30" rows="5" defaultValue="Textarea text" />
+        </div>
+        <br />
+        <div>
+          <button type="button" id="button">button</button>
+        </div>
+      </Toggle>
+    </div>
+  );
+};
 
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <div>
-        <button type="button" id="trigger-toggle" onClick={this.handleOnClick} aria-expanded={isOpen} aria-controls="toggle">Animated Toggle</button>
-        <Toggle id="toggle" isOpen={isOpen} isAnimated>
-          <p>
-            Lorem ipsum dolor sit amet,
-            <a id="link" href="#test">consectetur</a>
-            {' '}
-            adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-          <div>
-            <label htmlFor="text-input">Text input</label>
-            <input id="text-input" className="test" type="text" />
-          </div>
-          <br />
-          <div>
-            <label htmlFor="select-field" defaultValue="Option 01">Select field</label>
-            <select id="select-field">
-              <option>Option 01</option>
-              <option>Option 02</option>
-            </select>
-          </div>
-          <br />
-          <div>
-            <label htmlFor="textarea">Textarea</label>
-            <textarea id="textarea" cols="30" rows="5" defaultValue="Textarea text" />
-          </div>
-          <br />
-          <div>
-            <button type="button" id="button">button</button>
-          </div>
-        </Toggle>
-      </div>
-    );
-  }
-}
-
 export default AnimatedToggle;

src/terra-dev-site/test/toggle/DefaultToggle.test.jsx

@@ -1,56 +0,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Toggle from '../../../Toggle';
 
-class ToggleDefault extends React.Component {
-  constructor() {
-    super();
-    this.state = ({ isOpen: false });
+const ToggleDefault = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
-    this.handleOnClick = this.handleOnClick.bind(this);
-  }
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-  handleOnClick() {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
-  }
+  return (
+    <div>
+      <button type="button" id="trigger-toggle" onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle">Default Toggle</button>
+      <Toggle id="toggle" isOpen={isOpen}>
+        <p>
+          Lorem ipsum dolor sit amet,
+          {' '}
+          <a id="link" href="#test">consectetur</a>
+          {' '}
+          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <div>
+          <label htmlFor="text-input">Text input</label>
+          <input id="text-input" className="test" type="text" />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="select-field" defaultValue="Option 01">Select field</label>
+          <select id="select-field">
+            <option>Option 01</option>
+            <option>Option 02</option>
+          </select>
+        </div>
+        <br />
+        <div>
+          <label htmlFor="textarea">Textarea</label>
+          <textarea id="textarea" cols="30" rows="5" defaultValue="Textarea text" />
+        </div>
+        <br />
+        <div>
+          <button type="button" id="button">button</button>
+        </div>
+      </Toggle>
+    </div>
+  );
+};
 
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <div>
-        <button type="button" id="trigger-toggle" onClick={this.handleOnClick} aria-expanded={isOpen} aria-controls="toggle">Default Toggle</button>
-        <Toggle id="toggle" isOpen={this.state.isOpen}>
-          <p>
-            Lorem ipsum dolor sit amet,
-            {' '}
-            <a id="link" href="#test">consectetur</a>
-            {' '}
-            adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-          <div>
-            <label htmlFor="text-input">Text input</label>
-            <input id="text-input" className="test" type="text" />
-          </div>
-          <br />
-          <div>
-            <label htmlFor="select-field" defaultValue="Option 01">Select field</label>
-            <select id="select-field">
-              <option>Option 01</option>
-              <option>Option 02</option>
-            </select>
-          </div>
-          <br />
-          <div>
-            <label htmlFor="textarea">Textarea</label>
-            <textarea id="textarea" cols="30" rows="5" defaultValue="Textarea text" />
-          </div>
-          <br />
-          <div>
-            <button type="button" id="button">button</button>
-          </div>
-        </Toggle>
-      </div>
-    );
-  }
-}
-
 export default ToggleDefault;

src/terra-dev-site/test/toggle/OpenToggle.test.jsx

@@ -1,29 +0,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Toggle from '../../../Toggle';
 
-class OpenToggle extends React.Component {
-  constructor() {
-    super();
-    this.state = ({ isOpen: true });
+const OpenToggle = () => {
+  const [isOpen, setIsOpen] = useState(true);
 
-    this.handleOnClick = this.handleOnClick.bind(this);
-  }
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-  handleOnClick() {
-    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
-  }
+  return (
+    <div>
+      <button type="button" id="trigger-toggle" onClick={handleOnClick} aria-expanded={isOpen} aria-controls="toggle">Open Toggle</button>
+      <Toggle id="toggle" isOpen={isOpen}>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </Toggle>
+    </div>
+  );
+};
 
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <div>
-        <button type="button" id="trigger-toggle" onClick={this.handleOnClick} aria-expanded={isOpen} aria-controls="toggle">Open Toggle</button>
-        <Toggle id="toggle" isOpen={isOpen}>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        </Toggle>
-      </div>
-    );
-  }
-}
-
 export default OpenToggle;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

70726

decreased by-5.84%

Lines of code

622

decreased by-19.43%

No dependency changes