@comicrelief/component-library 5.8.4 → 5.8.7

package/cypress/integration/components/Molecules/CardDs.spec.js

@@ -1,179 +1,223 @@
 describe('CardDs component', () => {
-    before(() => {
-        // go to cardDs component
-        cy.visit('/#cardds');
-        cy.wait(2500)
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="CardDs-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
-    });
-
-    describe('CardDs image and CTA section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="CardDs-example-1"]')
-                .as('container')
-                .find('[data-preview="CardDs"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders cardDs image and CTA preview', () => {
-            cy.get('@container')
-                .find('h3')
-                .should('exist')
-                .contains('Title');
-            cy.get('@container')
-                .find('p')
-                .should('exist')
-                .contains('Text body copy description');
-            cy.get('@container')
-                .find('a')
-                .should('exist')
-                .contains('find out more');
-            cy.get('@container')
-                .find('img')
-                .should('exist')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
-    });
-
-    describe('CardDs no Image with link section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="CardDs-example-3"]')
-                .as('container')
-                .find('[data-preview="CardDs"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders card no image with link preview', () => {
-            cy.get('@container')
-                .find('h3')
-                .should('exist')
-                .contains('Title');
-            cy.get('@container')
-                .find('p')
-                .should('exist')
-                .contains('Text body copy description');
-            cy.get('@container')
-                .find('a')
-                .should('exist')
-                .contains('find out more');
-            cy.get('@container')
-                .find('img')
-                .should('not.exist')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-    });
-
-    describe('CardDs no image no link section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="CardDs-example-5"]')
-                .as('container')
-                .find('[data-preview="CardDs"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders cardDs no image no link preview', () => {
-            cy.get('@container')
-                .find('h3')
-                .should('exist')
-                .contains('Title');
-            cy.get('@container')
-                .find('p')
-                .should('exist')
-                .contains('Text body copy description');
-            cy.get('@container')
-                .find('img')
-                .should('not.exist')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
+  before(() => {
+    // go to cardDs component
+    cy.visit('/#cardds');
+    cy.wait(2500);
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CardDs-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
     });
+
+    it('is present', () => {
+      cy.get('@propsBtn').should('exist');
+    });
+
+    it('does not show table initially', () => {
+      cy.get('@container')
+        .find('table')
+        .should('not.exist');
+    });
+
+    it('shows the table on button click', () => {
+      cy.get('@propsBtn').click();
+      cy.get('@container')
+        .find('table')
+        .should('contain', 'Prop name');
+    });
+  });
+
+  describe('CardDs image and CTA section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CardDs-example-1"]')
+        .as('container')
+        .find('[data-preview="CardDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders cardDs image and CTA preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Title');
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Text body copy description');
+      cy.get('@container')
+        .find('a')
+        .should('exist')
+        .contains('find out more');
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+    });
+
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('CardDs no Image with link section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CardDs-example-3"]')
+        .as('container')
+        .find('[data-preview="CardDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders card no image with link preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Title');
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Text body copy description');
+      cy.get('@container')
+        .find('a')
+        .should('exist')
+        .contains('find out more');
+      cy.get('@container')
+        .find('img')
+        .should('not.exist');
+    });
+
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('CardDs no image no link section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CardDs-example-5"]')
+        .as('container')
+        .find('[data-preview="CardDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders cardDs no image no link preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Title');
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Text body copy description');
+      cy.get('@container')
+        .find('img')
+        .should('not.exist');
+    });
+
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('CardDs image, text, no link', () => {
+    beforeEach(() => {
+      // Here
+      cy.get('[data-testid="CardDs-example-7"]')
+        .as('container')
+        .find('[data-preview="CardDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders cardDs image and CTA preview', () => {
+      cy.get('@container')
+        .find('h3')
+        .should('exist')
+        .contains('Title');
+      cy.get('@container')
+        .find('p')
+        .should('exist')
+        .contains('Text body copy description');
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+    });
+
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
 });

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

@@ -30,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "CardDs__Container",
   componentId: "sc-mayd3d-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;width:calc(100% - ", ");background:", ";@media ", "{flex-direction:row;width:100%;}@media ", "{flex-direction:column;}"], (0, _spacing.default)('m'), function (_ref) {
+})(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], function (_ref) {
   var theme = _ref.theme,
       backgroundColor = _ref.backgroundColor;
   return theme.color(backgroundColor);
@@ -45,48 +45,39 @@ var Container = _styledComponents.default.div.withConfig({
 var Image = _styledComponents.default.div.withConfig({
   displayName: "CardDs__Image",
   componentId: "sc-mayd3d-1"
-})(["height:auto;margin:0 -", " 0 ", ";@media ", "{margin:0;", ";}@media ", "{margin:0 -", " 0 ", ";}img{border-radius:1rem;box-shadow:0px 0px 20px rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.breakpoint('small');
-}, function (_ref5) {
-  var hasLink = _ref5.hasLink;
-  return !hasLink && "width: calc(50% - ".concat((0, _spacing.default)('xl'), ")");
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.breakpoint('large');
-}, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
+})(["height:auto;margin:0 -", " 0 ", ";img{border-radius:1rem;box-shadow:0px 0px 20px rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'));
 
 var MediaLink = _styledComponents.default.a.withConfig({
   displayName: "CardDs__MediaLink",
   componentId: "sc-mayd3d-2"
-})(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], function (_ref7) {
-  var theme = _ref7.theme;
+})(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], function (_ref4) {
+  var theme = _ref4.theme;
   return theme.breakpoint('small');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.breakpoint('large');
 });
 
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "CardDs__Copy",
   componentId: "sc-mayd3d-3"
-})(["padding:", ";", ";display:flex;flex-direction:column;border-radius:1rem;box-shadow:0px 0px 20px rgba(0,0,0,0.15);background:", ";width:100%;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), function (_ref9) {
-  var hasLink = _ref9.hasLink;
+})(["padding:", ";", ";display:flex;flex-direction:column;border-radius:1rem;box-shadow:0px 0px 20px rgba(0,0,0,0.15);background:", ";width:100%;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), function (_ref6) {
+  var hasLink = _ref6.hasLink;
   return hasLink && "padding-bottom: ".concat((0, _spacing.default)('xl'));
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      backgroundColor = _ref10.backgroundColor;
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      backgroundColor = _ref7.backgroundColor;
   return theme.color(backgroundColor);
-}, function (_ref11) {
-  var theme = _ref11.theme;
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.breakpoint('large');
-}, (0, _zIndex.default)('low'), function (_ref12) {
-  var hasImage = _ref12.hasImage;
-  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'), function (_ref13) {
-    var theme = _ref13.theme;
+}, (0, _zIndex.default)('low'), function (_ref9) {
+  var hasImage = _ref9.hasImage;
+  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'), function (_ref10) {
+    var theme = _ref10.theme;
     return theme.breakpoint('small');
-  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), function (_ref14) {
-    var theme = _ref14.theme;
+  }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), function (_ref11) {
+    var theme = _ref11.theme;
     return theme.breakpoint('large');
   }, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
 });
@@ -94,28 +85,28 @@ var Copy = _styledComponents.default.div.withConfig({
 var 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'), function (_ref15) {
-  var theme = _ref15.theme;
+})(["position:absolute;right:", ";bottom:-", ";", ";@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.breakpoint('small');
-}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref16) {
-  var hasImage = _ref16.hasImage;
+}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref13) {
+  var hasImage = _ref13.hasImage;
   return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
 });
 
-var CardDs = function CardDs(_ref17) {
-  var icon = _ref17.icon,
-      backgroundColor = _ref17.backgroundColor,
-      imageLow = _ref17.imageLow,
-      images = _ref17.images,
-      image = _ref17.image,
-      imageAltText = _ref17.imageAltText,
-      height = _ref17.height,
-      width = _ref17.width,
-      children = _ref17.children,
-      link = _ref17.link,
-      linkLabel = _ref17.linkLabel,
-      target = _ref17.target,
-      rest = (0, _objectWithoutProperties2.default)(_ref17, _excluded);
+var CardDs = function CardDs(_ref14) {
+  var icon = _ref14.icon,
+      backgroundColor = _ref14.backgroundColor,
+      imageLow = _ref14.imageLow,
+      images = _ref14.images,
+      image = _ref14.image,
+      imageAltText = _ref14.imageAltText,
+      height = _ref14.height,
+      width = _ref14.width,
+      children = _ref14.children,
+      link = _ref14.link,
+      linkLabel = _ref14.linkLabel,
+      target = _ref14.target,
+      rest = (0, _objectWithoutProperties2.default)(_ref14, _excluded);
 
   var Media = /*#__PURE__*/_react.default.createElement(Image, {
     hasLink: link

package/dist/components/Molecules/CardDs/CardDs.md

@@ -1,7 +1,8 @@
 # CardDs
+## Image and CTA are clickable and links user through to full content
 
-## Image and CTA are clickable and links user through to full conten
 
+### CardDs:  Image, Text & Link
 ```js
 const data = require('../../../styleguide/data/data').default;
 import Text from '../../Atoms/Text/Text';
@@ -35,8 +36,8 @@ import { Internal } from '../../Atoms/Icons/index';
 </div>;
 ```
 
-### CardDs no Image with Link
 
+### CardDs: Text & Link
 ```js
 const data = require('../../../styleguide/data/data').default;
 import Text from '../../Atoms/Text/Text';
@@ -67,8 +68,7 @@ import { Download } from '../../Atoms/Icons/index';
 </div>;
 ```
 
-### CardDs no Image no Link
-
+### CardDs: Text only
 ```js
 const data = require('../../../styleguide/data/data').default;
 import Text from '../../Atoms/Text/Text';
@@ -89,3 +89,35 @@ import Link from '../../Atoms/Link/Link';
   </CardDs>
 </div>;
 ```
+
+### CardDs: Image & Text, No Link
+```js
+const data = require('../../../styleguide/data/data').default;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import { Internal } from '../../Atoms/Icons/index';
+
+<div
+  style={{
+    display: 'flex',
+    padding: '2rem 0',
+    background: '#E1E2E3',
+    justifyContent: 'space-around'
+  }}
+>
+  <CardDs
+    target="_blank"
+    imageLow={data.image}
+    images={data.images}
+    imageAltText="Happy man going to work"
+    backgroundColor="white"
+    height="auto"
+    icon={<Internal colour="white" />}
+  >
+    <Text tag="h3" color="purple" size="xl">
+      Title
+    </Text>
+    <Text tag="p">Text body copy description</Text>
+  </CardDs>
+</div>;
+```

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

@@ -71,7 +71,7 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
-  width: calc(100% - 1.5rem);
+  width: 100%;
   background: inherit;
 }
 
@@ -134,7 +134,6 @@ exports[`renders correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
-    width: 100%;
   }
 }
 
@@ -146,18 +145,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
-  .c2 {
-    margin: 0;
-  }
-}
-
-@media (min-width:1440px) {
-  .c2 {
-    margin: 0 -1.5rem 0 1.5rem;
-  }
-}
-
 @media (min-width:740px) {
   .c1 {
     width: calc(50% + 6rem);

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -102,7 +102,7 @@ exports.CTA = CTA;
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Copy",
   componentId: "sc-s8zd7s-8"
-})(["position:relative;height:auto;padding:", ";", ";display:flex;flex-direction:column;border-radius:1rem;", ";background:", ";", ";", ";@media ", "{height:448px;width:calc(50% + 1.5rem);flex-grow:0;flex-shrink:0;flex-basis:calc(50% + 1.5rem);padding:", ";", ";", ";}@media ", "{padding:calc(", " * 2);", ";margin:", ";}"], (0, _spacing.default)('m'), (0, _zIndex.default)('low'), boxShadow, function (_ref10) {
+})(["position:relative;height:auto;padding:", ";", ";display:flex;flex-direction:column;border-radius:1rem;", ";background:", ";", ";", ";@media ", "{min-height:448px;height:auto;width:calc(50% + 1.5rem);flex-grow:0;flex-shrink:0;flex-basis:calc(50% + 1.5rem);padding:", ";", ";", ";}@media ", "{padding:calc(", " * 2);", ";margin:", ";}"], (0, _spacing.default)('m'), (0, _zIndex.default)('low'), boxShadow, function (_ref10) {
   var theme = _ref10.theme,
       backgroundColor = _ref10.backgroundColor;
   return theme.color(backgroundColor);

package/dist/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -200,7 +200,8 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    height: 448px;
+    min-height: 448px;
+    height: auto;
     width: calc(50% + 1.5rem);
     -webkit-box-flex: 0;
     -webkit-flex-grow: 0;

package/dist/components/Organisms/Donate/Form/Form.js

@@ -62,8 +62,12 @@ var Signup = function Signup(_ref) {
       setMoneyBuyCopy = _useState8[1];
 
   (0, _react.useEffect)(function () {
-    var givingData = givingType === 'single' ? singleGiving : regularGiving;
-    setAmountDonate(parseFloat(givingData.moneybuys[1].value));
+    var givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
+    // 'philantrophy' carts have been set up to use a single moneybuy.
+    // See ENG-1685 for more details
+
+    var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
+    setAmountDonate(parseFloat(thisAmount));
   }, [givingType, singleGiving, regularGiving]);
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving;

package/docs/installation.md

@@ -3,10 +3,10 @@
 CR-CL has a dependency of Styled-components.
 
 #### Install the package
-`yarn add @comicrelief/component-library`
+`yarn add @comicrelief/component-library` 
 
 #### Wrap your app with the ThemeProvider and crTheme
-`import { ThemeProvider, theme as crTheme } from '@comic-relief/component-library';`
+`import { ThemeProvider, crTheme } from '@comicrelief/component-library';`
 
 #### Import components
-`import { HeroBanner } from '@comic-relief/component-library';`
+`import { HeroBanner } from '@comicrelief/component-library';`

package/package.json

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

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

@@ -11,11 +11,10 @@ const Container = styled.div`
   position: relative;
   flex-direction: column;
   height: 100%;
-  width: calc(100% - ${spacing('m')});
+  width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   @media ${({ theme }) => theme.breakpoint('small')} {
     flex-direction: row;
-    width: 100%;
   }
 
   @media ${({ theme }) => theme.breakpoint('large')} {
@@ -26,14 +25,7 @@ const Container = styled.div`
 const Image = styled.div`
   height: auto;
   margin: 0 -${spacing('m')} 0 ${spacing('m')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
-    margin: 0;
-    ${({ hasLink }) => !hasLink && `width: calc(50% - ${spacing('xl')})`};
-  }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
-    margin: 0 -${spacing('m')} 0 ${spacing('m')};
-  }
   img {
     border-radius: 1rem;
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);

package/src/components/Molecules/CardDs/CardDs.md

@@ -1,7 +1,8 @@
 # CardDs
+## Image and CTA are clickable and links user through to full content
 
-## Image and CTA are clickable and links user through to full conten
 
+### CardDs:  Image, Text & Link
 ```js
 const data = require('../../../styleguide/data/data').default;
 import Text from '../../Atoms/Text/Text';
@@ -35,8 +36,8 @@ import { Internal } from '../../Atoms/Icons/index';
 </div>;
 ```
 
-### CardDs no Image with Link
 
+### CardDs: Text & Link
 ```js
 const data = require('../../../styleguide/data/data').default;
 import Text from '../../Atoms/Text/Text';
@@ -67,8 +68,7 @@ import { Download } from '../../Atoms/Icons/index';
 </div>;
 ```
 
-### CardDs no Image no Link
-
+### CardDs: Text only
 ```js
 const data = require('../../../styleguide/data/data').default;
 import Text from '../../Atoms/Text/Text';
@@ -89,3 +89,35 @@ import Link from '../../Atoms/Link/Link';
   </CardDs>
 </div>;
 ```
+
+### CardDs: Image & Text, No Link
+```js
+const data = require('../../../styleguide/data/data').default;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import { Internal } from '../../Atoms/Icons/index';
+
+<div
+  style={{
+    display: 'flex',
+    padding: '2rem 0',
+    background: '#E1E2E3',
+    justifyContent: 'space-around'
+  }}
+>
+  <CardDs
+    target="_blank"
+    imageLow={data.image}
+    images={data.images}
+    imageAltText="Happy man going to work"
+    backgroundColor="white"
+    height="auto"
+    icon={<Internal colour="white" />}
+  >
+    <Text tag="h3" color="purple" size="xl">
+      Title
+    </Text>
+    <Text tag="p">Text body copy description</Text>
+  </CardDs>
+</div>;
+```

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

@@ -71,7 +71,7 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
-  width: calc(100% - 1.5rem);
+  width: 100%;
   background: inherit;
 }
 
@@ -134,7 +134,6 @@ exports[`renders correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
-    width: 100%;
   }
 }
 
@@ -146,18 +145,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
-  .c2 {
-    margin: 0;
-  }
-}
-
-@media (min-width:1440px) {
-  .c2 {
-    margin: 0 -1.5rem 0 1.5rem;
-  }
-}
-
 @media (min-width:740px) {
   .c1 {
     width: calc(50% + 6rem);

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -134,7 +134,8 @@ const Copy = styled.div`
 
 
   @media ${({ theme }) => theme.breakpoint('small')} {
-    height: 448px;
+    min-height: 448px;
+    height: auto;
     width: calc(50% + 1.5rem);
     flex-grow: 0;
     flex-shrink: 0;

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -200,7 +200,8 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    height: 448px;
+    min-height: 448px;
+    height: auto;
     width: calc(50% + 1.5rem);
     -webkit-box-flex: 0;
     -webkit-flex-grow: 0;

package/src/components/Organisms/Donate/Form/Form.js

@@ -40,7 +40,14 @@ const Signup = ({
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    setAmountDonate(parseFloat(givingData.moneybuys[1].value));
+    // Check the 2nd moneybuy exists before using it;
+    // 'philantrophy' carts have been set up to use a single moneybuy.
+    // See ENG-1685 for more details
+    const thisAmount = givingData.moneybuys[1]
+      ? givingData.moneybuys[1].value
+      : givingData.moneybuys[0].value;
+
+    setAmountDonate(parseFloat(thisAmount));
   }, [givingType, singleGiving, regularGiving]);
 
   useEffect(() => {

package/styleguide.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = {
   getComponentPathLine(componentPath) {
     const name = path.basename(componentPath, '.js');
-    return `import { ${name} } from '@comic-relief/component-library';`;
+    return `import { ${name} } from '@comicrelief/component-library';`;
   },
   assetsDir: 'src/styleguide/assets/',
   styleguideComponents: {