@comicrelief/component-library 7.24.1 → 7.25.0

package/dist/components/Organisms/EmailSignUp/EmailSignUp.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
 });
@@ -9,76 +9,102 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _TextInput = _interopRequireDefault(require("./_TextInput"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-var ESUWrapper = exports.ESUWrapper = _styledComponents.default.div.withConfig({
+const ESUWrapper = exports.ESUWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ESUWrapper",
   componentId: "sc-w2b8yk-0"
-})(["display:flex;flex-direction:column;font-size:", ";color:", ";background-color:", ";padding:", ";"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:flex;flex-direction:column;font-size:", ";color:", ";background-color:", ";padding:", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.fontSize('s');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('white');
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    backgroundColour = _ref3.backgroundColour;
+}, _ref3 => {
+  let {
+    theme,
+    backgroundColour
+  } = _ref3;
   return theme.color(backgroundColour);
 }, (0, _spacing.default)('m'));
-var TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
+const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__TopCopyWrapper",
   componentId: "sc-w2b8yk-1"
 })(["display:flex;margin-bottom:", ";"], (0, _spacing.default)('md'));
-var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
+const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ButtonWrapper",
   componentId: "sc-w2b8yk-2"
-})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), function (_ref4) {
-  var theme = _ref4.theme,
-    buttonColour = _ref4.buttonColour;
+})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), _ref4 => {
+  let {
+    theme,
+    buttonColour
+  } = _ref4;
   return theme.color(buttonColour);
 });
-var PrivacyCopyWrapper = exports.PrivacyCopyWrapper = _styledComponents.default.div.withConfig({
+const PrivacyCopyWrapper = exports.PrivacyCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__PrivacyCopyWrapper",
   componentId: "sc-w2b8yk-3"
-})(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), function (_ref5) {
-  var theme = _ref5.theme;
+})(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontSize('s');
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.fontSize('xl');
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.fontSize('s');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.color('white');
 });
-var FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
+const FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__FormInner",
   componentId: "sc-w2b8yk-4"
 })(["display:flex;flex-direction:column;margin:", " 0;"], (0, _spacing.default)('md'));
-var NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConfig({
+const NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__NameWrapper",
   componentId: "sc-w2b8yk-5"
-})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], function (_ref9) {
-  var theme = _ref9.theme;
+})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.breakpoint('medium');
-}, function (_ref10) {
-  var columnLayout = _ref10.columnLayout;
+}, _ref10 => {
+  let {
+    columnLayout
+  } = _ref10;
   return columnLayout ? 'column' : 'row';
-}, function (_ref11) {
-  var columnLayout = _ref11.columnLayout;
+}, _ref11 => {
+  let {
+    columnLayout
+  } = _ref11;
   return columnLayout ? 0 : (0, _spacing.default)('md');
 });
-var InputField = exports.InputField = (0, _styledComponents.default)(_TextInput.default).withConfig({
+const InputField = exports.InputField = (0, _styledComponents.default)(_TextInput.default).withConfig({
   displayName: "EmailSignUpstyle__InputField",
   componentId: "sc-w2b8yk-6"
-})(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), function (_ref12) {
-  var theme = _ref12.theme;
+})(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.color('white');
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('medium');
 });
-var Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({
+const Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "EmailSignUpstyle__Title",
   componentId: "sc-w2b8yk-7"
 })(["margin-bottom:", ";"], (0, _spacing.default)('m'));

package/dist/components/Organisms/EmailSignUp/EmailSignUp.test.js

@@ -1,6 +1,6 @@
 "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"));
@@ -8,19 +8,19 @@ var _EmailSignUp = require("./_EmailSignUp");
 var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
 var _reactHookForm = require("react-hook-form");
 var _yup = require("@hookform/resolvers/yup");
-var DummyForm = function DummyForm() {
-  var formMethods = (0, _reactHookForm.useForm)({
+const DummyForm = () => {
+  const formMethods = (0, _reactHookForm.useForm)({
     mode: "onBlur",
     resolver: (0, _yup.yupResolver)(_EmailSignUp.validationSchema)
   });
-  var handleSubmit = formMethods.handleSubmit;
-  var top = "<h1> Top Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>";
-  var success = "<h1> Success Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>";
-  var privacy = 'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
+  const {
+    handleSubmit
+  } = formMethods;
+  const top = "<h1> Top Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>";
+  const success = "<h1> Success Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>";
+  const privacy = 'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
   return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(function () {
-      return true;
-    }),
+    onSubmit: handleSubmit(() => true),
     noValidate: true
   }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.EmailSignUp, {
     title: "sign up letter",
@@ -36,7 +36,7 @@ var DummyForm = function DummyForm() {
     formContext: formMethods
   })));
 };
-it("renders correctly", function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(DummyForm, null)).toJSON();
+it("renders correctly", () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(DummyForm, null)).toJSON();
   expect(tree).toMatchSnapshot();
 });

package/dist/components/Organisms/EmailSignUp/EmailSignUpForm.js

@@ -1,65 +1,45 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _reactHookForm = require("react-hook-form");
 var _yup = require("@hookform/resolvers/yup");
 var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
 var _EmailSignUp = require("./_EmailSignUp");
-var EmailSignUpForm = function EmailSignUpForm() {
-  var validationSchema = (0, _EmailSignUp.buildEsuValidationSchema)({});
-  var formMethods = (0, _reactHookForm.useForm)({
+const EmailSignUpForm = () => {
+  const validationSchema = (0, _EmailSignUp.buildEsuValidationSchema)({});
+  const formMethods = (0, _reactHookForm.useForm)({
     mode: 'onBlur',
     resolver: (0, _yup.yupResolver)(validationSchema)
   });
-  var handleSubmit = formMethods.handleSubmit,
-    trigger = formMethods.trigger,
-    setError = formMethods.setError;
-  function handleSubscribe(_x) {
-    return _handleSubscribe.apply(this, arguments);
+  const {
+    handleSubmit,
+    trigger,
+    setError
+  } = formMethods;
+  async function handleSubscribe(data) {
+    const valid = await trigger([_EmailSignUp.ESU_FIELDS.EMAIL, _EmailSignUp.ESU_FIELDS.FIRST_NAME, _EmailSignUp.ESU_FIELDS.LAST_NAME]);
+    if (valid) {
+      // eslint-disable-next-line no-console
+      console.log(data);
+    } else {
+      setError('formError', {
+        message: 'Error'
+      });
+    }
   }
-  function _handleSubscribe() {
-    _handleSubscribe = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
-      var valid;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return trigger([_EmailSignUp.ESU_FIELDS.EMAIL, _EmailSignUp.ESU_FIELDS.FIRST_NAME, _EmailSignUp.ESU_FIELDS.LAST_NAME]);
-            case 2:
-              valid = _context.sent;
-              if (valid) {
-                // eslint-disable-next-line no-console
-                console.log(data);
-              } else {
-                setError('formError', {
-                  message: 'Error'
-                });
-              }
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _handleSubscribe.apply(this, arguments);
-  }
-  var title = 'Stay in the know!';
-  var topCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
+  const title = 'Stay in the know!';
+  const topCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
     markup: "<p>Get regular email updates and info on what we're up to!</p>"
   });
-  var privacyCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
+  const privacyCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
     markup: '<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>'
   });
-  var successCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
+  const successCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
     markup: "<p>Thanks! Your first email will be with you shortly</p>"
   });
   return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {

package/dist/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -1,23 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "ESU_FIELDS", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _EmailSignUpConfig.ESU_FIELDS;
   }
 });
 exports.EmailSignUp = void 0;
 Object.defineProperty(exports, "buildEsuValidationSchema", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _EmailSignUpConfig.buildEsuValidationSchema;
   }
 });
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _EmailSignUp = require("./EmailSignUp.style");
 var _ButtonWithStates = _interopRequireDefault(require("../../Atoms/ButtonWithStates/ButtonWithStates"));
@@ -25,23 +24,27 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _EmailSignUpConfig = require("./_EmailSignUpConfig");
 var _ErrorText = _interopRequireDefault(require("../../Atoms/ErrorText/ErrorText"));
 var _Confetti = _interopRequireDefault(require("../../Atoms/Confetti/Confetti"));
-var _excluded = ["title", "topCopy", "successCopy", "privacyCopy", "backgroundColour", "buttonColour", "formContext", "columnLayout"];
-var EmailSignUp = exports.EmailSignUp = function EmailSignUp(_ref) {
-  var title = _ref.title,
-    topCopy = _ref.topCopy,
-    successCopy = _ref.successCopy,
-    privacyCopy = _ref.privacyCopy,
-    backgroundColour = _ref.backgroundColour,
-    buttonColour = _ref.buttonColour,
-    formContext = _ref.formContext,
-    columnLayout = _ref.columnLayout,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _formContext$formStat = formContext.formState,
-    isValid = _formContext$formStat.isValid,
-    isSubmitting = _formContext$formStat.isSubmitting,
-    isSubmitted = _formContext$formStat.isSubmitted,
-    isSubmitSuccessful = _formContext$formStat.isSubmitSuccessful,
-    errors = _formContext$formStat.errors;
+const EmailSignUp = _ref => {
+  let {
+    title,
+    topCopy,
+    successCopy,
+    privacyCopy,
+    backgroundColour,
+    buttonColour,
+    formContext,
+    columnLayout,
+    ...rest
+  } = _ref;
+  const {
+    formState: {
+      isValid,
+      isSubmitting,
+      isSubmitted,
+      isSubmitSuccessful,
+      errors
+    }
+  } = formContext;
   return /*#__PURE__*/_react.default.createElement(_EmailSignUp.ESUWrapper, Object.assign({
     backgroundColour: backgroundColour
   }, rest), /*#__PURE__*/_react.default.createElement(_EmailSignUp.Title, {
@@ -85,6 +88,7 @@ var EmailSignUp = exports.EmailSignUp = function EmailSignUp(_ref) {
     "data-test": "subscribe-button"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
 };
+exports.EmailSignUp = EmailSignUp;
 EmailSignUp.defaultProps = {
   backgroundColour: 'deep_violet_dark',
   buttonColour: 'red',

package/dist/components/Organisms/EmailSignUp/_EmailSignUpConfig.js

@@ -1,15 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildEsuValidationSchema = exports.ESU_FIELDS = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _lodash = require("lodash");
 var yup = _interopRequireWildcard(require("yup"));
-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; }
 /**
  * ESU_FIELDS
  *
@@ -18,7 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * to customise form validation or behaviour, as the fields are handled within the CL
  * we just make this read-only to prevent any external changes of this object.
  */
-var ESU_FIELDS = exports.ESU_FIELDS = Object.freeze({
+const ESU_FIELDS = exports.ESU_FIELDS = Object.freeze({
   FIRST_NAME: 'firstName',
   LAST_NAME: 'lastName',
   EMAIL: 'email'
@@ -32,8 +29,12 @@ var ESU_FIELDS = exports.ESU_FIELDS = Object.freeze({
  *
  * @param overrides {Object} - A yup schema object (or an empty object)
  */
-var buildEsuValidationSchema = exports.buildEsuValidationSchema = function buildEsuValidationSchema(overrides) {
-  var _yup$object;
-  var defaultSchema = yup.object((_yup$object = {}, (0, _defineProperty2.default)(_yup$object, ESU_FIELDS.FIRST_NAME, yup.string().required('Please enter your first name').matches(/^[A-Za-z][A-Za-z' -]*$/, "This field only accepts letters and ' - and must start with a letter").max(25, 'Your first name must be between 1 and 25 characters')), (0, _defineProperty2.default)(_yup$object, ESU_FIELDS.LAST_NAME, yup.string().required('Please enter your last name').matches(/^[A-Za-z][A-Za-z' -]*$/, "This field only accepts letters and ' - and must start with a letter").max(50, 'Your first name must be between 1 and 50 characters')), (0, _defineProperty2.default)(_yup$object, ESU_FIELDS.EMAIL, yup.string().required('Please enter your email address').email('Please enter a valid email address').max(100, 'Your email address must be between 1 and 100 characters long')), _yup$object));
+const buildEsuValidationSchema = overrides => {
+  const defaultSchema = yup.object({
+    [ESU_FIELDS.FIRST_NAME]: yup.string().required('Please enter your first name').matches(/^[A-Za-z][A-Za-z' -]*$/, "This field only accepts letters and ' - and must start with a letter").max(25, 'Your first name must be between 1 and 25 characters'),
+    [ESU_FIELDS.LAST_NAME]: yup.string().required('Please enter your last name').matches(/^[A-Za-z][A-Za-z' -]*$/, "This field only accepts letters and ' - and must start with a letter").max(50, 'Your first name must be between 1 and 50 characters'),
+    [ESU_FIELDS.EMAIL]: yup.string().required('Please enter your email address').email('Please enter a valid email address').max(100, 'Your email address must be between 1 and 100 characters long')
+  });
   return (0, _lodash.merge)(defaultSchema, overrides);
-};
+};
+exports.buildEsuValidationSchema = buildEsuValidationSchema;

package/dist/components/Organisms/EmailSignUp/_TextInput.js

@@ -1,35 +1,37 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
-var _excluded = ["fieldName", "label", "optional", "fieldType", "formContext"];
 // TODO: This is a copy paste of the RHF friendly `TextInput` from Marketing Prefs.
 // Perhaps it would be worthwhile refactoring this into a new `Atom` as a seperate PR.
-var TextInput = function TextInput(_ref) {
-  var fieldName = _ref.fieldName,
-    label = _ref.label,
-    optional = _ref.optional,
-    fieldType = _ref.fieldType,
-    formContext = _ref.formContext,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var errors = formContext.errors,
-    register = formContext.register;
-  var props = (0, _objectSpread2.default)({
+const TextInput = _ref => {
+  let {
+    fieldName,
+    label,
+    optional,
+    fieldType,
+    formContext,
+    ...rest
+  } = _ref;
+  const {
+    errors,
+    register
+  } = formContext;
+  const props = {
     name: fieldName,
     type: fieldType,
-    label: label,
+    label,
     placeholder: label,
     errorMsg: errors && errors[fieldName] && errors[fieldName].message,
-    optional: optional,
-    'aria-required': !optional
-  }, rest);
+    optional,
+    'aria-required': !optional,
+    ...rest
+  };
   return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
     ref: register
   }));

package/dist/components/Organisms/Footer/Footer.js

@@ -1,26 +1,26 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
 var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _SocialIcons = _interopRequireDefault(require("../../Atoms/SocialIcons/SocialIcons"));
 var _Footer = require("./Footer.style");
-var _excluded = ["navItems", "footerCopy", "campaign", "additionalLegalLine"];
-var Footer = function Footer(_ref) {
-  var navItems = _ref.navItems,
-    footerCopy = _ref.footerCopy,
-    campaign = _ref.campaign,
-    additionalLegalLine = _ref.additionalLegalLine,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Footer = _ref => {
+  let {
+    navItems,
+    footerCopy,
+    campaign,
+    additionalLegalLine,
+    ...rest
+  } = _ref;
   // Remove white space between words
-  var campaignName = campaign.replace(/\s/g, '').toLowerCase();
+  const campaignName = campaign.replace(/\s/g, '').toLowerCase();
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.FooterWrapper, Object.assign({
     navItems: true
   }, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, additionalLegalLine && /*#__PURE__*/_react.default.createElement(_Footer.FooterLegalLine, {

package/dist/components/Organisms/Footer/Footer.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
 });
@@ -9,51 +9,57 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-var FooterWrapper = exports.FooterWrapper = _styledComponents.default.footer.attrs(function () {
-  return {
-    role: 'banner'
-  };
-}).withConfig({
+const FooterWrapper = exports.FooterWrapper = _styledComponents.default.footer.attrs(() => ({
+  role: 'banner'
+})).withConfig({
   displayName: "Footerstyle__FooterWrapper",
   componentId: "sc-167xaf5-0"
-})(["text-align:center;line-height:initial;background:#222;position:relative;padding:", " 0;@media ", "{padding:", ";}"], (0, _spacing.default)('md'), function (_ref) {
-  var theme = _ref.theme;
+})(["text-align:center;line-height:initial;background:#222;position:relative;padding:", " 0;@media ", "{padding:", ";}"], (0, _spacing.default)('md'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.breakpoint('small');
 }, (0, _spacing.default)('l'));
-var Angle = exports.Angle = _styledComponents.default.div.withConfig({
+const Angle = exports.Angle = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__Angle",
   componentId: "sc-167xaf5-1"
-})(["width:100%;display:block;clip-path:polygon(0 100%,100% 0,100% 101%,0 101%);height:50px;background:#222;margin-bottom:1rem;@media ", "{clip-path:polygon(0 100%,100% 0,100% 101%,0 101%);height:95px;}"], function (_ref2) {
-  var theme = _ref2.theme;
+})(["width:100%;display:block;clip-path:polygon(0 100%,100% 0,100% 101%,0 101%);height:50px;background:#222;margin-bottom:1rem;@media ", "{clip-path:polygon(0 100%,100% 0,100% 101%,0 101%);height:95px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('medium');
 });
-var InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__InnerWrapper",
   componentId: "sc-167xaf5-2"
-})(["position:relative;display:block;width:100%;height:100%;max-width:1200px;margin:0 auto;padding:0 ", " ", ";@media ", "{padding:0 ", " ", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('l'), function (_ref3) {
-  var theme = _ref3.theme;
+})(["position:relative;display:block;width:100%;height:100%;max-width:1200px;margin:0 auto;padding:0 ", " ", ";@media ", "{padding:0 ", " ", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('l'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('medium');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('xl'));
-var FooterLegalLine = exports.FooterLegalLine = (0, _styledComponents.default)(_Text.default).withConfig({
+const FooterLegalLine = exports.FooterLegalLine = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Footerstyle__FooterLegalLine",
   componentId: "sc-167xaf5-3"
 })(["text-align:left;margin-top:1rem;"]);
-var FooterBranding = exports.FooterBranding = _styledComponents.default.div.withConfig({
+const FooterBranding = exports.FooterBranding = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterBranding",
   componentId: "sc-167xaf5-4"
 })(["display:flex;margin:", " 0 5rem;justify-content:space-between;align-items:center;"], (0, _spacing.default)('lg'));
-var FooterCopyright = exports.FooterCopyright = _styledComponents.default.div.withConfig({
+const FooterCopyright = exports.FooterCopyright = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterCopyright",
   componentId: "sc-167xaf5-5"
-})(["display:block;width:100%;height:100%;text-align:left;margin-top:", ";p{font-size:15px;line-height:24px;margin-bottom:5px;@media ", "{font-size:16px;line-height:27px;}}"], (0, _spacing.default)('lg'), function (_ref4) {
-  var theme = _ref4.theme;
+})(["display:block;width:100%;height:100%;text-align:left;margin-top:", ";p{font-size:15px;line-height:24px;margin-bottom:5px;@media ", "{font-size:16px;line-height:27px;}}"], (0, _spacing.default)('lg'), _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('medium');
 });
-var Brand = exports.Brand = (0, _styledComponents.default)(_Link.default).withConfig({
+const Brand = exports.Brand = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Footerstyle__Brand",
   componentId: "sc-167xaf5-6"
 })(["color:transparent;border:0;:hover{border:0;}"]);
-var SocialIconWrapper = exports.SocialIconWrapper = _styledComponents.default.div.withConfig({
+const SocialIconWrapper = exports.SocialIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__SocialIconWrapper",
   componentId: "sc-167xaf5-7"
 })([""]);

package/dist/components/Organisms/Footer/Footer.test.js

@@ -1,6 +1,6 @@
 "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"));
@@ -9,8 +9,8 @@ var _data = _interopRequireDefault(require("./data/data"));
 var _footerCopy = _interopRequireDefault(require("./data/footerCopy"));
 /* eslint-disable react/jsx-wrap-multilines */
 
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Footer.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Footer.default, {
     navItems: _data.default,
     footerCopy: _footerCopy.default.copy
   })).toJSON();