@comicrelief/component-library 7.39.0 → 7.41.0

package/dist/components/Atoms/Picture/Picture.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 require("lazysizes");
 require("lazysizes/plugins/blur-up/ls.blur-up");
 // Transparent pixel png
@@ -29,17 +31,52 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const Image = _styledComponents.default.img.withConfig({
   displayName: "Picture__Image",
   componentId: "sc-1x3z81z-1"
-})(["width:", ";height:", ";display:block;object-fit:", ";", ";"], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
+})(["width:", ";height:", ";display:block;object-fit:", ";", ";", " ", " ", ""], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
   let {
     objectFit,
     objFitState
   } = _ref3;
   return objectFit !== 'none' && !objFitState && 'visibility: hidden;';
+}, _ref4 => {
+  let {
+    smallBreakpointRowLayout
+  } = _ref4;
+  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:110px;height:110px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.allBreakpoints('S');
+  }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.allBreakpoints('M');
+  }, props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto');
+}, _ref7 => {
+  let {
+    mediumBreakpointRowLayout
+  } = _ref7;
+  return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:120px;height:120px;}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme.allBreakpoints('M');
+  }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'));
+}, _ref9 => {
+  let {
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout
+  } = _ref9;
+  return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref10 => {
+    let {
+      theme
+    } = _ref10;
+    return theme.allBreakpoints('L');
+  }, props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto');
 });
 
 /** Responsive Picture */
-
-const Picture = _ref4 => {
+const Picture = _ref11 => {
   let {
     images,
     image,
@@ -49,8 +86,10 @@ const Picture = _ref4 => {
     objectFit,
     imageLow,
     isBackgroundImage,
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout,
     ...rest
-  } = _ref4;
+  } = _ref11;
   const document = typeof window !== 'undefined' ? window.document : null;
   const [objFitState, setObjFitState] = (0, _react.useState)(true);
   let nonObjFitImage = null;
@@ -108,7 +147,9 @@ const Picture = _ref4 => {
     "data-sizes": "auto",
     "data-lowsrc": imageLow,
     className: "lazyload",
-    objFitState: objFitState
+    objFitState: objFitState,
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
   }));
 };
 Picture.defaultProps = {
@@ -119,6 +160,8 @@ Picture.defaultProps = {
   width: '100%',
   height: 'auto',
   alt: '',
-  isBackgroundImage: false
+  isBackgroundImage: false,
+  smallBreakpointRowLayout: null,
+  mediumBreakpointRowLayout: null
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Picture);

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

@@ -6,7 +6,7 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Picture = _interopRequireDefault(require("./Picture"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -14,7 +14,7 @@ it('renders correctly', () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"auto\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"100%\"\n      />\n    </div>\n  ");
 });
-it('renders correctly with custom props', () => {
+it("renders correctly with custom props", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -6,7 +6,7 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _ArticleTeaser = _interopRequireDefault(require("./ArticleTeaser"));
 var _data = require("../../../styleguide/data/data");
-it('renders article teaser correctly', () => {
+it("renders article teaser correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     images: _data.defaultData.images,
@@ -20,7 +20,7 @@ it('renders article teaser correctly', () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\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    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });
-it('renders press realese correctly', () => {
+it("renders press realese correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     category: "",

package/dist/components/Molecules/Card/Card.js

@@ -6,28 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
-var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Card__Container",
-  componentId: "sc-15nltsw-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;border-radius:", ";overflow:hidden;background:", ";"], props => props.squaredCorners ? '0' : '1rem', _ref => {
-  let {
-    theme,
-    backgroundColor
-  } = _ref;
-  return theme.color(backgroundColor);
-});
-const Image = _styledComponents.default.div.withConfig({
-  displayName: "Card__Image",
-  componentId: "sc-15nltsw-1"
-})(["height:auto;"]);
-const Copy = _styledComponents.default.div.withConfig({
-  displayName: "Card__Copy",
-  componentId: "sc-15nltsw-2"
-})(["padding:", ";display:flex;flex-direction:column;"], (0, _spacing.default)('l'));
-const Card = _ref2 => {
+var _Card = require("./Card.style");
+const Card = _ref => {
   let {
     backgroundColor,
     imageLow,
@@ -38,20 +19,29 @@ const Card = _ref2 => {
     width,
     children,
     squaredCorners,
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout,
     ...rest
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Card.Container, Object.assign({
     backgroundColor: backgroundColor,
-    squaredCorners: squaredCorners
-  }, rest), imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    squaredCorners: squaredCorners,
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
+  }, rest), imageLow ? /*#__PURE__*/_react.default.createElement(_Card.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
     images: images,
     image: image,
     objectFit: "cover",
     width: width,
-    height: height
-  })) : null, children ? /*#__PURE__*/_react.default.createElement(Copy, null, children) : null);
+    height: height,
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
+  })) : null, children ? /*#__PURE__*/_react.default.createElement(_Card.Copy, {
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
+  }, children) : null);
 };
 Card.defaultProps = {
   backgroundColor: 'white',
@@ -62,6 +52,8 @@ Card.defaultProps = {
   imageAltText: '',
   width: '100%',
   height: '100%',
-  squaredCorners: false
+  squaredCorners: false,
+  smallBreakpointRowLayout: null,
+  mediumBreakpointRowLayout: null
 };
 var _default = exports.default = Card;

package/dist/components/Molecules/Card/Card.md

@@ -1,5 +1,4 @@
 # Card
-
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
@@ -7,7 +6,7 @@ import Link from '../../Atoms/Link/Link';
 <Card
   imageLow={defaultData.image}
   images={defaultData.images}
-  backgroundColor="yellow"
+  backgroundColor="grey_light"
   height="auto"
 >
   <Text tag="h3" color="purple" size="xl">
@@ -17,9 +16,78 @@ import Link from '../../Atoms/Link/Link';
 </Card>;
 ```
 
+### Card - row layout on small breakpoint only
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={true}
+  mediumBreakpointRowLayout={false}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
+### Card - row layout on medium breakpoint only
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={false}
+  mediumBreakpointRowLayout={true}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
+### Card - row layout on small and medium breakpoints
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={true}
+  mediumBreakpointRowLayout={true}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
 ### Card no body
 
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;
-<Card imageLow={defaultData.image} images={defaultData.image} />;
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.image}
+/>;
 ```

package/dist/components/Molecules/Card/Card.style.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Copy = exports.Container = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "Cardstyle__Container",
+  componentId: "sc-cxn4co-0"
+})(["position:relative;display:flex;@media ", "{flex-direction:", ";}@media ", "{flex-direction:", ";}@media ", "{flex-direction:column;}height:100%;border-radius:", ";overflow:hidden;background:", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.allBreakpoints('S');
+}, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('M');
+}, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.allBreakpoints('L');
+}, props => props.squaredCorners ? '0' : '1rem', _ref4 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref4;
+  return theme.color(backgroundColor);
+});
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Cardstyle__Wrapper",
+  componentId: "sc-cxn4co-1"
+})(["height:auto;"]);
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "Cardstyle__Copy",
+  componentId: "sc-cxn4co-2"
+})(["display:flex;flex-direction:column;padding:", ";", " ", " ", ""], (0, _spacing.default)('l'), _ref5 => {
+  let {
+    smallBreakpointRowLayout
+  } = _ref5;
+  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.allBreakpoints('S');
+  }, props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
+}, _ref7 => {
+  let {
+    mediumBreakpointRowLayout
+  } = _ref7;
+  return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme.allBreakpoints('M');
+  }, props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
+}, _ref9 => {
+  let {
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout
+  } = _ref9;
+  return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 1rem 0;}h2{margin-bottom:2rem;}h3,h4,h5{margin-bottom:1rem;}}"], _ref10 => {
+    let {
+      theme
+    } = _ref10;
+    return theme.allBreakpoints('L');
+  }, (0, _spacing.default)('l'));
+});

package/dist/components/Molecules/Card/Card.test.js

@@ -14,6 +14,16 @@ it('renders correctly', () => {
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
+    image: _data.defaultData.image,
+    images: _data.defaultData.image,
+    backgroundColor: "yellow",
+    smallBreakpointLayout: "Row",
+    mediumBreakpointLayout: "Row"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Text body copy description. Loads more text test. Loads more text test."))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 it('renders correctly with no body', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
     imageLow: _data.defaultData.image,

package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -2,14 +2,75 @@
 
 exports[`renders correctly 1`] = `
 .c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: #FFE400;
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2>
+      Title
+    </h2>
+    <p>
+      Description
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders correctly 2`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -17,7 +78,6 @@ exports[`renders correctly 1`] = `
 }
 
 .c1 {
-  padding: 2rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,6 +85,31 @@ exports[`renders correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
 }
 
 <div
@@ -37,7 +122,7 @@ exports[`renders correctly 1`] = `
       Title
     </h2>
     <p>
-      Description
+      Text body copy description. Loads more text test. Loads more text test.
     </p>
   </div>
 </div>
@@ -59,14 +144,11 @@ exports[`renders correctly with no body 1`] = `
 }
 
 .c0 {
+  position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -77,6 +159,30 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
 <div
   className="c0"
 >

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -7,7 +7,7 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 var _PartnerLink = _interopRequireDefault(require("./PartnerLink"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_PartnerLink.default, {
     link: "https://www.comicrelief.com"
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {

package/dist/index.js

@@ -334,6 +334,12 @@ Object.defineProperty(exports, "allBreakpoints", {
     return _allBreakpoints.default;
   }
 });
+Object.defineProperty(exports, "allContainers", {
+  enumerable: true,
+  get: function () {
+    return _allContainers.default;
+  }
+});
 Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function () {
@@ -422,6 +428,7 @@ var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
 var _breakpoint = _interopRequireDefault(require("./theme/shared/breakpoint"));
 var _allBreakpoints = _interopRequireDefault(require("./theme/shared/allBreakpoints"));
 var _size = require("./theme/shared/size");
+var _allContainers = _interopRequireDefault(require("./theme/shared/allContainers"));
 var _Text = _interopRequireDefault(require("./components/Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("./components/Atoms/Logo/Logo"));
 var _Picture = _interopRequireDefault(require("./components/Atoms/Picture/Picture"));

package/dist/theme/shared/allContainers.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const container = {
+const allContainers = {
   small: '880px',
   medium: '1200px',
   large: '1440px'
 };
-var _default = exports.default = container;
+var _default = exports.default = allContainers;

package/package.json

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