@treely/strapi-slices 1.0.0

package/src/slices/IconGrid/IconGrid.stories.tsx

@@ -0,0 +1,178 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiTreeIconMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import IconGrid from '.';
+
+export default {
+  title: 'sections/IconGrid',
+  component: IconGrid,
+} as Meta<typeof IconGrid>;
+
+const Template: StoryFn<typeof IconGrid> = (args) => <IconGrid {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    iconsWithTextAndButton: [
+      {
+        id: 1,
+        title: 'Title 1',
+        text: 'Text 1',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+      {
+        id: 2,
+        title: 'Title 2',
+        text: 'Text 2',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+      {
+        id: 3,
+        title: 'Title 3',
+        text: 'Text 3',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+      {
+        id: 4,
+        title: 'Title 4',
+        text: 'Text 4',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+    ],
+  },
+};
+
+export const WithTaglineTitleAndText = Template.bind({});
+WithTaglineTitleAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Text',
+    iconsWithTextAndButton: [
+      {
+        id: 1,
+        title: 'Title 1',
+        text: 'Text 1',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+      {
+        id: 2,
+        title: 'Title 2',
+        text: 'Text 2',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+      {
+        id: 3,
+        title: 'Title 3',
+        text: 'Text 3',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+      {
+        id: 4,
+        title: 'Title 4',
+        text: 'Text 4',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+      },
+    ],
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    iconsWithTextAndButton: [
+      {
+        id: 1,
+        title: 'Title 1',
+        text: 'Text 1',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+        button: {
+          id: 1,
+          text: 'Button',
+          url: 'https://tree.ly',
+        },
+      },
+      {
+        id: 2,
+        title: 'Title 2',
+        text: 'Text 2',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+        button: {
+          id: 1,
+          text: 'Button',
+          url: 'https://tree.ly',
+        },
+      },
+      {
+        id: 3,
+        title: 'Title 3',
+        text: 'Text 3',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+        button: {
+          id: 1,
+          text: 'Button',
+          url: 'https://tree.ly',
+        },
+      },
+      {
+        id: 4,
+        title: 'Title 4',
+        text: 'Text 4',
+        icon: {
+          id: 1,
+          alt: 'Alt text',
+          img: { data: storybookStrapiTreeIconMock },
+        },
+        button: {
+          id: 1,
+          text: 'Button',
+          url: 'https://tree.ly',
+        },
+      },
+    ],
+  },
+};

package/src/slices/IconGrid/IconGrid.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import IconGrid from '.';
+import { IconGridProps } from './IconGrid';
+
+const defaultProps: IconGridProps = {
+  slice: {
+    iconsWithTextAndButton: [
+      {
+        id: 1,
+        title: 'Img Title',
+        text: 'Text',
+        icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<IconGrid {...combinedProps} />);
+};
+
+describe('The IconGrid component', () => {
+  it('displays the image titles', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.iconsWithTextAndButton[0].title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the texts', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.iconsWithTextAndButton[0].text)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the icons', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'alt',
+      defaultProps.slice.iconsWithTextAndButton[0].icon.alt
+    );
+  });
+
+  it('displays the tagline, title and subTite when they are defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        tagline: 'Tagline',
+        title: 'Title',
+        subTitle: 'Subtitle',
+      },
+    });
+
+    expect(screen.getByText('Tagline')).toBeInTheDocument();
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Subtitle')).toBeInTheDocument();
+  });
+
+  it('displays the button when it is defined in slice', () => {
+    setup({
+      slice: {
+        iconsWithTextAndButton: [
+          {
+            ...defaultProps.slice.iconsWithTextAndButton[0],
+            icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+            button: { id: 1, url: 'url', text: 'Link' },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+  });
+});

package/src/slices/IconGrid/IconGrid.tsx

@@ -0,0 +1,97 @@
+import {
+  Box,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Spacer,
+  Text,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import { IconContainer, InnerIconContainer } from './styles';
+
+export interface IconGridProps {
+  slice: {
+    tagline?: string;
+    title?: string;
+    subTitle?: string;
+    iconsWithTextAndButton: {
+      id: number;
+      title: string;
+      text: string;
+      icon: StrapiImage;
+      button?: StrapiLink;
+    }[];
+  };
+}
+
+export const IconGrid: React.FC<IconGridProps> = ({ slice }: IconGridProps) => (
+  <DefaultSectionContainer>
+    <Wrapper>
+      {slice.title ? (
+        <>
+          <Flex alignItems="center" flexDirection="column">
+            <DefaultSectionHeader
+              tagline={slice.tagline}
+              title={slice.title}
+              text={slice.subTitle}
+              taglineProps={{ maxW: '2xl', textAlign: 'center' }}
+              titleProps={{ maxW: '3xl', textAlign: 'center' }}
+              textProps={{ maxW: '3xl', textAlign: 'center' }}
+            />
+          </Flex>
+          <Spacer h="20" />
+        </>
+      ) : (
+        <></>
+      )}
+
+      <SimpleGrid
+        columns={[1, null, null, 2]}
+        gap="32"
+        rowGap={['16', null, null, '28']}
+      >
+        {slice.iconsWithTextAndButton.map((iconWithTextAndButton) => (
+          <Box key={iconWithTextAndButton.id}>
+            <IconContainer>
+              <InnerIconContainer>
+                <Image
+                  src={strapiMediaUrl(iconWithTextAndButton.icon.img, 'xSmall')}
+                  alt={iconWithTextAndButton.icon.alt}
+                  fill
+                  style={{
+                    objectFit:
+                      iconWithTextAndButton.icon.objectFit || 'contain',
+                  }}
+                />
+              </InnerIconContainer>
+            </IconContainer>
+            <Heading size="xl" textAlign="center" mb="4" mt="8">
+              {iconWithTextAndButton.title}
+            </Heading>
+            <Text size="mdRegularNormal" textAlign="center">
+              {iconWithTextAndButton.text}
+            </Text>
+            {iconWithTextAndButton.button && (
+              <Box textAlign="center">
+                <StrapiLinkButton
+                  key={iconWithTextAndButton.button.id}
+                  mt="8"
+                  size="md"
+                  variant="outline"
+                  link={iconWithTextAndButton.button}
+                />
+              </Box>
+            )}
+          </Box>
+        ))}
+      </SimpleGrid>
+    </Wrapper>
+  </DefaultSectionContainer>
+);

package/src/slices/IconGrid/index.ts

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

package/src/slices/IconGrid/styles.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+export const IconContainer = styled.div`
+  width: 6.5rem;
+  height: 6.5rem;
+
+  margin: 0 auto;
+
+  background-color: var(--boemly-colors-primary-50);
+  border-radius: var(--boemly-radii-full);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+`;
+
+export const InnerIconContainer = styled.div`
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+`;

package/src/slices/ImageGrid/ImageGrid.stories.tsx

@@ -0,0 +1,92 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import StrapiLinkWithIcon from '@/models/strapi/StrapiLinkWithIcon';
+import ImageGrid from '.';
+
+export default {
+  title: 'sections/ImageGrid',
+  component: ImageGrid,
+} as Meta<typeof ImageGrid>;
+
+const Template: StoryFn<typeof ImageGrid> = (args) => <ImageGrid {...args} />;
+
+const link: StrapiLinkWithIcon = {
+  id: 1,
+  link: { id: 1, text: 'Link', url: 'https://tree.ly' },
+  destination: 'linkedin',
+};
+
+const images = [
+  {
+    id: 1,
+    title: 'Title 1',
+    subTitle: 'Sub title 1',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    links: [link],
+  },
+  {
+    id: 2,
+    title: 'Title 2',
+    subTitle: 'Sub title 2',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    links: [],
+  },
+  {
+    id: 3,
+    title: 'Title 3',
+    subTitle: 'Sub title 3',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    links: [],
+  },
+  {
+    id: 4,
+    title: 'Title 4',
+    subTitle: 'Sub title 4',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    links: [],
+  },
+];
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    images,
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    images,
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    images,
+  },
+};

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

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

@@ -0,0 +1,89 @@
+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';
+import { ImageContainer } from './styles';
+
+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}>
+              <ImageContainer>
+                <Image
+                  src={strapiMediaUrl(image.img, 'medium')}
+                  alt={image.alt}
+                  fill
+                  style={{ objectFit: image.objectFit || 'cover' }}
+                />
+              </ImageContainer>
+              <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"
+                    />
+                  ))}
+                </Flex>
+              )}
+            </Box>
+          ))}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/ImageGrid/index.ts

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

package/src/slices/ImageGrid/styles.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const ImageContainer = styled.div`
+  position: relative;
+  height: var(--boemly-sizes-sm);
+
+  border-radius: var(--boemly-radii-xl);
+
+  & img {
+    border-radius: var(--boemly-radii-xl);
+  }
+`;