@comicrelief/component-library 8.47.4 → 8.48.0

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

@@ -0,0 +1,86 @@
+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';
+
+// Map example data cards to include pre-rendered body content
+const cardsWithRenderedBody = exampleData.cards.map(card => ({
+  ...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',
+      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();
+});

package/src/components/Molecules/CTAMultiCard/SingleCard.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Picture from '../../Atoms/Picture/Picture';
+import ArrowIcon from './ArrowIcon';
+import altCtaUnderline from '../../../theme/shared/assets/alt_cta_underline.svg';
+import {
+  CardLink,
+  ImageWrapper,
+  CopyAndLinkSection,
+  Copy,
+  CTA,
+  CTAText,
+  CTATextUnderline,
+  ArrowIconWrapper,
+  CardWrapper
+} from './CTAMultiCard.style';
+
+const SingleCard = ({
+  card,
+  isCarousel
+}) => {
+  const {
+    id,
+    body,
+    link,
+    linkLabel,
+    fallback,
+    imageLow,
+    images,
+    bgColour,
+    description,
+    target,
+    external
+  } = card;
+
+  return (
+    <CardWrapper key={id} isCarousel={isCarousel}>
+      <CardLink
+        href={link}
+        target={target}
+        rel={external}
+        isCarousel={isCarousel}
+        backgroundColor={bgColour}
+      >
+        {imageLow && (
+          <ImageWrapper>
+            <Picture
+              alt={description}
+              imageLow={imageLow}
+              images={images}
+              image={fallback}
+              objectFit="cover"
+              width="100%"
+              height="100%"
+            />
+          </ImageWrapper>
+        )}
+        <CopyAndLinkSection backgroundColor={bgColour}>
+          <Copy>
+            {body}
+          </Copy>
+          {linkLabel && (
+            <CTA>
+              <CTAText>
+                {linkLabel}
+                <CTATextUnderline
+                  src={altCtaUnderline}
+                  alt=""
+                  aria-hidden="true"
+                />
+              </CTAText>
+              <ArrowIconWrapper>
+                <ArrowIcon />
+              </ArrowIconWrapper>
+            </CTA>
+          )}
+        </CopyAndLinkSection>
+      </CardLink>
+    </CardWrapper>
+  );
+};
+
+SingleCard.propTypes = {
+  card: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    body: PropTypes.node,
+    link: PropTypes.string.isRequired,
+    linkLabel: PropTypes.string,
+    fallback: PropTypes.string,
+    imageLow: PropTypes.string,
+    images: PropTypes.string,
+    bgColour: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    target: PropTypes.string.isRequired,
+    external: PropTypes.string
+  }).isRequired,
+  isCarousel: PropTypes.bool
+};
+
+export default SingleCard;