@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/Hero/Hero.test.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import Hero from '.';
-import { HeroProps } from './Hero';
-
-const defaultProps: HeroProps = {
-  slice: {
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'center',
-    additionalButtons: [],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<Hero {...combinedProps} />);
-};
-
-describe('The Hero component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays no link if there is no button in the slice', async () => {
-    setup();
-
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-  });
-
-  it('displays a link if there is a button in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-
-  it('displays the additional buttons', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        button: { id: '1', url: 'url', text: 'Link Left' },
-        additionalButtons: [
-          {
-            button: { id: '2', url: 'url', text: 'Link Right' },
-            variant: 'outline',
-          },
-        ],
-      },
-    });
-
-    expect(screen.getAllByRole('link')).toHaveLength(2);
-    expect(screen.getByText('Link Left')).toBeInTheDocument();
-    expect(screen.getByText('Link Right')).toBeInTheDocument();
-  });
-
-  it('displays no image if there is no image in the slice', () => {
-    setup();
-
-    expect(screen.queryByRole('img')).not.toBeInTheDocument();
-  });
-
-  it('displays an image if there is an image in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        image: { id: 1, img: { data: strapiMediaMock }, alt: 'Image alt text' },
-      },
-    });
-
-    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Image alt text');
-  });
-
-  it('displays a shape if there is a shape in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        textAlign: 'left',
-        shape: { id: 1, img: { data: strapiMediaMock }, alt: 'Shape alt text' },
-      },
-    });
-
-    expect(screen.getByRole('img')).toBeInTheDocument();
-  });
-});

package/src/slices/Hero/Hero.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { Box, DefaultSectionHeader, Flex, Gradient, Wrapper } from 'boemly';
-import Image from 'next/image';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import StrapiButtonWithVariant from '../../models/strapi/StrapiButtonWithVariant';
-
-export interface HeroProps {
-  slice: {
-    tagline?: string;
-    title: string;
-    subTitle: string;
-    button?: StrapiLink;
-    additionalButtons: StrapiButtonWithVariant[];
-    image?: StrapiImage;
-    textAlign: 'left' | 'center';
-    shape?: StrapiImage;
-  };
-}
-
-export const Hero = ({ slice }: HeroProps): JSX.Element => (
-  <Box
-    position="relative"
-    width="full"
-    height="var(--default-hero-height)"
-    minHeight="2xl"
-    backgroundColor="gray.900"
-    overflowX="hidden"
-  >
-    {slice.image && (
-      <>
-        <Image
-          src={strapiMediaUrl(slice.image.img, 'xLarge')}
-          alt={slice.image.alt}
-          fill
-          style={{ objectFit: slice.image.objectFit || 'cover' }}
-        />
-        <Gradient />
-      </>
-    )}
-    {slice.shape && (
-      <Box
-        position="absolute"
-        bottom="0"
-        borderTopRightRadius="full"
-        width={['3xs', null, '2xs', null, 'sm']}
-        height={['3xs', null, '2xs', null, 'sm']}
-        right={['-16', null, '24']}
-      >
-        <Image
-          src={strapiMediaUrl(slice.shape.img, 'medium')}
-          alt={slice.shape.alt}
-          fill
-          style={{
-            objectFit: slice.shape.objectFit || 'cover',
-            borderTopRightRadius: 'var(--boemly-radii-full)',
-          }}
-        />
-      </Box>
-    )}
-    <Box
-      position="absolute"
-      left="0"
-      top="56%"
-      width="full"
-      textAlign={slice.textAlign}
-      transform="translateY(-50%)"
-    >
-      <Wrapper>
-        <>
-          <DefaultSectionHeader
-            isHero
-            tagline={slice.tagline}
-            title={slice.title}
-            text={slice.subTitle}
-            taglineProps={{ color: 'white' }}
-            titleProps={{
-              color: 'white',
-              maxW: slice.textAlign === 'center' ? '4xl' : '3xl',
-              mx: slice.textAlign === 'center' ? 'auto' : 'unset',
-              textAlign: slice.textAlign,
-            }}
-            textProps={{
-              maxW: '2xl',
-              mx: slice.textAlign === 'center' ? 'auto' : 'unset',
-              textAlign: slice.textAlign,
-              color: 'white',
-            }}
-          />
-
-          <Flex
-            gap="8"
-            justifyContent={slice.textAlign === 'center' ? 'center' : 'start'}
-          >
-            {slice.button && (
-              <StrapiLinkButton
-                key={slice.button.id}
-                mt="10"
-                size="xl"
-                link={slice.button}
-                component="Hero"
-              />
-            )}
-            {slice.additionalButtons.map((button) => (
-              <StrapiLinkButton
-                key={button.button.id}
-                mt="10"
-                size="xl"
-                variant={button.variant}
-                link={button.button}
-                component="Hero"
-              />
-            ))}
-          </Flex>
-        </>
-      </Wrapper>
-    </Box>
-  </Box>
-);

package/src/slices/Hero/index.ts

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

package/src/slices/IconGrid/IconGrid.stories.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiTreeIconMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import IconGrid from '.';
-
-export default {
-  title: 'slices/IconGrid',
-  component: IconGrid,
-} as Meta<typeof IconGrid>;
-
-const Template: StoryFn<typeof IconGrid> = (args) => <IconGrid {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    iconsWithTextAndButton: [
-      {
-        id: 1,
-        title: 'Title 1',
-        text: 'Text 1',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-      {
-        id: 2,
-        title: 'Title 2',
-        text: 'Text 2',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-      {
-        id: 3,
-        title: 'Title 3',
-        text: 'Text 3',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-      {
-        id: 4,
-        title: 'Title 4',
-        text: 'Text 4',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-    ],
-  },
-};
-
-export const WithTaglineTitleAndText = Template.bind({});
-WithTaglineTitleAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Text',
-    iconsWithTextAndButton: [
-      {
-        id: 1,
-        title: 'Title 1',
-        text: 'Text 1',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-      {
-        id: 2,
-        title: 'Title 2',
-        text: 'Text 2',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-      {
-        id: 3,
-        title: 'Title 3',
-        text: 'Text 3',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-      {
-        id: 4,
-        title: 'Title 4',
-        text: 'Text 4',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-      },
-    ],
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    iconsWithTextAndButton: [
-      {
-        id: 1,
-        title: 'Title 1',
-        text: 'Text 1',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-        button: {
-          id: 1,
-          text: 'Button',
-          url: 'https://tree.ly',
-        },
-      },
-      {
-        id: 2,
-        title: 'Title 2',
-        text: 'Text 2',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-        button: {
-          id: 1,
-          text: 'Button',
-          url: 'https://tree.ly',
-        },
-      },
-      {
-        id: 3,
-        title: 'Title 3',
-        text: 'Text 3',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-        button: {
-          id: 1,
-          text: 'Button',
-          url: 'https://tree.ly',
-        },
-      },
-      {
-        id: 4,
-        title: 'Title 4',
-        text: 'Text 4',
-        icon: {
-          id: 1,
-          alt: 'Alt text',
-          img: { data: storybookStrapiTreeIconMock },
-        },
-        button: {
-          id: 1,
-          text: 'Button',
-          url: 'https://tree.ly',
-        },
-      },
-    ],
-  },
-};

package/src/slices/IconGrid/IconGrid.test.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import IconGrid from '.';
-import { IconGridProps } from './IconGrid';
-
-const defaultProps: IconGridProps = {
-  slice: {
-    iconsWithTextAndButton: [
-      {
-        id: 1,
-        title: 'Img Title',
-        text: 'Text',
-        icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<IconGrid {...combinedProps} />);
-};
-
-describe('The IconGrid component', () => {
-  it('displays the image titles', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.iconsWithTextAndButton[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the texts', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.iconsWithTextAndButton[0].text)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the icons', () => {
-    setup();
-
-    expect(screen.getByRole('img')).toHaveAttribute(
-      'alt',
-      defaultProps.slice.iconsWithTextAndButton[0].icon.alt
-    );
-  });
-
-  it('displays the tagline, title and subTite when they are defined in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        tagline: 'Tagline',
-        title: 'Title',
-        subTitle: 'Subtitle',
-      },
-    });
-
-    expect(screen.getByText('Tagline')).toBeInTheDocument();
-    expect(screen.getByText('Title')).toBeInTheDocument();
-    expect(screen.getByText('Subtitle')).toBeInTheDocument();
-  });
-
-  it('displays the button when it is defined in slice', () => {
-    setup({
-      slice: {
-        iconsWithTextAndButton: [
-          {
-            ...defaultProps.slice.iconsWithTextAndButton[0],
-            icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-            button: { id: 1, url: 'url', text: 'Link' },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-});

package/src/slices/IconGrid/IconGrid.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Heading,
-  SimpleGrid,
-  Spacer,
-  Text,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-
-export interface IconGridProps {
-  slice: {
-    tagline?: string;
-    title?: string;
-    subTitle?: string;
-    iconsWithTextAndButton: {
-      id: number;
-      title: string;
-      text: string;
-      icon: StrapiImage;
-      button?: StrapiLink;
-    }[];
-  };
-}
-
-export const IconGrid = ({ slice }: IconGridProps): JSX.Element => {
-  const columns = () => {
-    if (slice.iconsWithTextAndButton.length === 2) {
-      return [1, null, null, 2, 2];
-    }
-    if (slice.iconsWithTextAndButton.length === 1) {
-      return 1;
-    }
-    return [1, null, null, 2, 3];
-  };
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        {slice.title ? (
-          <>
-            <Flex alignItems="center" flexDirection="column">
-              <DefaultSectionHeader
-                tagline={slice.tagline}
-                title={slice.title}
-                text={slice.subTitle}
-                taglineProps={{ maxW: '2xl', textAlign: 'center' }}
-                titleProps={{ maxW: '3xl', textAlign: 'center' }}
-                textProps={{ maxW: '3xl', textAlign: 'center' }}
-              />
-            </Flex>
-            <Spacer h="20" />
-          </>
-        ) : (
-          <></>
-        )}
-
-        <SimpleGrid
-          columns={columns()}
-          gap={slice.iconsWithTextAndButton.length === 2 ? '14' : '16'}
-          rowGap={['16', null, null, '20']}
-        >
-          {slice.iconsWithTextAndButton.map((iconWithTextAndButton) => (
-            <Box key={iconWithTextAndButton.id}>
-              <Box
-                margin="0 auto"
-                backgroundColor="primary.50"
-                borderRadius="full"
-                display="flex"
-                alignItems="center"
-                justifyContent="space-around"
-                width="6.5rem"
-                height="6.5rem"
-              >
-                <Box position="absolute" width="12" height="12">
-                  <Image
-                    src={strapiMediaUrl(
-                      iconWithTextAndButton.icon.img,
-                      'xSmall'
-                    )}
-                    alt={iconWithTextAndButton.icon.alt}
-                    fill
-                    style={{
-                      objectFit:
-                        iconWithTextAndButton.icon.objectFit || 'contain',
-                    }}
-                  />
-                </Box>
-              </Box>
-              <Heading size="xl" textAlign="center" mb="4" mt="8">
-                {iconWithTextAndButton.title}
-              </Heading>
-              <Text size="mdRegularNormal" textAlign="center">
-                {iconWithTextAndButton.text}
-              </Text>
-              {iconWithTextAndButton.button && (
-                <Box textAlign="center">
-                  <StrapiLinkButton
-                    key={iconWithTextAndButton.button.id}
-                    mt="8"
-                    size="md"
-                    variant="outline"
-                    link={iconWithTextAndButton.button}
-                    component="IconGrid"
-                  />
-                </Box>
-              )}
-            </Box>
-          ))}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/IconGrid/index.ts

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

package/src/slices/ImageGrid/ImageGrid.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import StrapiLinkWithIcon from '../../models/strapi/StrapiLinkWithIcon';
-import ImageGrid from '.';
-
-export default {
-  title: 'slices/ImageGrid',
-  component: ImageGrid,
-} as Meta<typeof ImageGrid>;
-
-const Template: StoryFn<typeof ImageGrid> = (args) => <ImageGrid {...args} />;
-
-const link: StrapiLinkWithIcon = {
-  id: 1,
-  link: { id: 1, text: 'Link', url: 'https://tree.ly' },
-  destination: 'linkedin',
-};
-
-const images = [
-  {
-    id: 1,
-    title: 'Title 1',
-    subTitle: 'Sub title 1',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    links: [link],
-  },
-  {
-    id: 2,
-    title: 'Title 2',
-    subTitle: 'Sub title 2',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    links: [],
-  },
-  {
-    id: 3,
-    title: 'Title 3',
-    subTitle: 'Sub title 3',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    links: [],
-  },
-  {
-    id: 4,
-    title: 'Title 4',
-    subTitle: 'Sub title 4',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    links: [],
-  },
-];
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    images,
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    images,
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    images,
-  },
-};