@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/Facts/Facts.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import {
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Heading,
-  Spacer,
-  Text,
-} from 'boemly';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import StrapiLink from '../../models/strapi/StrapiLink';
-
-export interface FactsProps {
-  slice: {
-    tagline?: string;
-    title?: string;
-    subTitle?: string;
-    button?: StrapiLink;
-    variant: 'gray' | 'green' | 'white';
-    facts: { key: string; value: string }[];
-  };
-}
-
-const VARIANTS = {
-  gray: {
-    backgroundColor: 'primary.50',
-    tagLineColor: 'primary.500',
-    titleColor: 'black',
-    subTitleColor: 'black',
-    factKeyColor: 'gray.700',
-    factValueColor: 'gray.700',
-  },
-  green: {
-    backgroundColor: 'primary.800',
-    tagLineColor: 'white',
-    titleColor: 'white',
-    subTitleColor: 'white',
-    factKeyColor: 'whiteAlpha.900',
-    factValueColor: 'white',
-  },
-  white: {
-    backgroundColor: 'white',
-    tagLineColor: 'primary.500',
-    titleColor: 'black',
-    subTitleColor: 'black',
-    factKeyColor: 'gray.700',
-    factValueColor: 'gray.700',
-  },
-};
-
-export const Facts: React.FC<FactsProps> = ({ slice }: FactsProps) => (
-  <DefaultSectionContainer
-    backgroundColor={VARIANTS[slice.variant].backgroundColor}
-    flexDir="column"
-    textAlign="center"
-    justifyContent="space-between"
-    paddingX={['6', null, '8']}
-    title={slice.title}
-  >
-    <>
-      {slice.title && (
-        <>
-          <DefaultSectionHeader
-            tagline={slice.tagline}
-            text={slice.subTitle}
-            title={slice.title}
-            taglineProps={{
-              color: VARIANTS[slice.variant].tagLineColor,
-              textAlign: 'center',
-            }}
-            titleProps={{
-              color: VARIANTS[slice.variant].titleColor,
-              textAlign: 'center',
-              maxW: '6xl',
-              marginX: 'auto',
-            }}
-            textProps={{
-              color: VARIANTS[slice.variant].subTitleColor,
-              textAlign: 'center',
-              maxW: '3xl',
-              marginX: 'auto',
-            }}
-          />
-          <Spacer height={['0', null, '12']} />
-        </>
-      )}
-      <Flex
-        justifyContent={slice.facts.length < 3 ? 'center' : 'flex-start'}
-        alignItems="center"
-        flexWrap="wrap"
-        mx={[null, null, null, '22', '28']}
-        flexDir={['column', null, null, 'row']}
-        gap={[null, null, null, '12']}
-      >
-        {slice.facts.map((fact) => (
-          <Flex
-            key={fact.key}
-            flexDir="column"
-            width={[
-              'var(--boemly-sizes-full)',
-              null,
-              null,
-              'calc((var(--boemly-sizes-full) - var(--boemly-space-24))/ 3 )',
-            ]}
-            mt={['8', '8', '8', slice.facts.length > 3 ? '16' : '0']}
-          >
-            <Heading
-              fontSize="6xl"
-              fontFamily="display"
-              lineHeight="10"
-              fontWeight="700"
-              color={VARIANTS[slice.variant].factValueColor}
-              mb="2"
-              as="p"
-            >
-              {fact.value}
-            </Heading>
-
-            <Text
-              size="mdLowNormal"
-              color={VARIANTS[slice.variant].factKeyColor}
-            >
-              {fact.key}
-            </Text>
-          </Flex>
-        ))}
-      </Flex>
-
-      {slice.button && (
-        <>
-          <Spacer height={['0', null, '20']} />
-          <StrapiLinkButton
-            link={slice.button}
-            size="md"
-            variant={slice.variant === 'green' ? 'outline' : 'solid'}
-            component="Facts"
-          />
-        </>
-      )}
-    </>
-  </DefaultSectionContainer>
-);

package/src/slices/Facts/index.ts

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

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiAvatarMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import FullWidthHighlightQuote from '.';
-
-export default {
-  title: 'slices/FullWidthHighlightQuote',
-  component: FullWidthHighlightQuote,
-} as Meta<typeof FullWidthHighlightQuote>;
-
-const Template: StoryFn<typeof FullWidthHighlightQuote> = (args) => (
-  <FullWidthHighlightQuote {...args} />
-);
-
-const avatar = {
-  id: 1,
-  name: 'Avatar name',
-  description: 'Avatar description',
-  image: {
-    id: 1,
-    alt: 'Avatar image alt text',
-    img: { data: storybookStrapiAvatarMock },
-  },
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    quote: '"Quote"',
-    avatarWithName: avatar,
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    quote: '"Quote"',
-    avatarWithName: avatar,
-  },
-};

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiAvatarWithNameMock } from '../../test/strapiMocks/strapiAvatarWithName';
-import FullWidthHighlightQuote from '.';
-import { FullWidthHighlightQuoteProps } from './FullWidthHighlightQuote';
-
-const defaultProps: FullWidthHighlightQuoteProps = {
-  slice: {
-    quote: 'Quote',
-    avatarWithName: strapiAvatarWithNameMock,
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<FullWidthHighlightQuote {...combinedProps} />);
-};
-
-describe('The FullWidthHighlightQuote component', () => {
-  it('displays a tagline if there is a tagline in the slice', () => {
-    setup({ slice: { ...defaultProps.slice, tagline: 'Tagline' } });
-
-    expect(screen.getByText('Tagline')).toBeInTheDocument();
-  });
-
-  it('displays the quote', () => {
-    setup();
-
-    expect(screen.getByText(defaultProps.slice.quote)).toBeInTheDocument();
-  });
-
-  it('displays the avatar with name', () => {
-    setup();
-
-    expect(screen.getByRole('img')).toHaveAttribute(
-      'alt',
-      strapiAvatarWithNameMock.image.alt
-    );
-  });
-});

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import {
-  DefaultSectionContainer,
-  Wrapper,
-  AvatarWithName,
-  Text,
-  Box,
-} from 'boemly';
-import StrapiAvatarWithName from '../../models/strapi/StrapiAvatarWithName';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-
-export interface FullWidthHighlightQuoteProps {
-  slice: {
-    tagline?: string;
-    quote: string;
-    avatarWithName: StrapiAvatarWithName;
-  };
-}
-
-export const FullWidthHighlightQuote: React.FC<
-  FullWidthHighlightQuoteProps
-> = ({ slice }: FullWidthHighlightQuoteProps) => (
-  <DefaultSectionContainer>
-    <Wrapper>
-      <Box maxWidth="5xl" marginX="auto" mb="8">
-        {slice.tagline && (
-          <Text
-            color="primary.700"
-            size="mdMonoUppercase"
-            textAlign="center"
-            mb="3"
-          >
-            {slice.tagline}
-          </Text>
-        )}
-        <Text color="black" size="xlRegularNormalBold" textAlign="center">
-          {slice.quote}
-        </Text>
-      </Box>
-      <AvatarWithName
-        name={slice.avatarWithName.name}
-        description={slice.avatarWithName.description}
-        image={
-          <Image
-            src={strapiMediaUrl(slice.avatarWithName.image.img, 'small')}
-            alt={slice.avatarWithName.image.alt}
-            fill
-            style={{
-              objectFit: slice.avatarWithName.image.objectFit || 'cover',
-            }}
-          />
-        }
-        orientation="vertical"
-      />
-    </Wrapper>
-  </DefaultSectionContainer>
-);

package/src/slices/FullWidthHighlightQuote/index.ts

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

package/src/slices/FullWidthImage/FullWidthImage.stories.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import FullWidthImage from '.';
-
-export default {
-  title: 'slices/FullWidthImage',
-  component: FullWidthImage,
-} as Meta<typeof FullWidthImage>;
-
-const Template: StoryFn<typeof FullWidthImage> = (args) => (
-  <FullWidthImage {...args} />
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    image: { id: 1, alt: 'Alt text', img: { data: storybookStrapiCoverMock } },
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    image: { id: 1, alt: 'Alt text', img: { data: storybookStrapiCoverMock } },
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    image: { id: 1, alt: 'Alt text', img: { data: storybookStrapiCoverMock } },
-  },
-};

package/src/slices/FullWidthImage/FullWidthImage.test.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import FullWidthImage from '.';
-import { FullWidthImageProps } from './FullWidthImage';
-
-const defaultProps: FullWidthImageProps = {
-  slice: {
-    title: 'Title',
-    image: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<FullWidthImage {...combinedProps} />);
-};
-
-describe('The FullWidthImage component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the image', () => {
-    setup();
-
-    expect(screen.getByRole('img')).toHaveAttribute(
-      'alt',
-      defaultProps.slice.image.alt
-    );
-  });
-});

package/src/slices/FullWidthImage/FullWidthImage.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Wrapper,
-  useMediaQuery,
-} from 'boemly';
-import Image from 'next/image';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import FullScreenImage from '../../components/FullScreenImage';
-import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
-
-interface FullWidthImageSlice extends StrapiDefaultHeader {
-  image: StrapiImage;
-}
-export interface FullWidthImageProps {
-  slice: FullWidthImageSlice;
-}
-
-export const FullWidthImage: React.FC<FullWidthImageProps> = ({
-  slice,
-}: FullWidthImageProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
-
-  return (
-    <DefaultSectionContainer title={slice.title}>
-      <Wrapper>
-        <DefaultSectionHeader
-          isHero
-          tagline={slice.tagline}
-          title={slice.title}
-          text={slice.text}
-          taglineProps={{ textAlign: 'center', mt: ['32', null, null, '56'] }}
-          titleProps={{ textAlign: 'center', maxW: '6xl', marginX: 'auto' }}
-          textProps={{ textAlign: 'center', maxW: '3xl', marginX: 'auto' }}
-        />
-
-        <Box position="relative" mt="20" height={['3xs', null, 'xl']}>
-          <Image
-            src={strapiMediaUrl(slice.image.img, 'xLarge')}
-            alt={slice.image.alt}
-            fill
-            style={{
-              objectFit: slice.image.objectFit || 'cover',
-              cursor: isMobile ? 'unset' : 'pointer',
-              borderRadius: 'var(--boemly-radii-2xl)',
-            }}
-            onClick={() => !isMobile && setIsOpen(true)}
-          />
-
-          <FullScreenImage
-            images={[slice.image]}
-            isOpen={isOpen}
-            onClose={() => setIsOpen(false)}
-          />
-        </Box>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/FullWidthImage/index.ts

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

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.stories.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import FullWidthImageSlider from '.';
-
-export default {
-  title: 'slices/FullWidthImageSlider',
-  component: FullWidthImageSlider,
-} as Meta<typeof FullWidthImageSlider>;
-
-const Template: StoryFn<typeof FullWidthImageSlider> = (args) => (
-  <FullWidthImageSlider {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  slice: {
-    images: [
-      {
-        id: 1,
-        caption: 'Caption 1',
-        img: {
-          id: 1,
-          alt: 'Alt text 1',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        id: 2,
-        caption: 'Caption 2',
-        img: {
-          id: 2,
-          alt: 'Alt text 2',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        id: 3,
-        caption: 'Caption 3',
-        img: {
-          id: 3,
-          alt: 'Alt text 3',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        id: 4,
-        caption: 'Caption 4',
-        img: {
-          id: 4,
-          alt: 'Alt text 4',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        id: 5,
-        caption: 'Caption 5',
-        img: {
-          id: 5,
-          alt: 'Alt text 5',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        id: 6,
-        caption: 'Caption 6',
-        img: {
-          id: 6,
-          alt: 'Alt text 6',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-    ],
-  },
-};

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import FullWidthImageSlider from '.';
-import { FullWidthImageSliderProps } from './FullWidthImageSlider';
-
-const defaultProps: FullWidthImageSliderProps = {
-  slice: {
-    images: [
-      {
-        id: 1,
-        caption: 'Caption 1',
-        img: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 2,
-        caption: 'Caption 2',
-        img: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
-      },
-      {
-        id: 3,
-        caption: 'Caption 3',
-        img: { id: 3, alt: 'Alt text 3', img: { data: strapiMediaMock } },
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<FullWidthImageSlider {...combinedProps} />);
-};
-
-describe('The FullWidthImageSlider component', () => {
-  it('displays the images', () => {
-    setup();
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute('alt', 'Alt text 1');
-    expect(screen.getAllByRole('img')[1]).toHaveAttribute('alt', 'Alt text 2');
-    expect(screen.getAllByRole('img')[2]).toHaveAttribute('alt', 'Alt text 3');
-  });
-
-  it('displays the captions', () => {
-    setup();
-
-    expect(screen.getByText('Caption 1')).toBeInTheDocument();
-    expect(screen.getByText('Caption 2')).toBeInTheDocument();
-    expect(screen.getByText('Caption 3')).toBeInTheDocument();
-  });
-});