@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/Cta/Cta.test.tsx

@@ -1,250 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { pushSpy, useRouter } from '../../../__mocks__/next/router';
-import { CtaProps } from './Cta';
-import Cta from '.';
-import messagesEn from './messages.en';
-
-const defaultProps: CtaProps = {
-  slice: {
-    title: 'Main Title',
-    variant: 'white',
-    ctaCards: [
-      {
-        id: 1,
-        title: 'Title',
-        variant: 'gray',
-        backgroundShape: false,
-        textAlign: 'left',
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Cta {...combinedProps} />);
-};
-
-describe('The Cta component', () => {
-  afterEach(() => {
-    pushSpy.mockRestore();
-  });
-
-  afterAll(() => {
-    useRouter.mockRestore();
-  });
-
-  it('displays the title', () => {
-    setup();
-
-    expect(screen.getByText('Main Title')).toBeInTheDocument();
-  });
-
-  it('displays the title in cta card', () => {
-    setup();
-
-    expect(screen.getByText('Title')).toBeInTheDocument();
-  });
-
-  it('displays the image if the image is in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        ctaCards: [
-          {
-            ...defaultProps.slice.ctaCards[0],
-            image: {
-              id: 71,
-              alt: 'Alt',
-              img: { data: storybookStrapiCoverMock },
-            },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Alt');
-  });
-
-  it('does not display the image if there is no image in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        ctaCards: [
-          {
-            ...defaultProps.slice.ctaCards[0],
-            image: undefined,
-          },
-        ],
-      },
-    });
-
-    expect(screen.queryByAltText('Alt')).not.toBeInTheDocument();
-  });
-
-  it('does not display the tagline and sub title in cta card if it is not in slice', () => {
-    setup();
-
-    expect(screen.queryByText('Tagline')).not.toBeInTheDocument();
-    expect(screen.queryByText('Subtitle')).not.toBeInTheDocument();
-  });
-
-  it('displays the dark shapes image if cta card textAlign is center with image in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        ctaCards: [
-          {
-            ...defaultProps.slice.ctaCards[0],
-            image: {
-              id: 71,
-              alt: 'Alt',
-              img: { data: storybookStrapiCoverMock },
-            },
-            backgroundShape: true,
-            textAlign: 'center',
-          },
-        ],
-      },
-    });
-
-    expect(
-      screen.getByAltText(messagesEn['sections.cta.backgroundShapesDark'])
-    ).toBeInTheDocument();
-  });
-
-  it('displays the dark background shapes image if cta card variant is "green" in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        ctaCards: [
-          {
-            ...defaultProps.slice.ctaCards[0],
-            variant: 'green',
-            backgroundShape: true,
-          },
-        ],
-      },
-    });
-
-    expect(
-      screen.getByAltText(messagesEn['sections.cta.backgroundShapesDark'])
-    ).toBeInTheDocument();
-  });
-
-  it('displays the light shapes image if cta card variant is not "green" and textAlign is not center with image in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        ctaCards: [
-          {
-            ...defaultProps.slice.ctaCards[0],
-            variant: 'gray',
-            textAlign: 'left',
-            backgroundShape: true,
-            image: {
-              id: 71,
-              alt: 'Alt',
-              img: { data: storybookStrapiCoverMock },
-            },
-          },
-        ],
-      },
-    });
-
-    expect(
-      screen.getByAltText(messagesEn['sections.cta.backgroundShapesLight'])
-    ).toBeInTheDocument();
-  });
-});
-
-it('displays a link in cta card if the button is in slice', () => {
-  setup({
-    slice: {
-      ...defaultProps.slice,
-      ctaCards: [
-        {
-          ...defaultProps.slice.ctaCards[0],
-          buttons: [
-            {
-              id: '1',
-              button: { id: '1', text: 'Button', url: 'https://tree.ly' },
-              variant: 'solid',
-            },
-          ],
-        },
-      ],
-    },
-  });
-
-  expect(screen.getByRole('link')).toBeInTheDocument();
-  expect(screen.getByText('Button')).toBeInTheDocument();
-});
-
-it('displays two buttons in cta card if the buttons are in slice', () => {
-  setup({
-    slice: {
-      ...defaultProps.slice,
-      ctaCards: [
-        {
-          ...defaultProps.slice.ctaCards[0],
-          buttons: [
-            {
-              id: '1',
-              button: { id: '1', text: 'Button', url: 'https://tree.ly' },
-              variant: 'solid',
-            },
-            {
-              id: '2',
-              button: { id: '2', text: 'Button', url: 'https://tree.ly' },
-              variant: 'outline',
-            },
-          ],
-        },
-      ],
-    },
-  });
-
-  expect(screen.getAllByRole('link')).toHaveLength(2);
-});
-
-it('displays the card in Right layout', () => {
-  setup({
-    slice: {
-      ...defaultProps.slice,
-      ctaCards: [
-        {
-          ...defaultProps.slice.ctaCards[0],
-          textAlign: 'right',
-          image: {
-            alt: 'Alt',
-            img: { data: storybookStrapiCoverMock },
-          },
-        },
-      ],
-    },
-  });
-
-  expect(screen.getByText('Title')).toBeInTheDocument();
-  expect(screen.getByAltText('Alt')).toBeInTheDocument();
-});
-
-it('displays the card in CenterWithoutImage layout', () => {
-  setup({
-    slice: {
-      ...defaultProps.slice,
-      ctaCards: [
-        {
-          ...defaultProps.slice.ctaCards[0],
-          textAlign: 'center',
-          image: undefined,
-        },
-      ],
-    },
-  });
-
-  expect(screen.queryByAltText('Alt')).not.toBeInTheDocument();
-});

package/src/slices/Cta/Cta.tsx

@@ -1,420 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  Container,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Gradient,
-  Spacer,
-  Wrapper,
-} from 'boemly';
-import StrapiButtonWithVariant from '../../models/strapi/StrapiButtonWithVariant';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import Image from 'next/image';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import { CDN_URI } from '../../constants/api';
-import { IntlContext } from '../../components/ContextProvider';
-
-type Variant = 'gray' | 'green' | 'white';
-
-enum CtaCardType {
-  Left = 'left',
-  CenterWithoutImage = 'centerWithoutImage',
-  CenterWithImage = 'centerWithImage',
-  Right = 'right',
-}
-
-export interface CtaProps {
-  slice: {
-    tagline?: string;
-    title?: string;
-    subTitle?: string;
-    variant: Variant;
-    ctaCards: CtaCard[];
-  };
-}
-
-export interface CtaCard {
-  id: number;
-  tagline?: string;
-  title: string;
-  subTitle?: string;
-  image?: StrapiImage;
-  buttons?: StrapiButtonWithVariant[];
-  variant: Variant;
-  backgroundShape: boolean;
-  textAlign: 'left' | 'right' | 'center';
-}
-
-const STATES: Record<CtaCardType, Record<string, any>> = {
-  left: {
-    textAlign: 'left',
-    paddingTagline: '0',
-    paddingTitle: '0',
-    justifyContent: 'space-between',
-    buttonJustifyContent: 'start',
-    textMarginLeft: ['0', null, null, null, '14'],
-    textMarginRight: '0',
-  },
-  centerWithoutImage: {
-    textAlign: 'center',
-    paddingTagline: '28',
-    paddingTitle: '20',
-    justifyContent: 'center',
-    buttonJustifyContent: 'center',
-    textMarginLeft: '0',
-    textMarginRight: '0',
-  },
-  centerWithImage: {
-    textAlign: 'center',
-    paddingTagline: '28',
-    paddingTitle: '20',
-    justifyContent: 'center',
-    buttonJustifyContent: 'center',
-    textMarginLeft: '0',
-    textMarginRight: '0',
-  },
-  right: {
-    textAlign: 'left',
-    paddingTagline: '0',
-    paddingTitle: '0',
-    justifyContent: 'start',
-    buttonJustifyContent: 'start',
-    textMarginLeft: '0',
-    textMarginRight: ['0', null, null, null, '10'],
-  },
-};
-
-const VARIANTS: Record<Variant, Record<string, Record<CtaCardType, string>>> = {
-  gray: {
-    backgroundColor: {
-      left: 'primary.50',
-      centerWithoutImage: 'primary.50',
-      centerWithImage: 'primary.50',
-      right: 'primary.50',
-    },
-    taglineColor: {
-      left: 'primary.500',
-      centerWithoutImage: 'primary.500',
-      centerWithImage: 'white',
-      right: 'primary.500',
-    },
-    titleColor: {
-      left: 'black',
-      centerWithoutImage: 'black',
-      centerWithImage: 'white',
-      right: 'black',
-    },
-    subTitleColor: {
-      left: 'black',
-      centerWithoutImage: 'black',
-      centerWithImage: 'white',
-      right: 'black',
-    },
-  },
-  green: {
-    backgroundColor: {
-      left: 'primary.800',
-      centerWithoutImage: 'primary.800',
-      centerWithImage: 'primary.800',
-      right: 'primary.800',
-    },
-    taglineColor: {
-      left: 'white',
-      centerWithoutImage: 'white',
-      centerWithImage: 'white',
-      right: 'white',
-    },
-    titleColor: {
-      left: 'white',
-      centerWithoutImage: 'white',
-      centerWithImage: 'white',
-      right: 'white',
-    },
-    subTitleColor: {
-      left: 'white',
-      centerWithoutImage: 'white',
-      centerWithImage: 'white',
-      right: 'white',
-    },
-  },
-  white: {
-    backgroundColor: {
-      left: 'white',
-      centerWithoutImage: 'white',
-      centerWithImage: 'primary.800',
-      right: 'white',
-    },
-    taglineColor: {
-      left: 'primary.500',
-      centerWithoutImage: 'primary.500',
-      centerWithImage: 'white',
-      right: 'primary.500',
-    },
-    titleColor: {
-      left: 'black',
-      centerWithoutImage: 'black',
-      centerWithImage: 'white',
-      right: 'black',
-    },
-    subTitleColor: {
-      left: 'black',
-      centerWithoutImage: 'black',
-      centerWithImage: 'white',
-      right: 'black',
-    },
-  },
-};
-
-const getTypeOfCard = (ctaCard: CtaCard): CtaCardType => {
-  if (ctaCard.textAlign === 'center') {
-    if (ctaCard.image) {
-      return CtaCardType.CenterWithImage;
-    }
-    return CtaCardType.CenterWithoutImage;
-  }
-  if (ctaCard.textAlign === 'left') {
-    return CtaCardType.Left;
-  }
-  return CtaCardType.Right;
-};
-
-export const Cta: React.FC<CtaProps> = ({ slice }: CtaProps) => {
-  const { formatMessage } = useContext(IntlContext);
-
-  return (
-    <DefaultSectionContainer
-      backgroundColor={VARIANTS[slice.variant].backgroundColor.left}
-      title={slice.title}
-    >
-      <Wrapper>
-        {slice.title ? (
-          <>
-            <Flex alignItems="center" flexDirection="column">
-              <DefaultSectionHeader
-                tagline={slice.tagline}
-                taglineProps={{
-                  color: VARIANTS[slice.variant].taglineColor.left,
-                  textAlign: 'center',
-                  maxWidth: '3xl',
-                }}
-                title={slice.title}
-                titleProps={{
-                  color: VARIANTS[slice.variant].titleColor.left,
-                  textAlign: 'center',
-                  width: 'full',
-                  maxWidth: '3xl',
-                }}
-                text={slice.subTitle}
-                textProps={{
-                  color: VARIANTS[slice.variant].subTitleColor.left,
-                  textAlign: 'center',
-                  maxWidth: '3xl',
-                }}
-              />
-            </Flex>
-            <Spacer height={['16', null, null, null, '20']} />
-          </>
-        ) : (
-          <></>
-        )}
-        <Flex gap="4" flexDirection="column">
-          {slice.ctaCards.map((ctaCard) => {
-            const ctaCardType = getTypeOfCard(ctaCard);
-
-            return (
-              <Container
-                backgroundColor={
-                  VARIANTS[ctaCard.variant].backgroundColor[ctaCardType]
-                }
-                key={ctaCard.id}
-                position="relative"
-                elevation="none"
-              >
-                {ctaCard.image &&
-                ctaCardType === CtaCardType.CenterWithImage ? (
-                  <Box
-                    position="absolute"
-                    left="0"
-                    top="0"
-                    width="full"
-                    height="full"
-                    borderRadius="xl"
-                    overflow="hidden"
-                  >
-                    <Image
-                      src={strapiMediaUrl(ctaCard.image.img, 'large')}
-                      alt={ctaCard.image.alt}
-                      fill
-                      style={{
-                        objectFit: ctaCard.image.objectFit || 'cover',
-                        borderRadius: 'var(--boemly-radii-xl)',
-                      }}
-                    />
-                    <Gradient />
-                  </Box>
-                ) : (
-                  <></>
-                )}
-                {ctaCard.backgroundShape ? (
-                  <Box
-                    position="absolute"
-                    left="0"
-                    top="0"
-                    width="full"
-                    height="full"
-                  >
-                    <Image
-                      src={
-                        ctaCardType === CtaCardType.CenterWithImage ||
-                        ctaCard.variant === 'green'
-                          ? `${CDN_URI}/assets/v3/strapi-slices/shapes-dark.svg`
-                          : `${CDN_URI}/assets/v3/strapi-slices/shapes-light.svg`
-                      }
-                      alt={formatMessage({
-                        id: `sections.cta.backgroundShapes${
-                          ctaCardType === CtaCardType.CenterWithImage ||
-                          ctaCard.variant === 'green'
-                            ? 'Dark'
-                            : 'Light'
-                        }`,
-                      })}
-                      fill
-                      style={{
-                        objectFit: 'cover',
-                        borderRadius: 'var(--boemly-radii-xl)',
-                      }}
-                    />
-                  </Box>
-                ) : (
-                  <></>
-                )}
-
-                <Flex
-                  flexDir={['column', null, null, null, 'row']}
-                  flexGrow="1"
-                  gap={['8', null, null, null, '16']}
-                  justifyContent={STATES[ctaCardType].justifyContent}
-                >
-                  {ctaCard.image && ctaCardType === CtaCardType.Right ? (
-                    <Box
-                      position="relative"
-                      height={['3xs', null, null, null, 'auto']}
-                      minWidth={[null, null, null, null, '50%']}
-                    >
-                      <Image
-                        src={strapiMediaUrl(ctaCard.image.img, 'xLarge')}
-                        alt={ctaCard.image.alt}
-                        fill
-                        style={{
-                          objectFit: ctaCard.image.objectFit || 'cover',
-                          borderRadius: 'var(--boemly-radii-xl)',
-                        }}
-                      />
-                    </Box>
-                  ) : (
-                    <></>
-                  )}
-
-                  <Box
-                    zIndex="base"
-                    marginLeft={STATES[ctaCardType].textMarginLeft}
-                    marginRight={STATES[ctaCardType].textMarginRight}
-                    maxWidth="3xl"
-                  >
-                    <Spacer height={['0', null, null, null, '20']} />
-
-                    <DefaultSectionHeader
-                      tagline={ctaCard.tagline}
-                      taglineProps={{
-                        textAlign: STATES[ctaCardType].textAlign,
-                        color:
-                          VARIANTS[ctaCard.variant].taglineColor[ctaCardType],
-                        paddingX: [
-                          '0',
-                          null,
-                          null,
-                          null,
-                          STATES[ctaCardType].paddingTagline,
-                        ],
-                      }}
-                      title={ctaCard.title}
-                      titleProps={{
-                        fontFamily: 'heading',
-                        fontSize: '4xl',
-                        fontWeight: '600',
-                        lineHeight: '9',
-                        textAlign: STATES[ctaCardType].textAlign,
-                        paddingX: [
-                          '0',
-                          null,
-                          null,
-                          null,
-                          STATES[ctaCardType].paddingTitle,
-                        ],
-                        color:
-                          VARIANTS[ctaCard.variant].titleColor[ctaCardType],
-                      }}
-                      text={ctaCard.subTitle}
-                      textProps={{
-                        textAlign: STATES[ctaCardType].textAlign,
-                        color:
-                          VARIANTS[ctaCard.variant].subTitleColor[ctaCardType],
-                      }}
-                    />
-                    {ctaCard.buttons && ctaCard.buttons.length > 0 ? (
-                      <>
-                        <Spacer height="8" />
-                        <Flex
-                          gap="2"
-                          justifyContent={
-                            STATES[ctaCardType].buttonJustifyContent
-                          }
-                        >
-                          {ctaCard.buttons &&
-                            ctaCard.buttons.map((button) => (
-                              <StrapiLinkButton
-                                key={button.button.id}
-                                link={button.button}
-                                size="md"
-                                variant={button.variant}
-                                component="Cta"
-                              />
-                            ))}
-                        </Flex>
-                      </>
-                    ) : (
-                      <></>
-                    )}
-                    <Spacer height={['1', null, null, null, '20']} />
-                  </Box>
-                  {ctaCard.image && ctaCardType === CtaCardType.Left ? (
-                    <Box
-                      position="relative"
-                      height={['3xs', null, null, null, 'auto']}
-                      minWidth={[null, null, null, null, '50%']}
-                    >
-                      <Image
-                        src={strapiMediaUrl(ctaCard.image.img, 'xLarge')}
-                        alt={ctaCard.image.alt}
-                        fill
-                        style={{
-                          objectFit: ctaCard.image.objectFit || 'cover',
-                          borderRadius: 'var(--boemly-radii-xl)',
-                        }}
-                      />
-                    </Box>
-                  ) : (
-                    <></>
-                  )}
-                </Flex>
-              </Container>
-            );
-          })}
-        </Flex>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/Cta/index.ts

@@ -1,3 +0,0 @@
-import { Cta } from './Cta';
-
-export default Cta;

package/src/slices/Cta/messages.de.ts

@@ -1,5 +0,0 @@
-const messagesDe = {
-  'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
-  'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen',
-};
-export default messagesDe;

package/src/slices/Cta/messages.en.ts

@@ -1,5 +0,0 @@
-const messagesEn = {
-  'sections.cta.backgroundShapesDark': 'Dark background shapes',
-  'sections.cta.backgroundShapesLight': 'Light background shapes',
-};
-export default messagesEn;