@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/SmallHero/SmallHero.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  DefaultSectionHeader,
-  Flex,
-  Gradient,
-  Tag,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-
-export interface SmallHeroProps {
-  slice: {
-    tags?: {
-      id: number;
-      text: string;
-      colorScheme: string;
-    }[];
-    tagline?: string;
-    title: string;
-    subTitle?: string;
-    button?: StrapiLink;
-    image?: StrapiImage;
-    gradient?: boolean;
-  };
-  theme: 'dark' | 'light';
-}
-
-const colors = {
-  dark: {
-    tagline: 'white',
-    title: 'white',
-    text: 'white',
-    background: 'gray.900',
-  },
-  light: {
-    tagline: 'primary.500',
-    title: 'black',
-    text: 'gray.500',
-    background: 'primary.50',
-  },
-};
-
-export const SmallHero: React.FC<SmallHeroProps> = ({
-  slice,
-  theme,
-}: SmallHeroProps) => (
-  <Box
-    position="relative"
-    width="full"
-    height="xl"
-    backgroundColor={colors[theme].background}
-  >
-    {slice.image && (
-      <>
-        <Image
-          src={strapiMediaUrl(slice.image.img, 'xLarge')}
-          alt={slice.image.alt}
-          fill
-          style={{ objectFit: slice.image.objectFit || 'cover' }}
-        />
-        {slice.gradient && <Gradient />}
-      </>
-    )}
-    <Box
-      position="absolute"
-      left="0"
-      top="60%"
-      width="full"
-      textAlign="center"
-      transform="translateY(-50%)"
-    >
-      <Wrapper>
-        <>
-          {slice.tags && (
-            <Flex direction="row" justify="center" gap="2" mb="4" wrap="wrap">
-              {slice.tags.map(({ id, text, colorScheme }) => (
-                <Tag
-                  key={id}
-                  colorScheme={colorScheme}
-                  size="md"
-                  variant="subtle"
-                >
-                  {text}
-                </Tag>
-              ))}
-            </Flex>
-          )}
-          <DefaultSectionHeader
-            isHero
-            tagline={slice.tagline}
-            title={slice.title}
-            text={slice.subTitle}
-            taglineProps={{
-              color: colors[theme].tagline,
-              textAlign: 'center',
-              mx: 'auto',
-            }}
-            titleProps={{
-              color: colors[theme].title,
-              maxW: '4xl',
-              textAlign: 'center',
-              mx: 'auto',
-            }}
-            textProps={{
-              maxW: '2xl',
-              textAlign: 'center',
-              mx: 'auto',
-              color: colors[theme].text,
-            }}
-          />
-          {slice.button && (
-            <StrapiLinkButton
-              link={slice.button}
-              mt="6"
-              size="lg"
-              component="SmallHero"
-            />
-          )}
-        </>
-      </Wrapper>
-    </Box>
-  </Box>
-);

package/src/slices/SmallHero/index.ts

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

package/src/slices/Steps/Steps.stories.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import {
-  storybookStrapiCoverMock,
-  storybookStrapiGradientBottomUpMock,
-  storybookStrapiGradientTopDownMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import Steps from '.';
-
-export default {
-  title: 'slices/Steps',
-  component: Steps,
-} as Meta<typeof Steps>;
-
-const Template: StoryFn<typeof Steps> = (args) => <Steps {...args} />;
-
-const steps = [
-  { id: 1, step: 1, title: 'Title 1', text: 'Text' },
-  { id: 2, step: 2, title: 'Title 2' },
-];
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    steps,
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    steps,
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    steps,
-  },
-};
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    steps,
-    image: {
-      id: 1,
-      alt: 'Image alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-  },
-};
-
-export const WithCard = Template.bind({});
-WithCard.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    steps,
-    image: {
-      id: 1,
-      alt: 'Image alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    card: {
-      id: 1,
-      title: 'Title',
-      text: 'Text',
-      button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-      shapes: [
-        {
-          id: 1,
-          alt: 'Shape 1',
-          img: { data: storybookStrapiGradientBottomUpMock },
-        },
-        {
-          id: 2,
-          alt: 'Shape 2',
-          img: { data: storybookStrapiGradientTopDownMock },
-        },
-      ],
-    },
-  },
-};

package/src/slices/Steps/Steps.test.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import Steps from '.';
-import { StepsProps } from './Steps';
-
-const defaultProps: StepsProps = {
-  slice: {
-    title: 'Title',
-    steps: [
-      {
-        id: 1,
-        step: 1,
-        title: 'Step Title',
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<Steps {...combinedProps} />);
-};
-
-describe('The Steps component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the number of the steps', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.steps[0].step)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the titles of the steps', () => {
-    setup();
-
-    expect(
-      screen.getByText(defaultProps.slice.steps[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the texts of the steps if there is one in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        steps: [{ id: 1, step: 1, title: 'Step title', text: 'Step text' }],
-      },
-    });
-
-    expect(screen.getByText('Step text')).toBeInTheDocument();
-  });
-
-  it('displays the background image if there is one in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        image: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
-      },
-    });
-
-    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Alt text');
-  });
-});

package/src/slices/Steps/Steps.tsx

@@ -1,223 +0,0 @@
-import React, {
-  createRef,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Box,
-  Center,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Gradient,
-  Heading,
-  RichText,
-  ShapesCard,
-  Text,
-  useToken,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import { useWindowScroll, useWindowSize } from 'react-use';
-import { useRouter } from 'next/router';
-import StrapiShapesCard from '../../models/strapi/StrapiShapesCard';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import strapiLinkUrl from '../../utils/strapiLinkUrl';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
-
-interface StepsSlice extends StrapiDefaultHeader {
-  steps: {
-    id: number;
-    step: number;
-    title: string;
-    text?: string;
-  }[];
-  image?: StrapiImage;
-  card?: StrapiShapesCard;
-}
-export interface StepsProps {
-  slice: StepsSlice;
-}
-
-export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
-  const { push } = useRouter();
-  const analyticsFunction = useContext(AnalyticsContext);
-
-  const [gray900] = useToken('colors', ['gray.900']);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [stepRefs, setStepRefs] = useState(new Array(slice.steps.length));
-  const [stepProgress, setStepProgress] = useState(
-    new Array(slice.steps.length)
-  );
-
-  const { y: offsetY } = useWindowScroll();
-  const { height: windowHeight } = useWindowSize();
-
-  const handleShapesCardButtonClick = () => {
-    if (slice.card?.button) {
-      analyticsFunction?.({
-        type: 'track',
-        props: {
-          action: 'click',
-          component: 'Steps',
-          buttonText: slice.card.button.text,
-          buttonUrl: strapiLinkUrl(slice.card.button),
-          section: 'card',
-        },
-      });
-      push(strapiLinkUrl(slice.card.button));
-    }
-  };
-  useEffect(() => {
-    setStepRefs(slice.steps.map(() => createRef()));
-  }, []);
-
-  useEffect(() => {
-    const containerOffsetTop = containerRef.current?.offsetTop || 0;
-    setStepProgress(
-      stepRefs.map((ref) => {
-        const currentItemOffsetTop = ref.current?.offsetTop || 0;
-        return containerOffsetTop + currentItemOffsetTop <
-          offsetY + windowHeight / 3
-          ? 100
-          : 0;
-      })
-    );
-  }, [offsetY]);
-
-  return (
-    <div ref={containerRef}>
-      <DefaultSectionContainer backgroundColor={gray900} title={slice.title}>
-        <>
-          {slice.image && (
-            <Box
-              position="absolute"
-              top="0"
-              left="0"
-              width="full"
-              height="full"
-            >
-              <Image
-                src={strapiMediaUrl(slice.image.img, 'xLarge')}
-                alt={slice.image.alt}
-                fill
-                style={{ objectFit: slice.image.objectFit || 'cover' }}
-              />
-              <Gradient />
-            </Box>
-          )}
-        </>
-        <Wrapper>
-          <>
-            <DefaultSectionHeader
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.text}
-              taglineProps={{ textAlign: 'center' }}
-              titleProps={{
-                textAlign: 'center',
-                maxW: '2xl',
-                marginX: 'auto',
-                color: 'white',
-              }}
-              textProps={{
-                textAlign: 'center',
-                maxW: 'xl',
-                marginX: 'auto',
-                color: 'whiteAlpha.800',
-              }}
-            />
-
-            <Box marginTop={['16', null, '24']}>
-              {slice.steps.map(({ id, step, title, text }, index) => (
-                <Flex flexDir="column" alignItems="center" key={id}>
-                  <Center
-                    width="10"
-                    height="10"
-                    borderRadius="full"
-                    backgroundColor="white"
-                  >
-                    <Text size="smRegularNormal" color="black">
-                      {step}
-                    </Text>
-                  </Center>
-                  <Heading size="lg" color="white" mt="4" textAlign="center">
-                    {title}
-                  </Heading>
-                  {text && (
-                    <Box maxW="xl" mt="4">
-                      <RichText
-                        options={{ forceBlock: true }}
-                        content={text}
-                        textProps={{
-                          size: 'mdRegularNormal',
-                          color: 'whiteAlpha.700',
-                          textAlign: 'center',
-                        }}
-                      />
-                    </Box>
-                  )}
-                  {(index + 1 < slice.steps.length || slice.card) && (
-                    <Box
-                      ref={stepRefs[index]}
-                      position="relative"
-                      marginTop="4"
-                      marginBottom="6"
-                      height="12"
-                    >
-                      <Box
-                        position="absolute"
-                        height="full"
-                        borderLeft="dashed 1px white"
-                        opacity="0.5"
-                      />
-                      <Box
-                        position="absolute"
-                        height={`${stepProgress[index]}%`}
-                        borderRight="solid 1px white"
-                        opacity="1"
-                        transition="height ease var(--medium-transition-duration)"
-                      />
-                    </Box>
-                  )}
-                </Flex>
-              ))}
-            </Box>
-
-            {slice.card && (
-              <ShapesCard
-                tagline={slice.card.tagline}
-                title={slice.card.title}
-                text={slice.card.text}
-                shapes={
-                  slice.card.shapes &&
-                  slice.card.shapes?.map((shape) => (
-                    <Image
-                      key={shape.id}
-                      src={strapiMediaUrl(shape.img, 'small')}
-                      alt={shape.alt}
-                      fill
-                      style={{ objectFit: shape.objectFit || 'cover' }}
-                    />
-                  ))
-                }
-                button={
-                  slice.card.button && {
-                    text: slice.card.button.text,
-                    onClick: handleShapesCardButtonClick,
-                  }
-                }
-              />
-            )}
-          </>
-        </Wrapper>
-      </DefaultSectionContainer>
-    </div>
-  );
-};

package/src/slices/Steps/index.ts

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

package/src/slices/TextCardGrid/TextCardGrid.stories.tsx

@@ -1,157 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import {
-  storybookStrapiCoverMock,
-  storybookStrapiGradientBottomUpMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import TextCardGrid from '.';
-
-export default {
-  title: 'slices/TextCardGrid',
-  component: TextCardGrid,
-} as Meta<typeof TextCardGrid>;
-
-const Template: StoryFn<typeof TextCardGrid> = (args) => (
-  <TextCardGrid {...args} />
-);
-
-const cards = [
-  {
-    id: 1,
-    title: 'Title 1',
-    text: '*Supports* **Markdown**',
-    image: {
-      id: 1,
-      alt: 'Shape alt text',
-      img: { data: storybookStrapiGradientBottomUpMock },
-    },
-  },
-  {
-    id: 2,
-    title: 'Title 2',
-    text: 'Text 2',
-    image: {
-      id: 1,
-      alt: 'Shape alt text',
-      img: { data: storybookStrapiGradientBottomUpMock },
-    },
-  },
-  {
-    id: 3,
-    title: 'Title 3',
-    text: 'Text 3',
-    image: {
-      id: 1,
-      alt: 'Shape alt text',
-      img: { data: storybookStrapiGradientBottomUpMock },
-    },
-  },
-];
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    variant: 'shape',
-    cards,
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    variant: 'shape',
-    cards,
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    variant: 'shape',
-    cards,
-  },
-};
-
-export const WithTaglineInCards = Template.bind({});
-WithTaglineInCards.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    variant: 'shape',
-    cards: [
-      { ...cards[0], tagline: 'Tagline 1' },
-      { ...cards[1], tagline: 'Tagline 2' },
-      { ...cards[2], tagline: 'Tagline 3' },
-    ],
-  },
-};
-
-export const ImageVariant = Template.bind({});
-ImageVariant.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    variant: 'image',
-    cards: [
-      {
-        ...cards[0],
-        tagline: 'Tagline 1',
-        image: {
-          id: 1,
-          alt: 'Image alt text',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        ...cards[1],
-        tagline: 'Tagline 2',
-        image: {
-          id: 1,
-          alt: 'Image alt text',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-      {
-        ...cards[2],
-        tagline: 'Tagline 3',
-        image: {
-          id: 1,
-          alt: 'Image alt text',
-          img: { data: storybookStrapiCoverMock },
-        },
-      },
-    ],
-  },
-};
-
-export const WithButtons = Template.bind({});
-WithButtons.args = {
-  slice: {
-    title: 'Title',
-    variant: 'shape',
-    cards: [
-      {
-        ...cards[0],
-      },
-      {
-        ...cards[1],
-        buttons: [
-          { id: 1, url: 'url', text: 'Learn more' },
-          { id: 2, url: 'url', text: 'Contact us', intercomLauncher: true },
-        ],
-      },
-      {
-        ...cards[2],
-      },
-    ],
-  },
-};