@comicrelief/component-library 8.48.2 → 8.49.1

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -18,7 +18,6 @@ exports[`renders correctly 1`] = `
   line-height: normal;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
-  text-transform: uppercase;
 }
 
 .c1 span {
@@ -49,15 +48,11 @@ exports[`renders correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  height: 2.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -69,8 +64,19 @@ exports[`renders correctly 1`] = `
   align-items: center;
   border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c15 > a {
@@ -78,9 +84,17 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c15:hover {
+.c15:hover,
+.c15:focus,
+.c15:focus-within,
+.c15:focus-visible {
   background-color: #890B11;
-  color: #FFFFFF;
+  outline-offset: 3px;
+}
+
+.c15:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c8 {
@@ -161,7 +175,7 @@ exports[`renders correctly 1`] = `
 
 .c16:disabled {
   cursor: not-allowed;
-  opacity: 0.75;
+  opacity: 0.5;
 }
 
 .c0 {
@@ -278,6 +292,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c15 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c15 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c15 {
     width: auto;
@@ -287,8 +315,6 @@ exports[`renders correctly 1`] = `
 @media (min-width:1024px) {
   .c15 {
     width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
   }
 }
 
@@ -478,15 +504,12 @@ exports[`renders correctly 1`] = `
       >
         <button
           className="c15 c16"
+          color="red"
           data-test="subscribe-button"
           disabled={true}
           type="submit"
         >
-          <span
-            className="c4"
-          >
-            Subscribe
-          </span>
+          Subscribe
           <div
             className=""
           />

package/src/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap

@@ -66,15 +66,11 @@ exports[`renders correctly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
-  padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
-  font-size: 1rem;
-  border-radius: 2rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  height: 3.125rem;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  height: 2.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -86,8 +82,19 @@ exports[`renders correctly 1`] = `
   align-items: center;
   border: none;
   cursor: pointer;
+  padding: 0.6rem 1rem;
+  border-radius: 0.5rem;
   background-color: #FFFFFF;
   color: #000000;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c23 > a {
@@ -95,9 +102,17 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
 }
 
-.c23:hover {
-  background-color: #969598;
-  color: #000000;
+.c23:hover,
+.c23:focus,
+.c23:focus-within,
+.c23:focus-visible {
+  background-color: #E1E2E3;
+  outline-offset: 3px;
+}
+
+.c23:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .c15 {
@@ -788,6 +803,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c23 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c23 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c23 {
     width: auto;
@@ -797,8 +826,6 @@ exports[`renders correctly 1`] = `
 @media (min-width:1024px) {
   .c23 {
     width: auto;
-    padding: 1rem 2rem;
-    margin: 0 auto 2rem;
   }
 }
 

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

@@ -70,7 +70,8 @@ const DonateButtonWrapperTop = styled.div`
   a {
     width: 100%;
     height: inherit;
-    transition: width 0.4s cubic-bezier(0.5, 1.5, 0.5, 0.80);
+    transition: all 0.3s cubic-bezier(0.5, 1.5, 0.5, 0.80);
+    
     &:hover,
     &:focus {
       width: 100%;

package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -436,7 +436,7 @@ const DonateButtonWrapperBottom = styled.div`
   // Donate button
   a {
     width: calc(100% - 10px);
-    transition: width 0.35s cubic-bezier(0.5, 1.5, 0.5, 0.9);
+    transition: all 0.3s cubic-bezier(0.5, 1.5, 0.5, 0.9);
 
     &:hover,
     &:focus {

package/src/components/Organisms/ImpactSlider/ImpactSlider.js

@@ -30,7 +30,7 @@ const ImpactSlider = ({
   return (
     <OuterWrapper backgroundColour={backgroundColour} id={rowID}>
       <InnerWrapper>
-        <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">{heading}</Text>
+        <Text tag="h1" family="Anton" weight="normal" size="xl">{heading}</Text>
         <Copy>
           {children}
         </Copy>

package/src/components/Organisms/ImpactSlider/_ImpactMoneybuys.js

@@ -15,7 +15,7 @@ const Moneybuys = ({ items, currentAmount, opacityAnimation }) => (
         <Fragment key={item.poundsPerItem}>
           <Moneybuy isInactive={isInactive} data-testid={`impact-slider--moneybuy-${index + 1}`}>
             <MoneybuyImage imageURL={item.imageURL} />
-            <MoneybuyAmount tag="p" family="Anton" uppercase weight="normal" size="xl" data-testid="moneybuy-amount">{thisAmount}</MoneybuyAmount>
+            <MoneybuyAmount tag="p" family="Anton" weight="normal" size="xl" data-testid="moneybuy-amount">{thisAmount}</MoneybuyAmount>
             <MoneybuyDescription tag="p" size="s" data-testid="moneybuy-description">{item.description}</MoneybuyDescription>
           </Moneybuy>
           { index < (items.length - 1) && (

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -67,7 +67,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
         { data.headerCopy}
       </Heading>
 
-      <PeopleHelpedText tag="h1" family="Anton" uppercase weight="normal" color="red">
+      <PeopleHelpedText tag="h1" family="Anton" weight="normal" color="red">
         { data.peopleHelpedText}
       </PeopleHelpedText>
 
@@ -111,7 +111,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
 
                 <div className="all-text-wrapper">
                   <AmountWrapper>
-                    <Text tag="h1" family="Anton" uppercase weight="normal" size="s">
+                    <Text tag="h1" family="Anton" weight="normal" size="s">
                       {theseItems[key].amount}
                     </Text>
                   </AmountWrapper>

package/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap

@@ -377,7 +377,6 @@ exports[`renders correctly:
 .c3 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  text-transform: uppercase;
   color: #E52630;
 }
 

package/src/theme/crTheme/buttonColors.js

@@ -2,161 +2,171 @@ import { css } from 'styled-components';
 import color from './colors';
 
 const buttonColors = {
+  // "Primary - red"
+  red: {
+    background: color('red'),
+    textColour: color('white'),
+    hoverBackground: color('red_dark'),
+    hovertextColour: color('white')
+  },
+  // "Primary - black"
   black: {
-    background: color('black'),
-    color: color('white'),
-    hoverBackground: color('grey'),
-    hoverColor: color('white')
+    background: color('grey_dark'),
+    textColour: color('white'),
+    hoverBackground: color('black'),
+    hovertextColour: color('white')
   },
+  // "Primary - white"
+  white: {
+    background: color('white'),
+    textColour: color('black'),
+    hoverBackground: color('grey_medium'),
+    hovertextColour: color('black')
+  },
+  // To be phased out:
   blue: {
     background: color('blue'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('blue_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   blue_dark: {
     background: '#2042AD',
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('blue_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   blue_light: {
     background: color('blue_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('blue_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   coral: {
     background: color('coral'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('coral_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   coral_dark: {
     background: color('coral_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('coral'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   coral_light: {
     background: color('coral_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('coral_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   green: {
     background: color('green'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('green_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   green_dark: {
     background: color('green_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('green'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   green_light: {
     background: color('green_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('green_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   grey: {
     background: color('grey'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('grey_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   grey_dark: {
     background: color('grey_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('grey'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   grey_light: {
     background: color('grey_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('grey_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   magenta: {
     background: color('magenta'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('magenta_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   magenta_dark: {
     background: color('magenta_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('magenta'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   magenta_light: {
     background: color('magenta_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('magenta_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   orange: {
     background: color('orange'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('orange_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   orange_dark: {
     background: color('orange_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('orange'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   orange_light: {
     background: color('orange_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('orange_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   purple: {
     background: color('purple'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('purple_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   purple_dark: {
     background: color('purple_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('purple'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   purple_light: {
     background: color('purple_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('purple_dark'),
-    hoverColor: color('white')
-  },
-  red: {
-    background: color('red'),
-    color: color('white'),
-    hoverBackground: color('red_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   teal: {
     background: color('teal'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('teal_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   teal_dark: {
     background: color('teal_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('teal'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   teal_light: {
     background: color('teal_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('teal_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   },
   transparent: {
     background: 'rgba(255, 255, 255, 0.5)',
@@ -164,42 +174,72 @@ const buttonColors = {
     hoverBackground: 'rgba(255, 255, 255, 0.7)',
     hoverColor: 'inherit'
   },
-  white: {
-    background: color('white'),
-    color: color('black'),
-    hoverBackground: color('grey'),
-    hoverColor: color('black')
-  },
   yellow: {
     background: color('yellow'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('yellow_light'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   yellow_dark: {
     background: color('yellow_dark'),
-    color: color('white'),
+    textColour: color('white'),
     hoverBackground: color('yellow'),
-    hoverColor: color('black')
+    hovertextColour: color('black')
   },
   yellow_light: {
     background: color('yellow_light'),
-    color: color('black'),
+    textColour: color('black'),
     hoverBackground: color('yellow_dark'),
-    hoverColor: color('white')
+    hovertextColour: color('white')
   }
 };
 
-export default colorName => {
+export default (colorName, buttonType) => {
   let style = 'inherit';
+
+  // Add a fallback, just in case someone is trying to use a non-existent colour:
+  const thisColourName = buttonColors[colorName] ? colorName : 'red';
+
   if (colorName) {
     style = css`
-      background-color: ${buttonColors[colorName].background};
-      color: ${buttonColors[colorName].color};
-      :hover {
-        background-color: ${buttonColors[colorName].hoverBackground};
-        color: ${buttonColors[colorName].hoverColor};
+      background-color: ${buttonColors[thisColourName].background};
+      color: ${buttonColors[thisColourName].textColour};
+
+      &:hover,
+      &:focus,
+      &:focus-within,
+      &:focus-visible {
+        background-color: ${buttonColors[thisColourName].hoverBackground};
+        color: ${buttonColors[thisColourName].hoverColor};
+        outline-offset: 3px;
       }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      // 'Secondary' and 'Tertiary' buttonType tweaks
+      ${({ theme }) => ((buttonType === theme.buttonTypes.SECONDARY || buttonType === theme.buttonTypes.TERTIARY) && css`
+        background-color: transparent;
+        color: ${buttonColors[thisColourName].background};
+
+        ${buttonType === theme.buttonTypes.SECONDARY && css`
+          box-shadow: 0px 0px 0px 2px ${buttonColors[thisColourName].background} inset;
+        `};
+
+        &:hover,
+        &:focus,
+        &:focus-within,
+        &:focus-visible {
+          color: ${buttonColors[thisColourName].hoverBackground};
+          background-color: transparent;
+
+          ${buttonType === theme.buttonTypes.SECONDARY && css`
+            box-shadow: 0px 0px 0px 2px ${buttonColors[thisColourName].hoverBackground} inset;
+          `};
+        }
+      `)};
     `;
   }
   return style;

package/src/theme/crTheme/buttonTypes.js

@@ -0,0 +1,7 @@
+const buttonTypes = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary'
+};
+
+export default buttonTypes;

package/src/theme/crTheme/colors.js

@@ -10,7 +10,7 @@
 
 const colors = {
 
-  /* CAMPAIGN COLOURS */
+  /* RND25 CAMPAIGN COLOURS */
   rnd_25_ruby_red: '#AE001B',
   rnd_25_glitzy_grape: '#A20C51',
   rnd_25_glitzy_blue: '#0F1953',
@@ -20,6 +20,19 @@ const colors = {
   rnd_25_party_blue: '#004EFF',
   rnd_25_party_lilac: '#B07FEA',
 
+  /* RND26 CAMPAIGN COLOURS */
+  rnd_26_dark_purple: '#7953E8',
+  rnd_26_deep_indigo: '#341A7E',
+  rnd_26_light_purple: '#BA9DFC',
+  rnd_26_teal: '#036D7C',
+  rnd_26_deep_teal: '#024042',
+  rnd_26_green: '#7FFB73',
+  rnd_26_magenta: '#A7268C',
+  rnd_26_deep_magenta: '#601151',
+  rnd_26_yellow: '#F8F440',
+  rnd_26_vibrant_pink: '#E948D5',
+  rnd_26_light_pink: '#FE80EB',
+
   /* GREYSCALE COLOURS */
   black: '#000000',
   white: '#FFFFFF',

package/src/theme/crTheme/fontConfig.js

@@ -137,10 +137,9 @@ export default {
       lineHeight: '1.375rem'
     }
   },
-  // To be used directly (not via fontHelper), but makes sense to keep here:
   button: {
     family: 'Montserrat',
-    weight: 400,
+    weight: 700,
     transform: 'inherit',
     small: {
       fontSize: '1rem',
@@ -155,8 +154,8 @@ export default {
       lineHeight: '1.375rem'
     }
   },
-  // Admittedly, while the same for each breakpoint, these 2
-  // config objects made sense to keep it here all the same.
+  // Admittedly, while these values are identical for each breakpoint,
+  // it still made sense to keep it here all here for parity:
   formFieldLabel: {
     family: 'Montserrat',
     weight: 400,

package/src/theme/crTheme/theme.js

@@ -1,5 +1,7 @@
 import color from './colors';
 import buttonColors from './buttonColors';
+import buttonTypes from './buttonTypes';
+
 import linkStyles from './linkStyles';
 import fontSize from './fontSizes';
 import allBreakpoints from '../shared/allBreakpoints';
@@ -10,6 +12,7 @@ import fontFamilies from '../shared/fontFamilies';
 export default {
   color,
   buttonColors,
+  buttonTypes,
   linkStyles,
   fontSize,
   allBreakpoints,