@comicrelief/component-library 8.49.1 → 8.50.1

package/src/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/src/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -141,7 +141,6 @@ const ArticleTeaser = ({
   alt = '',
   category = null,
   logoSize = null,
-  family = 'Anton',
   time = null
 }) => (
   <Wrapper>
@@ -175,11 +174,7 @@ const ArticleTeaser = ({
         </Date>
         <Title
           time={time}
-          size="xl"
           tag="h3"
-          height="2rem"
-          weight="normal"
-          family={family}
         >
           {title}
         </Title>
@@ -198,7 +193,6 @@ ArticleTeaser.propTypes = {
   image: PropTypes.string,
   imageLow: PropTypes.string,
   logoSize: PropTypes.string,
-  family: PropTypes.string,
   category: PropTypes.string,
   alt: PropTypes.string,
   date: PropTypes.string.isRequired,

package/src/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;
@@ -355,14 +347,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/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { snakeCase } from 'lodash';
+import CTACard from '../shared/CTACard';
+import CardsContainer from './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 = ({ data }) => {
+  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 = snakeCase(bgCards || 'white');
+
+  return (
+    <CardsContainer
+      backgroundColor={cardsBackground}
+      columns={columns}
+      isCarousel={carouselOfCards}
+      paddingAbove={paddingAbove}
+      paddingBelow={paddingBelow}
+    >
+      {cards.map(card => (
+        <CTACard
+          key={card.id}
+          card={card}
+          columns={columns}
+          isCarousel={carouselOfCards}
+        />
+      ))}
+    </CardsContainer>
+  );
+};
+
+CTAMultiCard.propTypes = {
+  data: PropTypes.shape({
+    cards: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        body: PropTypes.node,
+        image: PropTypes.shape({
+          description: PropTypes.string,
+          gatsbyImageData: PropTypes.shape({
+            placeholder: PropTypes.shape({
+              fallback: PropTypes.string
+            }),
+            images: PropTypes.shape({
+              fallback: PropTypes.shape({
+                src: PropTypes.string,
+                srcSet: PropTypes.string
+              }),
+              sources: PropTypes.arrayOf(
+                PropTypes.shape({
+                  srcSet: PropTypes.string
+                })
+              )
+            })
+          })
+        }),
+        backgroundColour: PropTypes.string,
+        link: PropTypes.string,
+        linkLabel: PropTypes.string
+      })
+    ).isRequired,
+    backgroundColour: PropTypes.string,
+    layout: PropTypes.string,
+    carouselOfCards: PropTypes.bool,
+    paddingAbove: PropTypes.string,
+    paddingBelow: PropTypes.string
+  }).isRequired
+};
+
+export default CTAMultiCard;

package/{dist/components/Molecules → src/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/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
+
+const CardsContainer = styled.div`
+  padding-top: ${({ paddingAbove }) => paddingAbove};
+  padding-bottom: ${({ paddingBelow }) => paddingBelow};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  gap: 1rem;
+
+  // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
+  ${({ isCarousel }) => !isCarousel && css`
+    @media (max-width: ${breakpointValues.M - 1}px) {
+      flex-direction: column;
+      background: transparent;
+    }
+  `}
+
+  // Non-mobile layout (M and above) - consistent across carousel/non-carousel, as above M we only do stacked mode.
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  // Carousel mode - horizontal scroll container (M and below)
+  ${({ isCarousel }) => isCarousel && css`
+    @media (max-width: ${breakpointValues.L - 1}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;
+      }
+    }
+  `}
+
+  // Desktop grid layout for XL breakpoint - 3 columns
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
+    ${({ columns }) => columns === 3 && 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%;
+    `}
+  }
+`;
+export default CardsContainer;

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../../tests/hoc/shallowWithTheme';
+import CTAMultiCard from './CTAMultiCard';
+import exampleData from './example_data.json';
+import Text from '../../../Atoms/Text/Text';
+
+const makeProcessedCard = (card) => {
+  const fallback = card?.image?.gatsbyImageData?.images?.fallback?.src;
+  const imageLow = card?.image?.gatsbyImageData?.placeholder?.fallback;
+  const images = card?.image?.gatsbyImageData?.images?.sources?.[0]?.srcSet;
+
+  return {
+    ...card,
+    fallback,
+    imageLow,
+    images,
+    // tests focus on layout; use a stable processed value here
+    bgColour: 'white',
+    description: card?.image?.description || '',
+    target: 'self',
+    external: null
+  };
+};
+
+// Map example data cards to include pre-rendered body content
+const cardsWithRenderedBody = exampleData.cards.map(card => ({
+  ...makeProcessedCard(card),
+  body: (
+    <Text tag="p">
+      <strong>Load</strong> of text here
+    </Text>
+  )
+}));
+
+const mockData = {
+  ...exampleData,
+  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: (
+        <Text tag="p">
+          Load of text here
+        </Text>
+      ),
+      image: null
+    }
+  ]
+};
+
+it('renders correctly with data prop', () => {
+  const tree = renderWithTheme(
+    <CTAMultiCard data={mockData} />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders carousel mode correctly', () => {
+  const carouselData = {
+    ...mockData,
+    carouselOfCards: true
+  };
+
+  const tree = renderWithTheme(
+    <CTAMultiCard data={carouselData} />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders 2 columns layout correctly', () => {
+  const twoColumnData = {
+    ...mockData,
+    layout: '2 columns'
+  };
+
+  const tree = renderWithTheme(
+    <CTAMultiCard 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 = renderWithTheme(
+    <CTAMultiCard data={testData} />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});