@comicrelief/component-library 8.49.0 → 8.50.0

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

@@ -11,7 +11,7 @@ var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHel
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Buttonstyle__StyledButton",
   componentId: "sc-k17brs-0"
-})(["display:inline-flex;position:relative;text-decoration:none;transition:all 0.2s;min-height:2.5rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;padding:0.6rem 1rem;border-radius:0.5rem;> a{text-decoration:none;}", ";", " @media ", "{width:", ";}@media ", "{width:", ";}"], _ref => {
+})(["display:inline-flex;position:relative;text-decoration:none;transition:all 0.2s;height:2.5rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;padding:0.6rem 1rem;border-radius:0.5rem;> a{text-decoration:none;}", ";", " @media ", "{width:", ";}@media ", "{width:", ";}"], _ref => {
   let {
     color,
     theme,

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

@@ -20,7 +20,7 @@ it('renders a standard styled link correctly', () => {
       text-decoration: none;
       -webkit-transition: all 0.2s;
       transition: all 0.2s;
-      min-height: 2.5rem;
+      height: 2.5rem;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;

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

@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
 var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHelper"));
-const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;text-decoration:none;transition:all 0.2s;min-height:2.5em;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;padding:0.6rem 1rem;border-radius:0.5rem;", ";", " ", ";@media ", "{width:", ";}@media ", "{width:", ";", ";}"], _ref => {
+const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;text-decoration:none;transition:all 0.2s;height:2.5rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;padding:0.6rem 1rem;border-radius:0.5rem;", ";", " ", ";@media ", "{width:", ";}@media ", "{width:", ";", ";}"], _ref => {
   let {
     color,
     theme,

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

@@ -196,7 +196,7 @@ it('renders link styled as button correctly', () => {
       text-decoration: none;
       -webkit-transition: all 0.2s;
       transition: all 0.2s;
-      min-height: 2.5em;
+      height: 2.5rem;
       width: 100%;
       -webkit-box-pack: center;
       -webkit-justify-content: center;

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

@@ -176,7 +176,6 @@ const ArticleTeaser = _ref15 => {
     tag: "h3",
     height: "2rem",
     weight: "normal",
-    uppercase: true,
     family: family
   }, title), time && /*#__PURE__*/_react.default.createElement(Time, {
     size: "xs",

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

@@ -60,7 +60,6 @@ it('renders article teaser correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c10 span {
@@ -358,7 +357,6 @@ it('renders press realese correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c10 span {

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _snakeCase2 = _interopRequireDefault(require("lodash/snakeCase"));
+var _react = _interopRequireDefault(require("react"));
+var _CTACard = _interopRequireDefault(require("../shared/CTACard"));
+var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard.style"));
+/**
+ * CTAMultiCard Component
+ *
+ * This component is a successor to the CardsDs component.
+ * Previously, the comicrelief-contentful frontend would map
+ * through data and create multiple CardsDs instances.
+ * Now CTAMultiCard handles the mapping internally, accepting
+ * a data object and rendering all cards.
+ *
+ * Note: The component expects pre-rendered content in the `body`
+ * field of each card. The frontend should handle rich text rendering
+ * before passing data to this component.
+ */
+
+const CTAMultiCard = _ref => {
+  let {
+    data
+  } = _ref;
+  const {
+    cards,
+    backgroundColour: bgCards,
+    layout,
+    carouselOfCards,
+    paddingAbove,
+    paddingBelow
+  } = data;
+  if (!cards || !Array.isArray(cards) || cards.length === 0) {
+    return null;
+  }
+
+  // Convert layout string to number (e.g., "3 columns"
+  // (that's how it comes through from Contentful) -> 3)
+  const columns = layout && layout.includes('3') ? 3 : 2;
+  const cardsBackground = (0, _snakeCase2.default)(bgCards || 'white');
+  return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    backgroundColor: cardsBackground,
+    columns: columns,
+    isCarousel: carouselOfCards,
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow
+  }, cards.map(card => /*#__PURE__*/_react.default.createElement(_CTACard.default, {
+    key: card.id,
+    card: card,
+    columns: columns,
+    isCarousel: carouselOfCards
+  })));
+};
+var _default = exports.default = CTAMultiCard;

package/{src/components/Molecules → dist/components/Molecules/CTA}/CTAMultiCard/CTAMultiCard.md

@@ -18,8 +18,8 @@ The component expects pre-rendered content to be passed in the `body` field of e
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
-import Text from '../../Atoms/Text/Text';
-import challengeExampleImage from '../../../styleguide/assets/challenge-1.jpg';
+import Text from '../../../Atoms/Text/Text';
+import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
 const exampleData = require('./example_data.json');
 
 // Map cards to include pre-rendered body content and processed image/link data
@@ -59,8 +59,8 @@ const data = {
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
-import Text from '../../Atoms/Text/Text';
-import challengeExampleImage from '../../../styleguide/assets/challenge-1.jpg';
+import Text from '../../../Atoms/Text/Text';
+import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
 const exampleData = require('./example_data.json');
 
 // Map cards to include pre-rendered body content and processed image/link data

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
+const CardsContainer = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsContainer",
+  componentId: "sc-gsdqzv-0"
+})(["padding-top:", ";padding-bottom:", ";display:flex;flex-direction:column;width:100%;background:", ";gap:1rem;", " @media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}", " @media ", "{", "}"], _ref => {
+  let {
+    paddingAbove
+  } = _ref;
+  return paddingAbove;
+}, _ref2 => {
+  let {
+    paddingBelow
+  } = _ref2;
+  return paddingBelow;
+}, _ref3 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref3;
+  return theme.color(backgroundColor);
+}, _ref4 => {
+  let {
+    isCarousel
+  } = _ref4;
+  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.allBreakpoints('M');
+}, _ref6 => {
+  let {
+    isCarousel
+  } = _ref6;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:visible;overflow-y:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}}"], _allBreakpoints.breakpointValues.L - 1);
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.allBreakpoints('XL');
+}, _ref8 => {
+  let {
+    columns
+  } = _ref8;
+  return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,371px));width:100%;margin:0 auto;max-width:100%;"]);
+});
+var _default = exports.default = CardsContainer;

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../../../tests/hoc/shallowWithTheme"));
+var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard"));
+var _example_data = _interopRequireDefault(require("./example_data.json"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+const makeProcessedCard = card => {
+  var _card$image, _card$image$gatsbyIma, _card$image$gatsbyIma2, _card$image$gatsbyIma3, _card$image2, _card$image2$gatsbyIm, _card$image2$gatsbyIm2, _card$image3, _card$image3$gatsbyIm, _card$image3$gatsbyIm2, _card$image3$gatsbyIm3, _card$image3$gatsbyIm4, _card$image4;
+  const fallback = card === null || card === void 0 ? void 0 : (_card$image = card.image) === null || _card$image === void 0 ? void 0 : (_card$image$gatsbyIma = _card$image.gatsbyImageData) === null || _card$image$gatsbyIma === void 0 ? void 0 : (_card$image$gatsbyIma2 = _card$image$gatsbyIma.images) === null || _card$image$gatsbyIma2 === void 0 ? void 0 : (_card$image$gatsbyIma3 = _card$image$gatsbyIma2.fallback) === null || _card$image$gatsbyIma3 === void 0 ? void 0 : _card$image$gatsbyIma3.src;
+  const imageLow = card === null || card === void 0 ? void 0 : (_card$image2 = card.image) === null || _card$image2 === void 0 ? void 0 : (_card$image2$gatsbyIm = _card$image2.gatsbyImageData) === null || _card$image2$gatsbyIm === void 0 ? void 0 : (_card$image2$gatsbyIm2 = _card$image2$gatsbyIm.placeholder) === null || _card$image2$gatsbyIm2 === void 0 ? void 0 : _card$image2$gatsbyIm2.fallback;
+  const images = card === null || card === void 0 ? void 0 : (_card$image3 = card.image) === null || _card$image3 === void 0 ? void 0 : (_card$image3$gatsbyIm = _card$image3.gatsbyImageData) === null || _card$image3$gatsbyIm === void 0 ? void 0 : (_card$image3$gatsbyIm2 = _card$image3$gatsbyIm.images) === null || _card$image3$gatsbyIm2 === void 0 ? void 0 : (_card$image3$gatsbyIm3 = _card$image3$gatsbyIm2.sources) === null || _card$image3$gatsbyIm3 === void 0 ? void 0 : (_card$image3$gatsbyIm4 = _card$image3$gatsbyIm3[0]) === null || _card$image3$gatsbyIm4 === void 0 ? void 0 : _card$image3$gatsbyIm4.srcSet;
+  return {
+    ...card,
+    fallback,
+    imageLow,
+    images,
+    // tests focus on layout; use a stable processed value here
+    bgColour: 'white',
+    description: (card === null || card === void 0 ? void 0 : (_card$image4 = card.image) === null || _card$image4 === void 0 ? void 0 : _card$image4.description) || '',
+    target: 'self',
+    external: null
+  };
+};
+
+// Map example data cards to include pre-rendered body content
+const cardsWithRenderedBody = _example_data.default.cards.map(card => ({
+  ...makeProcessedCard(card),
+  body: /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Load"), " of text here")
+}));
+const mockData = {
+  ..._example_data.default,
+  cards: [...cardsWithRenderedBody,
+  // Add a card without image for testing edge cases. This should not ever really happen in real life, but just in case...
+  {
+    id: '6bc887c7-f939-5654-a0c5-1b2caf91de6c',
+    title: 'Card no pic',
+    backgroundColour: 'Blue Light',
+    link: '/test-no-image',
+    linkLabel: 'View card',
+    bgColour: 'blue_light',
+    target: 'self',
+    external: null,
+    body: /*#__PURE__*/_react.default.createElement(_Text.default, {
+      tag: "p"
+    }, "Load of text here"),
+    image: null
+  }]
+};
+it('renders correctly with data prop', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: mockData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders carousel mode correctly', () => {
+  const carouselData = {
+    ...mockData,
+    carouselOfCards: true
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: carouselData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders 2 columns layout correctly', () => {
+  const twoColumnData = {
+    ...mockData,
+    layout: '2 columns'
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: twoColumnData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('handles data structure correctly', () => {
+  const testData = {
+    cards: mockData.cards,
+    backgroundColour: 'White',
+    layout: '3 columns',
+    carouselOfCards: false
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: testData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});