@comicrelief/component-library 7.33.0 → 7.34.0

package/dist/components/Molecules/CardDs/CardDs.js

@@ -1,105 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
-var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "CardDs__Container",
-  componentId: "sc-mayd3d-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], _ref => {
-  let {
-    theme,
-    backgroundColor
-  } = _ref;
-  return theme.color(backgroundColor);
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.breakpoint('small');
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.breakpoint('large');
-});
-const Image = _styledComponents.default.div.withConfig({
-  displayName: "CardDs__Image",
-  componentId: "sc-mayd3d-1"
-})(["height:auto;margin:0 -", " 0 ", ";img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
-const MediaLink = _styledComponents.default.a.withConfig({
-  displayName: "CardDs__MediaLink",
-  componentId: "sc-mayd3d-2"
-})(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.breakpoint('small');
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.breakpoint('large');
-});
-const Copy = _styledComponents.default.div.withConfig({
-  displayName: "CardDs__Copy",
-  componentId: "sc-mayd3d-3"
-})(["padding:", ";", ";display:flex;flex-direction:column;border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);background:", ";width:100%;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), _ref6 => {
-  let {
-    hasLink
-  } = _ref6;
-  return hasLink && "padding-bottom: ".concat((0, _spacing.default)('xl'));
-}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref7 => {
-  let {
-    theme,
-    backgroundColor
-  } = _ref7;
-  return theme.color(backgroundColor);
-}, _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.breakpoint('large');
-}, (0, _zIndex.default)('low'), _ref9 => {
-  let {
-    hasImage
-  } = _ref9;
-  return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), _ref10 => {
-    let {
-      theme
-    } = _ref10;
-    return theme.breakpoint('small');
-  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), _ref11 => {
-    let {
-      theme
-    } = _ref11;
-    return theme.breakpoint('large');
-  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
-});
-const CTA = _styledComponents.default.div.withConfig({
-  displayName: "CardDs__CTA",
-  componentId: "sc-mayd3d-4"
-})(["position:absolute;right:", ";bottom:-", ";", ";@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.breakpoint('small');
-}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref13 => {
-  let {
-    hasImage
-  } = _ref13;
-  return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
-});
-const CardDs = _ref14 => {
+var _CardDs = require("./CardDs.style");
+const CardDs = _ref => {
   let {
     icon,
     backgroundColor,
@@ -114,8 +24,8 @@ const CardDs = _ref14 => {
     linkLabel,
     target,
     ...rest
-  } = _ref14;
-  const Media = /*#__PURE__*/_react.default.createElement(Image, {
+  } = _ref;
+  const Media = /*#__PURE__*/_react.default.createElement(_CardDs.Image, {
     hasLink: link
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
@@ -128,7 +38,7 @@ const CardDs = _ref14 => {
   }));
   const hasMedia = () => {
     if (imageLow && link) {
-      return /*#__PURE__*/_react.default.createElement(MediaLink, Object.assign({
+      return /*#__PURE__*/_react.default.createElement(_CardDs.MediaLink, Object.assign({
         "aria-hidden": "true",
         tabIndex: "-1",
         href: link,
@@ -142,11 +52,11 @@ const CardDs = _ref14 => {
     return null;
   };
   const external = target === 'blank' ? 'noopener' : null;
-  return /*#__PURE__*/_react.default.createElement(Container, rest, hasMedia(), /*#__PURE__*/_react.default.createElement(Copy, {
+  return /*#__PURE__*/_react.default.createElement(_CardDs.Container, rest, hasMedia(), /*#__PURE__*/_react.default.createElement(_CardDs.Copy, {
     hasImage: imageLow,
     hasLink: link,
     backgroundColor: backgroundColor
-  }, children), link && /*#__PURE__*/_react.default.createElement(CTA, {
+  }, children), link && /*#__PURE__*/_react.default.createElement(_CardDs.CTA, {
     hasImage: imageLow
   }, /*#__PURE__*/_react.default.createElement(_Link.default, {
     rel: external,

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

@@ -0,0 +1,103 @@
+"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.MediaLink = exports.Image = exports.Copy = exports.Container = exports.CTA = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "CardDsstyle__Container",
+  componentId: "sc-1m4yp5m-0"
+})(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
+  return theme.color(backgroundColor);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('small');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoint('large');
+});
+const Image = exports.Image = _styledComponents.default.div.withConfig({
+  displayName: "CardDsstyle__Image",
+  componentId: "sc-1m4yp5m-1"
+})(["height:auto;margin:0 0 0 ", ";@media ", "{margin:0 -", " 0 ", ";}img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoint('small');
+}, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
+const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
+  displayName: "CardDsstyle__MediaLink",
+  componentId: "sc-1m4yp5m-2"
+})(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoint('small');
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoint('large');
+});
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "CardDsstyle__Copy",
+  componentId: "sc-1m4yp5m-3"
+})(["padding:", ";", ";display:flex;flex-direction:column;border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);background:", ";margin:0 ", " 0 0;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), _ref7 => {
+  let {
+    hasLink
+  } = _ref7;
+  return hasLink && "padding-bottom: ".concat((0, _spacing.default)('xl'));
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref8 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref8;
+  return theme.color(backgroundColor);
+}, (0, _spacing.default)('m'), _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoint('large');
+}, (0, _zIndex.default)('low'), _ref10 => {
+  let {
+    hasImage
+  } = _ref10;
+  return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), _ref11 => {
+    let {
+      theme
+    } = _ref11;
+    return theme.breakpoint('small');
+  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), _ref12 => {
+    let {
+      theme
+    } = _ref12;
+    return theme.breakpoint('large');
+  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
+});
+const CTA = exports.CTA = _styledComponents.default.div.withConfig({
+  displayName: "CardDsstyle__CTA",
+  componentId: "sc-1m4yp5m-4"
+})(["position:absolute;right:", ";bottom:-", ";", ";@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.breakpoint('small');
+}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref14 => {
+  let {
+    hasImage
+  } = _ref14;
+  return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
+});

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

@@ -77,7 +77,7 @@ exports[`renders correctly 1`] = `
 
 .c2 {
   height: auto;
-  margin: 0 -1.5rem 0 1.5rem;
+  margin: 0 0 0 1.5rem;
 }
 
 .c2 img {
@@ -102,7 +102,7 @@ exports[`renders correctly 1`] = `
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
   background: #FFFFFF;
-  width: 100%;
+  margin: 0 1.5rem 0 0;
   z-index: 1;
   margin-top: calc(-2 * 1.5rem);
   min-height: calc(5 * 2rem);
@@ -145,6 +145,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c2 {
+    margin: 0 -1.5rem 0 1.5rem;
+  }
+}
+
 @media (min-width:740px) {
   .c1 {
     width: calc(50% + 6rem);

package/package.json

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

package/src/components/Molecules/CardDs/CardDs.js

@@ -1,86 +1,10 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Picture from '../../Atoms/Picture/Picture';
 import Link from '../../Atoms/Link/Link';
-import spacing from '../../../theme/shared/spacing';
-import zIndex from '../../../theme/shared/zIndex';
-
-const Container = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  @media ${({ theme }) => theme.breakpoint('small')} {
-    flex-direction: row;
-  }
-
-  @media ${({ theme }) => theme.breakpoint('large')} {
-    flex-direction: column;
-  }
-`;
-
-const Image = styled.div`
-  height: auto;
-  margin: 0 -${spacing('m')} 0 ${spacing('m')};
-
-  img {
-    border-radius: ${spacing('md')};
-    box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
-  }
-`;
-
-const MediaLink = styled.a`
-  width: 100%;
-  @media ${({ theme }) => theme.breakpoint('small')} {
-    width: calc(50% + 6rem);
-  }
-  @media ${({ theme }) => theme.breakpoint('large')} {
-    width: 100%;
-  }
-`;
-
-const Copy = styled.div`
-  padding: ${spacing('l')};
-  ${({ hasLink }) => hasLink && `padding-bottom: ${spacing('xl')}`};
-  display: flex;
-  flex-direction: column;
-  border-radius: ${spacing('md')};
-  box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
-  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  width: 100%;
-  @media ${({ theme }) => theme.breakpoint('large')} {
-    height: 100%;
-  }
-  ${zIndex('low')};
-  ${({ hasImage }) => hasImage
-    && css`
-      margin-top: calc(-2 * ${spacing('m')});
-      min-height: calc(5 * ${spacing('l')});
-      @media ${({ theme }) => theme.breakpoint('small')} {
-        margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
-        width: calc(50% + 6rem);
-      }
-
-      @media ${({ theme }) => theme.breakpoint('large')} {
-        margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
-        width: 100%;
-      }
-    `};
-`;
-
-const CTA = styled.div`
-  position: absolute;
-  right: ${spacing('m')};
-  bottom: -${spacing('m')};
-  ${zIndex('medium')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
-    bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
-    ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
-  }
-`;
+import {
+  Container, Image, MediaLink, Copy, CTA
+} from './CardDs.style';
 
 const CardDs = ({
   icon,

package/src/components/Molecules/CardDs/CardDs.style.js

@@ -0,0 +1,87 @@
+import styled, { css } from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+import zIndex from '../../../theme/shared/zIndex';
+
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    flex-direction: row;
+  }
+
+  @media ${({ theme }) => theme.breakpoint('large')} {
+    flex-direction: column;
+  }
+`;
+
+const Image = styled.div`
+  height: auto;
+  margin: 0 0 0 ${spacing('m')};
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    margin: 0 -${spacing('m')} 0 ${spacing('m')};
+  }
+
+  img {
+    border-radius: ${spacing('md')};
+    box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
+  }
+`;
+
+const MediaLink = styled.a`
+  width: 100%;
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    width: calc(50% + 6rem);
+  }
+  @media ${({ theme }) => theme.breakpoint('large')} {
+    width: 100%;
+  }
+`;
+
+const Copy = styled.div`
+  padding: ${spacing('l')};
+  ${({ hasLink }) => hasLink && `padding-bottom: ${spacing('xl')}`};
+  display: flex;
+  flex-direction: column;
+  border-radius: ${spacing('md')};
+  box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  // width: 100%;
+  margin: 0 ${spacing('m')} 0 0;
+  @media ${({ theme }) => theme.breakpoint('large')} {
+    height: 100%;
+  }
+  ${zIndex('low')};
+  ${({ hasImage }) => hasImage
+    && css`
+      margin-top: calc(-2 * ${spacing('m')});
+      min-height: calc(5 * ${spacing('l')});
+      @media ${({ theme }) => theme.breakpoint('small')} {
+        margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
+        width: calc(50% + 6rem);
+      }
+
+      @media ${({ theme }) => theme.breakpoint('large')} {
+        margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
+        width: 100%;
+      }
+    `};
+`;
+
+const CTA = styled.div`
+  position: absolute;
+  right: ${spacing('m')};
+  bottom: -${spacing('m')};
+  ${zIndex('medium')};
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
+    ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
+  }
+`;
+
+export {
+  Container, Image, MediaLink, Copy, CTA
+};

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

@@ -77,7 +77,7 @@ exports[`renders correctly 1`] = `
 
 .c2 {
   height: auto;
-  margin: 0 -1.5rem 0 1.5rem;
+  margin: 0 0 0 1.5rem;
 }
 
 .c2 img {
@@ -102,7 +102,7 @@ exports[`renders correctly 1`] = `
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
   background: #FFFFFF;
-  width: 100%;
+  margin: 0 1.5rem 0 0;
   z-index: 1;
   margin-top: calc(-2 * 1.5rem);
   min-height: calc(5 * 2rem);
@@ -145,6 +145,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c2 {
+    margin: 0 -1.5rem 0 1.5rem;
+  }
+}
+
 @media (min-width:740px) {
   .c1 {
     width: calc(50% + 6rem);