@comicrelief/component-library 8.51.4 → 8.51.5

package/dist/components/Molecules/OLD_CTAMultiCard/example_data.json

@@ -1,107 +0,0 @@
-{
-  "__typename": "ContentfulParagraphCardsDs",
-  "title": "test cards 6",
-  "backgroundColour": "Transparent",
-  "layout": "3 columns",
-  "columnsOnMd": false,
-  "paddingOptions": "Both Off",
-  "carouselOfCards": false,
-  "cards": [
-        {
-          "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
-          "title": "Full Card Oooh Chilly",
-          "backgroundColour": "White",
-          "link": "/test",
-          "linkLabel": "test go",
-          "image": {
-            "description": "",
-            "gatsbyImageData": {
-              "images": {
-                "sources": [
-                  {
-                    "srcSet": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
-                    "sizes": "100vw",
-                    "type": "image/webp"
-                  }
-                ],
-                "fallback": {
-                  "src": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
-                  "srcSet": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg 678w",
-                  "sizes": "100vw"
-                }
-              },
-              "layout": "fullWidth",
-              "width": 1,
-              "height": 0.7389380530973452,
-              "placeholder": {
-                "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
-              }
-            }
-          }
-        },
-        {
-          "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-2",
-          "title": "Full Card Oooh Chilly",
-          "backgroundColour": "White",
-          "link": "/test",
-          "linkLabel": "test go",
-          "image": {
-            "description": "",
-            "gatsbyImageData": {
-              "images": {
-                "sources": [
-                  {
-                    "srcSet": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
-                    "sizes": "100vw",
-                    "type": "image/webp"
-                  }
-                ],
-                "fallback": {
-                  "src": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
-                  "srcSet": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg 678w",
-                  "sizes": "100vw"
-                }
-              },
-              "layout": "fullWidth",
-              "width": 1,
-              "height": 0.7389380530973452,
-              "placeholder": {
-                "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
-              }
-            }
-          }
-        },
-        {
-          "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-3",
-          "title": "Full Card Oooh Chilly",
-          "backgroundColour": "White",
-          "link": "/test",
-          "linkLabel": "test go",
-          "image": {
-            "description": "",
-            "gatsbyImageData": {
-              "images": {
-                "sources": [
-                  {
-                    "srcSet": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
-                    "sizes": "100vw",
-                    "type": "image/webp"
-                  }
-                ],
-                "fallback": {
-                  "src": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
-                  "srcSet": "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg 678w",
-                  "sizes": "100vw"
-                }
-              },
-              "layout": "fullWidth",
-              "width": 1,
-              "height": 0.7389380530973452,
-              "placeholder": {
-                "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
-              }
-            }
-          }
-        }
-      ]
-}

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

@@ -1,100 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { snakeCase } from 'lodash';
-import SingleCard from './SingleCard';
-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 => (
-        <SingleCard
-          key={card.id}
-          card={card}
-          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/src/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.style.js

@@ -1,259 +0,0 @@
-import styled, { css } from 'styled-components';
-import { bounceUpAnimation, springScaleAnimation } from '../../../theme/shared/animations';
-import { breakpointValues } from '../../../theme/shared/allBreakpoints';
-import fontHelper from '../../../theme/crTheme/fontHelper';
-
-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, 1fr));
-      width: 100%;
-      margin: 0 auto;
-      max-width: 100%;
-
-      /*
-      Above 1724px (3 * 564px which is the card max-width + 2 * 1rem), this is to stop the visible "gaps" growing
-      between the cards on really wide screens (so the only space between cards is the gap (1rem)).
-       */
-      @media (min-width: 1724px) {
-        grid-template-columns: repeat(3, 564px);
-        width: fit-content;
-      }
-    `}
-  }
-`;
-
-const ImageWrapper = styled.div`
-  width: 100%;
-  overflow: hidden;
-  flex-shrink: 0;
-  background: transparent;
-
-  img {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-    display: block;
-
-    // Desktop-only image zoom animation on card hover
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
-      ${springScaleAnimation(true)}
-    }
-  }
-`;
-
-const CTAText = styled.span`
-  ${({ theme }) => fontHelper(theme, 'span')}
-  color: ${({ theme }) => theme.color('grey')};
-  font-weight: bold;
-  text-decoration: none;
-  position: relative;
-  display: inline-block;
-`;
-
-const CTATextUnderline = styled.img`
-  height: 4px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  transition: opacity 0.15s 0.1s;
-  opacity: 0;
-  pointer-events: none;
-`;
-
-const ArrowIconWrapper = styled.div`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: ${({ theme }) => theme.color('grey')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-
-// Card wrapper link - makes entire card clickable
-const CardLink = styled.a`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  width: 100%;
-  flex: 1 1 auto;
-  background: transparent;
-  border-radius: 1rem;
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
-  text-decoration: none;
-  overflow: hidden;
-  cursor: pointer;
-
-  img {
-    // Zoom the image in slightly by default so the 'bounce' animation doesn't cause issues
-    transform: scale(1.02);
-    transition: transform ${0.4}s cubic-bezier(0.68, ${-1.15}, 0.265, ${2.35});
-   }
-
-  // Desktop-only hover effects
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    ${bounceUpAnimation(true, 0.02, 1)};
-
-    &:hover {
-      box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
-
-      ${ImageWrapper} img {
-        transform: scale(1.1);
-      }
-
-      ${CTAText} {
-        color: ${({ theme }) => theme.color('red')};
-        text-decoration: none;
-      }
-
-      ${CTATextUnderline} {
-        opacity: 1;
-      }
-
-      ${ArrowIconWrapper} {
-        background: ${({ theme }) => theme.color('red')};
-      }
-    }
-  }
-`;
-
-const CardWrapper = styled.div`
-  width: 100%;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-
-  // Carousel mode - cards at normal width in horizontal scroll (Medium and below)
-  ${({ isCarousel }) => isCarousel && css`
-    @media (max-width: ${breakpointValues.L - 1}px) {
-      scroll-snap-align: start;
-      flex: 0 0 calc(100% - 1.5rem);
-      min-width: calc(100% - 1.5rem);
-      max-width: calc(100% - 1.5rem);
-      flex-shrink: 0;
-    }
-  `}
-
-  // Mobile stack mode - cards at normal width in vertical stack (only on mobile, below M breakpoint)
-  ${({ isCarousel }) => !isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}px) {
-      width: 100%;
-    }
-  `}
-
-  // Desktop M breakpoint - 2 columns layout
-  // - when isCarousel is true we only switch to "desktop" layout at L and above
-  @media ${({ theme, isCarousel }) => theme.allBreakpoints(isCarousel ? 'L' : 'M')} {
-    flex-basis: calc(50% - 1rem);
-    max-width: 564px;
-    height: 100%;
-    align-self: stretch;
-  }
-
-  // Desktop XL breakpoint - 3 columns layout
-  @media ${({ theme }) => theme.allBreakpoints('XL')} {
-    flex-basis: unset;
-    max-width: 564px;
-    height: 100%;
-    align-self: stretch;
-  }
-`;
-
-const CopyAndLinkSection = styled.div`
-  width: 100%;
-  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  display: flex;
-  flex-direction: column;
-  padding: 2rem;
-  flex: 1;
-  min-height: 0;
-  border-radius: 0 0 1rem 1rem;
-`;
-
-const Copy = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-`;
-
-const CTA = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: auto;
-  padding-top: 1rem;
-`;
-
-export {
-  CardLink,
-  ImageWrapper,
-  CopyAndLinkSection,
-  Copy,
-  CTA,
-  CTAText,
-  CTATextUnderline,
-  ArrowIconWrapper,
-  CardsContainer,
-  CardWrapper
-};

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

@@ -1,86 +0,0 @@
-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/OLD_CTAMultiCard/SingleCard.js

@@ -1,100 +0,0 @@
-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;

package/src/components/Molecules/OLD_CTAMultiCard/_ArrowIcon.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const StyledArrowIcon = styled.svg`
-  display: inline-block;
-  color: ${({ theme }) => theme.color('white')};
-  fill: currentColor;
-`;
-
-const ArrowIcon = () => (
-  <StyledArrowIcon
-    width="15"
-    height="13"
-    viewBox="0 0 15 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z" fill="currentColor" />
-  </StyledArrowIcon>
-);
-
-export default ArrowIcon;