@comicrelief/component-library 7.35.10 → 7.37.0

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

@@ -6,14 +6,14 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Link = _interopRequireDefault(require("./Link"));
 var _index = require("../Icons/index");
-it('renders a standard styled link correctly', () => {
+it("renders a standard styled link correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard"
   }, "A standard link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      A standard link\n    </a>\n  ");
 });
-it('renders a button with an icon', () => {
+it("renders a button with an icon", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard",
@@ -22,9 +22,9 @@ it('renders a button with an icon', () => {
       colour: "white"
     })
   }, "Internal link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      margin-left: 1rem;\n      -webkit-align-self: center;\n      -ms-flex-item-align: center;\n      align-self: center;\n      right: 1.5rem;\n      position: absolute;\n      right: -2rem;\n      top: 0;\n      bottom: 0;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    @media (min-width:740px) {\n      .c1 {\n        width: auto;\n        right: auto;\n        position: relative;\n        position: absolute;\n        right: -2rem;\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      Internal link\n      <span\n        className=\"c1\"\n        type=\"standard\"\n      >\n        <svg\n          fill=\"#FFFFFF\"\n          height={24}\n          viewBox=\"0 0 96 96\"\n          width={24}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            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\"\n          />\n        </svg>\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      margin-left: 1rem;\n      -webkit-align-self: center;\n      -ms-flex-item-align: center;\n      align-self: center;\n      right: 1.5rem;\n      position: absolute;\n      right: -2rem;\n      top: 0;\n      bottom: 0;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c2 {\n      fill: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c1 {\n        width: auto;\n        right: auto;\n        position: relative;\n        position: absolute;\n        right: -2rem;\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        fill: #FFFFFF;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      Internal link\n      <span\n        className=\"c1\"\n        type=\"standard\"\n      >\n        <svg\n          className=\"c2\"\n          fill=\"#FFFFFF\"\n          height={24}\n          viewBox=\"0 0 96 96\"\n          width={24}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            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\"\n          />\n        </svg>\n      </span>\n    </a>\n  ");
 });
-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 = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard",
@@ -32,11 +32,11 @@ it('renders a standard styled link correctly with target blank and assistive tex
   }, "A standard link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c1 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_blank\"\n      type=\"standard\"\n    >\n      A standard link\n      <span\n        className=\"c1\"\n      >\n        (opens in new window)\n      </span>\n    </a>\n  ");
 });
-it('renders link styled as button correctly', () => {
+it("renders link styled as button correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "button",
     color: "yellow"
   }, "A yellow button")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFE400;\n      color: #000000;\n    }\n\n    .c0:hover {\n      background-color: #FEFD5A;\n      color: #000000;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"yellow\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"button\"\n    >\n      A yellow button\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFE400;\n      color: #000000;\n    }\n\n    .c0:hover {\n      background-color: #FEFD5A;\n      color: #000000;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        background-color: #FFE400;\n        color: #000000;\n      }\n\n      .c0:hover {\n        background-color: #FEFD5A;\n        color: #000000;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"yellow\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"button\"\n    >\n      A yellow button\n    </a>\n  ");
 });

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -5,17 +5,17 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _CookieBanner = _interopRequireDefault(require("./CookieBanner"));
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CookieBanner.default, {
     acceptCookie: e => {
       e.preventDefault();
-      return 'User accept';
+      return "User accept";
     },
     denyCookie: e => {
       e.preventDefault();
-      return 'User does not accept cookies';
+      return "User does not accept cookies";
     },
     cookiePolicyUrl: "https://www.comicrelief.com/cookies-policy"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      color: #FFFFFF;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      font-weight: normal;\n    }\n\n    .c3:hover {\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n    }\n\n    .c5 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFFFFF;\n      color: #000000;\n    }\n\n    .c5:hover {\n      background-color: #969598;\n      color: #000000;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      position: relative;\n      padding: 1rem;\n      background: #2C0230;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      z-index: 3;\n    }\n\n    .c2 {\n      line-height: 1.5;\n      margin: 0;\n    }\n\n    .c2:first-of-type {\n      margin-bottom: 0.5rem;\n    }\n\n    .c6 {\n      padding: 0.5rem 1rem;\n      display: block;\n      margin-bottom: 10px;\n    }\n\n    .c4 {\n      color: #FFFFFF;\n      padding: 0 0.25rem 1px;\n      border-bottom: 2px solid;\n    }\n\n    @media (min-width:740px) {\n      .c5 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        width: 75%;\n        margin: 0 auto;\n      }\n\n      .c2:first-of-type {\n        margin-bottom: 1rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        margin: 0 0.25rem 0 0;\n        display: inline-block;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"https://www.comicrelief.com/cookies-policy\"\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          our use of cookies\n        </a>\n        . We also use optional cookies for marketing purposes:\n      </p>\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        <a\n          className=\"c5 c6\"\n          color=\"white\"\n          href=\"/comic\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"button\"\n        >\n          Accept\n        </a>\n        Or click\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          here\n        </a>\n        to deny these.\n      </p>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      color: #FFFFFF;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n      font-weight: normal;\n    }\n\n    .c3:hover {\n      color: #FFFFFF;\n      border-bottom: 2px solid #FFFFFF;\n    }\n\n    .c5 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFFFFF;\n      color: #000000;\n    }\n\n    .c5:hover {\n      background-color: #969598;\n      color: #000000;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      position: relative;\n      padding: 1rem;\n      background: #2C0230;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      z-index: 3;\n    }\n\n    .c2 {\n      line-height: 1.5;\n      margin: 0;\n    }\n\n    .c2:first-of-type {\n      margin-bottom: 0.5rem;\n    }\n\n    .c6 {\n      padding: 0.5rem 1rem;\n      display: block;\n      margin-bottom: 10px;\n    }\n\n    .c4 {\n      color: #FFFFFF;\n      padding: 0 0.25rem 1px;\n      border-bottom: 2px solid;\n    }\n\n    @media (min-width:740px) {\n      .c5 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c5 {\n        background-color: #FFFFFF;\n        color: #000000;\n      }\n\n      .c5:hover {\n        background-color: #969598;\n        color: #000000;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        width: 75%;\n        margin: 0 auto;\n      }\n\n      .c2:first-of-type {\n        margin-bottom: 1rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        margin: 0 0.25rem 0 0;\n        display: inline-block;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"https://www.comicrelief.com/cookies-policy\"\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          our use of cookies\n        </a>\n        . We also use optional cookies for marketing purposes:\n      </p>\n      <p\n        className=\"c1 c2\"\n        color=\"white\"\n        size=\"s\"\n      >\n        <a\n          className=\"c5 c6\"\n          color=\"white\"\n          href=\"/comic\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"button\"\n        >\n          Accept\n        </a>\n        Or click\n        <a\n          className=\"c3 c4\"\n          color=\"red\"\n          href=\"\"\n          onClick={[Function]}\n          target=\"_self\"\n          type=\"standard_white\"\n        >\n          here\n        </a>\n        to deny these.\n      </p>\n    </div>\n  ");
 });

package/dist/theme/crTheme/buttonColors.js

@@ -9,7 +9,7 @@ var _styledComponents = require("styled-components");
 var _colors = _interopRequireDefault(require("./colors"));
 const buttonColors = {
   black: {
-    background: (0, _colors.default)('grey_dark'),
+    background: (0, _colors.default)('black'),
     color: (0, _colors.default)('white'),
     hoverBackground: (0, _colors.default)('grey'),
     hoverColor: (0, _colors.default)('white')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.35.10",
+  "version": "7.37.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -11,16 +11,25 @@ const angle = {
 
 const Icon = styled.svg`
   transform: ${({ direction }) => `rotate(${angle[direction]})`};
+
+  // 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 Arrow = ({
-  colour, theme, size, direction, ...rest
+  colour, mobileColour, theme, size, direction, ...rest
 }) => (
   <Icon
     direction={direction}
     width={size}
     height={size}
-    fill={theme.color(colour)}
+    colour={colour}
+    mobileColour={mobileColour}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 96 96"
     {...rest}
@@ -31,6 +40,7 @@ const Arrow = ({
 
 Arrow.propTypes = {
   colour: PropTypes.string,
+  mobileColour: PropTypes.string,
   size: PropTypes.number,
   direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
@@ -38,6 +48,7 @@ Arrow.propTypes = {
 
 Arrow.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24,
   direction: 'up'
 };

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

@@ -1,32 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTheme } from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 
 const PATH_DATA = 'M40.811,9.307C36.607,4.664,30.48,2,24,2C11.458,2,2,11.458,2,24s9.458,22,22,22c10.221,0,14.032-3.779,15.29-5.031 c0.197-0.115,0.379-0.265,0.533-0.451c0.707-0.849,0.592-2.11-0.257-2.817c-0.438-0.362-1.61-1.049-3.093,0.427 C35.512,39.086,32.585,42,24,42C13.738,42,6,34.262,6,24S13.738,6,24,6c5.353,0,10.398,2.184,13.845,5.991 c3.162,3.495,4.642,8.044,4.165,12.81c-0.364,3.641-1.958,6.013-4.487,6.677c-1.853,0.487-3.658-0.145-4.269-1.011 c-1.001-1.422-0.753-4.747,0.009-8.237c1.035-3.375,2.104-6.939,2.177-7.179c0.308-1.027-0.249-2.114-1.263-2.465 c-1.012-0.349-2.122,0.161-2.515,1.159c-0.097,0.247-0.191,0.491-0.282,0.732c-1.427-1.455-3.424-2.421-5.724-2.66 c-3.983-0.41-9.547,1.602-12.107,8.643c-1.334,3.667-1.19,7.467,0.384,10.163c1.241,2.126,3.291,3.482,5.929,3.921 c4.299,0.714,7.438-0.837,9.464-3.098c0.254,0.695,0.516,1.122,0.659,1.325c1.66,2.358,5.257,3.443,8.555,2.576 c1.987-0.522,6.691-2.557,7.451-10.147C46.581,19.295,44.741,13.651,40.811,9.307z M37.871,41.195 c-0.149-0.03-0.3-0.081-0.448-0.152C37.567,41.112,37.718,41.163,37.871,41.195z M29.195,21.849 c-0.554,1.799-1.07,3.451-1.379,4.375c-0.413,1.243-2.174,5.229-7.297,4.374c-1.468-0.245-2.493-0.896-3.133-1.993 c-0.967-1.657-0.997-4.254-0.078-6.779c1.633-4.492,4.727-6.064,7.296-6.064c0.217,0,0.431,0.011,0.639,0.033 c1.952,0.203,4.068,1.433,4.396,3.726c0.01,0.074,0.024,0.146,0.043,0.217C29.49,20.479,29.329,21.181,29.195,21.849z';
 
+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 AtSign = ({
-  theme, size, colour, ...rest
+  theme, size, colour, mobileColour, ...rest
 }) => (
-  <svg
+  <StyledSVG
     width={size}
     height={size}
-    fill={theme.color(colour)}
+    colour={colour}
+    mobileColour={mobileColour}
     viewBox="0 0 48 48"
     {...rest}
   >
     <path d={PATH_DATA} />
-  </svg>
+  </StyledSVG>
 );
 
 AtSign.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired,
   size: PropTypes.number,
-  colour: PropTypes.string
+  colour: PropTypes.string,
+  mobileColour: PropTypes.string
 };
 
 AtSign.defaultProps = {
   size: 24,
-  colour: 'white'
+  colour: 'white',
+  mobileColour: null
 };
 
 export default withTheme(AtSign);

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

@@ -11,16 +11,26 @@ const angle = {
 
 const Icon = styled.svg`
   transform: ${({ direction }) => `rotate(${angle[direction]})`};
+
+  // 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 Chevron = ({
-  colour, theme, size, direction, ...rest
+  colour, mobileColour, theme, size, direction, ...rest
 }) => (
   <Icon
     direction={direction}
     width={size}
     height={size}
     fill={theme.color(colour)}
+    colour={colour}
+    mobileColour={mobileColour}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     {...rest}
@@ -31,6 +41,7 @@ const Chevron = ({
 
 Chevron.propTypes = {
   colour: PropTypes.string,
+  mobileColour: PropTypes.string,
   size: PropTypes.number,
   direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
@@ -38,6 +49,7 @@ Chevron.propTypes = {
 
 Chevron.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24,
   direction: 'up'
 };

package/src/components/Atoms/Icons/Download.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 Download = ({
-  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="M17.171 38.829a4 4 0 015.657-5.657L44 54.343V8a4 4 0 018 0v46.343l21.172-21.172a4 4 0 115.656 5.657l-28 28-.005.004a3.976 3.976 0 01-.604.493c-.101.068-.211.115-.317.172-.123.067-.241.141-.372.195-.133.055-.273.087-.41.127-.113.033-.22.077-.337.1a3.89 3.89 0 01-1.566.002c-.116-.023-.224-.067-.336-.1-.138-.04-.277-.072-.411-.128-.13-.054-.248-.128-.37-.195-.106-.058-.216-.105-.318-.173a4.037 4.037 0 01-.604-.493l-.005-.004-28.002-27.999zM84 68a4 4 0 00-4 4v12H16V72a4 4 0 00-8 0v16a4 4 0 004 4h72a4 4 0 004-4V72a4 4 0 00-4-4z" />
-  </svg>
+  </StyledSVG>
 );
 
 Download.propTypes = {
   colour: PropTypes.string,
+  mobileColour: PropTypes.string,
   size: PropTypes.number,
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
 Download.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 

package/src/components/Atoms/Icons/External.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 External = ({
-  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="M92 8.001V48a4 4 0 01-8 0V17.657L50.899 50.758c-.781.781-1.805 1.171-2.829 1.171s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 12H48a4 4 0 010-8h40c.016 0 .032.005.048.005.246.003.492.026.734.074.121.024.233.069.35.104.133.039.268.07.397.123.132.055.253.13.377.198.104.057.212.103.312.169.201.134.386.289.559.456.016.016.035.026.051.042.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.327.052.259.08.522.08.785zM72 68a4 4 0 00-4 4v12H12V28h12a4 4 0 000-8H8a4 4 0 00-4 4v64a4 4 0 004 4h64a4 4 0 004-4V72a4 4 0 00-4-4z" />
-  </svg>
+  </StyledSVG>
 );
 
 External.propTypes = {
   colour: PropTypes.string,
+  mobileColour: PropTypes.string,
   size: PropTypes.number,
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
 External.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 

package/src/components/Atoms/Icons/Favourite.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 Favourite = ({
-  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="M74.295 8.47C64.301 6.55 54.06 10.592 48 18.198 41.94 10.592 31.698 6.55 21.705 8.47 12.179 10.304 2 18.229 2 34.973 2 52.345 19.988 67.357 34.442 79.42c4.113 3.432 7.997 6.674 10.729 9.407l.001.001.001.001c.091.091.196.159.294.24.111.092.216.195.333.272.095.063.199.103.298.157.132.072.26.153.397.209.142.058.291.089.438.13.102.028.2.07.303.09a4.003 4.003 0 001.528 0l.012-.003c.5-.098.985-.292 1.426-.583l.021-.017c.213-.143.417-.306.605-.494l.001-.001.001-.001c2.732-2.733 6.616-5.975 10.729-9.407C76.012 67.357 94 52.345 94 34.973 94 18.229 83.821 10.304 74.295 8.47zM56.432 73.278c-3.029 2.528-5.93 4.952-8.432 7.219-2.502-2.267-5.403-4.692-8.432-7.219C27.09 62.864 10 48.602 10 34.973c0-14.534 9.243-17.882 13.216-18.647 7.468-1.438 17.384 1.981 21.047 11.146a3.987 3.987 0 003.017 2.443c.065.012.129.014.193.023.175.023.35.043.528.042.17.001.336-.019.502-.04.073-.01.146-.012.219-.026a3.99 3.99 0 003.014-2.442c3.663-9.165 13.578-12.584 21.047-11.146C76.757 17.091 86 20.439 86 34.973c0 13.629-17.09 27.891-29.568 38.305z" />
-  </svg>
+  </StyledSVG>
 );
 
 Favourite.propTypes = {
   colour: PropTypes.string,
+  mobileColour: PropTypes.string,
   size: PropTypes.number,
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
 Favourite.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };