@comicrelief/component-library 8.77.6 → 8.78.0

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

@@ -2,17 +2,19 @@
 
 exports[`Image banner left orientation renders correctly 1`] = `
 .c21 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
@@ -33,6 +35,7 @@ exports[`Image banner left orientation renders correctly 1`] = `
 .c21:focus-within,
 .c21:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -271,7 +274,6 @@ exports[`Image banner left orientation renders correctly 1`] = `
 
 .c20 button {
   width: 100%;
-  min-height: 48px;
 }
 
 @media (min-width: 740px) {
@@ -446,12 +448,6 @@ exports[`Image banner left orientation renders correctly 1`] = `
   }
 }
 
-@media (min-width: 740px) {
-  .c20 button {
-    padding: 1rem 2rem;
-  }
-}
-
 <div
   className="c0"
 >
@@ -646,17 +642,19 @@ exports[`Image banner left orientation renders correctly 1`] = `
 
 exports[`Image banner renders correctly 1`] = `
 .c21 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
@@ -677,6 +675,7 @@ exports[`Image banner renders correctly 1`] = `
 .c21:focus-within,
 .c21:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -915,7 +914,6 @@ exports[`Image banner renders correctly 1`] = `
 
 .c20 button {
   width: 100%;
-  min-height: 48px;
 }
 
 @media (min-width: 740px) {
@@ -1090,12 +1088,6 @@ exports[`Image banner renders correctly 1`] = `
   }
 }
 
-@media (min-width: 740px) {
-  .c20 button {
-    padding: 1rem 2rem;
-  }
-}
-
 <div
   className="c0"
 >
@@ -1290,17 +1282,19 @@ exports[`Image banner renders correctly 1`] = `
 
 exports[`Text-only email widget renders correctly 1`] = `
 .c21 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
@@ -1321,6 +1315,7 @@ exports[`Text-only email widget renders correctly 1`] = `
 .c21:focus-within,
 .c21:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -1559,7 +1554,6 @@ exports[`Text-only email widget renders correctly 1`] = `
 
 .c20 button {
   width: 100%;
-  min-height: 48px;
 }
 
 @media (min-width: 740px) {
@@ -1734,12 +1728,6 @@ exports[`Text-only email widget renders correctly 1`] = `
   }
 }
 
-@media (min-width: 740px) {
-  .c20 button {
-    padding: 1rem 2rem;
-  }
-}
-
 <div
   className="c0"
 >
@@ -1934,17 +1922,19 @@ exports[`Text-only email widget renders correctly 1`] = `
 
 exports[`Text-only email widget with copyColor renders correctly 1`] = `
 .c21 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
@@ -1965,6 +1955,7 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
 .c21:focus-within,
 .c21:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 
@@ -2203,7 +2194,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
 
 .c20 button {
   width: 100%;
-  min-height: 48px;
 }
 
 @media (min-width: 740px) {
@@ -2378,12 +2368,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
   }
 }
 
-@media (min-width: 740px) {
-  .c20 button {
-    padding: 1rem 2rem;
-  }
-}
-
 <div
   className="c0"
 >

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

@@ -2,17 +2,19 @@
 
 exports[`renders correctly 1`] = `
 .c15 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #E52630;
   color: #FFFFFF;
@@ -33,6 +35,7 @@ exports[`renders correctly 1`] = `
 .c15:focus-within,
 .c15:focus-visible {
   background-color: #890B11;
+  color: #FFFFFF;
   outline-offset: 3px;
 }
 

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

@@ -7,17 +7,19 @@ exports[`does not render copyright text when not supplied 1`] = `
 }
 
 .c23 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #FFFFFF;
   color: #000000;
@@ -38,6 +40,7 @@ exports[`does not render copyright text when not supplied 1`] = `
 .c23:focus-within,
 .c23:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 
@@ -305,6 +308,7 @@ exports[`does not render copyright text when not supplied 1`] = `
   border-radius: 0.5rem;
   overflow: hidden;
   min-width: max-content;
+  min-height: 2.25rem;
   width: 100%;
 }
 
@@ -1331,17 +1335,19 @@ exports[`renders correctly 1`] = `
 }
 
 .c23 {
+  --padding-top-and-bottom: 0.6rem;
   display: inline-flex;
   position: relative;
   text-decoration: none;
   transition: all 0.2s;
-  height: 2.5rem;
+  height: auto;
+  min-height: 3rem;
   width: 100%;
   justify-content: center;
   align-items: center;
   border: none;
   cursor: pointer;
-  padding: 0.6rem 1rem;
+  padding: var(--padding-top-and-bottom) 1rem;
   border-radius: 0.5rem;
   background-color: #FFFFFF;
   color: #000000;
@@ -1362,6 +1368,7 @@ exports[`renders correctly 1`] = `
 .c23:focus-within,
 .c23:focus-visible {
   background-color: #E1E2E3;
+  color: #000000;
   outline-offset: 3px;
 }
 
@@ -1629,6 +1636,7 @@ exports[`renders correctly 1`] = `
   border-radius: 0.5rem;
   overflow: hidden;
   min-width: max-content;
+  min-height: 2.25rem;
   width: 100%;
 }
 

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

@@ -4,21 +4,21 @@ import Link from '../../Atoms/Link/Link';
 
 const defaultCopyTop = (
   <div>
-    <Text tag="h3" size="m" family="Montserrat" weight="600" color="black">
+    <Text tag="h3">
       Stay up to date with Comic Relief?
     </Text>
-    <Text tag="p" size="md" color="black">
+    <Text tag="p">
       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="black">
+    <Text tag="p">
       Please tick the relevant boxes below if you would like to hear from us.
     </Text>
   </div>
 );
 
 const defaultCopyBottom = (
-  <Text tag="p" size="xs" color="black">
+  <Text tag="p" size="xs">
     Update your preferences at any time by visiting our
     {' '}
     <Link

package/src/components/Organisms/Membership/Membership.test.js

@@ -25,6 +25,20 @@ it('renders correctly', () => {
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
+.c1 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.c3 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
 .c6 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
@@ -175,20 +189,6 @@ it('renders correctly', () => {
   border: 1px solid #666;
 }
 
-.c1 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.c3 {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .c15 {
   display: block;
 }

package/src/data/data.js

@@ -342,9 +342,14 @@ const RichtextCarouselItemsWithPadding = {
   carouselBackgroundColour: 'grey_light'
 };
 
+const ButtonIconImgPath = 'https://images.ctfassets.net/zsfivwzfgl3t/4IlLxZnddkg1pHWZP3AZnA/447078df666932751c9c618a296f24db/Icon__Shelter.png';
+
+const ButtonIconSvgPath = 'https://images.ctfassets.net/0p265iutoxgq/3GaahqcCBaXrLBm5fu8HAj/d965a32d93fe82bf103c2f444e0bb9ec/Phone--white.svg';
+
 export {
   defaultData, mobileImages, testImpactSliderItems,
   carouselItemsComplete, carouselItemsCompleteWithPadding,
   carouselItemsIncomplete, carouselItemsMinimal,
-  RichtextCarouselItems, RichtextCarouselItemsWithPadding
+  RichtextCarouselItems, RichtextCarouselItemsWithPadding,
+  ButtonIconImgPath, ButtonIconSvgPath
 };

package/src/theme/crTheme/buttonColors.js

@@ -83,6 +83,7 @@ const buttonColors = {
     textColour: color('black'),
     hoverBackground: color('grey_light'),
     hovertextColour: color('black')
+
   },
   grey_dark: {
     background: color('grey_dark'),
@@ -155,6 +156,7 @@ const buttonColors = {
     textColour: color('black'),
     hoverBackground: color('teal_light'),
     hovertextColour: color('black')
+
   },
   teal_dark: {
     background: color('teal_dark'),
@@ -170,9 +172,9 @@ const buttonColors = {
   },
   transparent: {
     background: 'rgba(255, 255, 255, 0.5)',
-    color: 'inherit',
+    textColour: 'inherit',
     hoverBackground: 'rgba(255, 255, 255, 0.7)',
-    hoverColor: 'inherit'
+    hovertextColour: 'inherit'
   },
   yellow: {
     background: color('yellow'),
@@ -204,14 +206,22 @@ export default (colorName, buttonType) => {
     style = css`
       background-color: ${buttonColors[thisColourName].background};
       color: ${buttonColors[thisColourName].textColour};
-
+      
       &:hover,
       &:focus,
       &:focus-within,
       &:focus-visible {
         background-color: ${buttonColors[thisColourName].hoverBackground};
-        color: ${buttonColors[thisColourName].hoverColor};
+        color: ${buttonColors[thisColourName].hovertextColour};
         outline-offset: 3px;
+
+        // If there's a hover change for this button, update the icon accordingly:
+        ${buttonColors[thisColourName].textColour !== buttonColors[thisColourName].hovertextColour && css`
+          // Frustratingly, using IconWrapper styled-component directly here borks the styles :(
+          .icon-wrapper {
+            filter: invert(1);
+          }
+        `}
       }
 
       &:disabled {
@@ -235,6 +245,13 @@ export default (colorName, buttonType) => {
           color: ${buttonColors[thisColourName].hoverBackground};
           background-color: transparent;
 
+          // Slight tweak of logic and filter type to suit the Secondary and Tertiary buttons:
+          ${buttonColors[thisColourName].background !== buttonColors[thisColourName].hoverBackground && css`
+            .icon-wrapper {
+              filter: brightness(70%);
+            }
+          `}
+
           ${buttonType === theme.buttonTypes.SECONDARY && css`
             box-shadow: 0px 0px 0px 2px ${buttonColors[thisColourName].hoverBackground} inset;
           `};