@comicrelief/component-library 6.9.1 → 7.0.0

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;

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Confetti;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactCanvasConfetti = _interopRequireDefault(require("react-canvas-confetti"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+var 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
+
+
+function Confetti(_ref) {
+  var trigger = _ref.trigger,
+      duration = _ref.duration;
+  var refAnimationInstance = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      intervalId = _useState2[0],
+      setIntervalId = _useState2[1];
+
+  var getInstance = (0, _react.useCallback)(function (instance) {
+    refAnimationInstance.current = instance;
+  }, []);
+  var nextTickAnimation = (0, _react.useCallback)(function () {
+    if (refAnimationInstance.current) {
+      refAnimationInstance.current(getAnimationSettings(0.1, 0.3));
+      refAnimationInstance.current(getAnimationSettings(0.7, 0.9));
+    }
+  }, []);
+  var startAnimation = (0, _react.useCallback)(function () {
+    if (!intervalId) {
+      setIntervalId(setInterval(nextTickAnimation, 400));
+    }
+  }, [intervalId, nextTickAnimation]);
+  var pauseAnimation = (0, _react.useCallback)(function () {
+    clearInterval(intervalId);
+    setIntervalId(null);
+  }, [intervalId]);
+  var stopAnimation = (0, _react.useCallback)(function () {
+    clearInterval(intervalId);
+    setIntervalId(null);
+
+    if (refAnimationInstance.current) {
+      refAnimationInstance.current.reset();
+    }
+  }, [intervalId]); // eslint-disable-next-line
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearInterval(intervalId);
+    };
+  }, [intervalId]);
+  (0, _react.useEffect)(function () {
+    var timeOut;
+
+    if (trigger) {
+      startAnimation();
+      timeOut = setTimeout(function () {
+        // This gracefully ends the animation
+        pauseAnimation();
+      }, duration);
+    }
+
+    return function () {
+      if (timeOut) {
+        // this clears up the animation
+        stopAnimation();
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [trigger, duration]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactCanvasConfetti.default, {
+    refConfetti: getInstance,
+    style: canvasStyles
+  }));
+}
+
+Confetti.defaultProps = {
+  duration: 3000
+};

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "buildEsuValidationSchema", {
+  enumerable: true,
+  get: function get() {
+    return _EmailSignUpConfig.buildEsuValidationSchema;
+  }
+});
+Object.defineProperty(exports, "ESU_FIELDS", {
+  enumerable: true,
+  get: function get() {
+    return _EmailSignUpConfig.ESU_FIELDS;
+  }
+});
+exports.EmailSignUp = void 0;
+
+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"));
+
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+
+var _EmailSignUpConfig = require("./_EmailSignUpConfig");
+
+var _ErrorText = _interopRequireDefault(require("../../Atoms/ErrorText/ErrorText"));
+
+var _Confetti = _interopRequireDefault(require("./_Confetti"));
+
+var _excluded = ["title", "topCopy", "successCopy", "privacyCopy", "backgroundColour", "buttonColour", "formContext", "columnLayout"];
+
+var 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;
+  return /*#__PURE__*/_react.default.createElement(_EmailSignUp.ESUWrapper, Object.assign({
+    backgroundColour: backgroundColour
+  }, rest), /*#__PURE__*/_react.default.createElement(_EmailSignUp.Title, {
+    tag: "h2",
+    size: "xxl",
+    weight: "400",
+    family: "Anton",
+    uppercase: true
+  }, title), !isSubmitted ? /*#__PURE__*/_react.default.createElement(_EmailSignUp.TopCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, topCopy)) : isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Confetti.default, {
+    trigger: isSubmitSuccessful
+  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.TopCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, successCopy))), !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_EmailSignUp.FormInner, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.NameWrapper, {
+    columnLayout: columnLayout
+  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
+    fieldName: _EmailSignUpConfig.ESU_FIELDS.FIRST_NAME,
+    id: "first-name",
+    type: "text",
+    label: "First Name",
+    placeholder: "Enter your first name",
+    formContext: formContext
+  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
+    fieldName: _EmailSignUpConfig.ESU_FIELDS.LAST_NAME,
+    id: "last-name",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Enter your last name",
+    formContext: formContext
+  })), /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
+    fieldName: _EmailSignUpConfig.ESU_FIELDS.EMAIL,
+    id: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "example@youremail.com",
+    formContext: formContext
+  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.ButtonWrapper, {
+    buttonColour: buttonColour
+  }, /*#__PURE__*/_react.default.createElement(_ButtonWithStates.default, {
+    type: "submit",
+    disabled: !isValid || isSubmitting,
+    loading: isSubmitting,
+    loadingText: "Submitting...",
+    "data-test": "subscribe-button"
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.values(errors).map(function (error) {
+    return /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, error.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',
+  columnLayout: false
+};

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 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.
+ */
+var 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)
+ */
+
+exports.ESU_FIELDS = ESU_FIELDS;
+
+var 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));
+  return (0, _lodash.merge)(defaultSchema, overrides);
+};
+
+exports.buildEsuValidationSchema = buildEsuValidationSchema;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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)({
+    name: fieldName,
+    type: fieldType,
+    label: label,
+    placeholder: label,
+    errorMsg: errors && errors[fieldName] && errors[fieldName].message,
+    optional: optional,
+    'aria-required': !optional
+  }, rest);
+  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
+    ref: register
+  }));
+};
+
+TextInput.defaultProps = {
+  optional: null,
+  fieldType: 'text',
+  formContext: null
+};
+var _default = TextInput;
+exports.default = _default;