@comicrelief/component-library 6.10.0 → 7.0.1

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;