@comicrelief/component-library 7.35.10 → 7.37.0

package/src/components/Atoms/Icons/Internal.js

@@ -1,30 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTheme } from 'styled-components';
+import styled, { withTheme } from 'styled-components';
+
+const StyledSVG = styled.svg`
+  // Mobile-colour if available, else use standard prop
+  fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
+
+  // Reinstate standard styles for 'desktop', adding a fallback for good measure:
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
+  }
+`;
 
 const Internal = ({
-  colour, theme, size, ...rest
+  colour, mobileColour, theme, size, ...rest
 }) => (
-  <svg
+  <StyledSVG
     {...rest}
     width={size}
     height={size}
     fill={theme.color(colour)}
+    colour={colour}
+    mobileColour={mobileColour}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 96 96"
   >
     <path d="M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z" />
-  </svg>
+  </StyledSVG>
 );
 
 Internal.propTypes = {
   colour: PropTypes.string,
+  mobileColour: PropTypes.string,
   size: PropTypes.number,
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
 Internal.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 

package/src/components/Atoms/Link/Link.js

@@ -10,6 +10,7 @@ let window = '';
 const Link = ({
   children,
   color,
+  mobileColour,
   href,
   target,
   type,
@@ -54,6 +55,7 @@ const Link = ({
     <StyledLink
       {...rest}
       color={color}
+      mobileColour={mobileColour}
       href={href}
       target={window}
       type={type}
@@ -72,6 +74,7 @@ Link.propTypes = {
   type: PropTypes.oneOf(['button', 'standard', 'standard_white']),
   /** Color for button style link. See buttonColors in theme */
   color: PropTypes.string,
+  mobileColour: PropTypes.string,
   /** Link target */
   target: PropTypes.string,
   /** Set to true if link rel attribute should be home */
@@ -89,6 +92,7 @@ Link.propTypes = {
 Link.defaultProps = {
   type: 'standard',
   color: 'red',
+  mobileColour: null,
   target: null,
   home: false,
   underline: true,

package/src/components/Atoms/Link/Link.md

@@ -40,24 +40,26 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
   <div style={{ display: 'block', marginBottom: '10px' }}>
     <Link
       color="red"
+      mobileColour="blue"
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Internal colour="white" />}
+      icon={<Internal colour="white" mobileColour="red"/>}
     >
-      Internal link
+      Internal link, 'blue' with red icon on tablet and mobile
     </Link>
   </div>
 
   <div style={{ display: 'block', marginBottom: '10px' }}>
     <Link
-      color="red"
+      color="blue"
+      mobileColour="black"
       href="#anchor"
       target="blank"
       type="button"
-      icon={<External colour="white" />}
+      icon={<External colour="white" mobileColour="blue" />}
     >
-      External link
+      External link (black on mobile, blue on desktop)
     </Link>
   </div>
 
@@ -67,9 +69,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Download colour="white" />}
+      icon={<Download colour="white" mobileColour="blue" />}
     >
-      Download link
+      Download link (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -79,9 +81,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Favourite colour="white" />}
+      icon={<Favourite colour="white" mobileColour="blue" />}
     >
-      Favourite link
+      Favourite link (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -91,9 +93,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="up" colour="white" />}
+      icon={<Chevron direction="up" colour="white" mobileColour="blue" />}
     >
-      Chevron Up
+      Chevron Up (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -103,9 +105,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="down" colour="white" />}
+      icon={<Chevron direction="down" colour="white" mobileColour="blue" />}
     >
-      Chevron Down
+      Chevron Down (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -115,9 +117,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="left" colour="white" />}
+      icon={<Chevron direction="left" colour="white" mobileColour="blue" />}
     >
-      Chevron Left
+      Chevron Left (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -127,9 +129,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="right" colour="white" />}
+      icon={<Chevron direction="right" colour="white" mobileColour="blue" />}
     >
-      Chevron Right
+      Chevron Right (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -140,9 +142,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       target="blank"
       type="button"
       iconFirst
-      icon={<Arrow direction="left" colour="white" />}
+      icon={<Arrow direction="left" colour="white" mobileColour="blue" />}
     >
-      Arrow Left
+      Arrow Left (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -152,9 +154,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<AtSign />}
+      icon={<AtSign colour="white" mobileColour="blue" />}
     >
-      At Sign
+      At Sign (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 </div>;

package/src/components/Atoms/Link/Link.style.js

@@ -17,9 +17,18 @@ const buttonStyle = () => css`
   align-items: center;
   cursor: pointer;
   ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+
+  // Override with mobile-specific colours where available:
+  ${({ mobileColour, theme }) => (mobileColour ? theme.buttonColors(mobileColour) : null)};
+
   @media ${({ theme }) => theme.breakpoint('small')} {
     width: auto;
   }
+
+  // Reinstate general styles for 'desktop':
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+  }
 `;
 
 const linkStyle = () => css`

package/src/components/Atoms/Link/Link.test.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Link from './Link';
-import { Internal } from '../Icons/index';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Link from "./Link";
+import { Internal } from "../Icons/index";
 
-it('renders a standard styled link correctly', () => {
+it("renders a standard styled link correctly", () => {
   const tree = renderWithTheme(
     <Link href="/test" type="standard">
       A standard link
@@ -40,7 +40,7 @@ it('renders a standard styled link correctly', () => {
   `);
 });
 
-it('renders a button with an icon', () => {
+it("renders a button with an icon", () => {
   const tree = renderWithTheme(
     <Link
       href="/test"
@@ -85,6 +85,10 @@ it('renders a button with an icon', () => {
       border-bottom: 2px solid #000000;
     }
 
+    .c2 {
+      fill: #FFFFFF;
+    }
+
     @media (min-width:740px) {
       .c1 {
         width: auto;
@@ -97,6 +101,12 @@ it('renders a button with an icon', () => {
       }
     }
 
+    @media (min-width:1024px) {
+      .c2 {
+        fill: #FFFFFF;
+      }
+    }
+
     <a
       className="c0"
       color="red"
@@ -110,6 +120,7 @@ it('renders a button with an icon', () => {
         type="standard"
       >
         <svg
+          className="c2"
           fill="#FFFFFF"
           height={24}
           viewBox="0 0 96 96"
@@ -125,7 +136,7 @@ it('renders a button with an icon', () => {
   `);
 });
 
-it('renders a standard styled link correctly with target blank and assistive text', () => {
+it("renders a standard styled link correctly with target blank and assistive text", () => {
   const tree = renderWithTheme(
     <Link href="/test" type="standard" target="blank">
       A standard link
@@ -181,7 +192,7 @@ it('renders a standard styled link correctly with target blank and assistive tex
   `);
 });
 
-it('renders link styled as button correctly', () => {
+it("renders link styled as button correctly", () => {
   const tree = renderWithTheme(
     <Link href="/test" type="button" color="yellow">
       A yellow button
@@ -229,6 +240,18 @@ it('renders link styled as button correctly', () => {
       }
     }
 
+    @media (min-width:1024px) {
+      .c0 {
+        background-color: #FFE400;
+        color: #000000;
+      }
+
+      .c0:hover {
+        background-color: #FEFD5A;
+        color: #000000;
+      }
+    }
+
     <a
       className="c0"
       color="yellow"

package/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -20,6 +20,7 @@ exports[`renders correctly 1`] = `
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
+  fill: #000000;
 }
 
 .c0 {
@@ -88,6 +89,12 @@ exports[`renders correctly 1`] = `
   padding: 0 2rem;
 }
 
+@media (min-width:1024px) {
+  .c4 {
+    fill: #000000;
+  }
+}
+
 @media (min-width:740px) {
   .c1 {
     padding: 2rem 3rem;

package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -115,6 +115,10 @@ exports[`renders correctly 1`] = `
   z-index: 2;
 }
 
+.c9 {
+  fill: #FFFFFF;
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -129,6 +133,18 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c7 {
+    background-color: #E52630;
+    color: #FFFFFF;
+  }
+
+  .c7:hover {
+    background-color: #890B11;
+    color: #FFFFFF;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -189,6 +205,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c9 {
+    fill: #FFFFFF;
+  }
+}
+
 <div
   className="c0"
 >
@@ -246,6 +268,7 @@ exports[`renders correctly 1`] = `
         type="button"
       >
         <svg
+          className="c9"
           fill="#FFFFFF"
           height={24}
           viewBox="0 0 96 96"

package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -159,6 +159,18 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c9 {
+    background-color: #FFFFFF;
+    color: #000000;
+  }
+
+  .c9:hover {
+    background-color: #969598;
+    color: #000000;
+  }
+}
+
 @media (min-width:1024px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -425,6 +437,18 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c9 {
+    background-color: #FFFFFF;
+    color: #000000;
+  }
+
+  .c9:hover {
+    background-color: #969598;
+    color: #000000;
+  }
+}
+
 @media (min-width:1024px) {
   .c0 {
     -webkit-flex-direction: row;

package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -284,6 +284,18 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c8 {
+    background-color: #FFFFFF;
+    color: #000000;
+  }
+
+  .c8:hover {
+    background-color: #969598;
+    color: #000000;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -730,6 +742,18 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c8 {
+    background-color: #FFFFFF;
+    color: #000000;
+  }
+
+  .c8:hover {
+    background-color: #969598;
+    color: #000000;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -920,6 +944,10 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -1042,6 +1070,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -79,6 +79,10 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c13 {
+  fill: #FFFFFF;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -163,6 +167,24 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c11 {
+    background-color: #2042AD;
+    color: #FFFFFF;
+  }
+
+  .c11:hover {
+    background-color: #274084;
+    color: #FFFFFF;
+  }
+}
+
+@media (min-width:1024px) {
+  .c13 {
+    fill: #FFFFFF;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -298,6 +320,7 @@ exports[`renders correctly 1`] = `
           type="button"
         >
           <svg
+            className="c13"
             fill="#FFFFFF"
             height={24}
             viewBox="0 0 96 96"

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

@@ -1,18 +1,18 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import CookieBanner from './CookieBanner';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import CookieBanner from "./CookieBanner";
 
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = renderWithTheme(
     <CookieBanner
-      acceptCookie={e => {
+      acceptCookie={(e) => {
         e.preventDefault();
-        return 'User accept';
+        return "User accept";
       }}
-      denyCookie={e => {
+      denyCookie={(e) => {
         e.preventDefault();
-        return 'User does not accept cookies';
+        return "User does not accept cookies";
       }}
       cookiePolicyUrl="https://www.comicrelief.com/cookies-policy"
     />
@@ -119,6 +119,18 @@ it('renders correctly', () => {
       }
     }
 
+    @media (min-width:1024px) {
+      .c5 {
+        background-color: #FFFFFF;
+        color: #000000;
+      }
+
+      .c5:hover {
+        background-color: #969598;
+        color: #000000;
+      }
+    }
+
     @media (min-width:740px) {
       .c2 {
         width: 75%;

package/src/theme/crTheme/buttonColors.js

@@ -3,7 +3,7 @@ import color from './colors';
 
 const buttonColors = {
   black: {
-    background: color('grey_dark'),
+    background: color('black'),
     color: color('white'),
     hoverBackground: color('grey'),
     hoverColor: color('white')