@treely/strapi-slices 7.17.0 → 8.0.1

package/src/slices/Comparison/Comparison.tsx

@@ -1,267 +0,0 @@
-import React, { useContext } from 'react';
-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 { Icon } from './Icon';
-import { CDN_URI } from '../../constants/api';
-import { IntlContext } from '../../components/ContextProvider';
-
-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 } = useContext(IntlContext);
-
-  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="xl"
-                    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" />}
-                        component="Comparison"
-                      />
-                    )}
-                  </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

@@ -1,44 +0,0 @@
-import React from 'react';
-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

@@ -1,35 +0,0 @@
-import React from 'react';
-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

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

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

@@ -1,4 +0,0 @@
-const messagesDe = {
-  'sections.comparison.backgroundShapes': 'Hintergrundformen',
-};
-export default messagesDe;

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

@@ -1,4 +0,0 @@
-const messagesEn = {
-  'sections.comparison.backgroundShapes': 'Background shapes',
-};
-export default messagesEn;

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

@@ -1,150 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import Cta from '.';
-import { CtaCard } from './Cta';
-
-export default {
-  title: 'slices/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',
-      },
-    ],
-  },
-};