@comicrelief/component-library 8.77.7 → 8.79.0

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

@@ -113,13 +113,6 @@ const ButtonWrapper = styled.div`
 
   button {
     width: 100%;
-    min-height: 48px;
-  }
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    button {
-      padding: ${spacing('md')} ${spacing('l')};
-    }
   }
 `;
 

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/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;
           `};

package/src/components/Atoms/Logos/assets/sr-gameon-logo.svg

@@ -1 +0,0 @@
-<svg id="LOGO" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.46 230.57"><defs><style>.cls-1{fill:#3a4972}.cls-2{fill:#e62731}.cls-3{fill:#fff}</style></defs><title>SR+IGO_LOGO_RGB</title><path class="cls-1" d="M239.92 32.69v55.36H227V32.69zM255.66 88.05V43.32h-10.55V32.69h34.19v10.63h-10.81v44.73zM284.58 32.69h12.56v10.63c0 7.56-3.95 10.9-12.56 11.16V48.6c3.78-.09 5.62-1.23 5.71-4.66h-5.71zM312.53 69.34v2.19c0 4.13 1.75 6.86 5.18 6.86 3 0 4.57-1.67 4.57-4.75s-2-4.39-5.36-6.24l-4.66-2.55c-5.88-3.25-11-7.2-11-16.69 0-9.85 6.41-16.17 15.9-16.17 10.11 0 15.91 5.8 15.91 17.13v2.2h-11.31V49c0-4.48-1.41-6.67-4.58-6.67-2.72 0-4.13 1.93-4.13 4.92 0 2.81 1.59 4.57 4.22 6l5.19 2.82c7.29 4 11.68 7.82 11.68 16.43 0 10.72-6.59 16.26-16.43 16.26s-16.52-5.45-16.52-17.32v-2.1zM377.39 88.05l-1-4.92c-1.4 3.78-5.36 5.63-9.75 5.63-11 0-15.64-8.7-15.64-24.61v-7.56c0-15.9 5.18-24.6 17.84-24.6S386 39.9 386 52.81v1.41h-12.56v-3.69c0-4.92-.79-8.09-4.57-8.09s-4.57 3.17-4.57 8.09V70c0 4.92 1.05 8.09 4.74 8.09s4.75-3.17 4.75-8.09v-.79h-4v-9.72H386v28.56zM417.3 32.69l11.95 55.36h-12.83l-1.85-9.84h-10.89l-1.94 9.84H390l11.95-55.36zm-11.78 35.77h7.3l-3.34-18.28h-.35zM455.89 60.81h.35l5.27-28.12h16.26v55.36h-11.95V56.51h-.35l-6.07 31.54h-8.08l-6.24-31.54h-.35v31.54h-11.34V32.69H450zM511.88 88.05h-28V32.69h28v10.63H496.5v11.34h11.42v10.55H496.5v12.21h15.38zM256.36 223.11a65.22 65.22 0 0 1-35.71-59.33 65.22 65.22 0 0 1 35.71-59.32q16.74-8.74 37.75-8.74t37.75 8.74a65.22 65.22 0 0 1 35.71 59.32 65.22 65.22 0 0 1-35.71 59.33q-16.74 8.73-37.75 8.74t-37.75-8.74zm52.54-30.78A28.53 28.53 0 0 0 319.4 181a36.07 36.07 0 0 0 3.91-17.21 36.08 36.08 0 0 0-3.91-17.2 28.66 28.66 0 0 0-10.5-11.34 29.32 29.32 0 0 0-29.57 0 28.68 28.68 0 0 0-10.51 11.34 36.2 36.2 0 0 0-3.91 17.2 36.18 36.18 0 0 0 3.91 17.21 28.55 28.55 0 0 0 10.51 11.34 29.32 29.32 0 0 0 29.57 0zM511.88 98.7v130.17H475.8l-49.47-59.13v59.13h-42.77V98.7h36.08l49.47 59.13V98.7z" transform="translate(-1.42 -1.42)"/><path class="cls-2" d="M230.22 96.69A115.27 115.27 0 1 1 96.69 3.19a115.27 115.27 0 0 1 133.53 93.5" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M45.32 109.66l.33 1.91c.64 3.59 2.58 5.69 5.56 5.16 2.6-.45 3.72-2.15 3.25-4.82s-2.43-3.51-5.62-4.6l-4.44-1.51c-5.62-1.92-10.65-4.58-12.11-12.83-1.51-8.55 3.1-15 11.35-16.49 8.79-1.55 14.72 2.6 16.45 12.46l.34 1.91-9.85 1.73-.35-2c-.69-3.9-2.25-5.59-5-5.11-2.37.42-3.3 2.32-2.84 4.91S44.47 94.13 47 95l4.93 1.65c7 2.32 11.36 5 12.68 12.5 1.65 9.32-3.23 15.14-11.79 16.65s-15.2-2.2-17-12.52l-.32-1.83zM80.58 120.22l-11.16 2-8.48-48.16 13.6-2.4C85.08 69.8 91.07 74.73 92.89 85s-2.11 17.12-12.66 19l-2.44.43zm-3.25-25.11C82 94.29 83 92.23 82.05 87s-2.56-7-7.22-6.13l-1.15.21 2.51 14.21zM127.59 90.19c2.44 13.83-.53 22.47-11.76 24.45s-17-5.12-19.41-19l-1-6c-2.44-13.83.52-22.47 11.76-24.45s17 5.12 19.41 19zM109 99.06c.75 4.28 2 7.06 5.23 6.48s3.47-3.6 2.71-7.88l-3-16.8c-.76-4.28-2-7.07-5.24-6.49s-3.43 3.63-2.7 7.89zM152.39 107.56c-.93-1.73-1.58-4.53-2.91-10.28-1-4.54-2.61-6.71-6.12-6.09l-1.45.26 3.09 17.42-11.08 1.95-8.48-48.13 13.82-2.44c10.78-1.9 16.59 2.9 18.09 11.46 1.34 7.56-1.44 11.91-6.18 13.62 5.24.25 7.56 3.55 9 9.52 1.5 6.27 1.86 8.73 3.32 10.76zm-11-25.16c4.5-.8 6-2.56 5.14-7.45-.77-4.35-2.9-6.18-7.41-5.39l-1.07.19 2.27 12.83zM173.55 103.83l-6.85-38.89-9.17 1.62-1.63-9.25 29.72-5.24 1.63 9.25-9.4 1.68 6.86 38.89zM67.46 178.49c-.94-1.72-1.59-4.52-2.92-10.27-1-4.55-2.6-6.71-6.11-6.09l-1.45.25 3.07 17.42L49 181.75l-8.49-48.13 13.83-2.43c10.77-1.9 16.58 2.9 18.09 11.46 1.33 7.56-1.44 11.91-6.18 13.61 5.24.26 7.55 3.55 9 9.52 1.5 6.28 1.85 8.73 3.32 10.76zm-11-25.16c4.51-.79 6-2.55 5.15-7.44-.77-4.36-2.9-6.19-7.41-5.39l-1.07.19 2.26 12.83zM105.35 171.81L81 176.11 72.49 128l24.37-4.3 1.63 9.25-13.37 2.35 1.74 9.86 9.93-1.75 1.62 9.17-9.93 1.75 1.87 10.62 13.37-2.36zM111 121.19l6.85 38.89 13-2.29 1.63 9.24-24.22 4.27-8.48-48.13zM137.81 116.46l8.49 48.13-11.23 2-8.49-48.13zM174 159.7l-24.34 4.3-8.49-48.13 24.38-4.3 1.63 9.25-13.37 2.35 1.73 9.86 9.94-1.75 1.61 9.17-9.93 1.75 1.84 10.62 13.37-2.36zM176.94 159.19l-8.49-48.13 23.45-4.14 1.63 9.25-12.22 2.15 2 11.16 8.93-1.58 1.61 9.09-8.94 1.58 3.29 18.64z" transform="translate(-1.42 -1.42)"/></svg>