@comicrelief/component-library 6.10.0 → 7.0.0

package/cypress/integration/components/Organisms/EmailSignUp.spec.js

@@ -1,142 +1,57 @@
 describe('Email Sign Up component', () => {
-    before(() => {
-        // go to Email Sign Up component
-        cy.visit('/#emailsignup');
-        cy.wait(2500)
+  before(() => {
+    // go to Email Sign Up component
+    cy.visit('/#emailsignupform');
+    cy.wait(2500);
+  });
+
+  describe('Email Sign Up section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="EmailSignUpForm-example-1"]')
+        .as('container')
+        .find('[data-preview="EmailSignUpForm"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
     });
 
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="EmailSignUp-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
+    it('renders Email Sign Up preview', () => {
+      cy.get('@container')
+        .find('h2')
+        .should('exist')
+        .contains('Stay in the know!');
+      cy.get('@container')
+        .find('p')
+        .contains("Get regular email updates and info on what we're up to!");
+      cy.get('[data-test="subscribe-button"]').should('be.disabled');
+      cy.get('@container').find('input[id="first-name"]').type('Test');
+      cy.get('@container').find('input[id="last-name"]').type('User');
+      cy.get('@container')
+        .find('input[id="email"]')
+        .type('test@comicrelief.com')
+        .blur();
+      cy.get('[data-test="subscribe-button"]').should('not.be.disabled');
+      cy.get('[data-test="subscribe-button"]').click();
+
+      cy.get('@container').contains(
+        'Thanks! Your first email will be with you shortly'
+      );
     });
 
-    describe('Email Sign Up section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="EmailSignUp-example-1"]')
-                .as('container')
-                .find('[data-preview="EmailSignUp"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Email Sign Up preview', () => {
-            cy.get('@container')
-                .find('h2')
-                .should('exist')
-                .contains('Stay in the know!');
-            cy.get('@container')
-                .find('p')
-                .contains('Get regular email updates and info on what we\'re up to!');
-            cy.get('[data-test="subscribe-button"]')
-                .click();
-            cy.get('[data-test="error-message"]')
-                .should('contain', 'invalid email!');
-            cy.get('@container')
-                .find('input[id="email"]')
-                .type('test@comicrelief.com');
-            cy.get('[data-test="subscribe-button"]')
-                .click();
-            cy.get('@container')
-                .contains('Thanks! Your first email will be with you shortly')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
     });
 
-    describe('Email Sign Up Schools section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="EmailSignUp-example-3"]')
-                .as('container')
-                .find('[data-preview="EmailSignUp"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Email Sign Up Schools preview', () => {
-            cy.get('@container')
-                .find('h2')
-                .should('exist')
-                .contains('Stay in the know!');
-            cy.get('@container')
-                .find('p')
-                .contains('Get regular email updates and info on what we\'re up to!');
-            cy.get('[data-test="subscribe-button-school"]')
-                .click();
-            cy.get('[data-test="error-message"]')
-                .should('contain', 'invalid email!');
-            cy.get('@container')
-                .find('input[id="email"]')
-                .type('test@comicrelief.com');
-            cy.get('[data-test="subscribe-button-school"]')
-                .click();
-            cy.get('@container')
-                .find('select')
-                .select('The first option')
-                .first();
-            cy.get('[data-test="subscribe-button-school"]')
-                .click();
-            cy.get('@container')
-                .contains('Thanks! Your first email will be with you shortly')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container').find('textarea').should('exist');
+    });
 
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
     });
+  });
 });

package/dist/components/Organisms/EmailSignUp/EmailSignUp.md

@@ -1,129 +1,14 @@
-# Email Sign Up
+# Email SignUp Form
 
-```js
-import RichText from '../../Atoms/RichText/RichText';
-
-const title = 'Stay in the know!';
-const topCopy = (
-  <RichText
-    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
-  />
-);
-const privacyCopy = (
-  <RichText
-    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>`}
-  />
-);
-const successCopy = (
-  <RichText
-    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
-  />
-);
-
-const [success, setSuccess] = React.useState(false);
-const [error, setError] = React.useState('');
-
-const sendEmail = email => {
-  setTimeout(() => setSuccess(!success), 2000);
-  console.log(email);
-};
-
-const validate = ({ email }) => {
-  let isValid = false;
-  if (email.includes('@')) {
-    isValid = true;
-    setError('');
-  } else {
-    setError('invalid email!');
-  }
-  return isValid;
-};
-
-<EmailSignUp
-  title={title}
-  topCopy={topCopy}
-  successCopy={successCopy}
-  isSuccess={success}
-  privacyCopy={privacyCopy}
-  errorMsg={error}
-  subscribe={sendEmail}
-  validate={validate}
-/>;
-```
-
-# Email Sign Up Schools
 
 ```js
-import RichText from '../../Atoms/RichText/RichText';
-
-const title = 'Stay in the know!';
-const topCopy = (
-  <RichText
-    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
-  />
-);
-const privacyCopy = (
-  <RichText
-    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>`}
-  />
-);
-const successCopy = (
-  <RichText
-    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
-  />
-);
-const selectItems = [
-  { value: '', displayValue: '-- Select age group --' },
-  { value: 'Option one', displayValue: 'The first option' },
-  {
-    value: 'Option two',
-    displayValue: 'The second option'
-  },
-  { value: 'Option three', displayValue: 'The third option' },
-  { value: 'Option four', displayValue: 'The fourth option' }
-];
-
-const [successSchools, setSuccessSchools] = React.useState(false);
-const [error, setError] = React.useState('');
-
-sendEmail = emailAndAge => {
-  setTimeout(
-    () => setSuccessSchools(!successSchools),
-    2000
-  );
-  console.log(emailAndAge);
-};
+import EmailSignUpForm from './EmailSignUpForm';
+import Text from '../../Atoms/Text/Text';
 
-const validate = ({ email, age }) => {
-  let isValid = false;
-  if (email.includes('@')) {
-    isValid = true;
-    setError('');
-  } else {
-    setError('invalid email!');
-  }
-  if (isValid === true && typeof age !== 'undefined') {
-    if (age) {
-      setError('');
-    } else {
-      isValid = false;
-      setError('invalid age!');
-    }
-  }
-  return isValid;
-};
+<>
+    <Text tag="p">This EmailSignUpForm component exists purely to show the EmailSignUp component functioning within the Component Library; applications are to provide their own react-hook-form form and validation, based on these.</Text>
+    
+    <EmailSignUpForm />
+</>
 
-<EmailSignUp
-  title={title}
-  topCopy={topCopy}
-  successCopy={successCopy}
-  schoolsCopy="Now please select your teaching group so you get the right updates."
-  isSuccess={successSchools}
-  selectItems={selectItems}
-  isSchools
-  privacyCopy={privacyCopy}
-  errorMsg={error}
-  subscribe={sendEmail}
-  validate={validate}
-/>;
 ```

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

@@ -5,20 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.InputField = exports.Form = exports.ButtonWrapper = exports.PrivacyCopyWrapper = exports.TopCopyWrapper = exports.ESUWrapper = void 0;
+exports.Title = exports.NameWrapper = exports.InputField = exports.FormInner = exports.ButtonWrapper = exports.PrivacyCopyWrapper = exports.TopCopyWrapper = exports.ESUWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
-var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
+var _TextInput = _interopRequireDefault(require("./_TextInput"));
 
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
 var ESUWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ESUWrapper",
   componentId: "sc-w2b8yk-0"
-})(["display:flex;flex-direction:column;font-size:", ";color:", ";background-color:", ";"], function (_ref) {
+})(["display:flex;flex-direction:column;font-size:", ";color:", ";background-color:", ";padding:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.fontSize('s');
 }, function (_ref2) {
@@ -26,9 +26,9 @@ var ESUWrapper = _styledComponents.default.div.withConfig({
   return theme.color('white');
 }, function (_ref3) {
   var theme = _ref3.theme,
-      backgroundColor = _ref3.backgroundColor;
-  return theme.color(backgroundColor);
-});
+      backgroundColour = _ref3.backgroundColour;
+  return theme.color(backgroundColour);
+}, (0, _spacing.default)('m'));
 
 exports.ESUWrapper = ESUWrapper;
 
@@ -42,15 +42,10 @@ exports.TopCopyWrapper = TopCopyWrapper;
 var ButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ButtonWrapper",
   componentId: "sc-w2b8yk-2"
-})(["margin-top:", ";input{text-align:center;width:100%;font-size:", ";@media ", "{font-size:", ";max-width:180px;}}"], (0, _spacing.default)('md'), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.fontSize('s');
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.breakpoint('small');
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.fontSize('m');
+})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), function (_ref4) {
+  var theme = _ref4.theme,
+      buttonColour = _ref4.buttonColour;
+  return theme.color(buttonColour);
 });
 
 exports.ButtonWrapper = ButtonWrapper;
@@ -58,35 +53,57 @@ exports.ButtonWrapper = ButtonWrapper;
 var 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 (_ref7) {
+})(["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;
+  return theme.fontSize('s');
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.fontSize('xl');
+}, function (_ref7) {
   var theme = _ref7.theme;
   return theme.fontSize('s');
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.fontSize('xl');
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.fontSize('s');
-}, function (_ref10) {
-  var theme = _ref10.theme;
   return theme.color('white');
 });
 
 exports.PrivacyCopyWrapper = PrivacyCopyWrapper;
 
-var Form = _styledComponents.default.form.withConfig({
-  displayName: "EmailSignUpstyle__Form",
+var FormInner = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__FormInner",
   componentId: "sc-w2b8yk-4"
 })(["display:flex;flex-direction:column;margin:", " 0;"], (0, _spacing.default)('md'));
 
-exports.Form = Form;
-var InputField = (0, _styledComponents.default)(_Input.default).withConfig({
-  displayName: "EmailSignUpstyle__InputField",
+exports.FormInner = FormInner;
+
+var NameWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__NameWrapper",
   componentId: "sc-w2b8yk-5"
-})(["width:100%;"]);
+})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.breakpoint('medium');
+}, function (_ref10) {
+  var columnLayout = _ref10.columnLayout;
+  return columnLayout ? 'column' : 'row';
+}, function (_ref11) {
+  var columnLayout = _ref11.columnLayout;
+  return columnLayout ? 0 : (0, _spacing.default)('md');
+});
+
+exports.NameWrapper = NameWrapper;
+var 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;
+  return theme.color('white');
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.breakpoint('medium');
+});
 exports.InputField = InputField;
 var Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "EmailSignUpstyle__Title",
-  componentId: "sc-w2b8yk-6"
+  componentId: "sc-w2b8yk-7"
 })(["margin-bottom:", ";"], (0, _spacing.default)('m'));
 exports.Title = Title;

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

@@ -6,64 +6,31 @@ var _react = _interopRequireDefault(require("react"));
 
 require("jest-styled-components");
 
-var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
-
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 
-var _EmailSignUp = _interopRequireDefault(require("./EmailSignUp"));
+var _EmailSignUp = require("./_EmailSignUp");
 
 var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
 
-var act = _reactTestRenderer.default.act;
-it('renders correctly', function () {
-  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 _reactHookForm = require("react-hook-form");
+
+var _yup = require("@hookform/resolvers/yup");
+
+var DummyForm = function DummyForm() {
+  var 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>';
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.default, {
-    title: "sign up letter",
-    topCopy: /*#__PURE__*/_react.default.createElement(_RichText.default, {
-      markup: top
-    }),
-    successCopy: /*#__PURE__*/_react.default.createElement(_RichText.default, {
-      markup: success
-    }),
-    isSuccess: false,
-    errorMsg: "",
-    buttonColor: "teal",
-    privacyCopy: /*#__PURE__*/_react.default.createElement(_RichText.default, {
-      markup: privacy
-    }),
-    subscribe: function subscribe() {
-      return 'Done';
-    },
-    validate: function validate() {
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit(function () {
       return true;
-    }
-  }))).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-it('renders ESU School correctly', function () {
-  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>';
-  var selectItems = [{
-    value: '',
-    displayValue: '-- Select age group --'
-  }, {
-    value: 'Option one',
-    displayValue: 'The first option'
-  }, {
-    value: 'Option two',
-    displayValue: 'The second option'
-  }, {
-    value: 'Option three',
-    displayValue: 'The third option'
-  }, {
-    value: 'Option four',
-    displayValue: 'The fourth option'
-  }];
-  var mockNext = jest.fn();
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.default, {
+    }),
+    noValidate: true
+  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.EmailSignUp, {
     title: "sign up letter",
     topCopy: /*#__PURE__*/_react.default.createElement(_RichText.default, {
       markup: top
@@ -71,26 +38,14 @@ it('renders ESU School correctly', function () {
     successCopy: /*#__PURE__*/_react.default.createElement(_RichText.default, {
       markup: success
     }),
-    schoolsCopy: "Now please select your teaching group so you get the right updates.",
-    selectItems: selectItems,
-    isSuccess: false,
-    isSchools: true,
-    errorMsg: "",
-    buttonColor: "teal",
     privacyCopy: /*#__PURE__*/_react.default.createElement(_RichText.default, {
       markup: privacy
     }),
-    subscribe: mockNext,
-    validate: function validate() {
-      return true;
-    }
+    formContext: formMethods
   })));
-  var input = tree.root.findAllByType('input')[0];
-  input.value = 'test@test.com';
-  act(function () {
-    /* fire events that update state */
-    tree.root.findAllByType('input')[1].props.onClick();
-  });
-  var treeJson = tree.toJSON();
-  expect(treeJson).toMatchSnapshot();
+};
+
+it("renders correctly", function () {
+  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(DummyForm, null)).toJSON();
+  expect(tree).toMatchSnapshot();
 });

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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)({
+    mode: 'onBlur',
+    resolver: (0, _yup.yupResolver)(validationSchema)
+  });
+  var handleSubmit = formMethods.handleSubmit,
+      trigger = formMethods.trigger;
+
+  function handleSubscribe(_x) {
+    return _handleSubscribe.apply(this, arguments);
+  }
+
+  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) {
+                console.log(data);
+              }
+
+            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, {
+    markup: "<p>Get regular email updates and info on what we're up to!</p>"
+  });
+
+  var 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, {
+    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", {
+    onSubmit: handleSubmit(handleSubscribe),
+    noValidate: true
+  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.EmailSignUp, {
+    id: "default",
+    title: title,
+    topCopy: topCopy,
+    successCopy: successCopy,
+    privacyCopy: privacyCopy,
+    formContext: formMethods
+  })));
+};
+
+var _default = EmailSignUpForm;
+exports.default = _default;