@treely/strapi-slices 1.0.0

package/src/slices/Comparison/Comparison.test.tsx

@@ -0,0 +1,173 @@
+import { mergeDeep } from '@/utils/mergeDeep';
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import { ComparisonProps } from './Comparison';
+import { pushSpy, useRouter } from '../../../__mocks__/next/router';
+import Comparison from '.';
+import messagesEn from './messages.en';
+
+const defaultProps: ComparisonProps = {
+  slice: {
+    comparisonCards: [
+      {
+        id: 1,
+        title: 'Card 1',
+        subTitle: 'Subtitle 1',
+        variant: 'white',
+        lists: [
+          {
+            id: '1',
+            title: 'List',
+            items: [
+              { id: '1', text: 'Item', icon: 'check' },
+              { id: '2', text: 'Item', icon: 'bullet' },
+              { id: '3', text: 'Item', icon: 'bullet' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: 'Card 2',
+        subTitle: 'Subtitle 2',
+        variant: 'white',
+        lists: [
+          {
+            id: '2',
+            title: 'List',
+            items: [
+              { id: '4', text: 'Item', icon: 'check' },
+              { id: '5', text: 'Item', icon: 'bullet' },
+              { id: '6', text: 'Item', icon: 'bullet' },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<Comparison {...combinedProps} />);
+};
+
+describe('The Comparison component', () => {
+  afterEach(() => {
+    pushSpy.mockRestore();
+  });
+
+  afterAll(() => {
+    useRouter.mockRestore();
+  });
+
+  it('displays the correct title and susbtitle, if they are defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        title: 'Comparison title',
+        subTitle: 'Comparison subtitle',
+        tagline: 'Comparison tagline',
+      },
+    });
+    expect(screen.getByText('Comparison title')).toBeInTheDocument();
+    expect(screen.getByText('Comparison subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Comparison tagline')).toBeInTheDocument();
+  });
+
+  it('displays the comparison cards', () => {
+    setup();
+
+    expect(screen.getByText('Card 1')).toBeInTheDocument();
+    expect(screen.getByText('Card 2')).toBeInTheDocument();
+  });
+
+  it('displays the list with items', () => {
+    setup();
+
+    expect(screen.getAllByText('List')).toHaveLength(2);
+    expect(screen.getAllByText('Item')).toHaveLength(6);
+  });
+
+  it('displays the fact title and subtitle if they are defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        comparisonCards: [
+          {
+            ...defaultProps.slice.comparisonCards[0],
+            factTitle: 'Fact Title',
+            factSubtitle: 'Fact Subtitle',
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByText('Fact Title')).toBeInTheDocument();
+    expect(screen.getByText('Fact Subtitle')).toBeInTheDocument();
+  });
+
+  it('displays the badge if it is defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        comparisonCards: [
+          {
+            ...defaultProps.slice.comparisonCards[0],
+            badge: 'Badge',
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByText('Badge')).toBeInTheDocument();
+  });
+
+  it('displays the button if the button is defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        comparisonCards: [
+          {
+            ...defaultProps.slice.comparisonCards[0],
+            button: { id: '1', url: 'https://tree.ly', text: 'Button' },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Button')).toBeInTheDocument();
+  });
+
+  it('displays the background shapes if variant is green in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        comparisonCards: [
+          { ...defaultProps.slice.comparisonCards[0], variant: 'green' },
+        ],
+      },
+    });
+
+    expect(
+      screen.getByAltText(messagesEn['sections.comparison.backgroundShapes'])
+    ).toBeInTheDocument();
+  });
+
+  it('displays the image if it is defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        comparisonCards: [
+          {
+            ...defaultProps.slice.comparisonCards[0],
+            image: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('alt', 'Alt text');
+  });
+});

package/src/slices/Comparison/Comparison.tsx

@@ -0,0 +1,265 @@
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import {
+  Container,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Wrapper,
+  Text,
+  Flex,
+  Box,
+  Spacer,
+  Divider,
+  Heading,
+  Badge,
+  SimpleGrid,
+} from 'boemly';
+import Image from 'next/image';
+import { CaretRight } from '@phosphor-icons/react';
+import { useIntl } from 'react-intl';
+import { Icon } from './Icon';
+import { CDN_URI } from '@/constants/api';
+
+export interface ComparisonProps {
+  slice: {
+    title?: string;
+    subTitle?: string;
+    tagline?: string;
+
+    comparisonCards: ComparisonCard[];
+  };
+}
+
+export interface ComparisonCard {
+  id: number;
+  title: string;
+  subTitle: string;
+  badge?: string;
+  variant: 'gray' | 'green' | 'white';
+  image?: StrapiImage;
+  button?: StrapiLink;
+  factTitle?: string;
+  factSubtitle?: string;
+  lists: {
+    id: string;
+    title: string;
+    items: { id: string; text: string; icon: 'bullet' | 'check' | 'cross' }[];
+  }[];
+}
+
+const VARIANTS = {
+  gray: {
+    backgroundColor: 'primary.50',
+    textColor: 'black',
+    subTitleColor: 'gray.500',
+    factColor: 'primary.800',
+    dividerColor: 'gray.200',
+  },
+  green: {
+    backgroundColor: 'primary.800',
+    textColor: 'white',
+    subTitleColor: 'whiteAlpha.900',
+    factColor: 'white',
+    dividerColor: 'whiteAlpha.200',
+  },
+  white: {
+    backgroundColor: 'white',
+    textColor: 'black',
+    subTitleColor: 'gray.500',
+    factColor: 'primary.800',
+    dividerColor: 'gray.200',
+  },
+};
+
+export const Comparison: React.FC<ComparisonProps> = ({
+  slice,
+}: ComparisonProps) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        {slice.title ? (
+          <>
+            <Flex alignItems="center" flexDirection="column">
+              <DefaultSectionHeader
+                tagline={slice.tagline}
+                title={slice.title}
+                text={slice.subTitle}
+                textProps={{ maxW: '2xl', textAlign: 'center' }}
+                titleProps={{
+                  textAlign: 'center',
+                  maxWidth: '3xl',
+                }}
+                taglineProps={{ textAlign: 'center', maxWidth: '3xl' }}
+              />
+            </Flex>
+            <Spacer height="12" />
+          </>
+        ) : (
+          <></>
+        )}
+        <SimpleGrid
+          columns={[1, null, null, null, slice.comparisonCards.length]}
+          spacing="4"
+        >
+          {slice.comparisonCards.map((comparisonCard) => (
+            <Container
+              boxShadow={comparisonCard.variant === 'green' ? 'xl' : 'base'}
+              border={
+                comparisonCard.variant === 'green' ? 'primary.800' : undefined
+              }
+              zIndex="base"
+              key={comparisonCard.id}
+              position="relative"
+              elevation="none"
+              p="3"
+              backgroundColor={VARIANTS[comparisonCard.variant].backgroundColor}
+            >
+              {comparisonCard.variant === 'green' ? (
+                <Box
+                  position="absolute"
+                  left="0"
+                  top="0"
+                  width="full"
+                  height="full"
+                  zIndex="-1"
+                >
+                  <Image
+                    src={`${CDN_URI}/assets/v3/strapi-slices/shapes-comparison.svg`}
+                    alt={formatMessage({
+                      id: 'sections.comparison.backgroundShapes',
+                    })}
+                    fill
+                    style={{
+                      objectFit: 'cover',
+                      borderRadius: 'var(--boemly-radii-xl)',
+                    }}
+                  />
+                </Box>
+              ) : (
+                <></>
+              )}
+              <Flex flexDir="column" gap="4">
+                {comparisonCard.image && (
+                  <Box position="relative" height="7" width="100%">
+                    <Image
+                      src={strapiMediaUrl(comparisonCard.image.img, 'small')}
+                      alt={comparisonCard.image.alt}
+                      fill
+                      style={{
+                        objectFit: comparisonCard.image.objectFit,
+                      }}
+                    />
+                  </Box>
+                )}
+                <Flex gap="2" alignItems="center" flexWrap="wrap">
+                  <Heading
+                    size="2xl"
+                    color={VARIANTS[comparisonCard.variant].textColor}
+                    whiteSpace="pre-line"
+                  >
+                    {comparisonCard.title}
+                  </Heading>
+                  {comparisonCard.badge && (
+                    <Badge
+                      backgroundColor="green.100"
+                      borderRadius="md"
+                      whiteSpace="pre-line"
+                    >
+                      {comparisonCard.badge}
+                    </Badge>
+                  )}
+                </Flex>
+              </Flex>
+              <Spacer height="4" />
+              <Text
+                size="smRegularNormal"
+                color={VARIANTS[comparisonCard.variant].subTitleColor}
+              >
+                {comparisonCard.subTitle}
+              </Text>
+
+              {comparisonCard.factTitle ||
+              comparisonCard.factSubtitle ||
+              comparisonCard.button ? (
+                <>
+                  <Spacer height="6" />
+                  <Flex flexDir="column">
+                    {comparisonCard.factTitle && (
+                      <>
+                        <Text
+                          color={VARIANTS[comparisonCard.variant].factColor}
+                          size="lgMonoNormal"
+                        >
+                          {comparisonCard.factTitle}
+                        </Text>
+                        <Text
+                          color={VARIANTS[comparisonCard.variant].factColor}
+                          size="smLowNormal"
+                        >
+                          {comparisonCard.factSubtitle}
+                        </Text>
+                      </>
+                    )}
+                    {comparisonCard.button && (
+                      <StrapiLinkButton
+                        mt="6"
+                        link={comparisonCard.button}
+                        size="md"
+                        variant="outline"
+                        rightIcon={<CaretRight size={16} weight="bold" />}
+                      />
+                    )}
+                  </Flex>
+                </>
+              ) : (
+                <></>
+              )}
+              <>
+                {comparisonCard.lists.map((list) => (
+                  <Box key={list.id}>
+                    <Divider
+                      my="8"
+                      color={VARIANTS[comparisonCard.variant].dividerColor}
+                    />
+                    <Text
+                      size="smLowBold"
+                      color={VARIANTS[comparisonCard.variant].textColor}
+                    >
+                      {list.title}
+                    </Text>
+                    <>
+                      {list.items.map((item) => (
+                        <Box key={item.id}>
+                          <Spacer height="4" />
+                          <Flex gap="4" alignItems="center">
+                            <Box>
+                              <Icon
+                                variant={comparisonCard.variant}
+                                icon={item.icon}
+                              />
+                            </Box>
+                            <Text
+                              size="smLowNormal"
+                              color={VARIANTS[comparisonCard.variant].textColor}
+                            >
+                              {item.text}
+                            </Text>
+                          </Flex>
+                        </Box>
+                      ))}
+                    </>
+                  </Box>
+                ))}
+              </>
+            </Container>
+          ))}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};
+export default Comparison;

package/src/slices/Comparison/Icon.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@/test/testUtils';
+import { mergeDeep } from '@/utils/mergeDeep';
+import { IconProps, Icon } from './Icon';
+
+const defaultProps: IconProps = {
+  variant: 'white',
+  icon: 'bullet',
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<Icon {...combinedProps} />);
+};
+
+describe('The Icon component', () => {
+  it('renders the correct icon if the "check" is defined', () => {
+    const { container } = render(<Icon variant="gray" icon="check" />);
+    const svgElement = container.querySelector('svg');
+
+    expect(svgElement).toHaveAttribute(
+      'fill',
+      'var(--boemly-colors-primary-500)'
+    );
+    expect(svgElement).toHaveAttribute('height', '20');
+    expect(svgElement).toHaveAttribute('viewBox', '0 0 256 256');
+    expect(svgElement).toHaveAttribute('width', '20');
+  });
+
+  it('renders the correct icon if the "cross" icon is defined', () => {
+    const { container } = render(<Icon variant="gray" icon="cross" />);
+    const svgElement = container.querySelector('svg');
+
+    expect(svgElement).toHaveAttribute('height', '20');
+    expect(svgElement).toHaveAttribute('viewBox', '0 0 256 256');
+    expect(svgElement).toHaveAttribute('width', '20');
+  });
+
+  it('renders the bullet point box if no icon is defined', () => {
+    setup();
+
+    expect(screen.getByTestId('bullet-point-box')).toBeInTheDocument();
+  });
+});

package/src/slices/Comparison/Icon.tsx

@@ -0,0 +1,34 @@
+import { Check, X } from '@phosphor-icons/react';
+import { Box } from 'boemly';
+
+export interface IconProps {
+  variant: 'gray' | 'green' | 'white';
+  icon: string;
+}
+
+const BULLET_POINT_VARIANTS = {
+  gray: { bulletPointColor: 'black' },
+  green: { bulletPointColor: 'white' },
+  white: { bulletPointColor: 'black' },
+};
+
+export const Icon = ({ variant, icon }: IconProps): JSX.Element => {
+  switch (icon) {
+    case 'check':
+      return <Check size={20} color="var(--boemly-colors-primary-500)" />;
+    case 'cross':
+      return <X size={20} color="var(--boemly-colors-red-500)" />;
+    default:
+      return (
+        <Box
+          data-testid="bullet-point-box"
+          borderRadius="full"
+          backgroundColor={BULLET_POINT_VARIANTS[variant].bulletPointColor}
+          width="2"
+          height="2"
+          margin="1.5"
+        />
+      );
+  }
+};
+export default Icon;

package/src/slices/Comparison/index.ts

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

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

@@ -0,0 +1,3 @@
+export default {
+  'sections.comparison.backgroundShapes': 'Hintergrundformen',
+};

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

@@ -0,0 +1,3 @@
+export default {
+  'sections.comparison.backgroundShapes': 'Background shapes',
+};

package/src/slices/Cta/Cta.stories.tsx

@@ -0,0 +1,149 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import Cta from '.';
+import { CtaCard } from './Cta';
+
+export default {
+  title: 'sections/Cta',
+  component: Cta,
+} as Meta<typeof Cta>;
+
+const Template: StoryFn<typeof Cta> = (args) => <Cta {...args} />;
+
+const ctaCard: CtaCard = {
+  id: 1,
+  tagline: 'Tagline',
+  title: 'Title',
+  subTitle: 'Subtitle',
+  image: { id: 71, alt: 'Alt', img: { data: storybookStrapiCoverMock } },
+  buttons: [
+    {
+      button: {
+        id: 1,
+        text: 'Button',
+        url: 'https://tree.ly',
+      },
+      variant: 'solid',
+    },
+    {
+      button: {
+        id: 2,
+        text: 'Button',
+        url: 'https://tree.ly',
+      },
+      variant: 'outline',
+    },
+  ],
+  variant: 'gray',
+  backgroundShape: true,
+  textAlign: 'left',
+};
+
+export const Left = Template.bind({});
+Left.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'white',
+    ctaCards: [ctaCard],
+  },
+};
+
+export const Right = Template.bind({});
+Right.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'white',
+    ctaCards: [
+      {
+        ...ctaCard,
+        textAlign: 'right',
+      },
+    ],
+  },
+};
+
+export const RightWithoutShapes = Template.bind({});
+RightWithoutShapes.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'white',
+    ctaCards: [{ ...ctaCard, backgroundShape: false, textAlign: 'right' }],
+  },
+};
+
+export const CenterWithGreenBackground = Template.bind({});
+CenterWithGreenBackground.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'green',
+    ctaCards: [
+      {
+        ...ctaCard,
+        variant: 'gray',
+        textAlign: 'center',
+        image: undefined,
+      },
+    ],
+  },
+};
+
+export const CenterGreen = Template.bind({});
+CenterGreen.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'gray',
+    ctaCards: [
+      {
+        ...ctaCard,
+        textAlign: 'center',
+        variant: 'green',
+        image: undefined,
+      },
+    ],
+  },
+};
+
+export const CenterWhite = Template.bind({});
+CenterWhite.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'gray',
+    ctaCards: [
+      {
+        ...ctaCard,
+        textAlign: 'center',
+        variant: 'white',
+        image: undefined,
+      },
+    ],
+  },
+};
+
+export const CenterWithImage = Template.bind({});
+CenterWithImage.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Subtitle',
+    variant: 'gray',
+    ctaCards: [
+      {
+        ...ctaCard,
+        variant: 'white',
+        textAlign: 'center',
+      },
+    ],
+  },
+};