@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Atoms/TextArea/TextArea.js

@@ -1,36 +1,37 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _Label = _interopRequireDefault(require("../Label/Label"));
 var _ErrorText = _interopRequireDefault(require("../ErrorText/ErrorText"));
-var _excluded = ["id", "label", "hideLabel", "errorMsg", "rows", "className"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var StyledTextArea = _styledComponents.default.textarea.withConfig({
+const StyledTextArea = _styledComponents.default.textarea.withConfig({
   displayName: "TextArea__StyledTextArea",
   componentId: "sc-8tw0zq-0"
-})(["", ""], function (_ref) {
-  var theme = _ref.theme,
-    error = _ref.error;
+})(["", ""], _ref => {
+  let {
+    theme,
+    error
+  } = _ref;
   return (0, _styledComponents.css)(["box-sizing:border-box;width:100%;margin:0;padding:", " ", ";font-size:", ";background-color:", ";border:1px solid;border-radius:0.5rem;border-color:", ";box-shadow:none;appearance:none;color:", ";font-family:", ";resize:vertical;&:focus{border:1px solid ", ";&::placeholder{visibility:hidden;}}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), theme.fontSize('m'), theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
 });
-var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
-  var id = _ref2.id,
-    label = _ref2.label,
-    hideLabel = _ref2.hideLabel,
-    errorMsg = _ref2.errorMsg,
-    rows = _ref2.rows,
-    className = _ref2.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    id,
+    label,
+    hideLabel,
+    errorMsg,
+    rows,
+    className,
+    ...rest
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_Label.default, {
     htmlFor: id,
     label: label,

package/dist/components/Atoms/TextArea/TextArea.test.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _TextArea = _interopRequireDefault(require("./TextArea"));
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextArea.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextArea.default, {
     name: "description",
     placeholder: "This is text area",
     label: "Label",

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -1,26 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _Input = _interopRequireDefault(require("../Input/Input"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _TextInputWithDropdown = require("./TextInputWithDropdown.style");
-var _excluded = ["options", "onChange", "onSelect", "id", "name", "label", "dropdownInstruction", "className"],
-  _excluded2 = ["options", "dropdownInstruction", "onSelect", "activeOption", "resetActiveOption"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var KEY_CODE_ENTER = 13;
-var KEY_CODE_SPACE = 32;
-var KEY_CODE_UP = 38;
-var KEY_CODE_DOWN = 40;
-var KEY_CODE_ESCAPE = 27;
+const KEY_CODE_ENTER = 13;
+const KEY_CODE_SPACE = 32;
+const KEY_CODE_UP = 38;
+const KEY_CODE_DOWN = 40;
+const KEY_CODE_ESCAPE = 27;
 
 /**
  * This component deals with the visual aspect of a text input with typeahead-style functionality
@@ -30,40 +24,32 @@ var KEY_CODE_ESCAPE = 27;
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
-var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var options = _ref.options,
-    onChange = _ref.onChange,
-    onSelect = _ref.onSelect,
-    id = _ref.id,
-    name = _ref.name,
-    label = _ref.label,
-    dropdownInstruction = _ref.dropdownInstruction,
-    className = _ref.className,
-    otherInputProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(-1),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeOption = _useState2[0],
-    setActiveOption = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    forceClosed = _useState4[0],
-    setForceClosed = _useState4[1];
-  (0, _react.useEffect)(function () {
+const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    options,
+    onChange,
+    onSelect,
+    id,
+    name,
+    label,
+    dropdownInstruction,
+    className,
+    ...otherInputProps
+  } = _ref;
+  const [activeOption, setActiveOption] = (0, _react.useState)(-1);
+  const [forceClosed, setForceClosed] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     // reset if options change
     setActiveOption(-1);
     setForceClosed(false);
   }, [options]);
-  var down = function down() {
-    return activeOption < options.length - 1 ? setActiveOption(activeOption + 1) : setActiveOption(0);
-  };
-  var up = function up() {
-    return activeOption < 1 ? setActiveOption(options.length - 1) : setActiveOption(activeOption - 1);
-  };
-  var navigateOptions = function navigateOptions(e) {
+  const down = () => activeOption < options.length - 1 ? setActiveOption(activeOption + 1) : setActiveOption(0);
+  const up = () => activeOption < 1 ? setActiveOption(options.length - 1) : setActiveOption(activeOption - 1);
+  const navigateOptions = e => {
     if (options.length === 0) {
       return;
     }
-    var keyCode = e.keyCode || e.which;
+    const keyCode = e.keyCode || e.which;
     if (keyCode === KEY_CODE_DOWN) {
       e.preventDefault();
       down();
@@ -74,22 +60,21 @@ var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_re
       setForceClosed(true);
     }
   };
-  var inputProps = (0, _objectSpread2.default)({
-    onChange: onChange,
-    id: id,
-    name: name,
-    label: label,
+  const inputProps = {
+    onChange,
+    id,
+    name,
+    label,
     autoComplete: 'off',
-    type: 'text'
-  }, otherInputProps);
-  var optionsProps = {
-    options: options,
-    onSelect: onSelect,
-    dropdownInstruction: dropdownInstruction,
-    activeOption: activeOption,
-    resetActiveOption: function resetActiveOption() {
-      return setActiveOption(-1);
-    }
+    type: 'text',
+    ...otherInputProps
+  };
+  const optionsProps = {
+    options,
+    onSelect,
+    dropdownInstruction,
+    activeOption,
+    resetActiveOption: () => setActiveOption(-1)
   };
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.Container, {
     className: "TextInputWithDropdown ".concat(className).trim(),
@@ -101,19 +86,23 @@ var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_re
     className: "TextInputWithDropdown__options"
   })));
 });
-var Options = function Options(_ref2) {
-  var options = _ref2.options,
-    dropdownInstruction = _ref2.dropdownInstruction,
-    onSelect = _ref2.onSelect,
-    activeOption = _ref2.activeOption,
-    resetActiveOption = _ref2.resetActiveOption,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+const Options = _ref2 => {
+  let {
+    options,
+    dropdownInstruction,
+    onSelect,
+    activeOption,
+    resetActiveOption,
+    ...rest
+  } = _ref2;
   // Reset 'activeOption' when the list is unfocused.
-  var onBlur = function onBlur(e) {
-    var target = e.target;
+  const onBlur = e => {
+    const {
+      target
+    } = e;
     // There's a delay before the new activeOption becomes the document.activeElement when
     //  scrolling through the dropdown list via keyboard.
-    setTimeout(function () {
+    setTimeout(() => {
       if (document.activeElement.parentNode !== target.parentNode) {
         resetActiveOption();
       }
@@ -125,27 +114,21 @@ var Options = function Options(_ref2) {
     "aria-activedescendant": activeOption > -1 ? "option-".concat(activeOption) : undefined
   }, dropdownInstruction && /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItem, {
     role: "option"
-  }, /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.TextItalic, null, dropdownInstruction)), options.map(function (option, index) {
-    return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItemSelectable, {
-      id: "option-".concat(index),
-      role: "option",
-      key: option,
-      onClick: function onClick() {
-        return onSelect(option, index);
-      },
-      onKeyPress: function onKeyPress(e) {
-        var keyCode = e.keyCode || e.which;
-        if (keyCode === KEY_CODE_SPACE || keyCode === KEY_CODE_ENTER) {
-          onSelect(option, index);
-        }
-      },
-      tabIndex: "-1",
-      "aria-selected": index === activeOption,
-      ref: index === activeOption ? function (element) {
-        return element && element.focus();
-      } : null
-    }, /*#__PURE__*/_react.default.createElement(_Text.default, null, option));
-  })));
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.TextItalic, null, dropdownInstruction)), options.map((option, index) => /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItemSelectable, {
+    id: "option-".concat(index),
+    role: "option",
+    key: option,
+    onClick: () => onSelect(option, index),
+    onKeyPress: e => {
+      const keyCode = e.keyCode || e.which;
+      if (keyCode === KEY_CODE_SPACE || keyCode === KEY_CODE_ENTER) {
+        onSelect(option, index);
+      }
+    },
+    tabIndex: "-1",
+    "aria-selected": index === activeOption,
+    ref: index === activeOption ? element => element && element.focus() : null
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, option)))));
 };
 TextInputWithDropdown.defaultProps = {
   dropdownInstruction: null,

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,39 +10,47 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _size = require("../../../theme/shared/size");
 var _Text = _interopRequireDefault(require("../Text/Text"));
-var Container = exports.Container = _styledComponents.default.div.withConfig({
+const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Container",
   componentId: "sc-1s4bv7m-0"
 })(["position:relative;"]);
-var Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
+const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Dropdown",
   componentId: "sc-1s4bv7m-1"
-})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media (min-width:", "){max-width:500px;}"], (0, _zIndex.default)('high'), function (_ref) {
-  var theme = _ref.theme;
+})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media (min-width:", "){max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.fontFamilies('Montserrat');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('white');
 }, _size.screen.small);
-var DropdownList = exports.DropdownList = _styledComponents.default.ul.withConfig({
+const DropdownList = exports.DropdownList = _styledComponents.default.ul.withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownList",
   componentId: "sc-1s4bv7m-2"
 })(["list-style:none;padding:0;margin:0;"]);
-var DropdownItem = exports.DropdownItem = _styledComponents.default.li.withConfig({
+const DropdownItem = exports.DropdownItem = _styledComponents.default.li.withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownItem",
   componentId: "sc-1s4bv7m-3"
 })(["padding:", ";"], (0, _spacing.default)('sm'));
-var DropdownItemSelectable = exports.DropdownItemSelectable = (0, _styledComponents.default)(DropdownItem).withConfig({
+const DropdownItemSelectable = exports.DropdownItemSelectable = (0, _styledComponents.default)(DropdownItem).withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownItemSelectable",
   componentId: "sc-1s4bv7m-4"
-})(["cursor:pointer;border-top:1px solid ", ";&:hover,&:focus{background-color:", ";}"], function (_ref3) {
-  var theme = _ref3.theme;
+})(["cursor:pointer;border-top:1px solid ", ";&:hover,&:focus{background-color:", ";}"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.color('grey_light');
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.color('grey_light');
 });
-var TextItalic = exports.TextItalic = (0, _styledComponents.default)(_Text.default).withConfig({
+const TextItalic = exports.TextItalic = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "TextInputWithDropdownstyle__TextItalic",
   componentId: "sc-1s4bv7m-5"
 })(["font-style:italic;"]);

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.test.js

@@ -1,49 +1,45 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _TextInputWithDropdown = _interopRequireDefault(require("./TextInputWithDropdown"));
 var _TextInputWithDropdown2 = require("./TextInputWithDropdown.style");
-it('renders correctly with no value and no options', function () {
-  var renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, {
+it('renders correctly with no value and no options', () => {
+  const renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, {
     value: "",
     id: "text-input-with-dropdown",
     label: "Search for bikes",
     name: "query",
-    onChange: function onChange() {},
-    onSelect: function onSelect() {},
+    onChange: () => {},
+    onSelect: () => {},
     options: []
   }));
   expect(renderer.toJSON()).toMatchSnapshot();
-  expect(function () {
-    return renderer.root.findByType(_TextInputWithDropdown2.Container).findByType(_TextInputWithDropdown2.Dropdown);
-  }).toThrow();
+  expect(() => renderer.root.findByType(_TextInputWithDropdown2.Container).findByType(_TextInputWithDropdown2.Dropdown)).toThrow();
 });
-it('renders correctly with value and no options', function () {
-  var renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, {
+it('renders correctly with value and no options', () => {
+  const renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, {
     value: "bikes",
     id: "text-input-with-dropdown",
     label: "Search for bikes",
     name: "query",
-    onChange: function onChange() {},
-    onSelect: function onSelect() {},
+    onChange: () => {},
+    onSelect: () => {},
     options: []
   }));
   expect(renderer.toJSON()).toMatchSnapshot();
-  expect(function () {
-    return renderer.root.findByType(_TextInputWithDropdown2.Container).findByType(_TextInputWithDropdown2.Dropdown);
-  }).toThrow();
+  expect(() => renderer.root.findByType(_TextInputWithDropdown2.Container).findByType(_TextInputWithDropdown2.Dropdown)).toThrow();
 });
-it('renders correctly with value and options', function () {
-  var renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, {
+it('renders correctly with value and options', () => {
+  const renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, {
     value: "c",
     id: "text-input-with-dropdown",
     label: "Search for bikes",
     name: "query",
-    onChange: function onChange() {},
-    onSelect: function onSelect() {},
+    onChange: () => {},
+    onSelect: () => {},
     options: ['Canyon', 'Cannondale', 'Condor', 'Cube']
   }));
   expect(renderer.toJSON()).toMatchSnapshot();

package/dist/components/Molecules/Accordion/Accordion.js

@@ -1,62 +1,65 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _index = require("../../Atoms/Icons/index");
-var _excluded = ["children", "title"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var Container = _styledComponents.default.div.withConfig({
+const Container = _styledComponents.default.div.withConfig({
   displayName: "Accordion__Container",
   componentId: "sc-19u0s0h-0"
-})(["border-radius:1rem;background:", ";box-shadow:0px 0px 20px rgba(0,0,0,0.15);"], function (_ref) {
-  var theme = _ref.theme;
+})(["border-radius:1rem;background:", ";box-shadow:0px 0px 20px rgba(0,0,0,0.15);"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('white');
 });
-var ChevronKeyframes = (0, _styledComponents.keyframes)(["0%{margin-top:0rem;}50%{margin-top:0.5rem;}100%{margin-top:0rem;}"]);
-var Button = _styledComponents.default.button.withConfig({
+const ChevronKeyframes = (0, _styledComponents.keyframes)(["0%{margin-top:0rem;}50%{margin-top:0.5rem;}100%{margin-top:0rem;}"]);
+const Button = _styledComponents.default.button.withConfig({
   displayName: "Accordion__Button",
   componentId: "sc-19u0s0h-1"
-})(["display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;transition:bottom 0.1s linear;cursor:pointer;&:focus,&:hover{color:inherit;outline:none;> div{animation-name:", ";animation-duration:0.4s;}}padding:", ";@media ", "{padding:", " ", ";}"], function (props) {
-  return props.ChevronKeyframes;
-}, (0, _spacing.default)('l'), function (_ref2) {
-  var theme = _ref2.theme;
+})(["display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;transition:bottom 0.1s linear;cursor:pointer;&:focus,&:hover{color:inherit;outline:none;> div{animation-name:", ";animation-duration:0.4s;}}padding:", ";@media ", "{padding:", " ", ";}"], props => props.ChevronKeyframes, (0, _spacing.default)('l'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('small');
 }, (0, _spacing.default)('l'), (0, _spacing.default)('lg'));
-var Icon = _styledComponents.default.div.withConfig({
+const Icon = _styledComponents.default.div.withConfig({
   displayName: "Accordion__Icon",
   componentId: "sc-19u0s0h-2"
 })(["display:flex;justify-content:center;align-content:center;"]);
-var Copy = _styledComponents.default.div.withConfig({
+const Copy = _styledComponents.default.div.withConfig({
   displayName: "Accordion__Copy",
   componentId: "sc-19u0s0h-3"
-})(["overflow:hidden;height:0;visibility:none;transition:all 0.2s cubic-bezier(0.21,1.7,0.83,0.68) 0s;padding:0 ", ";@media ", "{padding:0 ", ";}", ""], (0, _spacing.default)('l'), function (_ref3) {
-  var theme = _ref3.theme;
+})(["overflow:hidden;height:0;visibility:none;transition:all 0.2s cubic-bezier(0.21,1.7,0.83,0.68) 0s;padding:0 ", ";@media ", "{padding:0 ", ";}", ""], (0, _spacing.default)('l'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('small');
-}, (0, _spacing.default)('lg'), function (_ref4) {
-  var isOpen = _ref4.isOpen;
-  return isOpen && (0, _styledComponents.css)(["height:auto;visibility:visible;transition:all 0.2s cubic-bezier(0.21,1.7,0.83,0.68) 0s;padding:0 ", " ", ";@media ", "{padding:0 ", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref5) {
-    var theme = _ref5.theme;
+}, (0, _spacing.default)('lg'), _ref4 => {
+  let {
+    isOpen
+  } = _ref4;
+  return isOpen && (0, _styledComponents.css)(["height:auto;visibility:visible;transition:all 0.2s cubic-bezier(0.21,1.7,0.83,0.68) 0s;padding:0 ", " ", ";@media ", "{padding:0 ", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref5 => {
+    let {
+      theme
+    } = _ref5;
     return theme.breakpoint('small');
   }, (0, _spacing.default)('lg'), (0, _spacing.default)('l'));
 });
-var Accordion = function Accordion(_ref6) {
-  var children = _ref6.children,
-    title = _ref6.title,
-    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var handleOpen = function handleOpen() {
+const Accordion = _ref6 => {
+  let {
+    children,
+    title,
+    ...rest
+  } = _ref6;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const handleOpen = () => {
     setIsOpen(!isOpen);
   };
   return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement(Button, {

package/dist/components/Molecules/Accordion/Accordion.test.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Accordion = _interopRequireDefault(require("./Accordion"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Accordion.default, {
     title: /*#__PURE__*/_react.default.createElement(_Text.default, {
       tag: "h2",
       font: "Anton",