@comicrelief/component-library 8.24.1 → 8.25.0

package/dist/components/Organisms/EmailSignUp/EmailSignUp.md

@@ -1,5 +1,6 @@
 # Email SignUp Form
-
+### EmailSignUpForm.js is just a wrapper for viewing in the CL
+### The email sign up component that is used/exported is _EmailSignUp.js
 
 ```js
 import EmailSignUpForm from './EmailSignUpForm';
@@ -7,8 +8,7 @@ import Text from '../../Atoms/Text/Text';
 
 <>
     <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 />
 </>
-
 ```

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

@@ -19,16 +19,22 @@ const ESUWrapper = exports.ESUWrapper = _styledComponents.default.div.withConfig
   return theme.fontSize('s');
 }, _ref2 => {
   let {
-    theme
+    theme,
+    textColour
   } = _ref2;
-  return theme.color('white');
+  return theme.color(textColour);
 }, _ref3 => {
   let {
     theme,
     backgroundColour
   } = _ref3;
   return theme.color(backgroundColour);
-}, (0, _spacing.default)('m'));
+}, _ref4 => {
+  let {
+    containerPadding
+  } = _ref4;
+  return containerPadding ? (0, _spacing.default)('m') : 0;
+});
 const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__TopCopyWrapper",
   componentId: "sc-w2b8yk-1"
@@ -36,36 +42,37 @@ const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.wi
 const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ButtonWrapper",
   componentId: "sc-w2b8yk-2"
-})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), _ref4 => {
+})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), _ref5 => {
   let {
     theme,
     buttonColour
-  } = _ref4;
+  } = _ref5;
   return theme.color(buttonColour);
 });
 const PrivacyCopyWrapper = exports.PrivacyCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__PrivacyCopyWrapper",
   componentId: "sc-w2b8yk-3"
-})(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.fontSize('s');
-}, _ref6 => {
+})(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.fontSize('xl');
+  return theme.fontSize('s');
 }, _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.fontSize('s');
+  return theme.fontSize('xl');
 }, _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.color('white');
+  return theme.fontSize('s');
+}, _ref9 => {
+  let {
+    theme,
+    textColour
+  } = _ref9;
+  return theme.color(textColour);
 });
 const FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__FormInner",
@@ -74,34 +81,35 @@ const FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
 const NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__NameWrapper",
   componentId: "sc-w2b8yk-5"
-})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], _ref9 => {
+})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.allBreakpoints('L');
-}, _ref10 => {
+}, _ref11 => {
   let {
     columnLayout
-  } = _ref10;
+  } = _ref11;
   return columnLayout ? 'column' : 'row';
-}, _ref11 => {
+}, _ref12 => {
   let {
     columnLayout
-  } = _ref11;
+  } = _ref12;
   return columnLayout ? 0 : (0, _spacing.default)('md');
 });
 const InputField = exports.InputField = (0, _styledComponents.default)(_TextInput.default).withConfig({
   displayName: "EmailSignUpstyle__InputField",
   componentId: "sc-w2b8yk-6"
-})(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), _ref12 => {
+})(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), _ref13 => {
   let {
-    theme
-  } = _ref12;
-  return theme.color('white');
-}, _ref13 => {
+    theme,
+    textColour
+  } = _ref13;
+  return theme.color(textColour);
+}, _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.allBreakpoints('L');
 });
 const Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({

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

@@ -10,6 +10,9 @@ var _reactHookForm = require("react-hook-form");
 var _yup = require("@hookform/resolvers/yup");
 var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
 var _EmailSignUp = require("./_EmailSignUp");
+// EmailSignUpForm.js is just a wrapper for viewing in the CL
+// The email sign up component that is used/exported is _EmailSignUp.js
+
 const EmailSignUpForm = () => {
   const validationSchema = (0, _EmailSignUp.buildEsuValidationSchema)({});
   const formMethods = (0, _reactHookForm.useForm)({

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

@@ -32,9 +32,11 @@ const EmailSignUp = _ref => {
     privacyCopy,
     backgroundColour = 'deep_violet_dark',
     buttonColour = 'red',
-    buttonText = 'Subscribe',
+    buttonText,
+    containerPadding = true,
     formContext,
     columnLayout = false,
+    textColour = 'white',
     ...rest
   } = _ref;
   const {
@@ -46,8 +48,11 @@ const EmailSignUp = _ref => {
       errors
     }
   } = formContext;
+  const normalisedButtonText = buttonText || 'Subscribe';
   return /*#__PURE__*/_react.default.createElement(_EmailSignUp.ESUWrapper, Object.assign({
-    backgroundColour: backgroundColour
+    backgroundColour: backgroundColour,
+    textColour: textColour,
+    containerPadding: containerPadding
   }, rest), /*#__PURE__*/_react.default.createElement(_EmailSignUp.Title, {
     tag: "h2",
     size: "xxl",
@@ -59,6 +64,7 @@ const EmailSignUp = _ref => {
   }), /*#__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, {
+    textColour: textColour,
     fieldName: _EmailSignUpConfig.ESU_FIELDS.FIRST_NAME,
     id: "first-name",
     type: "text",
@@ -66,6 +72,7 @@ const EmailSignUp = _ref => {
     placeholder: "Enter your first name",
     formContext: formContext
   }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
+    textColour: textColour,
     fieldName: _EmailSignUpConfig.ESU_FIELDS.LAST_NAME,
     id: "last-name",
     type: "text",
@@ -73,6 +80,7 @@ const EmailSignUp = _ref => {
     placeholder: "Enter your last name",
     formContext: formContext
   })), /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
+    textColour: textColour,
     fieldName: _EmailSignUpConfig.ESU_FIELDS.EMAIL,
     id: "email",
     type: "email",
@@ -87,6 +95,8 @@ const EmailSignUp = _ref => {
     loading: isSubmitting,
     loadingText: "Submitting...",
     "data-test": "subscribe-button"
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, buttonText)))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, normalisedButtonText)))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, {
+    textColour: textColour
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
 };
 exports.EmailSignUp = EmailSignUp;

package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -82,7 +82,7 @@ const CheckInput = exports.CheckInput = _styledComponents.default.input.withConf
   let {
     theme
   } = _ref6;
-  return theme.color('grey_for_forms');
+  return theme.color('grey');
 }, _ref7 => {
   let {
     theme
@@ -92,7 +92,7 @@ const CheckInput = exports.CheckInput = _styledComponents.default.input.withConf
   let {
     theme
   } = _ref8;
-  return theme.color('black');
+  return theme.color('grey');
 }, _CR_Tick_black.default, _ref9 => {
   let {
     theme

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.24.1",
+  "version": "8.25.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/EmailSignUp/EmailSignUp.md

@@ -1,5 +1,6 @@
 # Email SignUp Form
-
+### EmailSignUpForm.js is just a wrapper for viewing in the CL
+### The email sign up component that is used/exported is _EmailSignUp.js
 
 ```js
 import EmailSignUpForm from './EmailSignUpForm';
@@ -7,8 +8,7 @@ import Text from '../../Atoms/Text/Text';
 
 <>
     <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 />
 </>
-
 ```

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

@@ -8,9 +8,9 @@ const ESUWrapper = styled.div`
   display: flex;
   flex-direction: column;
   font-size: ${({ theme }) => theme.fontSize('s')};
-  color: ${({ theme }) => theme.color('white')};
+  color: ${({ theme, textColour }) => theme.color(textColour)};
   background-color: ${({ theme, backgroundColour }) => theme.color(backgroundColour)};
-  padding: ${spacing('m')};
+  padding: ${({ containerPadding }) => (containerPadding ? spacing('m') : 0)};
 `;
 
 const TopCopyWrapper = styled.div`
@@ -35,7 +35,7 @@ const PrivacyCopyWrapper = styled.div`
     line-height: ${({ theme }) => theme.fontSize('xl')};
     a {
       font-size: ${({ theme }) => theme.fontSize('s')};
-      color: ${({ theme }) => theme.color('white')};
+      color: ${({ theme, textColour }) => theme.color(textColour)};
     }
   }
 `;
@@ -65,7 +65,7 @@ const InputField = styled(TextInput)`
   margin-bottom: ${spacing('md')};
 
   & > span:first-child {
-    color: ${({ theme }) => theme.color('white')};
+    color: ${({ theme, textColour }) => theme.color(textColour)};
   }
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {

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

@@ -1,3 +1,5 @@
+// EmailSignUpForm.js is just a wrapper for viewing in the CL
+// The email sign up component that is used/exported is _EmailSignUp.js
 import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';

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

@@ -24,9 +24,11 @@ const EmailSignUp = ({
   privacyCopy,
   backgroundColour = 'deep_violet_dark',
   buttonColour = 'red',
-  buttonText = 'Subscribe',
+  buttonText,
+  containerPadding = true,
   formContext,
   columnLayout = false,
+  textColour = 'white',
   ...rest
 }) => {
   const {
@@ -39,8 +41,15 @@ const EmailSignUp = ({
     }
   } = formContext;
 
+  const normalisedButtonText = buttonText || 'Subscribe';
+
   return (
-    <ESUWrapper backgroundColour={backgroundColour} {...rest}>
+    <ESUWrapper
+      backgroundColour={backgroundColour}
+      textColour={textColour}
+      containerPadding={containerPadding}
+      {...rest}
+    >
       <Title tag="h2" size="xxl" weight="400" family="Anton" uppercase>
         {title}
       </Title>
@@ -62,6 +71,7 @@ const EmailSignUp = ({
         <FormInner>
           <NameWrapper columnLayout={columnLayout}>
             <InputField
+              textColour={textColour}
               fieldName={ESU_FIELDS.FIRST_NAME}
               id="first-name"
               type="text"
@@ -70,6 +80,7 @@ const EmailSignUp = ({
               formContext={formContext}
             />
             <InputField
+              textColour={textColour}
               fieldName={ESU_FIELDS.LAST_NAME}
               id="last-name"
               type="text"
@@ -79,6 +90,7 @@ const EmailSignUp = ({
             />
           </NameWrapper>
           <InputField
+            textColour={textColour}
             fieldName={ESU_FIELDS.EMAIL}
             id="email"
             type="email"
@@ -94,7 +106,7 @@ const EmailSignUp = ({
               loadingText="Submitting..."
               data-test="subscribe-button"
             >
-              <Text>{buttonText}</Text>
+              <Text>{normalisedButtonText}</Text>
             </ButtonWithStates>
           </ButtonWrapper>
         </FormInner>
@@ -109,7 +121,9 @@ const EmailSignUp = ({
         </>
       )}
 
-      <PrivacyCopyWrapper>
+      <PrivacyCopyWrapper
+        textColour={textColour}
+      >
         <Text>{privacyCopy}</Text>
       </PrivacyCopyWrapper>
     </ESUWrapper>
@@ -124,6 +138,8 @@ EmailSignUp.propTypes = {
   backgroundColour: PropTypes.string,
   buttonColour: PropTypes.string,
   buttonText: PropTypes.string,
+  textColour: PropTypes.string,
+  containerPadding: PropTypes.bool,
   formContext: PropTypes.shape().isRequired,
   columnLayout: PropTypes.bool
 };

package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -177,12 +177,12 @@ const CheckInput = styled.input`
   left: 0;
   top:0;
   margin: 0;
-  border: 1px solid ${({ theme }) => theme.color('grey_for_forms')};
+  border: 1px solid ${({ theme }) => theme.color('grey')};
   + span {
     width: 30px;
     height: 30px;
     background-color: ${({ theme }) => theme.color('white')};
-    border: 1px solid ${({ theme }) => theme.color('black')};
+    border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
     border-radius: 8px;
   }