@comicrelief/component-library 6.9.1 → 7.0.0

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 };

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

@@ -0,0 +1,54 @@
+import { merge } from 'lodash';
+import * as yup from 'yup';
+
+/**
+ * ESU_FIELDS
+ *
+ * Exposes an enum to consumer of the component, to accurately access the underlying field names.
+ * can be used in conjunction with RHF or buildEsuValidationSchema
+ * 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.
+ */
+const ESU_FIELDS = Object.freeze({
+  FIRST_NAME: 'firstName',
+  LAST_NAME: 'lastName',
+  EMAIL: 'email'
+});
+
+/**
+ * buildEsuValidationSchema
+ *
+ * Exposes a function that can be passed a partial or complete yup schema
+ * to extend or override the default buildEsuValidationSchema
+ *
+ * @param overrides {Object} - A yup schema object (or an empty 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 merge(defaultSchema, overrides);
+};
+
+export { ESU_FIELDS, buildEsuValidationSchema };

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from '../../Atoms/Input/Input';
+
+// 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.
+const TextInput = ({
+  fieldName,
+  label,
+  optional,
+  fieldType,
+  formContext,
+  ...rest
+}) => {
+  const { errors, register } = formContext;
+
+  const props = {
+    name: fieldName,
+    type: fieldType,
+    label,
+    placeholder: label,
+    errorMsg: errors && errors[fieldName] && errors[fieldName].message,
+    optional,
+    'aria-required': !optional,
+    ...rest
+  };
+
+  return <Input {...props} ref={register} />;
+};
+
+TextInput.defaultProps = {
+  optional: null,
+  fieldType: 'text',
+  formContext: null
+};
+
+TextInput.propTypes = {
+  fieldName: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  optional: PropTypes.bool,
+  fieldType: PropTypes.string,
+  formContext: PropTypes.shape()
+};
+
+export default TextInput;