@comicrelief/component-library 6.10.0 → 7.0.1

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;