@treely/strapi-slices 1.0.0

package/src/slices/SmallHero/SmallHero.stories.tsx

@@ -0,0 +1,138 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import SmallHero from '.';
+
+export default {
+  title: 'sections/SmallHero',
+  component: SmallHero,
+} as Meta<typeof SmallHero>;
+
+const Template: StoryFn<typeof SmallHero> = (args) => <SmallHero {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+  },
+  theme: 'dark',
+};
+
+export const WithSubTitle = Template.bind({});
+WithSubTitle.args = {
+  slice: {
+    title: 'Title',
+    subTitle: 'Sub title',
+  },
+  theme: 'dark',
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+  },
+  theme: 'dark',
+};
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+  },
+  theme: 'dark',
+};
+
+export const WithImageGradient = Template.bind({});
+WithImageGradient.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    gradient: true,
+  },
+  theme: 'dark',
+};
+
+export const WithTags = Template.bind({});
+WithTags.args = {
+  slice: {
+    tags: [
+      { id: 1, text: 'Tag 1', colorScheme: 'green' },
+      { id: 2, text: 'Tag 2', colorScheme: 'gray' },
+    ],
+    title: 'Title',
+    subTitle: 'Sub title',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+  },
+  theme: 'dark',
+};
+
+export const WithTagsAndButton = Template.bind({});
+WithTagsAndButton.args = {
+  slice: {
+    tags: [
+      { id: 1, text: 'Tag 1', colorScheme: 'green' },
+      { id: 2, text: 'Tag 2', colorScheme: 'gray' },
+    ],
+    title: 'Title',
+    subTitle: 'Sub title',
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+  },
+  theme: 'dark',
+};
+
+export const LightTheme = Template.bind({});
+LightTheme.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+  },
+  theme: 'light',
+};
+
+export const LightThemeWithTagsAndButton = Template.bind({});
+LightThemeWithTagsAndButton.args = {
+  slice: {
+    tags: [
+      { id: 1, text: 'Tag 1', colorScheme: 'green' },
+      { id: 2, text: 'Tag 2', colorScheme: 'blue' },
+    ],
+    title: 'Title',
+    subTitle: 'Sub title',
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+  },
+  theme: 'light',
+};

package/src/slices/SmallHero/SmallHero.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import SmallHero from '.';
+import { SmallHeroProps } from './SmallHero';
+
+const defaultProps: SmallHeroProps = {
+  slice: {
+    title: 'Title',
+  },
+  theme: 'dark',
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<SmallHero {...combinedProps} />);
+};
+
+describe('The SmallHero component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays a subtitle if there is a subtitle in the slice', () => {
+    setup({ slice: { ...defaultProps.slice, subTitle: 'Sub title' } });
+
+    expect(screen.getByText('Sub title')).toBeInTheDocument();
+  });
+
+  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 a tag if there is a tag in the slice', () => {
+    setup({
+      slice: { ...defaultProps.slice, tags: [{ id: 1, text: 'Tag' }] },
+    });
+
+    expect(screen.getByText('Tag')).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 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');
+  });
+});

package/src/slices/SmallHero/SmallHero.tsx

@@ -0,0 +1,116 @@
+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';
+import { HeadingContainer } from './styles';
+
+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 />}
+      </>
+    )}
+    <HeadingContainer>
+      <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" />
+          )}
+        </>
+      </Wrapper>
+    </HeadingContainer>
+  </Box>
+);

package/src/slices/SmallHero/index.ts

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

package/src/slices/SmallHero/styles.ts

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD, BREAKPOINT_XL } from '@/constants/breakpoints';
+
+export const HeadingContainer = styled.div`
+  position: absolute;
+  left: 0;
+  top: 60%;
+  width: 100vw;
+  text-align: center;
+  transform: translateY(-50%);
+`;
+
+export const ShapeContainer = styled.div`
+  position: absolute;
+
+  height: var(--boemly-sizes-sm);
+  width: var(--boemly-sizes-sm);
+
+  right: var(--boemly-space-24);
+  bottom: 0;
+
+  border-top-right-radius: 100%;
+  & span,
+  div {
+    border-top-right-radius: 100%;
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_XL}) {
+    height: var(--boemly-sizes-2xs);
+    width: var(--boemly-sizes-2xs);
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    right: calc(var(--boemly-space-16) * -1);
+
+    height: var(--boemly-sizes-3xs);
+    width: var(--boemly-sizes-3xs);
+  }
+`;

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

@@ -0,0 +1,95 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import {
+  storybookStrapiCoverMock,
+  storybookStrapiGradientBottomUpMock,
+  storybookStrapiGradientTopDownMock,
+} from '@/test/storybookMocks/storybookStrapiMedia';
+import Steps from '.';
+
+export default {
+  title: 'sections/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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,178 @@
+import {
+  Box,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Gradient,
+  Heading,
+  RichText,
+  ShapesCard,
+  Text,
+  useToken,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { createRef, useEffect, useRef, useState } from 'react';
+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 {
+  ImageContainer,
+  ProgressDivider,
+  StepContainer,
+  StepNumber,
+  StepsContainer,
+} from './styles';
+
+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 [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();
+
+  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 && (
+            <ImageContainer>
+              <Image
+                src={strapiMediaUrl(slice.image.img, 'xLarge')}
+                alt={slice.image.alt}
+                fill
+                style={{ objectFit: slice.image.objectFit || 'cover' }}
+              />
+              <Gradient />
+            </ImageContainer>
+          )}
+        </>
+        <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',
+              }}
+            />
+
+            <StepsContainer>
+              {slice.steps.map(({ id, step, title, text }, index) => (
+                <StepContainer key={id}>
+                  <StepNumber>
+                    <Text size="smRegularNormal" color="black">
+                      {step}
+                    </Text>
+                  </StepNumber>
+                  <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) && (
+                    <ProgressDivider
+                      ref={stepRefs[index]}
+                      progress={stepProgress[index]}
+                    >
+                      <div className="dotted" />
+                      <div className="progress" />
+                    </ProgressDivider>
+                  )}
+                </StepContainer>
+              ))}
+            </StepsContainer>
+
+            {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
+                      src={strapiMediaUrl(shape.img, 'small')}
+                      alt={shape.alt}
+                      fill
+                      style={{ objectFit: shape.objectFit || 'cover' }}
+                    />
+                  ))
+                }
+                button={
+                  slice.card.button && {
+                    text: slice.card.button.text,
+                    onClick: () => push(strapiLinkUrl(slice.card?.button)),
+                  }
+                }
+              />
+            )}
+          </>
+        </Wrapper>
+      </DefaultSectionContainer>
+    </div>
+  );
+};