@treely/strapi-slices 7.17.0 → 8.0.1

package/src/slices/ImageGrid/ImageGrid.test.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import ImageGrid from '.';
-import { ImageGridProps } from './ImageGrid';
-
-const defaultProps: ImageGridProps = {
-  slice: {
-    title: 'Title',
-
-    images: [
-      {
-        id: 1,
-        title: 'Img Title',
-        image: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-        links: [],
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<ImageGrid {...combinedProps} />);
-};
-
-describe('The ImageGrid component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the image titles', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.images[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the images', () => {
-    setup();
-
-    expect(screen.getByRole('img')).toHaveAttribute(
-      'alt',
-      defaultProps.slice.images[0].image.alt
-    );
-  });
-
-  it('displays the sub title of the image if there is sub title in one of the images of the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        images: [{ ...defaultProps.slice.images[0], subTitle: 'Sub title' }],
-      },
-    });
-
-    expect(screen.getByText('Sub title')).toBeInTheDocument();
-  });
-
-  it('displays a LinkedIn link if there is one', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        images: [
-          {
-            ...defaultProps.slice.images[0],
-            links: [
-              {
-                id: 1,
-                link: { id: 1, text: 'Link', url: 'https://tree.ly' },
-                destination: 'linkedin',
-              },
-            ],
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-});

package/src/slices/ImageGrid/ImageGrid.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Heading,
-  SimpleGrid,
-  Text,
-  useToken,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import StrapiLinkButtonWithIcon from '../../components/StrapiLinkButtonWithIcon';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import StrapiLinkWithIcon from '../../models/strapi/StrapiLinkWithIcon';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-
-interface ImageGridSlice extends StrapiDefaultHeader {
-  images: {
-    id: number;
-    title: string;
-    subTitle?: string;
-    image: StrapiImage;
-    links: StrapiLinkWithIcon[];
-  }[];
-}
-export interface ImageGridProps {
-  slice: ImageGridSlice;
-}
-
-export const ImageGrid: React.FC<ImageGridProps> = ({
-  slice,
-}: ImageGridProps) => {
-  const [primary50] = useToken('colors', ['primary.50']);
-
-  return (
-    <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
-      <Wrapper>
-        <DefaultSectionHeader
-          tagline={slice.tagline}
-          title={slice.title}
-          text={slice.text}
-          taglineProps={{ textAlign: 'center' }}
-          titleProps={{ textAlign: 'center', maxW: '6xl', marginX: 'auto' }}
-          textProps={{ textAlign: 'center', maxW: '2xl', marginX: 'auto' }}
-        />
-
-        <SimpleGrid
-          mt="24"
-          columns={3}
-          gap="24"
-          rowGap="16"
-          minChildWidth="16rem"
-        >
-          {slice.images.map(({ id, title, subTitle, image, links }) => (
-            <Box key={id}>
-              <Box position="relative" height="sm" borderRadius="xl">
-                <Image
-                  src={strapiMediaUrl(image.img, 'medium')}
-                  alt={image.alt}
-                  fill
-                  style={{
-                    objectFit: image.objectFit || 'cover',
-                    borderRadius: 'var(--boemly-radii-xl)',
-                  }}
-                />
-              </Box>
-              <Heading size="xl" mt="4">
-                {title}
-              </Heading>
-              {subTitle && <Text size="mdRegularNormal">{subTitle}</Text>}
-              {links && links.length > 0 && (
-                <Flex mt="3" flexDir="row" gap="2" flexWrap="wrap">
-                  {links.map((link) => (
-                    <StrapiLinkButtonWithIcon
-                      key={link.id}
-                      link={link}
-                      size="sm"
-                      variant="outline"
-                      component="ImageGrid"
-                    />
-                  ))}
-                </Flex>
-              )}
-            </Box>
-          ))}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/ImageGrid/index.ts

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

package/src/slices/ImageTextSequence/ImageTextSequence.stories.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import ImageTextSequence from '.';
-import { StrapiImage, StrapiLink } from '../..';
-
-export default {
-  title: 'slices/ImageTextSequence',
-  component: ImageTextSequence,
-} as Meta<typeof ImageTextSequence>;
-
-const Template: StoryFn<typeof ImageTextSequence> = (args) => (
-  <ImageTextSequence {...args} />
-);
-
-const imageTextRows: {
-  id: number;
-  title: string;
-  text: string;
-  button?: StrapiLink;
-  image: StrapiImage;
-}[] = [
-  {
-    id: 1,
-    title: 'Row title 1',
-    text: 'Row text 1',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-      objectFit: 'cover',
-    },
-  },
-  {
-    id: 2,
-    title: 'Row title 2',
-    text: 'Row text 2',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-      objectFit: 'cover',
-    },
-  },
-  {
-    id: 3,
-    title: 'Row title 3',
-    text: 'Row text 3',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-      objectFit: 'cover',
-    },
-  },
-];
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    imageTextRows,
-    background: true,
-  },
-};
-Minimal.parameters = {
-  backgrounds: { default: 'grey' },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    imageTextRows,
-    background: true,
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    imageTextRows,
-    background: true,
-  },
-};
-
-export const WithButtons = Template.bind({});
-WithButtons.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    imageTextRows: [
-      {
-        ...imageTextRows[0],
-        button: {
-          id: 1,
-          text: 'Button 1',
-          url: 'https://tree.ly',
-        },
-      },
-      {
-        ...imageTextRows[1],
-        button: {
-          id: 2,
-          text: 'Button 2',
-          url: 'https://tree.ly',
-        },
-      },
-      {
-        ...imageTextRows[2],
-        button: {
-          id: 3,
-          text: 'Button 3',
-          url: 'https://tree.ly',
-        },
-      },
-    ],
-    background: true,
-  },
-};
-
-export const WithoutBackgroundMap = Template.bind({});
-WithoutBackgroundMap.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    imageTextRows,
-    background: false,
-  },
-};

package/src/slices/ImageTextSequence/ImageTextSequence.test.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import ImageTextSequence from '.';
-import { ImageTextSequenceProps } from './ImageTextSequence';
-
-const defaultProps: ImageTextSequenceProps = {
-  slice: {
-    title: 'Title',
-    imageTextRows: [
-      {
-        id: 1,
-        title: 'Row Title',
-        text: 'Row Text',
-        image: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-      },
-    ],
-    background: true,
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<ImageTextSequence {...combinedProps} />);
-};
-
-describe('The ImageTextSequence component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the titles of the rows', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.imageTextRows[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the texts of the rows', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.imageTextRows[0].text)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the images of the rows', () => {
-    setup();
-
-    expect(screen.getAllByRole('img')).toHaveLength(2);
-    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
-      'alt',
-      defaultProps.slice.imageTextRows[0].image.alt
-    );
-  });
-
-  it('displays a link if there is a button in the row', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        imageTextRows: [
-          {
-            ...defaultProps.slice.imageTextRows[0],
-            button: { url: 'url', text: 'Link' },
-          },
-        ],
-      },
-    });
-
-    expect(screen.queryByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-
-  it('displays the background map if background is set to true', () => {
-    setup();
-
-    expect(screen.getAllByRole('img')).toHaveLength(2);
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute('alt', 'Map');
-  });
-
-  it('displays no background map if background is set to false', () => {
-    setup({
-      slice: { ...defaultProps.slice, background: false },
-    });
-
-    expect(screen.getAllByRole('img')).toHaveLength(1);
-    expect(screen.getAllByRole('img')[0]).not.toHaveAttribute('alt', 'Map');
-  });
-});

package/src/slices/ImageTextSequence/ImageTextSequence.tsx

@@ -1,156 +0,0 @@
-import React, { Fragment } from 'react';
-import {
-  Box,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Heading,
-  SimpleGrid,
-  Text,
-  useMediaQuery,
-  useToken,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import { CaretRight } from '@phosphor-icons/react';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import { BREAKPOINT_LG_QUERY } from '../../constants/breakpoints';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import { CDN_URI } from '../../constants/api';
-
-interface ImageTextSequenceSlice extends StrapiDefaultHeader {
-  imageTextRows: {
-    id: number;
-    title: string;
-    text: string;
-    button?: StrapiLink;
-    image: StrapiImage;
-  }[];
-  background?: boolean;
-}
-export interface ImageTextSequenceProps {
-  slice: ImageTextSequenceSlice;
-}
-
-export const ImageTextSequence: React.FC<ImageTextSequenceProps> = ({
-  slice,
-}: ImageTextSequenceProps) => {
-  const [oneColumnGrid] = useMediaQuery(BREAKPOINT_LG_QUERY);
-  const [primary50] = useToken('colors', ['primary.50']);
-  const [gray700] = useToken('colors', ['gray.700']);
-
-  return (
-    <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
-      {slice.background ? (
-        <>
-          <Box
-            position="absolute"
-            top="0"
-            right="24"
-            display={['none', null, null, 'unset']}
-          >
-            <Image
-              src={`${CDN_URI}/assets/v3/strapi-slices/desktop-map-border.svg`}
-              alt="Map"
-              width="786"
-              height="897"
-            />
-          </Box>
-          <Box
-            position="absolute"
-            top="64"
-            right="-14"
-            display={['unset', null, null, 'none']}
-          >
-            <Image
-              src={`${CDN_URI}/assets/v3/strapi-slices/mobile-map-border.svg`}
-              alt="Map"
-              width="227"
-              height="452"
-            />
-          </Box>
-        </>
-      ) : (
-        <></>
-      )}
-      <Wrapper>
-        <DefaultSectionHeader
-          tagline={slice.tagline}
-          title={slice.title}
-          text={slice.text}
-          taglineProps={{ textAlign: ['left', null, null, null, 'center'] }}
-          titleProps={{
-            maxW: '6xl',
-            marginX: ['0', null, null, null, 'auto'],
-            textAlign: ['left', null, null, null, 'center'],
-          }}
-          textProps={{
-            maxW: '2xl',
-            marginX: ['0', null, null, null, 'auto'],
-            textAlign: ['left', null, null, null, 'center'],
-            color: 'black',
-          }}
-        />
-
-        <SimpleGrid
-          gap="16"
-          mt={['28', null, null, null, '40']}
-          columns={[1, null, null, null, 2]}
-        >
-          {slice.imageTextRows.map(
-            ({ id, title, text, button, image }, index) => {
-              const imageBox = (
-                <Box>
-                  <Box
-                    position="relative"
-                    width="full"
-                    minHeight={['2xs', null, null, 'sm']}
-                  >
-                    <Image
-                      src={strapiMediaUrl(image.img, 'large')}
-                      alt={image.alt}
-                      fill
-                      style={{
-                        objectFit: image.objectFit || 'contain',
-                        borderRadius: 'var(--boemly-radii-xl)',
-                      }}
-                    />
-                  </Box>
-                </Box>
-              );
-              return (
-                <Fragment key={id}>
-                  {(oneColumnGrid || index % 2 !== 0) && imageBox}
-                  <Box
-                    display="flex"
-                    alignItems="flex-start"
-                    flexDirection="column"
-                    justifyContent="center"
-                  >
-                    <Heading as="h2" size="xl" mb="4">
-                      {title}
-                    </Heading>
-                    <Text size="mdRegularNormal">{text}</Text>
-                    {button && (
-                      <StrapiLinkButton
-                        mt="5"
-                        link={button}
-                        size="sm"
-                        variant="outline"
-                        rightIcon={<CaretRight size="10" color={gray700} />}
-                        component="ImageTextSequence"
-                      />
-                    )}
-                  </Box>
-                  {!oneColumnGrid && index % 2 === 0 && imageBox}
-                </Fragment>
-              );
-            }
-          )}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/ImageTextSequence/index.ts

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

package/src/slices/LeftTextRightCard/LeftTextRightCard.stories.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import LeftTextRightCard from '.';
-
-export default {
-  title: 'slices/LeftTextRightCard',
-  component: LeftTextRightCard,
-} as Meta<typeof LeftTextRightCard>;
-
-const Template: StoryFn<typeof LeftTextRightCard> = (args) => (
-  <LeftTextRightCard {...args} />
-);
-
-const checkMarkLabels = [
-  { id: 1, text: 'List item 1' },
-  { id: 2, text: 'List item 2' },
-  { id: 3, text: 'List item 3' },
-];
-const button = { id: 1, text: 'Button', url: 'https://tree.ly' };
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-  },
-};
-
-export const WithList = Template.bind({});
-WithList.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    checkMarkLabels,
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    checkMarkLabels,
-    button,
-  },
-};
-
-export const WithCard = Template.bind({});
-WithCard.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    checkMarkLabels,
-    button,
-    card: {
-      id: 1,
-      image: {
-        id: 1,
-        alt: 'Image alt text',
-        img: { data: storybookStrapiCoverMock },
-      },
-      portfolioNumber: 'Portfolio #1',
-      title: 'Card title',
-      facts: [
-        { id: 1, key: 'Fact key 1', value: 'Face value 1' },
-        { id: 2, key: 'Fact key 2', value: 'Face value 2' },
-        { id: 3, key: 'Fact key 3', value: 'Face value 3' },
-        { id: 4, key: 'Fact key 4', value: 'Face value 4' },
-      ],
-      button,
-    },
-  },
-};