@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/TextCardGrid/TextCardGrid.test.tsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import TextCardGrid from '.';
-import { TextCardGridProps } from './TextCardGrid';
-
-const defaultProps: TextCardGridProps = {
-  slice: {
-    title: 'Title',
-
-    cards: [
-      {
-        id: 1,
-        tagline: 'Card Tagline 1',
-        title: 'Card Title 1',
-        text: 'Card Text 1',
-        image: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 2,
-        title: 'Card Title 2',
-        text: 'Card Text 2',
-        image: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
-        buttons: [
-          { id: 1, url: 'url', text: 'Learn more' },
-          { id: 2, url: 'url', text: 'Contact us', intercomLauncher: true },
-        ],
-      },
-      {
-        id: 3,
-        title: 'Card Title 3',
-        text: 'Card Text 3',
-        image: { id: 3, alt: 'Alt text 3', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 4,
-        title: 'Card Title 4',
-        text: 'Card Text 4',
-        image: { id: 4, alt: 'Alt text 4', img: { data: strapiMediaMock } },
-      },
-    ],
-    variant: 'shape',
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<TextCardGrid {...combinedProps} />);
-};
-
-describe('The TextCardGrid component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the card tagline if there is a card tagline in the slice', () => {
-    setup();
-
-    expect(screen.getByText('Card Tagline 1')).toBeInTheDocument();
-  });
-
-  it('displays the card titles', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.cards[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the card texts', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.cards[0].text)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the buttons', () => {
-    setup();
-
-    expect(screen.getByText('Contact us')).toBeInTheDocument();
-    expect(screen.getByText('Learn more')).toBeInTheDocument();
-  });
-
-  it('displays the images for variant shape', () => {
-    setup();
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      defaultProps.slice.cards[0].image.alt
-    );
-  });
-
-  it('displays the images for variant image', () => {
-    setup({ slice: { ...defaultProps.slice, variant: 'image' } });
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      defaultProps.slice.cards[0].image.alt
-    );
-  });
-});

package/src/slices/TextCardGrid/TextCardGrid.tsx

@@ -1,288 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/react';
-import {
-  Box,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Heading,
-  RichText,
-  SimpleGrid,
-  Text,
-  useToken,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import { CaretRight } from '@phosphor-icons/react';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-
-interface TextCardGridSlice extends StrapiDefaultHeader {
-  variant: 'shape' | 'image';
-  cards: {
-    id: number;
-    tagline?: string;
-    title: string;
-    text: string;
-    image: StrapiImage;
-    buttons?: StrapiLink[];
-  }[];
-}
-export interface TextCardGridProps {
-  slice: TextCardGridSlice;
-}
-
-enum ShapePosition {
-  topLeft = 'top-left',
-  topRight = 'top-right',
-  bottomLeft = 'bottom-left',
-  bottomRight = 'bottom-right',
-  unset = 'unset',
-}
-
-const shapePositions: ShapePosition[] = [
-  ShapePosition.topLeft,
-  ShapePosition.bottomRight,
-  ShapePosition.topRight,
-  ShapePosition.bottomLeft,
-  ShapePosition.topRight,
-  ShapePosition.bottomLeft,
-  ShapePosition.topLeft,
-  ShapePosition.bottomRight,
-];
-
-const oppositesOfCorners = {
-  [ShapePosition.bottomLeft]: ShapePosition.topRight,
-  [ShapePosition.topRight]: ShapePosition.bottomLeft,
-  [ShapePosition.bottomRight]: ShapePosition.topLeft,
-  [ShapePosition.topLeft]: ShapePosition.bottomRight,
-  [ShapePosition.unset]: ShapePosition.unset,
-};
-
-type Variant = {
-  padding: (string | null)[];
-  positionIcon: (index: number) => ShapePosition;
-  width: string;
-  height: string;
-  position: 'absolute' | 'relative';
-  mb: string;
-};
-
-const variants: { shape: Variant; image: Variant } = {
-  shape: {
-    padding: ['6', null, null, '8'],
-    positionIcon: (index: number) =>
-      shapePositions[index % shapePositions.length],
-    width: '40',
-    height: '40',
-    position: 'absolute',
-    mb: 'unset',
-  },
-  image: {
-    padding: ['6', null, null, '8'],
-    positionIcon: () => ShapePosition.unset,
-    width: '24',
-    height: '24',
-    position: 'relative',
-    mb: '10',
-  },
-};
-
-export const TextCardGrid: React.FC<TextCardGridProps> = ({
-  slice,
-}: TextCardGridProps) => {
-  const [primary800] = useToken('colors', ['primary.800']);
-
-  return (
-    <DefaultSectionContainer backgroundColor={primary800} title={slice.title}>
-      <Wrapper>
-        <DefaultSectionHeader
-          tagline={slice.tagline}
-          title={slice.title}
-          text={slice.text}
-          taglineProps={{ textAlign: 'center', color: 'white' }}
-          titleProps={{
-            textAlign: 'center',
-            maxW: '2xl',
-            marginX: 'auto',
-            color: 'white',
-          }}
-          textProps={{
-            textAlign: 'center',
-            maxW: 'xl',
-            marginX: 'auto',
-            color: 'whiteAlpha.800',
-          }}
-        />
-
-        <SimpleGrid
-          mt={['14', null, null, '24']}
-          columns={3}
-          justifyItems="center"
-          gap="20"
-          rowGap="16"
-          minChildWidth={['100%', null, '16rem']}
-        >
-          {slice.cards.map(
-            ({ id, tagline, title, text, image, buttons }, index) => (
-              <Box
-                key={id}
-                backgroundColor="white"
-                zIndex="base"
-                padding={variants[slice.variant].padding}
-                boxShadow="lg"
-                borderRadius="2xl"
-                minHeight="2xs"
-                width="full"
-                maxWidth={slice.cards.length > 1 ? 'unset' : 'xl'}
-                position="relative"
-                display="flex"
-                flexDir="column"
-                alignItems="flex-start"
-                justifyContent={
-                  slice.variant === 'shape' ? 'flex-end' : 'flex-start'
-                }
-                overflow="hidden"
-              >
-                <Box
-                  position={variants[slice.variant].position}
-                  width={variants[slice.variant].width}
-                  height={variants[slice.variant].height}
-                  mb={variants[slice.variant].mb}
-                  top={
-                    variants[slice.variant].positionIcon(index).includes('top')
-                      ? '-4'
-                      : 'unset'
-                  }
-                  left={
-                    variants[slice.variant].positionIcon(index).includes('left')
-                      ? '-4'
-                      : 'unset'
-                  }
-                  right={
-                    variants[slice.variant]
-                      .positionIcon(index)
-                      .includes('right')
-                      ? '-4'
-                      : 'unset'
-                  }
-                  bottom={
-                    variants[slice.variant]
-                      .positionIcon(index)
-                      .includes('bottom')
-                      ? '-4'
-                      : 'unset'
-                  }
-                  borderBottomRightRadius={
-                    oppositesOfCorners[
-                      variants[slice.variant].positionIcon(index)
-                    ].includes('bottomRight')
-                      ? 'full'
-                      : 'unset'
-                  }
-                  borderBottomLeftRadius={
-                    oppositesOfCorners[
-                      variants[slice.variant].positionIcon(index)
-                    ].includes('bottomLeft')
-                      ? 'full'
-                      : 'unset'
-                  }
-                  borderTopRightRadius={
-                    oppositesOfCorners[
-                      variants[slice.variant].positionIcon(index)
-                    ].includes('topRight')
-                      ? 'full'
-                      : 'unset'
-                  }
-                  borderTopLeftRadius={
-                    oppositesOfCorners[
-                      variants[slice.variant].positionIcon(index)
-                    ].includes('topLeft')
-                      ? 'full'
-                      : 'unset'
-                  }
-                  css={
-                    variants[slice.variant]
-                      .positionIcon(index)
-                      .includes('unset')
-                      ? css`
-                          & span,
-                          div,
-                          img {
-                            border-radius: var(--boemly-radii-xl);
-                          }
-                        `
-                      : css`
-                    & span,
-                    div,
-                    img {
-                      border-${
-                        oppositesOfCorners[
-                          variants[slice.variant].positionIcon(index)
-                        ]
-                      }-radius: var(--boemly-radii-full);
-                    }
-                  `
-                  }
-                >
-                  <Image
-                    src={strapiMediaUrl(image.img, 'small')}
-                    alt={image.alt}
-                    fill
-                    style={{ objectFit: image.objectFit || 'cover' }}
-                  />
-                </Box>
-                <Box zIndex="aboveBase" width="full">
-                  {tagline && (
-                    <Text color="black" size="smMonoNormal" mb="2">
-                      {tagline}
-                    </Text>
-                  )}
-                  <Heading as="h4" size="xl" mb="3">
-                    {title}
-                  </Heading>
-                  <RichText
-                    content={text}
-                    listProps={{
-                      textColor: 'gray.500',
-                      textSize: 'smRegularNormal',
-                    }}
-                    textProps={{
-                      color: 'gray.500',
-                      size: 'smRegularNormal',
-                    }}
-                  />
-                  {buttons && !!buttons.length && (
-                    <Flex
-                      mt="4"
-                      gap="3"
-                      flexDir={['column', null, null, null, 'row']}
-                    >
-                      {buttons.map((button, buttonIndex) => (
-                        <StrapiLinkButton
-                          key={button.id}
-                          link={button}
-                          size="sm"
-                          rightIcon={
-                            buttonIndex === 0 ? (
-                              <CaretRight size="10" weight="bold" />
-                            ) : undefined
-                          }
-                          variant={buttonIndex === 0 ? 'outline' : 'ghost'}
-                          component="TextCardGrid"
-                        />
-                      ))}
-                    </Flex>
-                  )}
-                </Box>
-              </Box>
-            )
-          )}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/TextCardGrid/index.ts

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

package/src/slices/TextCarousel/TextCarousel.stories.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import TextCarousel from '.';
-
-export default {
-  title: 'slices/TextCarousel',
-  component: TextCarousel,
-} as Meta<typeof TextCarousel>;
-
-const Template: StoryFn<typeof TextCarousel> = (args) => (
-  <TextCarousel {...args} />
-);
-
-const button = { id: 1, text: 'Button', url: 'https://tree.ly' };
-const image = {
-  id: 1,
-  img: { data: storybookStrapiCoverMock },
-  alt: 'Project Thumbnail',
-};
-
-const slide = {
-  id: 1,
-  title: 'Title 1',
-  text: 'Text 1',
-  icon: {
-    id: 1,
-    alt: 'Icon alt text',
-    img: { data: storybookStrapiCoverMock },
-  },
-};
-
-const slides = [
-  slide,
-  { ...slide, id: 2, title: 'Title 2', text: 'Text 2' },
-  { ...slide, id: 3, title: 'Title 3', text: 'Text 3' },
-  { ...slide, id: 4, title: 'Title 4', text: 'Text 4' },
-  { ...slide, id: 5, title: 'Title 5', text: 'Text 5' },
-];
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    slides,
-  },
-};
-
-export const WithShuffledCards = Template.bind({});
-WithShuffledCards.args = {
-  slice: {
-    title: 'Title',
-    slides,
-    isShuffled: true,
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    slides,
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    slides,
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    slides,
-    button,
-  },
-};
-
-export const FullProps = Template.bind({});
-FullProps.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    slides: [
-      {
-        ...slide,
-        id: 1,
-        button,
-        image,
-      },
-      {
-        ...slide,
-        id: 2,
-        button,
-        image,
-      },
-      {
-        ...slide,
-        id: 3,
-        button,
-        image,
-      },
-      {
-        ...slide,
-        id: 4,
-        button,
-        image,
-      },
-      {
-        ...slide,
-        id: 5,
-        button,
-        image,
-      },
-    ],
-    button,
-  },
-};

package/src/slices/TextCarousel/TextCarousel.test.tsx

@@ -1,134 +0,0 @@
-import React from 'react';
-import { strapiLinkPageMock } from '../../test/strapiMocks/strapiLinkPage';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import TextCarousel from '.';
-import { TextCarouselProps } from './TextCarousel';
-
-const defaultProps: TextCarouselProps = {
-  slice: {
-    title: 'Title',
-    slides: [
-      {
-        id: 1,
-        title: 'Card Title 1',
-        text: 'Card Text 1',
-        icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 2,
-        title: 'Card Title 2',
-        text: 'Card Text 2',
-        icon: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 3,
-        title: 'Card Title 3',
-        text: 'Card Text 3',
-        icon: { id: 3, alt: 'Alt text 3', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 4,
-        title: 'Card Title 4',
-        text: 'Card Text 4',
-        icon: { id: 4, alt: 'Alt text 4', img: { data: strapiMediaMock } },
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<TextCarousel {...combinedProps} />);
-};
-
-describe('The TextCarousel component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the slide titles', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.slides[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the slide texts', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.slides[0].text)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the icon', () => {
-    setup();
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      defaultProps.slice.slides[0].icon.alt
-    );
-  });
-
-  it('displays the link if a button is in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        button: {
-          id: 1,
-          text: 'Link text',
-          page: strapiLinkPageMock,
-        },
-      },
-    });
-
-    expect(screen.getByRole('link')).toHaveTextContent('Link text');
-  });
-
-  it('displays the text card button if a button is in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        slides: [
-          {
-            ...defaultProps.slice.slides[0],
-            button: {
-              id: 1,
-              text: 'Text Card Button',
-              page: strapiLinkPageMock,
-            },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByRole('button')).toHaveTextContent('Text Card Button');
-  });
-
-  it('displays the image if an image is in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        slides: [
-          {
-            ...defaultProps.slice.slides[0],
-            image: {
-              id: 1,
-              alt: 'Alt image text',
-              img: { data: strapiMediaMock },
-            },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      'Alt image text'
-    );
-  });
-});