@comicrelief/component-library 7.7.0 → 7.9.0

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

@@ -24,10 +24,10 @@ var setInitialValues = function setInitialValues(overrideValues) {
     mp_town: '',
     mp_country: '',
     mp_postcode: '',
-    mp_permissionEmail: [],
-    mp_permissionPost: [],
-    mp_permissionPhone: [],
-    mp_permissionSMS: []
+    mp_permissionEmail: false,
+    mp_permissionPost: false,
+    mp_permissionPhone: false,
+    mp_permissionSMS: false
   }; // Override with any custom options supplied
 
   var updatedValues = (0, _lodash.merge)(defaultValues, overrideValues);
@@ -41,12 +41,12 @@ var buildValidationSchema = function buildValidationSchema(overrideOptions) {
     mp_permissionEmail: {
       /**
         * As per react-hook-form's validation requirements, sets the fields' required attribute
-        * for each checkbox option (Yes & No), a non-required field isn't rendered or included
-        * in the validation. As the backend *currently* needs values to formalise a user's opt-out,
-        * we'll set all fields to 'required' by default (once the option is chosen).
+        * for each checkbox option (now only 'Yes' as of 2023), a non-required field isn't rendered
+        * or included in the validation. As the backend *currently* needs values to formalise
+        * a user's opt-out, we'll set all fields to 'required' by default
+        * (once the option is chosen).
         */
       yes: true,
-      no: true,
       // Hide the input from user interaction, but keep it in the DOM so we can pass values to it
       hideInput: false,
       // Allows complete removal of the option (checkboxes & fields) from both render & validation.
@@ -54,19 +54,16 @@ var buildValidationSchema = function buildValidationSchema(overrideOptions) {
     },
     mp_permissionSMS: {
       yes: true,
-      no: true,
       hideInput: false,
       disableOption: false
     },
     mp_permissionPhone: {
       yes: true,
-      no: true,
       hideInput: false,
       disableOption: false
     },
     mp_permissionPost: {
       yes: true,
-      no: true,
       hideInput: false,
       disableOption: false
     }

package/dist/components/Organisms/MarketingPreferencesDS/assets/CR_Tick_black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M36.121 15.879a2.998 2.998 0 0 0-4.242 0L21 26.757l-4.879-4.878a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l7 7c.586.586 1.353.879 2.121.879s1.535-.293 2.121-.879l13-13a2.998 2.998 0 0 0 0-4.242z" fill="#000"/></svg>

package/dist/theme/crTheme/colors.js

@@ -46,6 +46,10 @@ var colors = {
   purple_light: '#DFC6F6',
   red: '#E52630',
   red_dark: '#890B11',
+  rnd_23_teal: '#3EB1AA',
+  rnd_23_yellow: '#FFE300',
+  rnd_23_pink: '#EDB4D3',
+  rnd_23_black: '#2B3737',
   teal: '#4ECDBE',
   teal_dark: '#13767C',
   teal_light: '#86E4E9',

package/package.json

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

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

@@ -2,15 +2,27 @@ import styled, { css } from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
 import { media } from '../../../theme/shared/size';
-import checkBoxIcon from './assets/CR_Tick.svg';
+import checkBoxIcon from './assets/CR_Tick_black.svg';
+import TextInput from './_TextInput';
 
-import EmailIcon from './assets/CR_@.svg';
-import PostIcon from './assets/CR_Mail.svg';
-import PhoneIcon from './assets/CR_Phone.svg';
-import SMSIcon from './assets/CR_SMS.svg';
+const OuterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${media('small')} {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+`;
 
 const TopCopyWrapper = styled.div`
   margin: ${spacing('l')} 0;
+  display: flex;
+  width: 100%;
+
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    padding: 10px;
+  }
 `;
 
 const BottomCopyWrapper = styled.div`
@@ -26,25 +38,24 @@ const Head = styled.div`
 const FormField = styled.div`${({ theme }) => css`
   position: relative;
   margin-bottom: ${spacing('md')};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @media ${theme.breakpoint('small')} {
+    width: 50%;
+    padding: 10px;
+  }
 
   label {
     position: relative;
     margin-bottom: ${spacing('md')};
-    width: 48%;
-    padding: 10px;
-    border: 1px solid ${theme.color('grey')};
-    box-sizing: border-box;
-    border-radius: 8px;
+    width: 100%;
     color: ${theme.color('grey_dark')};
-
-    @media ${theme.breakpoint('small')} {
-      padding: 12px 16px;
-    }
   }
 
   h3 {
     position: relative;
-    padding-left: 35px;
     margin-bottom: ${spacing('md')};
 
     &:before {
@@ -56,23 +67,7 @@ const FormField = styled.div`${({ theme }) => css`
       content: '';
     }
   }
-
-  &.field-email h3:before {
-    background: url(${EmailIcon}) top left/contain no-repeat;
-  }
-
-  &.field-sms h3:before {
-    background: url(${SMSIcon}) top left/contain no-repeat;
-  }
-
-  &.field-phone h3:before {
-    background: url(${PhoneIcon}) top left/contain no-repeat;
-  }
-
-  &.field-post h3:before {
-    background: url(${PostIcon}) top left/contain no-repeat;
-  }
-  `}`;
+`}`;
 
 const CheckContainer = styled.div`${({ theme }) => css`
   width: 100%;
@@ -80,45 +75,17 @@ const CheckContainer = styled.div`${({ theme }) => css`
   justify-content: space-between;
   font-size: ${theme.fontSize('md')};
   font-family: ${theme.fontFamilies(theme.font.regular)};
+`}`;
 
-  ${media('small')} {
-    width: 380px;
-  }
-  `}`;
-
-const CheckLabel = styled.label`${({ theme, userSelection }) => css`
+const CheckLabel = styled.label`${({ theme }) => css`
   display: flex;
   align-items: center;
   font-size: ${theme.fontSize('xs')};
-  padding: 10px;
 
   @media ${theme.breakpoint('small')} {
     font-size: ${theme.fontSize('s')};
-    padding: 12px 16px;
-  }
-  
-  &:hover,
-  &:focus {
-    border: 2px solid ${theme.color('grey')};
-    padding: 9px;
-    @media ${theme.breakpoint('small')} {
-      padding: 11px 15px;
-    }
   }
-
-  ${userSelection && `
-    &[for$="${userSelection}"] {
-      background: ${theme.color('grey_medium')};
-      padding: 9px;
-      border: 2px solid ${theme.color('grey')};
-
-      @media ${theme.breakpoint('small')} {
-        padding: 11px 15px;
-      }
-    }
-  `}
-`}
-`;
+`}`;
 
 const CheckInput = styled.input`
   font-size: ${({ theme }) => theme.fontSize('sm')};
@@ -137,7 +104,7 @@ const CheckInput = styled.input`
     width: 30px;
     height: 30px;
     background-color: ${({ theme }) => theme.color('grey_light')};
-    border: 1px solid ${({ theme }) => theme.color('grey')};
+    border: 1px solid ${({ theme }) => theme.color('black')};
     float: left;
     border-radius: 8px;
 
@@ -147,20 +114,15 @@ const CheckInput = styled.input`
   }
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
-    background-color: ${({ theme }) => theme.color('red')};
+    background-color: ${({ theme }) => theme.color('grey_light')};
     background-size: contain;
   }
 `;
 
 const ShowHideInputWrapper = styled.div`
   display: ${({ show }) => (show ? 'block' : 'none')};
-  margin-bottom: ${spacing('lg')};
   width: 100%;
 
-  ${media('small')} {
-    max-width: 290px;
-  }
-
   label {
     width: 100%;
     border: none;
@@ -168,6 +130,48 @@ const ShowHideInputWrapper = styled.div`
   }
 `;
 
+const ExtraInfo = styled.span`
+  display: block;
+  width: 100%;
+  font-size: 1rem;
+  text-transform: inherit;
+  font-weight: normal;
+  line-height: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  margin-bottom: 0.5rem;
+
+  + label {
+    margin-top: 20px;
+
+    // Visually hide the actual field label for the
+    // non-multifield options, as we have the
+    // more chatty 'extra info' language
+    &[for="mp_email"],
+    &[for="mp_mobile"],
+    &[for="mp_phone"] {
+      > span:first-child {
+        position: absolute;
+        margin: -1px;
+        padding: 0;
+        width: 1px;
+        height: 1px;
+        border: 0;
+        overflow: hidden;
+        clip: rect(1px 1px 1px 1px);
+        word-wrap: normal;
+      }
+  }
+`;
+
+const MPTextInput = styled(TextInput)`
+  input {
+    border: 1px solid  ${({ theme }) => theme.color('black')};;
+    ${media('small')} {
+      max-width: none;
+    }
+  }
+`;
+
 export {
   TopCopyWrapper,
   BottomCopyWrapper,
@@ -176,5 +180,8 @@ export {
   CheckLabel,
   CheckInput,
   CheckContainer,
-  ShowHideInputWrapper
+  ShowHideInputWrapper,
+  ExtraInfo,
+  OuterWrapper,
+  MPTextInput
 };

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

@@ -1,8 +1,20 @@
 const AssociatedFields = {
-  mp_permissionSMS: ['mp_mobile'],
-  mp_permissionPhone: ['mp_phone'],
-  mp_permissionEmail: ['mp_email'],
-  mp_permissionPost: ['mp_address1', 'mp_address2', 'mp_address3', 'mp_town', 'mp_postcode', 'mp_country']
+  mp_permissionSMS: {
+    fieldNames: ['mp_mobile'],
+    label: 'Text'
+  },
+  mp_permissionPhone: {
+    fieldNames: ['mp_phone'],
+    label: 'Phone'
+  },
+  mp_permissionEmail: {
+    fieldNames: ['mp_email'],
+    label: 'Email'
+  },
+  mp_permissionPost: {
+    fieldNames: ['mp_address1', 'mp_address2', 'mp_address3', 'mp_town', 'mp_postcode', 'mp_country'],
+    label: 'Post'
+  }
 };
 
 export default AssociatedFields;

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

@@ -16,26 +16,26 @@ const CheckAnswer = ({
   const onChange = e => {
     let newVal;
     if (e.target.checked) {
-      newVal = e.target.value === 'yes' ? e.target.value : 'no';
+      newVal = e.target.value;
     } else {
       newVal = '';
 
       // To ensure we're not letting invalid values get passed, reset any associated fields:
-      const theseFields = AssociatedFields[name];
+      const theseFields = AssociatedFields[name].fieldNames;
       theseFields.forEach(fieldName => {
         setValue(fieldName, '');
       });
     }
 
     // Update the checkbox field itself
-    setValue(name, [newVal]);
+    setValue(name, newVal);
 
     /* If the click represents either a 'none selected' or a 'not required' option
       (set in config), reset errors for all fields associated with this checkbox */
     const reValidate = !mpValidationOptions[name][newVal];
 
     if (reValidate) {
-      const theseFields = AssociatedFields[name];
+      const theseFields = AssociatedFields[name].fieldNames;
       theseFields.forEach(fieldName => {
         clearErrors(fieldName);
       });
@@ -54,19 +54,7 @@ const CheckAnswer = ({
           onChange={onChange}
         />
         <span />
-        Yes, please
-      </CheckLabel>
-      <CheckLabel htmlFor={`${name}-no`} userSelection={userSelection}>
-        <CheckInput
-          type="checkbox"
-          id={`${name}-no`}
-          name={name}
-          value="no"
-          ref={register}
-          onChange={onChange}
-        />
-        <span />
-        No, thanks
+        { AssociatedFields[name].label }
       </CheckLabel>
     </CheckContainer>
   );
@@ -82,7 +70,10 @@ CheckAnswer.propTypes = {
   /* These options are created in _MarketingPrefsConfig.js, passed to react-hook-form
   in the parent to set-up the validation, but also required here for additional functionality */
   mpValidationOptions: PropTypes.objectOf(PropTypes.shape).isRequired,
-  userSelection: PropTypes.string,
+  userSelection: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool
+  ]),
   formContext: PropTypes.shape()
 };
 

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

@@ -5,35 +5,35 @@ import Link from '../../Atoms/Link/Link';
 const defaultCopyTop = (
   <div>
     <Text tag="h3" size="xl" family="Anton" uppercase weight="400" color="grey_dark">
-      How can we contact you?
+      Stay up to date with Comic Relief?
     </Text>
     <Text tag="p" size="md" color="grey_dark">
-      We’d love to stay in touch and provide you with fundraising tips,
-      news updates and more goodies.
+      We’d like to send you updates on the work we’re funding and how
+      your support makes a difference in the UK and around the world.
     </Text>
     <Text tag="p" size="md" color="grey_dark">
-      Please select your preferred contact options below.
+      Please tick the relevant boxes below if you would like to hear from us.
     </Text>
   </div>
 );
 
 const defaultCopyBottom = (
   <Text tag="p" color="grey_dark">
-    You can update your communication preferences at any time at
+    Update your preferences at any time by visiting our
     {' '}
     <Link
       type="standard"
       href="https://www.comicrelief.com/update-your-preferences"
     >
-      update your preferences
+      preferences centre
     </Link>
-    . Your details will be kept safe, check out our
+    . Your details will be kept safe, see our
     {' '}
     <Link type="standard" href="https://www.comicrelief.com/privacy-policy">
       privacy policy
     </Link>
     {' '}
-    for more details.
+    for more information.
   </Text>
 );