@comicrelief/component-library 8.49.1 → 8.50.1

package/dist/components/Molecules/Accordion/Accordion.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _index = require("../../Atoms/Icons/index");
 const Container = _styledComponents.default.div.withConfig({
@@ -53,6 +54,10 @@ const Copy = _styledComponents.default.div.withConfig({
     return theme.allBreakpoints('M');
   }, (0, _spacing.default)('lg'), contentBottomPadding || (0, _spacing.default)('l'));
 });
+const StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Accordion__StyledText",
+  componentId: "sc-19u0s0h-4"
+})(["margin-bottom:0;"]);
 const Accordion = _ref6 => {
   let {
     children,
@@ -69,7 +74,9 @@ const Accordion = _ref6 => {
     "aria-expanded": isOpen ? 'true' : 'false',
     ChevronKeyframes: ChevronKeyframes,
     type: "button"
-  }, title, /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(_index.Chevron, {
+  }, /*#__PURE__*/_react.default.createElement(StyledText, {
+    tag: "h3"
+  }, title), /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(_index.Chevron, {
     colour: "black",
     direction: isOpen ? 'up' : 'down'
   }))), /*#__PURE__*/_react.default.createElement(Copy, {

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

@@ -2,6 +2,23 @@
 
 exports[`renders correctly 1`] = `
 .c2 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c4 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
   text-transform: uppercase;
@@ -13,17 +30,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.5rem;
 }
 
-.c2 {
+.c4 {
   font-size: 1.5rem;
   line-height: normal;
 }
 
-.c2 span {
+.c4 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c6 {
+.c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -35,17 +52,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c6 {
+.c8 {
   font-size: 1rem;
   line-height: normal;
 }
 
-.c6 span {
+.c8 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c4 {
+.c6 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -95,7 +112,7 @@ exports[`renders correctly 1`] = `
   animation-duration: 0.4s;
 }
 
-.c3 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,7 +126,7 @@ exports[`renders correctly 1`] = `
   align-content: center;
 }
 
-.c5 {
+.c7 {
   overflow: hidden;
   height: 0;
   visibility: none;
@@ -118,36 +135,54 @@ exports[`renders correctly 1`] = `
   padding: 0 2rem;
 }
 
+.c3 {
+  margin-bottom: 0;
+}
+
 @media (min-width:740px) {
   .c2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    font-size: 1.375rem;
+    line-height: 1.625rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c4 {
     font-size: 1.875rem;
     line-height: 1.875rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c2 {
+  .c4 {
     font-size: 2rem;
     line-height: 2rem;
   }
 }
 
 @media (min-width:740px) {
-  .c6 {
+  .c8 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c8 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c4 {
+  .c6 {
     fill: #000000;
   }
 }
@@ -159,7 +194,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c7 {
     padding: 0 3rem;
   }
 }
@@ -173,16 +208,20 @@ exports[`renders correctly 1`] = `
     onClick={[Function]}
     type="button"
   >
-    <h2
-      className="c2"
+    <h3
+      className="c2 c3"
     >
-      I am the title
-    </h2>
+      <h2
+        className="c4"
+      >
+        I am the title
+      </h2>
+    </h3>
     <div
-      className="c3"
+      className="c5"
     >
       <svg
-        className="c4"
+        className="c6"
         direction="down"
         fill="#000000"
         height={24}
@@ -197,10 +236,10 @@ exports[`renders correctly 1`] = `
     </div>
   </button>
   <div
-    className="c5"
+    className="c7"
   >
     <p
-      className="c6"
+      className="c8"
     >
       Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
     </p>

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

@@ -147,7 +147,6 @@ const ArticleTeaser = _ref15 => {
     alt = '',
     category = null,
     logoSize = null,
-    family = 'Anton',
     time = null
   } = _ref15;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(Link, {
@@ -172,11 +171,7 @@ const ArticleTeaser = _ref15 => {
     weight: "bold"
   }, date), /*#__PURE__*/_react.default.createElement(Title, {
     time: time,
-    size: "xl",
-    tag: "h3",
-    height: "2rem",
-    weight: "normal",
-    family: family
+    tag: "h3"
   }, title), time && /*#__PURE__*/_react.default.createElement(Time, {
     size: "xs",
     weight: "400",

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

@@ -54,14 +54,6 @@ it('renders article teaser correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c10 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c10 span {
       font-size: inherit;
       line-height: inherit;
@@ -351,14 +343,6 @@ it('renders press realese correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c10 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c10 span {
       font-size: inherit;
       line-height: inherit;

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();
+});