@comicrelief/component-library 6.10.0 → 7.0.1

package/src/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/src/components/Organisms/EmailSignUp/EmailSignUp.style.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import Input from '../../Atoms/Input/Input';
+import TextInput from './_TextInput';
 import Text from '../../Atoms/Text/Text';
 
 const ESUWrapper = styled.div`
@@ -9,7 +9,8 @@ const ESUWrapper = styled.div`
   flex-direction: column;
   font-size: ${({ theme }) => theme.fontSize('s')};
   color: ${({ theme }) => theme.color('white')};
-  background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  background-color: ${({ theme, backgroundColour }) => theme.color(backgroundColour)};
+  padding: ${spacing('m')};
 `;
 
 const TopCopyWrapper = styled.div`
@@ -19,14 +20,8 @@ const TopCopyWrapper = styled.div`
 
 const ButtonWrapper = styled.div`
   margin-top: ${spacing('md')};
-  input {
-    text-align: center;
-    width: 100%;
-    font-size: ${({ theme }) => theme.fontSize('s')};
-    @media ${({ theme }) => theme.breakpoint('small')} {
-      font-size: ${({ theme }) => theme.fontSize('m')};
-      max-width: 180px;
-    }
+  button {
+    background-color: ${({ theme, buttonColour }) => theme.color(buttonColour)};
   }
 `;
 
@@ -34,6 +29,7 @@ const PrivacyCopyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: ${spacing('md')};
+
   p {
     font-size: ${({ theme }) => theme.fontSize('s')};
     line-height: ${({ theme }) => theme.fontSize('xl')};
@@ -44,14 +40,37 @@ const PrivacyCopyWrapper = styled.div`
   }
 `;
 
-const Form = styled.form`
+const FormInner = styled.div`
   display: flex;
   flex-direction: column;
   margin: ${spacing('md')} 0;
 `;
 
-const InputField = styled(Input)`
+const NameWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    justify-content: start;
+    flex-direction: ${({ columnLayout }) => (columnLayout ? 'column' : 'row')};
+    gap: ${({ columnLayout }) => (columnLayout ? 0 : spacing('md'))};
+)}; 
+
+  }
+`;
+
+const InputField = styled(TextInput)`
   width: 100%;
+  margin-bottom: ${spacing('md')};
+
+  & > span:first-child {
+    color: ${({ theme }) => theme.color('white')};
+  }
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    max-width: 290px;
+  }
 `;
 
 const Title = styled(Text)`
@@ -63,7 +82,8 @@ export {
   TopCopyWrapper,
   PrivacyCopyWrapper,
   ButtonWrapper,
-  Form,
+  FormInner,
   InputField,
+  NameWrapper,
   Title
 };

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

@@ -1,76 +1,42 @@
-import React from 'react';
-import 'jest-styled-components';
-import TestRenderer from 'react-test-renderer';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import EmailSignUp from './EmailSignUp';
-import RichText from '../../Atoms/RichText/RichText';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import { EmailSignUp, validationSchema } from "./_EmailSignUp";
+import RichText from "../../Atoms/RichText/RichText";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 
-const { act } = TestRenderer;
-
-it('renders correctly', () => {
-  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>';
-  const tree = renderWithTheme(
-    <>
-      <EmailSignUp
-        title="sign up letter"
-        topCopy={<RichText markup={top} />}
-        successCopy={<RichText markup={success} />}
-        isSuccess={false}
-        errorMsg=""
-        buttonColor="teal"
-        privacyCopy={<RichText markup={privacy} />}
-        subscribe={() => 'Done'}
-        validate={() => true}
-      />
-    </>
-  ).toJSON();
+const DummyForm = () => {
+  const formMethods = useForm({
+    mode: "onBlur",
+    resolver: yupResolver(validationSchema),
+  });
+  const { handleSubmit } = formMethods;
 
-  expect(tree).toMatchSnapshot();
-});
+  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>';
 
-it('renders ESU School correctly', () => {
-  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>';
-  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 mockNext = jest.fn();
-  const tree = renderWithTheme(
-    <>
-      <EmailSignUp
-        title="sign up letter"
-        topCopy={<RichText markup={top} />}
-        successCopy={<RichText markup={success} />}
-        schoolsCopy="Now please select your teaching group so you get the right updates."
-        selectItems={selectItems}
-        isSuccess={false}
-        isSchools
-        errorMsg=""
-        buttonColor="teal"
-        privacyCopy={<RichText markup={privacy} />}
-        subscribe={mockNext}
-        validate={() => true}
-      />
-    </>
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleSubmit(() => true)} noValidate>
+        <EmailSignUp
+          title="sign up letter"
+          topCopy={<RichText markup={top} />}
+          successCopy={<RichText markup={success} />}
+          privacyCopy={<RichText markup={privacy} />}
+          formContext={formMethods}
+        />
+      </form>
+    </FormProvider>
   );
-  const input = tree.root.findAllByType('input')[0];
-  input.value = 'test@test.com';
+};
 
-  act(() => {
-    /* fire events that update state */
-    tree.root.findAllByType('input')[1].props.onClick();
-  });
+it("renders correctly", () => {
+  const tree = renderWithTheme(<DummyForm />).toJSON();
 
-  const treeJson = tree.toJSON();
-  expect(treeJson).toMatchSnapshot();
+  expect(tree).toMatchSnapshot();
 });

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import RichText from '../../Atoms/RichText/RichText';
+import {
+  EmailSignUp,
+  buildEsuValidationSchema,
+  ESU_FIELDS
+} from './_EmailSignUp';
+
+const EmailSignUpForm = () => {
+  const validationSchema = buildEsuValidationSchema({});
+  const formMethods = useForm({
+    mode: 'onBlur',
+    resolver: yupResolver(validationSchema)
+  });
+  const { handleSubmit, trigger } = formMethods;
+
+  async function handleSubscribe(data) {
+    const valid = await trigger([
+      ESU_FIELDS.EMAIL,
+      ESU_FIELDS.FIRST_NAME,
+      ESU_FIELDS.LAST_NAME
+    ]);
+    if (valid) {
+      console.log(data);
+    }
+  }
+  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>" />
+  );
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleSubmit(handleSubscribe)} noValidate>
+        <EmailSignUp
+          id="default"
+          title={title}
+          topCopy={topCopy}
+          successCopy={successCopy}
+          privacyCopy={privacyCopy}
+          formContext={formMethods}
+        />
+      </form>
+    </FormProvider>
+  );
+};
+export default EmailSignUpForm;

package/src/components/Organisms/EmailSignUp/_Confetti.js

@@ -0,0 +1,106 @@
+import React, {
+  useCallback, useEffect, useRef, useState
+} from 'react';
+import ReactCanvasConfetti from 'react-canvas-confetti';
+import PropTypes from 'prop-types';
+
+function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+const canvasStyles = {
+  position: 'fixed',
+  pointerEvents: 'none',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0
+};
+
+function getAnimationSettings(originXA, originXB) {
+  return {
+    startVelocity: 30,
+    spread: 360,
+    ticks: 60,
+    zIndex: 0,
+    particleCount: 150,
+    origin: {
+      x: randomInRange(originXA, originXB),
+      y: Math.random() - 0.2
+    }
+  };
+}
+// TODO: Refactor this into an atom
+export default function Confetti({ trigger, duration }) {
+  const refAnimationInstance = useRef(null);
+  const [intervalId, setIntervalId] = useState();
+
+  const getInstance = useCallback(instance => {
+    refAnimationInstance.current = instance;
+  }, []);
+
+  const nextTickAnimation = useCallback(() => {
+    if (refAnimationInstance.current) {
+      refAnimationInstance.current(getAnimationSettings(0.1, 0.3));
+      refAnimationInstance.current(getAnimationSettings(0.7, 0.9));
+    }
+  }, []);
+
+  const startAnimation = useCallback(() => {
+    if (!intervalId) {
+      setIntervalId(setInterval(nextTickAnimation, 400));
+    }
+  }, [intervalId, nextTickAnimation]);
+
+  const pauseAnimation = useCallback(() => {
+    clearInterval(intervalId);
+    setIntervalId(null);
+  }, [intervalId]);
+
+  const stopAnimation = useCallback(() => {
+    clearInterval(intervalId);
+    setIntervalId(null);
+    if (refAnimationInstance.current) {
+      refAnimationInstance.current.reset();
+    }
+  }, [intervalId]);
+
+  // eslint-disable-next-line
+  useEffect(() => {
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [intervalId]);
+
+  useEffect(() => {
+    let timeOut;
+    if (trigger) {
+      startAnimation();
+      timeOut = setTimeout(() => {
+        // This gracefully ends the animation
+        pauseAnimation();
+      }, duration);
+    }
+    return () => {
+      if (timeOut) {
+        // this clears up the animation
+        stopAnimation();
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [trigger, duration]);
+
+  return (
+    <>
+      <ReactCanvasConfetti refConfetti={getInstance} style={canvasStyles} />
+    </>
+  );
+}
+
+Confetti.defaultProps = {
+  duration: 3000
+};
+
+Confetti.propTypes = {
+  trigger: PropTypes.bool.isRequired,
+  duration: PropTypes.number
+};

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ESUWrapper,
+  TopCopyWrapper,
+  FormInner,
+  PrivacyCopyWrapper,
+  InputField,
+  ButtonWrapper,
+  Title,
+  NameWrapper
+} from './EmailSignUp.style';
+import ButtonWithStates from '../../Atoms/ButtonWithStates/ButtonWithStates';
+
+import Text from '../../Atoms/Text/Text';
+import { buildEsuValidationSchema, ESU_FIELDS } from './_EmailSignUpConfig';
+import ErrorText from '../../Atoms/ErrorText/ErrorText';
+import Confetti from './_Confetti';
+
+const EmailSignUp = ({
+  title,
+  topCopy,
+  successCopy,
+  privacyCopy,
+  backgroundColour,
+  buttonColour,
+  formContext,
+  columnLayout,
+  ...rest
+}) => {
+  const {
+    formState: {
+      isValid,
+      isSubmitting,
+      isSubmitted,
+      isSubmitSuccessful,
+      errors
+    }
+  } = formContext;
+
+  return (
+    <ESUWrapper backgroundColour={backgroundColour} {...rest}>
+      <Title tag="h2" size="xxl" weight="400" family="Anton" uppercase>
+        {title}
+      </Title>
+      {!isSubmitted ? (
+        <TopCopyWrapper>
+          <Text>{topCopy}</Text>
+        </TopCopyWrapper>
+      ) : (
+        isSubmitSuccessful && (
+          <>
+            <Confetti trigger={isSubmitSuccessful} />
+            <TopCopyWrapper>
+              <Text>{successCopy}</Text>
+            </TopCopyWrapper>
+          </>
+        )
+      )}
+      {!isSubmitSuccessful && (
+        <FormInner>
+          <NameWrapper columnLayout={columnLayout}>
+            <InputField
+              fieldName={ESU_FIELDS.FIRST_NAME}
+              id="first-name"
+              type="text"
+              label="First Name"
+              placeholder="Enter your first name"
+              formContext={formContext}
+            />
+            <InputField
+              fieldName={ESU_FIELDS.LAST_NAME}
+              id="last-name"
+              type="text"
+              label="Last Name"
+              placeholder="Enter your last name"
+              formContext={formContext}
+            />
+          </NameWrapper>
+          <InputField
+            fieldName={ESU_FIELDS.EMAIL}
+            id="email"
+            type="email"
+            label="Email Address"
+            placeholder="example@youremail.com"
+            formContext={formContext}
+          />
+          <ButtonWrapper buttonColour={buttonColour}>
+            <ButtonWithStates
+              type="submit"
+              disabled={!isValid || isSubmitting}
+              loading={isSubmitting}
+              loadingText="Submitting..."
+              data-test="subscribe-button"
+            >
+              <Text>Subscribe</Text>
+            </ButtonWithStates>
+          </ButtonWrapper>
+        </FormInner>
+      )}
+      {isSubmitted && !isSubmitSuccessful && (
+        <>
+          {/*
+            Field errors will prevent submission,
+            so theoretically this should just be a single error set in the submission callback
+            with with RHF's `setError` method, but will neatly display multiple errors.
+          */}
+          {Object.values(errors).map(error => (
+            <ErrorText>{error.message}</ErrorText>
+          ))}
+        </>
+      )}
+
+      <PrivacyCopyWrapper>
+        <Text>{privacyCopy}</Text>
+      </PrivacyCopyWrapper>
+    </ESUWrapper>
+  );
+};
+
+EmailSignUp.propTypes = {
+  title: PropTypes.string.isRequired,
+  topCopy: PropTypes.node.isRequired,
+  successCopy: PropTypes.node.isRequired,
+  privacyCopy: PropTypes.node.isRequired,
+  backgroundColour: PropTypes.string,
+  buttonColour: PropTypes.string,
+  formContext: PropTypes.shape().isRequired,
+  columnLayout: PropTypes.bool
+};
+
+EmailSignUp.defaultProps = {
+  backgroundColour: 'deep_violet_dark',
+  buttonColour: 'red',
+  columnLayout: false
+};
+
+export { EmailSignUp, buildEsuValidationSchema, ESU_FIELDS };