@comicrelief/component-library 7.35.9 → 7.36.0

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

@@ -15,6 +15,7 @@ const Link = _ref => {
   let {
     children,
     color,
+    mobileColour,
     href,
     target,
     type,
@@ -54,6 +55,7 @@ const Link = _ref => {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_Link.default, Object.assign({}, rest, {
     color: color,
+    mobileColour: mobileColour,
     href: href,
     target: window,
     type: type,
@@ -66,6 +68,7 @@ const Link = _ref => {
 Link.defaultProps = {
   type: 'standard',
   color: 'red',
+  mobileColour: null,
   target: null,
   home: false,
   underline: true,

package/dist/components/Atoms/Link/Link.md

@@ -40,12 +40,13 @@ 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" />}
     >
-      Internal link
+      Internal link, 'blue' on tablet and mobile
     </Link>
   </div>
 

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

@@ -9,7 +9,7 @@ exports.default = exports.IconWrapper = exports.HelperText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";@media ", "{width:auto;}"], _ref => {
+const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";", ";@media ", "{width:auto;}@media ", "{", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -22,49 +22,66 @@ const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;posit
   return color ? theme.buttonColors(color) : theme.buttonColors('red');
 }, _ref3 => {
   let {
+    mobileColour,
     theme
   } = _ref3;
+  return mobileColour ? theme.buttonColors(mobileColour) : null;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoint('medium');
+}, _ref6 => {
+  let {
+    color,
+    theme
+  } = _ref6;
+  return color ? theme.buttonColors(color) : theme.buttonColors('red');
 });
-const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref4 => {
+const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref7 => {
   let {
     theme
-  } = _ref4;
+  } = _ref7;
   return theme.fontSize('l');
-}, _ref5 => {
+}, _ref8 => {
   let {
     type,
     theme,
     underline
-  } = _ref5;
+  } = _ref8;
   return type ? theme.linkStyles(type, underline) : theme.linkStyles('standard', underline);
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__IconWrapper",
   componentId: "sc-t360tr-0"
-})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref6 => {
+})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref9 => {
   let {
     type
-  } = _ref6;
+  } = _ref9;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
-}, _ref7 => {
+}, _ref10 => {
   let {
     theme
-  } = _ref7;
+  } = _ref10;
   return theme.breakpoint('small');
-}, _ref8 => {
+}, _ref11 => {
   let {
     type
-  } = _ref8;
+  } = _ref11;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
 });
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "sc-t360tr-1"
-})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref9 => {
+})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref12 => {
   let {
     iconFirst
-  } = _ref9;
+  } = _ref12;
   return iconFirst && (0, _styledComponents.css)(["flex-direction:row-reverse;span[type=\"button\"]{margin-left:0;margin-right:1rem;}"]);
 });
 const HelperText = exports.HelperText = _styledComponents.default.span.withConfig({

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",
@@ -24,7 +24,7 @@ it('renders a button with an icon', () => {
   }, "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  ");
 });
-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/CardDs/__snapshots__/CardDs.test.js.snap

@@ -129,6 +129,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;

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

@@ -163,6 +163,18 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c11 {
+    background-color: #2042AD;
+    color: #FFFFFF;
+  }
+
+  .c11:hover {
+    background-color: #274084;
+    color: #FFFFFF;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

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/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -83,7 +83,7 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
 const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
   displayName: "WYMDCarouselstyle__CarouselWrapper",
   componentId: "sc-115z54p-6"
-})(["height:100%;background-color:", ";max-width:760px;padding:", ";margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-222% - 6px);transform:scale(0.5);width:300%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}@media ", "{&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-187% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref9 => {
+})(["height:100%;background-color:", ";max-width:760px;padding:", ";margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-222% - 6px);transform:scale(0.5);width:300%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}@media ", "{padding-bottom:", "px !important;&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-187% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref9 => {
   let {
     theme
   } = _ref9;
@@ -103,19 +103,9 @@ const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.
     theme
   } = _ref12;
   return theme.breakpoint('small');
-}, props => props.tabletHeight, _ref13 => {
+}, props => props.tabletHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.breakpoint('medium');
-}, props => props.tabletHeight, _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.breakpoint('small');
-}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.breakpoint('medium');
-});
+}, props => props.desktopHeight);

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js

@@ -12,5 +12,5 @@ it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_WYMDCarousel.default, {
     data: carouselItemsComplete
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      color: #E52630;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c5 {\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    .c2 {\n      width: 75%;\n      margin: 0 auto;\n    }\n\n    .c2:first-child {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 16px;\n      line-height: 19.5px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 34px;\n      line-height: 37px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 12px;\n      line-height: 14.63px;\n    }\n\n    .c0 {\n      height: 100%;\n      background-color: #FFFFFF;\n      max-width: 760px;\n      padding: 2rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n    }\n\n    .c0 .carousel {\n      position: relative;\n      margin: 0 auto;\n      padding-top: 2rem;\n    }\n\n    .c0 .carousel button.carousel__back-button,\n    .c0 .carousel button.carousel__next-button {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 33% !important;\n      height: 100%;\n      padding: 0 !important;\n      box-shadow: none;\n      text-indent: -9999px;\n      background-color: transparent;\n      border: none;\n    }\n\n    .c0 .carousel button.carousel__back-button:after,\n    .c0 .carousel button.carousel__next-button:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      -webkit-transition: opacity 0.2s linear;\n      transition: opacity 0.2s linear;\n      background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel button.carousel__back-button:hover:after,\n    .c0 .carousel button.carousel__next-button:hover:after {\n      opacity: 0.5;\n    }\n\n    .c0 .carousel button.carousel__next-button {\n      left: auto;\n      right: 0;\n    }\n\n    .c0 .carousel button.carousel__next-button:before {\n      -webkit-transform: translate(0,-50%) rotate(-90deg);\n      -ms-transform: translate(0,-50%) rotate(-90deg);\n      transform: translate(0,-50%) rotate(-90deg);\n    }\n\n    .c0 .carousel button.carousel__next-button:after {\n      left: auto;\n      right: 0;\n      background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel .wymd-carousel {\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\n      will-change: transform;\n    }\n\n    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide {\n      padding-bottom: 450px !important;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n      text-align: center;\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    @media (min-width:1024px) {\n      .c2:first-child {\n        font-size: 20px;\n        line-height: 24.38px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        font-size: 60px;\n        line-height: 60px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        font-size: 64px;\n        line-height: 68px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 17px;\n        line-height: 19px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel {\n        padding-top: 2rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel button.carousel__back-button,\n      .c0 .carousel button.carousel__next-button {\n        width: 33.3% !important;\n      }\n\n      .c0 .carousel button.carousel__back-button:after,\n      .c0 .carousel button.carousel__next-button:after {\n        width: 100%;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 475px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: top;\n        -ms-transform-origin: top;\n        transform-origin: top;\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-222% - 6px);\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(0) scale(1);\n        -ms-transform: translateY(0) scale(1);\n        transform: translateY(0) scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-187% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"7zdR84QkZwrTh9NWx2H926\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        Over the past two years, we\u2019ve supported\n      </p>\n      <h1\n        className=\"c3 c4\"\n        color=\"red\"\n        size=\"s\"\n      >\n        11.7 million people\n      </h1>\n      <p\n        className=\"c5 c6\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        including...\n      </p>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      color: #E52630;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c5 {\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    .c2 {\n      width: 75%;\n      margin: 0 auto;\n    }\n\n    .c2:first-child {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 16px;\n      line-height: 19.5px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 34px;\n      line-height: 37px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 12px;\n      line-height: 14.63px;\n    }\n\n    .c0 {\n      height: 100%;\n      background-color: #FFFFFF;\n      max-width: 760px;\n      padding: 2rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n    }\n\n    .c0 .carousel {\n      position: relative;\n      margin: 0 auto;\n      padding-top: 2rem;\n    }\n\n    .c0 .carousel button.carousel__back-button,\n    .c0 .carousel button.carousel__next-button {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 33% !important;\n      height: 100%;\n      padding: 0 !important;\n      box-shadow: none;\n      text-indent: -9999px;\n      background-color: transparent;\n      border: none;\n    }\n\n    .c0 .carousel button.carousel__back-button:after,\n    .c0 .carousel button.carousel__next-button:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      -webkit-transition: opacity 0.2s linear;\n      transition: opacity 0.2s linear;\n      background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel button.carousel__back-button:hover:after,\n    .c0 .carousel button.carousel__next-button:hover:after {\n      opacity: 0.5;\n    }\n\n    .c0 .carousel button.carousel__next-button {\n      left: auto;\n      right: 0;\n    }\n\n    .c0 .carousel button.carousel__next-button:before {\n      -webkit-transform: translate(0,-50%) rotate(-90deg);\n      -ms-transform: translate(0,-50%) rotate(-90deg);\n      transform: translate(0,-50%) rotate(-90deg);\n    }\n\n    .c0 .carousel button.carousel__next-button:after {\n      left: auto;\n      right: 0;\n      background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel .wymd-carousel {\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\n      will-change: transform;\n    }\n\n    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide {\n      padding-bottom: 425px !important;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n      text-align: center;\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    @media (min-width:1024px) {\n      .c2:first-child {\n        font-size: 20px;\n        line-height: 24.38px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        font-size: 60px;\n        line-height: 60px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        font-size: 64px;\n        line-height: 68px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 17px;\n        line-height: 19px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel {\n        padding-top: 2rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel button.carousel__back-button,\n      .c0 .carousel button.carousel__next-button {\n        width: 33.3% !important;\n      }\n\n      .c0 .carousel button.carousel__back-button:after,\n      .c0 .carousel button.carousel__next-button:after {\n        width: 100%;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 450px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: top;\n        -ms-transform-origin: top;\n        transform-origin: top;\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-222% - 6px);\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(0) scale(1);\n        -ms-transform: translateY(0) scale(1);\n        transform: translateY(0) scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 475px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-187% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"7zdR84QkZwrTh9NWx2H926\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        Over the past two years, we\u2019ve supported\n      </p>\n      <h1\n        className=\"c3 c4\"\n        color=\"red\"\n        size=\"s\"\n      >\n        11.7 million people\n      </h1>\n      <p\n        className=\"c5 c6\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        including...\n      </p>\n    </div>\n  ");
 });

package/dist/styleguide/data/data.js

@@ -43,8 +43,8 @@ const testImpactSliderItems = exports.testImpactSliderItems = [{
 const carouselItemsComplete = exports.carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 450,
-  tabletHeight: 500,
+  mobileHeight: 425,
+  tabletHeight: 450,
   desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',

package/package.json

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

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,12 +40,13 @@ 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" />}
     >
-      Internal link
+      Internal link, 'blue' on tablet and mobile
     </Link>
   </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"
@@ -125,7 +125,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 +181,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 +229,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/CardDs/__snapshots__/CardDs.test.js.snap

@@ -129,6 +129,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;

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

@@ -163,6 +163,18 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c11 {
+    background-color: #2042AD;
+    color: #FFFFFF;
+  }
+
+  .c11:hover {
+    background-color: #274084;
+    color: #FFFFFF;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

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/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -161,7 +161,6 @@ const CarouselWrapper = styled.div`
         rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
       }
 
-
       &:hover {
         &:after {
           opacity: 0.5;
@@ -207,18 +206,13 @@ const CarouselWrapper = styled.div`
       }
       
       .carousel__slide {
+        // 'Mobile'
         padding-bottom: ${props => props.mobileHeight}px !important;
 
+        // 'Tablet' (and up) tweaks for the 3-visible layout
         @media ${({ theme }) => theme.breakpoint('small')} {
-          padding-bottom: ${props => props.tabletHeight}px !important;
-        }
 
-        @media ${({ theme }) => theme.breakpoint('medium')} {
           padding-bottom: ${props => props.tabletHeight}px !important;
-        }
-
-        @media ${({ theme }) => theme.breakpoint('small')} {
-          padding-bottom: ${props => props.desktopHeight}px !important;
 
           // All slides:
           .carousel__inner-slide {
@@ -258,7 +252,6 @@ const CarouselWrapper = styled.div`
               }
             }
 
-
             // 2nd and 3rd:
             + .carousel__slide--visible {
               .carousel__inner-slide {
@@ -294,9 +287,9 @@ const CarouselWrapper = styled.div`
           }
         }
 
-        // HERE WE GO
-        // START OF DESKTOP
+        // 'Desktop'
         @media ${({ theme }) => theme.breakpoint('medium')} {
+          padding-bottom: ${props => props.desktopHeight}px !important;
 
           // First
           &.carousel__slide--visible {

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

@@ -149,7 +149,7 @@ it("renders correctly", () => {
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide {
-      padding-bottom: 450px !important;
+      padding-bottom: 425px !important;
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
@@ -219,19 +219,7 @@ it("renders correctly", () => {
 
     @media (min-width:740px) {
       .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 500px !important;
-      }
-    }
-
-    @media (min-width:1024px) {
-      .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 500px !important;
-      }
-    }
-
-    @media (min-width:740px) {
-      .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 475px !important;
+        padding-bottom: 450px !important;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
@@ -316,6 +304,10 @@ it("renders correctly", () => {
     }
 
     @media (min-width:1024px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 475px !important;
+      }
+
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
         right: calc(-250% - 6px);
         width: 250%;

package/src/styleguide/data/data.js

@@ -52,8 +52,8 @@ const testImpactSliderItems = [
 const carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 450,
-  tabletHeight: 500,
+  mobileHeight: 425,
+  tabletHeight: 450,
   desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',