@comicrelief/component-library 8.81.0 → 8.83.0

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

@@ -1,34 +1,20 @@
 import styled, { css } from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import checkBoxIcon from './assets/CR_Tick_black.svg';
+import checkBoxIcon from './assets/CR_Tick.svg';
 import TextInput from './_TextInput';
 import EmailIcon from './assets/Email.svg';
 import PhoneIcon from './assets/Phone.svg';
 import PostIcon from './assets/Post.svg';
 import SMSIcon from './assets/Text.svg';
-import EmailIconWhite from './assets/Email--white.svg';
-import PhoneIconWhite from './assets/Phone--white.svg';
-import PostIconWhite from './assets/Post--white.svg';
-import SMSIconWhite from './assets/Text--white.svg';
+import EmailIconRed from './assets/Email--red.svg';
+import PhoneIconRed from './assets/Phone--red.svg';
+import PostIconRed from './assets/Post--red.svg';
+import SMSIconRed from './assets/Text--red.svg';
 
 const OuterWrapper = styled.div`
   display: flex;
   flex-direction: column;
-
-  /* Preload 'selected' icons */
-  &:after {
-    position:absolute;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    z-index: -1;
-    content:
-      url("${EmailIconWhite}")
-      url("${PhoneIconWhite}")
-      url("${PostIconWhite}")
-      url("${SMSIconWhite}");
-  }
 `;
 
 const TopCopyWrapper = styled.div`
@@ -49,8 +35,8 @@ const CheckboxWrapper = styled.div`
 `;
 
 const AssociatedFieldsName = styled.span`
-  padding-left: 40px;
-  line-height: 30px;
+  padding-left: calc(24px + 1rem);
+  line-height: 24px;
   background-repeat: no-repeat;
   background-position: left center;
 
@@ -71,54 +57,47 @@ const AssociatedFieldsName = styled.span`
   }
 `;
 
-const FormField = styled.div`${({ theme, $isError }) => css`
+const FormField = styled.div`${({ theme, $isErroring }) => css`
   position: relative;
   margin-bottom: ${spacing('md')};
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: ${spacing('m')};
-  background-color: ${theme.color('grey_light')};
-  transition: background-color 0.3s, color 0.3s;
+  background-color: ${theme.color('white')};
   border-radius: 0.5rem;
-  border: 1px solid ${theme.color('grey')};
-
-  &.selected {
-    background-color: ${$isError ? theme.color('red') : theme.color('blue_donate')};
-    &:hover {
-      background-color: ${$isError ? theme.color('red_dark') : theme.color('blue_donate')};
-      border-color: ${theme.color('grey_4')};
-    }
-
-    span.icon-mp_permissionEmail {
-      background-image: url("${EmailIconWhite}");
-    }
+  border: 1px solid ${$isErroring ? theme.color('red') : theme.color('grey')};
+  color: ${$isErroring ? theme.color('red') : theme.color('black')};
+  span {
+    background-size: contain;
+  }
 
-    span.icon-mp_permissionPhone {
-      background-image: url("${PhoneIconWhite}");
-    }
+  ${$isErroring && css`
+    ${AssociatedFieldsName} {
+      &.icon-mp_permissionEmail {
+        background-image: url("${EmailIconRed}");
+      }
 
-    span.icon-mp_permissionPost {
-      background-image: url("${PostIconWhite}");
-    }
+      &.icon-mp_permissionPhone {
+        background-image: url("${PhoneIconRed}");
+      }
 
-    span.icon-mp_permissionSMS {
-      background-image: url("${SMSIconWhite}");
-    }
+      &.icon-mp_permissionPost {
+        background-image: url("${PostIconRed}");
+      }
 
-    > div {
-      label, > span {
-        color: ${theme.color('white')};
+      &.icon-mp_permissionSMS {
+        background-image: url("${SMSIconRed}");
       }
     }
-  }
+  `}
 
   /* All labels; input AND checkbox */
   label {
     position: relative;
     margin-bottom: 0;
     width: 100%;
-    color: ${theme.color('black')};
+    color: inherit;
     font-weight: 600;
     display: flex;
     justify-content: space-between;
@@ -148,40 +127,52 @@ const CheckContainer = styled.div`${({ theme }) => css`
 `}`;
 
 const CheckLabel = styled.label`${({ theme }) => css`
+  position: relative;
   display: flex;
   align-items: center;
   font-size: ${theme.fontSize('xs')};
+  cursor: pointer;
 
   @media ${theme.allBreakpoints('M')} {
     font-size: ${theme.fontSize('s')};
   }
 `}`;
 
-const CheckInput = styled.input`
-  font-size: ${({ theme }) => theme.fontSize('sm')};
+const CheckInput = styled.input`${({ theme }) => css`
+  font-size: ${theme.fontSize('sm')};
   display: block;
   box-sizing: border-box;
   opacity: 0;
   position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top:0;
   margin: 0;
-  border: 1px solid ${({ theme }) => theme.color('grey')};
+
   + span {
     width: 30px;
     height: 30px;
-    background-color: ${({ theme }) => theme.color('white')};
-    border: 1px solid ${({ theme }) => theme.color('grey')};
-    float: left;
+    flex-shrink: 0;
+    background-color: ${theme.color('white')};
+    border: 1px solid ${theme.color('grey')};
     border-radius: 0.5rem;
+    pointer-events: none;
+  }
+
+  &:not(:checked):hover + span,
+  &:not(:checked):focus-visible + span {
+    background-color: ${theme.color('grey_extra_light')};
   }
+
   &:checked + span {
-    background: url("${checkBoxIcon}") no-repeat center ${({ theme }) => theme.color('white')};
+    background: url("${checkBoxIcon}") no-repeat center ${theme.color('red')};
     background-size: contain;
+    border-color: ${theme.color('red')};
   }
-`;
+
+  &:checked:hover + span,
+  &:checked:focus-visible + span {
+    background-color: ${theme.color('red_dark')};
+    border-color: ${theme.color('red_dark')};
+  }
+`}`;
 
 const ShowHideInputWrapper = styled.div`
   display: ${({ $show }) => ($show ? 'block' : 'none')};
@@ -204,7 +195,7 @@ const ExtraInfo = styled.span`
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   margin-bottom: 0rem;
   margin-top: 1rem;
-  color: ${({ theme }) => theme.color('black')};
+  color: inherit;
 
   + label {
     margin-top: ${spacing('md')};
@@ -227,22 +218,21 @@ const ExtraInfo = styled.span`
         clip: rect(1px 1px 1px 1px);
         word-wrap: normal;
       }
+    }
   }
 `;
 
-const MPTextInput = styled(TextInput)`
+const MPTextInput = styled(TextInput)`${({ theme, $isErroring }) => css`
+  color: ${$isErroring ? theme.color('red') : theme.color('black')};
+  margin-top: 1rem;
   input {
-    border: 1px solid  ${({ theme }) => theme.color('black')};
-    background-color: ${({ theme }) => theme.color('white')};
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
+    background-color: ${theme.color('white')};
+    color: ${$isErroring ? theme.color('red') : theme.color('black')};
+    @media ${theme.allBreakpoints('M')} {
       max-width: none;
     }
   }
-  /* error message text colour */
-  span {
-    color: white;
-  }
-`;
+`}`;
 
 export {
   TopCopyWrapper,

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

@@ -22,7 +22,7 @@ const MarketingPreferencesDS = ({
   formContext = null,
   ...rest
 }) => {
-  const { formState: { errors }, control } = formContext;
+  const { formState: { errors }, control, getValues } = formContext;
 
   // For brevity
   const emailChoice = useWatch({ control, name: 'mp_permissionEmail', defaultValue: null });
@@ -52,19 +52,35 @@ const MarketingPreferencesDS = ({
     return errors.mp_address1 || errors.mp_address2
     || errors.mp_address3 || errors.mp_town || errors.mp_country || errors.mp_postcode;
   };
-  /* Only show the field if config hasn't hidden it (to pass in parent values)
-    or if a choice has been made */
-  const showEmailField = !mp_permissionEmail.hideInput && (emailChoice || errors.mp_email);
-  const showSMSField = !mp_permissionSMS.hideInput && (smsChoice || errors.mp_mobile);
-  const showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice || errors.mp_phone);
-  const showPostFields = !mp_permissionPost.hideInput && (postChoice || isAddressErroring());
+
+  const hasStoredAddress = () => [
+    'mp_address1', 'mp_address2', 'mp_address3', 'mp_town', 'mp_country', 'mp_postcode'
+  ].some(field => getValues(field));
+
+  /* Only show the field if config hasn't hidden it (to pass in parent values),
+    if a choice has been made, or if the form already has a value in redux (e.g. returning
+    back to the page). */
+  const showEmailField = !mp_permissionEmail.hideInput && (
+    emailChoice || errors.mp_email || getValues('mp_email')
+  );
+  const showSMSField = !mp_permissionSMS.hideInput && (
+    smsChoice || errors.mp_mobile || getValues('mp_mobile')
+  );
+  const showPhoneField = !mp_permissionPhone.hideInput && (
+    phoneChoice || errors.mp_phone || getValues('mp_phone')
+  );
+  const showPostFields = !mp_permissionPost.hideInput && (
+    postChoice || isAddressErroring() || hasStoredAddress()
+  );
 
   const customId = id ? `marketing-preferences--${id}` : 'marketing-preferences';
 
   // Check for field-specific errors
   const hasEmailError = Boolean(errors.mp_permissionEmail || errors.mp_email);
-  const hasPostError = Boolean(errors.mp_permissionPost || errors.mp_address1 || errors.mp_address2
-  || errors.mp_address3 || errors.mp_town || errors.mp_country || errors.mp_postcode);
+  const hasPostError = Boolean(errors.mp_permissionPost
+    || errors.mp_address1 || errors.mp_address2
+    || errors.mp_address3 || errors.mp_town
+    || errors.mp_country || errors.mp_postcode);
   const hasSMSError = Boolean(errors.mp_permissionSMS || errors.mp_mobile);
   const hasPhoneError = Boolean(errors.mp_permissionPhone || errors.mp_phone);
 
@@ -76,7 +92,7 @@ const MarketingPreferencesDS = ({
       {!mp_permissionEmail.disableOption && (
       <FormField
         className={`field-email ${emailChoice && 'selected'}`}
-        $isError={hasEmailError}
+        $isErroring={hasEmailError}
       >
         <CheckboxWrapper>
           <OptInCheckbox
@@ -104,6 +120,7 @@ const MarketingPreferencesDS = ({
               type="email"
               id="mp_email"
               formContext={formContext}
+              $isErroring={hasEmailError}
             />
           </ShowHideInputWrapper>
         </MaybeDisabled>
@@ -114,7 +131,7 @@ const MarketingPreferencesDS = ({
       {!mp_permissionPost.disableOption && (
       <FormField
         className={`field-post ${postChoice && 'selected'}`}
-        $isError={hasPostError}
+        $isErroring={hasPostError}
       >
         <CheckboxWrapper>
           <OptInCheckbox
@@ -139,6 +156,7 @@ const MarketingPreferencesDS = ({
               optional={!mp_permissionPost[postChoice]}
               id="mp_address1"
               formContext={formContext}
+              $isErroring={Boolean(errors.mp_address1)}
             />
             <MPTextInput
               placeholder=""
@@ -147,6 +165,7 @@ const MarketingPreferencesDS = ({
               optional
               id="mp_address2"
               formContext={formContext}
+              $isErroring={Boolean(errors.mp_address2)}
             />
             <MPTextInput
               placeholder=""
@@ -155,6 +174,7 @@ const MarketingPreferencesDS = ({
               optional
               id="mp_address3"
               formContext={formContext}
+              $isErroring={Boolean(errors.mp_address3)}
             />
             <MPTextInput
               placeholder=""
@@ -163,6 +183,7 @@ const MarketingPreferencesDS = ({
               optional={!mp_permissionPost[postChoice]}
               id="mp_town"
               formContext={formContext}
+              $isErroring={Boolean(errors.mp_town)}
             />
             <MPTextInput
               placeholder=""
@@ -171,6 +192,7 @@ const MarketingPreferencesDS = ({
               optional={!mp_permissionPost[postChoice]}
               id="mp_postcode"
               formContext={formContext}
+              $isErroring={Boolean(errors.mp_postcode)}
             />
             <MPTextInput
               placeholder=""
@@ -179,6 +201,7 @@ const MarketingPreferencesDS = ({
               optional={!mp_permissionPost[postChoice]}
               id="mp_country"
               formContext={formContext}
+              $isErroring={Boolean(errors.mp_country)}
             />
           </ShowHideInputWrapper>
         </MaybeDisabled>
@@ -189,7 +212,7 @@ const MarketingPreferencesDS = ({
       {!mp_permissionSMS.disableOption && (
       <FormField
         className={`field-sms ${smsChoice && 'selected'}`}
-        $isError={hasSMSError}
+        $isErroring={hasSMSError}
       >
         <CheckboxWrapper>
           <OptInCheckbox
@@ -203,9 +226,7 @@ const MarketingPreferencesDS = ({
         <MaybeDisabled disabled={disableSMSInput}>
           <ShowHideInputWrapper $show={showSMSField}>
             <ExtraInfo>
-              Please confirm the mobile number we will use to
-              <b> text </b>
-              you on:
+              Please enter a telephone or mobile number:
             </ExtraInfo>
             <MPTextInput
               placeholder=""
@@ -214,6 +235,7 @@ const MarketingPreferencesDS = ({
               optional={!mp_permissionSMS[smsChoice]}
               id="mp_mobile"
               formContext={formContext}
+              $isErroring={hasSMSError}
             />
           </ShowHideInputWrapper>
         </MaybeDisabled>
@@ -224,7 +246,7 @@ const MarketingPreferencesDS = ({
       {!mp_permissionPhone.disableOption && (
       <FormField
         className={`field-phone ${phoneChoice && 'selected'}`}
-        $isError={hasPhoneError}
+        $isErroring={hasPhoneError}
       >
         <CheckboxWrapper>
           <OptInCheckbox
@@ -238,9 +260,7 @@ const MarketingPreferencesDS = ({
         <MaybeDisabled disabled={disablePhoneInput}>
           <ShowHideInputWrapper $show={showPhoneField}>
             <ExtraInfo>
-              Please confirm the telephone number we will use to
-              <b> phone </b>
-              you on:
+              Please enter a telephone or mobile number
             </ExtraInfo>
             <MPTextInput
               placeholder=""
@@ -249,6 +269,7 @@ const MarketingPreferencesDS = ({
               optional={!mp_permissionPhone[phoneChoice]}
               id="mp_phone"
               formContext={formContext}
+              $isErroring={hasPhoneError}
             />
           </ShowHideInputWrapper>
         </MaybeDisabled>

package/src/components/Organisms/MarketingPreferencesDS/assets/{Email--white.svg → Email--red.svg}

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#FFFFFF"/>
+<path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#E52630"/>
 </svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/{Phone--white.svg → Phone--red.svg}

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#FFFFFF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#FFFFFF"/>
-<path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#FFFFFF"/>
+<path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#E52630"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#E52630"/>
+<path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#E52630"/>
 </svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/{Post--white.svg → Post--red.svg}

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#FFFFFF"/>
+<path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#E52630"/>
 </svg>

package/src/components/Organisms/MarketingPreferencesDS/assets/{Text--white.svg → Text--red.svg}

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#FFFFFF"/>
+<path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#E52630"/>
 </svg>

package/src/demos/ExampleDisplay.jsx

@@ -1,47 +1,48 @@
 import React from 'react';
+import styled from 'styled-components';
 
-const wrapperStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-};
+const ClExampleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
-const sourceWrapperStyle = {
-  marginTop: '1.5rem',
-  borderRadius: '4px',
-  overflow: 'hidden',
-  border: '1px solid #333',
-};
+const CodeWrapper = styled.div`
+  margin-top: 1.5rem;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #333;
+`;
 
-const sourceLabelStyle = {
-  background: '#2d2d2d',
-  color: '#888',
-  padding: '0.35rem 0.75rem',
-  fontSize: '0.7rem',
-  fontFamily: 'monospace',
-  letterSpacing: '0.05em',
-  textTransform: 'uppercase',
-};
+const CodeLabel = styled.div`
+  background: #2d2d2d;
+  color: #888;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.7rem;
+  font-family: monospace;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+`;
 
-const preStyle = {
-  background: '#1e1e1e',
-  color: '#d4d4d4',
-  padding: '1rem',
-  overflowX: 'auto',
-  fontSize: '0.75rem',
-  lineHeight: '1.6',
-  fontFamily: "'Fira Code', 'Consolas', 'Monaco', monospace",
-  margin: 0,
-  whiteSpace: 'pre',
-};
+const CodeStyle = styled.div`
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  font-family: Fira Code, Consolas, Monaco, monospace;
+  margin: 0;
+  white-space: pre;
+`;
 
 export default function ExampleDisplay({ component, src }) {
   return (
-    <div style={wrapperStyle}>
+    <ClExampleWrapper>
       <div>{component}</div>
-      <div style={sourceWrapperStyle}>
-        <div style={sourceLabelStyle}>source</div>
-        <pre style={preStyle}>{src}</pre>
-      </div>
-    </div>
+      <CodeWrapper>
+        <CodeLabel>source</CodeLabel>
+        <CodeStyle>{src}</CodeStyle>
+      </CodeWrapper>
+    </ClExampleWrapper>
   );
 }

package/src/demos/index.jsx

@@ -114,6 +114,8 @@ import LookupExample from '../components/Molecules/Lookup/LookupExample.jsx';
 import lookupExampleSrc from '../components/Molecules/Lookup/LookupExample.jsx?raw';
 import LogoLinkedExample from '../components/Molecules/LogoLinked/LogoLinkedExample.jsx';
 import logoLinkedExampleSrc from '../components/Molecules/LogoLinked/LogoLinkedExample.jsx?raw';
+import ExpandedButtonExample from '../components/Molecules/ExpandedButton/ExpandedButtonExample.jsx';
+import expandedButtonExampleSrc from '../components/Molecules/ExpandedButton/ExpandedButtonExample.jsx?raw';
 
 // Organism examples
 import { FooterExample1, FooterExample2, FooterExample3 } from '../components/Organisms/Footer/FooterExample.jsx';
@@ -140,8 +142,6 @@ import RichtextCarouselExample from '../components/Organisms/RichtextCarousel/Ri
 import richtextCarouselExampleSrc from '../components/Organisms/RichtextCarousel/RichtextCarouselExample.jsx?raw';
 import DynamicGalleryExample from '../components/Organisms/DynamicGallery/DynamicGalleryExample.jsx';
 import dynamicGalleryExampleSrc from '../components/Organisms/DynamicGallery/DynamicGalleryExample.jsx?raw';
-import ExpandedButtonExample from '../components/Organisms/ExpandedButton/ExpandedButtonExample.jsx';
-import expandedButtonExampleSrc from '../components/Organisms/ExpandedButton/ExpandedButtonExample.jsx?raw';
 
 const Placeholder = ({ name }) => (
   <div style={{ padding: '1rem', background: '#f5f5f5', borderRadius: '4px', color: '#666' }}>
@@ -192,6 +192,7 @@ export const molecules = [
   { name: 'Descriptor', demo: demo(DescriptorExample, descriptorExampleSrc) },
   { name: 'DoubleCopy', demo: demo(DoubleCopyExample, doubleCopyExampleSrc) },
   { name: 'EmailSignUp', demo: demo(MoleculeEmailSignUpExample, moleculeEmailSignUpExampleSrc) },
+  { name: 'ExpandedButton', demo: demo(ExpandedButtonExample, expandedButtonExampleSrc) },
   { name: 'HeroBanner', demo: demo(HeroBannerExample, heroBannerExampleSrc) },
   { name: 'InfoBanner', demo: demo(InfoBannerExample, infoBannerExampleSrc) },
   { name: 'LogoLinked', demo: demo(LogoLinkedExample, logoLinkedExampleSrc) },
@@ -217,7 +218,6 @@ export const organisms = [
   { name: 'Donate', examples: [<DonateExample1 />, <DonateExample2 />, <DonateExample3 />, <DonateExample4 />, <DonateExample5 />, <DonateExample6 />, <DonateExample7 />, <DonateExample8 />, <DonateExample9 />, <DonateExample10 />, <DonateExample11 />, <DonateExample12 />, <DonateExample13 />, <DonateExample14 />, <DonateExample15 />, <DonateExample16 />, <DonateExample17 />, <DonateExample18 />, <DonateExample19 />, <DonateExample20 />, <DonateExample21 />, <DonateExample22 />] },
   { name: 'DonateBanner', demo: demo(DonateBannerExample, donateBannerExampleSrc) },
   { name: 'DynamicGallery', demo: demo(DynamicGalleryExample, dynamicGalleryExampleSrc) },
-  { name: 'ExpandedButton', demo: demo(ExpandedButtonExample, expandedButtonExampleSrc) },
   { name: 'EmailBanner', examples: [<EmailBannerExample1 />, <EmailBannerExample2 />, <EmailBannerExample3 />, <EmailBannerExample4 />, <EmailBannerExample5 />] },
   { name: 'EmailSignUpForm', demo: demo(EmailSignUpExample, emailSignUpExampleSrc) },
   { name: 'Footer', examples: [<FooterExample1 />, <FooterExample2 />, <FooterExample3 />] },

package/src/index.js

@@ -77,7 +77,7 @@ export { default as Donate } from './components/Organisms/Donate/Donate';
 export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
 export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
 export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
-export { default as ExpandedButton } from './components/Organisms/ExpandedButton/ExpandedButton';
+export { default as ExpandedButton } from './components/Molecules/ExpandedButton/ExpandedButton';
 export {
   EmailSignUp,
   buildEsuValidationSchema,