@comicrelief/component-library 7.38.0 → 7.40.0

package/dist/components/Atoms/Button/Button.js

@@ -9,11 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _breakpoint = _interopRequireDefault(require("../../../theme/shared/breakpoint"));
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1gm5vj0-0"
-})(["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;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
+})(["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;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}@media ", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -29,13 +28,18 @@ const StyledButton = _styledComponents.default.button.withConfig({
     theme
   } = _ref3;
   return theme.allBreakpoints('M');
-}, (0, _breakpoint.default)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     wrapper,
     ...rest
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
     ref: ref

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

@@ -5,9 +5,9 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Button = _interopRequireDefault(require("./Button"));
-it('renders a standard styled link correctly', () => {
+it("renders a standard styled link correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     type: "submit"
   }, "A standard link")).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      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    .c0 (min-width:1024px) {\n      width: auto;\n      padding: 1rem 2rem;\n      margin: 0 auto 2rem;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\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      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\n  ");
 });

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"
 >