@treely/strapi-slices 1.0.0

package/src/slices/Steps/index.ts

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

package/src/slices/Steps/styles.ts

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD } from '@/constants/breakpoints';
+
+export const StepsContainer = styled.div`
+  margin-top: var(--boemly-space-24);
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    margin-top: var(--boemly-space-16);
+  }
+`;
+
+export const StepContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+interface ProgressDividerProps {
+  progress: number;
+}
+
+export const ProgressDivider = styled.div<ProgressDividerProps>`
+  position: relative;
+
+  margin: var(--boemly-space-4) 0 var(--boemly-space-6) 0;
+
+  height: 2.75rem;
+
+  & .dotted {
+    position: absolute;
+    height: 100%;
+    border-left: dashed 1px white;
+    opacity: 0.5;
+  }
+
+  & .progress {
+    position: absolute;
+    height: ${({ progress }) => `${progress}%`};
+    border-right: solid 1px white;
+    opacity: 1;
+
+    transition: height ease var(--medium-transition-duration);
+  }
+`;
+
+export const StepNumber = styled.div`
+  width: 2.5rem;
+  height: 2.5rem;
+
+  border-radius: var(--boemly-radii-full);
+  background-color: var(--boemly-colors-white);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ImageContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;

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

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

package/src/slices/TextCardGrid/TextCardGrid.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import TextCardGrid from '.';
+import { TextCardGridProps } from './TextCardGrid';
+
+const defaultProps: TextCardGridProps = {
+  slice: {
+    title: 'Title',
+
+    cards: [
+      {
+        id: 1,
+        tagline: 'Card Tagline 1',
+        title: 'Card Title 1',
+        text: 'Card Text 1',
+        image: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 2,
+        title: 'Card Title 2',
+        text: 'Card Text 2',
+        image: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
+        buttons: [
+          { id: 1, url: 'url', text: 'Learn more' },
+          { id: 2, url: 'url', text: 'Contact us', intercomLauncher: true },
+        ],
+      },
+      {
+        id: 3,
+        title: 'Card Title 3',
+        text: 'Card Text 3',
+        image: { id: 3, alt: 'Alt text 3', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 4,
+        title: 'Card Title 4',
+        text: 'Card Text 4',
+        image: { id: 4, alt: 'Alt text 4', img: { data: strapiMediaMock } },
+      },
+    ],
+    variant: 'shape',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<TextCardGrid {...combinedProps} />);
+};
+
+describe('The TextCardGrid component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays the card tagline if there is a card tagline in the slice', () => {
+    setup();
+
+    expect(screen.getByText('Card Tagline 1')).toBeInTheDocument();
+  });
+
+  it('displays the card titles', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.cards[0].title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the card texts', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.cards[0].text)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the buttons', () => {
+    setup();
+
+    expect(screen.getByText('Contact us')).toBeInTheDocument();
+    expect(screen.getByText('Learn more')).toBeInTheDocument();
+  });
+
+  it('displays the images for variant shape', () => {
+    setup();
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
+      'alt',
+      defaultProps.slice.cards[0].image.alt
+    );
+  });
+
+  it('displays the images for variant image', () => {
+    setup({ slice: { ...defaultProps.slice, variant: 'image' } });
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
+      'alt',
+      defaultProps.slice.cards[0].image.alt
+    );
+  });
+});

package/src/slices/TextCardGrid/TextCardGrid.tsx

@@ -0,0 +1,285 @@
+import { css } from '@emotion/react';
+import {
+  Box,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Flex,
+  Heading,
+  RichText,
+  SimpleGrid,
+  Text,
+  useToken,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { CaretRight } from '@phosphor-icons/react';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+
+interface TextCardGridSlice extends StrapiDefaultHeader {
+  variant: 'shape' | 'image';
+  cards: {
+    id: number;
+    tagline?: string;
+    title: string;
+    text: string;
+    image: StrapiImage;
+    buttons?: StrapiLink[];
+  }[];
+}
+export interface TextCardGridProps {
+  slice: TextCardGridSlice;
+}
+
+enum ShapePosition {
+  topLeft = 'top-left',
+  topRight = 'top-right',
+  bottomLeft = 'bottom-left',
+  bottomRight = 'bottom-right',
+  unset = 'unset',
+}
+
+const shapePositions: ShapePosition[] = [
+  ShapePosition.topLeft,
+  ShapePosition.bottomRight,
+  ShapePosition.topRight,
+  ShapePosition.bottomLeft,
+  ShapePosition.topRight,
+  ShapePosition.bottomLeft,
+  ShapePosition.topLeft,
+  ShapePosition.bottomRight,
+];
+
+const oppositesOfCorners = {
+  [ShapePosition.bottomLeft]: ShapePosition.topRight,
+  [ShapePosition.topRight]: ShapePosition.bottomLeft,
+  [ShapePosition.bottomRight]: ShapePosition.topLeft,
+  [ShapePosition.topLeft]: ShapePosition.bottomRight,
+  [ShapePosition.unset]: ShapePosition.unset,
+};
+
+type Variant = {
+  padding: (string | null)[];
+  positionIcon: (index: number) => ShapePosition;
+  width: string;
+  height: string;
+  position: 'absolute' | 'relative';
+  mb: string;
+};
+
+const variants: { shape: Variant; image: Variant } = {
+  shape: {
+    padding: ['6', null, null, '8'],
+    positionIcon: (index: number) => shapePositions[index],
+    width: '40',
+    height: '40',
+    position: 'absolute',
+    mb: 'unset',
+  },
+  image: {
+    padding: ['6', null, null, '8'],
+    positionIcon: () => ShapePosition.unset,
+    width: '24',
+    height: '24',
+    position: 'relative',
+    mb: '10',
+  },
+};
+
+export const TextCardGrid: React.FC<TextCardGridProps> = ({
+  slice,
+}: TextCardGridProps) => {
+  const [primary800] = useToken('colors', ['primary.800']);
+
+  return (
+    <DefaultSectionContainer backgroundColor={primary800} title={slice.title}>
+      <Wrapper>
+        <DefaultSectionHeader
+          tagline={slice.tagline}
+          title={slice.title}
+          text={slice.text}
+          taglineProps={{ textAlign: 'center', color: 'white' }}
+          titleProps={{
+            textAlign: 'center',
+            maxW: '2xl',
+            marginX: 'auto',
+            color: 'white',
+          }}
+          textProps={{
+            textAlign: 'center',
+            maxW: 'xl',
+            marginX: 'auto',
+            color: 'whiteAlpha.800',
+          }}
+        />
+
+        <SimpleGrid
+          mt={['14', null, null, '24']}
+          columns={3}
+          justifyItems="center"
+          gap="20"
+          rowGap="16"
+          minChildWidth={['100%', null, '16rem']}
+        >
+          {slice.cards.map(
+            ({ id, tagline, title, text, image, buttons }, index) => (
+              <Box
+                key={id}
+                backgroundColor="white"
+                zIndex="base"
+                padding={variants[slice.variant].padding}
+                boxShadow="lg"
+                borderRadius="2xl"
+                minHeight="2xs"
+                width="full"
+                maxWidth={slice.cards.length > 1 ? 'unset' : 'xl'}
+                position="relative"
+                display="flex"
+                flexDir="column"
+                alignItems="flex-start"
+                justifyContent={
+                  slice.variant === 'shape' ? 'flex-end' : 'flex-start'
+                }
+                overflow="hidden"
+              >
+                <Box
+                  position={variants[slice.variant].position}
+                  width={variants[slice.variant].width}
+                  height={variants[slice.variant].height}
+                  mb={variants[slice.variant].mb}
+                  top={
+                    variants[slice.variant].positionIcon(index).includes('top')
+                      ? '-4'
+                      : 'unset'
+                  }
+                  left={
+                    variants[slice.variant].positionIcon(index).includes('left')
+                      ? '-4'
+                      : 'unset'
+                  }
+                  right={
+                    variants[slice.variant]
+                      .positionIcon(index)
+                      .includes('right')
+                      ? '-4'
+                      : 'unset'
+                  }
+                  bottom={
+                    variants[slice.variant]
+                      .positionIcon(index)
+                      .includes('bottom')
+                      ? '-4'
+                      : 'unset'
+                  }
+                  borderBottomRightRadius={
+                    oppositesOfCorners[
+                      variants[slice.variant].positionIcon(index)
+                    ].includes('bottomRight')
+                      ? 'full'
+                      : 'unset'
+                  }
+                  borderBottomLeftRadius={
+                    oppositesOfCorners[
+                      variants[slice.variant].positionIcon(index)
+                    ].includes('bottomLeft')
+                      ? 'full'
+                      : 'unset'
+                  }
+                  borderTopRightRadius={
+                    oppositesOfCorners[
+                      variants[slice.variant].positionIcon(index)
+                    ].includes('topRight')
+                      ? 'full'
+                      : 'unset'
+                  }
+                  borderTopLeftRadius={
+                    oppositesOfCorners[
+                      variants[slice.variant].positionIcon(index)
+                    ].includes('topLeft')
+                      ? 'full'
+                      : 'unset'
+                  }
+                  css={
+                    variants[slice.variant]
+                      .positionIcon(index)
+                      .includes('unset')
+                      ? css`
+                          & span,
+                          div,
+                          img {
+                            border-radius: var(--boemly-radii-xl);
+                          }
+                        `
+                      : css`
+                    & span,
+                    div,
+                    img {
+                      border-${
+                        oppositesOfCorners[
+                          variants[slice.variant].positionIcon(index)
+                        ]
+                      }-radius: var(--boemly-radii-full);
+                    }
+                  `
+                  }
+                >
+                  <Image
+                    src={strapiMediaUrl(image.img, 'small')}
+                    alt={image.alt}
+                    fill
+                    style={{ objectFit: image.objectFit || 'cover' }}
+                  />
+                </Box>
+                <Box zIndex="aboveBase" width="full">
+                  {tagline && (
+                    <Text color="black" size="smMonoNormal" mb="2">
+                      {tagline}
+                    </Text>
+                  )}
+                  <Heading as="h4" size="xl" mb="3">
+                    {title}
+                  </Heading>
+                  <RichText
+                    content={text}
+                    listProps={{
+                      textColor: 'gray.500',
+                      textSize: 'smRegularNormal',
+                    }}
+                    textProps={{
+                      color: 'gray.500',
+                      size: 'smRegularNormal',
+                    }}
+                  />
+                  {buttons && !!buttons.length && (
+                    <Flex
+                      mt="4"
+                      gap="3"
+                      flexDir={['column', null, null, null, 'row']}
+                    >
+                      {buttons.map((button, buttonIndex) => (
+                        <StrapiLinkButton
+                          key={button.id}
+                          link={button}
+                          size="sm"
+                          rightIcon={
+                            buttonIndex === 0 ? (
+                              <CaretRight size="10" weight="bold" />
+                            ) : undefined
+                          }
+                          variant={buttonIndex === 0 ? 'outline' : 'ghost'}
+                        />
+                      ))}
+                    </Flex>
+                  )}
+                </Box>
+              </Box>
+            )
+          )}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/TextCardGrid/index.ts

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