@treely/strapi-slices 1.0.0

package/src/slices/LinkCardsGrid/LinkCardsGrid.stories.tsx

@@ -0,0 +1,60 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import LinkCardsGrid from '.';
+
+export default {
+  title: 'sections/LinkCardsGrid',
+  component: LinkCardsGrid,
+} as Meta<typeof LinkCardsGrid>;
+
+const Template: StoryFn<typeof LinkCardsGrid> = (args) => (
+  <LinkCardsGrid {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    cards: [
+      {
+        id: 1,
+        title: 'Title',
+        text: 'Text',
+        link: { id: 1, text: 'Text', url: '/' },
+      },
+    ],
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    cards: [
+      {
+        id: 1,
+        title: 'Title',
+        text: 'Text',
+        link: { id: 1, text: 'Text', url: '/' },
+      },
+    ],
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    cards: [
+      {
+        id: 1,
+        title: 'Title',
+        text: 'Text',
+        link: { id: 1, text: 'Text', url: '/' },
+      },
+    ],
+  },
+};

package/src/slices/LinkCardsGrid/LinkCardsGrid.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@/test/testUtils';
+import LinkCardsGrid from '.';
+import { LinkCardsGridProps } from './LinkCardsGrid';
+
+const defaultProps: LinkCardsGridProps = {
+  slice: {
+    title: 'Title',
+    cards: [
+      {
+        id: 1,
+        title: 'Title',
+        text: 'Text',
+        link: { id: 1, text: 'Text', url: '/' },
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<LinkCardsGrid {...combinedProps} />);
+};
+
+describe('The LinkCardsGrid component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays the link', () => {
+    setup();
+
+    expect(screen.getByTestId('link')).toHaveAttribute('href', '/');
+  });
+});

package/src/slices/LinkCardsGrid/LinkCardsGrid.tsx

@@ -0,0 +1,95 @@
+import Link from 'next/link';
+import {
+  Box,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Heading,
+  SimpleGrid,
+  Text,
+  Wrapper,
+} from 'boemly';
+import { CaretRight } from '@phosphor-icons/react';
+import { MEDIUM_TRANSITION_DURATION } from '@/constants/animations';
+import strapiLinkUrl from '@/utils/strapiLinkUrl';
+import StrapiLink from '@/models/strapi/StrapiLink';
+
+interface LinkCardsGridSlice {
+  tagline?: string;
+  title: string;
+  text?: string;
+  cards: {
+    id: number;
+    title: string;
+    text?: string;
+    link: StrapiLink;
+  }[];
+}
+export interface LinkCardsGridProps {
+  slice: LinkCardsGridSlice;
+}
+
+export const LinkCardsGrid: React.FC<LinkCardsGridProps> = ({
+  slice,
+}: LinkCardsGridProps) => (
+  <DefaultSectionContainer title={slice.title}>
+    <Wrapper>
+      <DefaultSectionHeader
+        tagline={slice.tagline}
+        title={slice.title}
+        text={slice.text}
+      />
+
+      <SimpleGrid mt="16" columns={[1, null, null, null, 2]} gap="4">
+        {slice.cards.map(({ id, title, text, link }) => (
+          <Link key={id} href={strapiLinkUrl(link)} passHref legacyBehavior>
+            <Box
+              data-testid="link"
+              px="10"
+              py="8"
+              borderStyle="solid"
+              borderWidth="thin"
+              borderColor="gray.200"
+              borderRadius="2xl"
+              display="flex"
+              flexDir="row"
+              alignItems="center"
+              justifyContent="space-between"
+              cursor="pointer"
+              transitionDuration={`${MEDIUM_TRANSITION_DURATION}s`}
+              _hover={{ backgroundColor: 'gray.50' }}
+            >
+              <div>
+                <Heading as="h4" size="lg">
+                  {title}
+                </Heading>
+                {text && (
+                  <Text mt="2" size="smRegularNormal">
+                    {text}
+                  </Text>
+                )}
+              </div>
+
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                borderStyle="solid"
+                borderWidth="thin"
+                borderColor="gray.200"
+                borderRadius="2xl"
+                height="12"
+                width="12"
+                minWidth="12"
+                minHeight="12"
+                ml="6"
+                backgroundColor="white"
+              >
+                <CaretRight />
+              </Box>
+            </Box>
+          </Link>
+        ))}
+      </SimpleGrid>
+    </Wrapper>
+  </DefaultSectionContainer>
+);

package/src/slices/LinkCardsGrid/index.ts

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

package/src/slices/LogoGridWithText/LogoGridWithText.stories.tsx

@@ -0,0 +1,73 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiTreeIconMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import LogoGridWithText from '.';
+
+export default {
+  title: 'sections/LogoGridWithText',
+  component: LogoGridWithText,
+} as Meta<typeof LogoGridWithText>;
+
+const Template: StoryFn<typeof LogoGridWithText> = (args) => (
+  <LogoGridWithText {...args} />
+);
+
+const logos = [
+  { id: 1, alt: 'Alt text 1', img: { data: storybookStrapiTreeIconMock } },
+  { id: 2, alt: 'Alt text 2', img: { data: storybookStrapiTreeIconMock } },
+];
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    text: 'Text',
+    logos,
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    title: 'Title',
+    text: 'Text',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+    logos,
+  },
+};
+
+export const WithMoreThan2Logos = Template.bind({});
+WithMoreThan2Logos.args = {
+  slice: {
+    title: 'Title',
+    text: 'Text',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+    logos: [
+      ...logos,
+      { id: 3, alt: 'Alt text 3', img: { data: storybookStrapiTreeIconMock } },
+      { id: 4, alt: 'Alt text 4', img: { data: storybookStrapiTreeIconMock } },
+    ],
+  },
+};
+
+export const WithLogosWithLinks = Template.bind({});
+WithLogosWithLinks.args = {
+  slice: {
+    title: 'Title',
+    text: 'Text',
+    logos: [
+      {
+        id: 1,
+        alt: 'Logo with link 1',
+        img: { data: storybookStrapiTreeIconMock },
+        link: { id: 1, text: 'Link', url: 'https://tree.ly' },
+      },
+      {
+        id: 2,
+        alt: 'Logo with link 2',
+        img: { data: storybookStrapiTreeIconMock },
+        link: { id: 2, text: 'Link', url: 'https://tree.ly' },
+      },
+    ],
+  },
+};

package/src/slices/LogoGridWithText/LogoGridWithText.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import LogoGridWithText from '.';
+import { LogoGridWithTextProps } from './LogoGridWithText';
+
+const defaultProps: LogoGridWithTextProps = {
+  slice: {
+    title: 'Title',
+    text: 'Text',
+    logos: [{ id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } }],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<LogoGridWithText {...combinedProps} />);
+};
+
+describe('The LogoGridWithText component', () => {
+  it('displays the title', () => {
+    setup();
+
+    expect(screen.getByText(defaultProps.slice.title)).toBeInTheDocument();
+  });
+
+  it('displays the text', () => {
+    setup();
+
+    expect(screen.getByText(defaultProps.slice.text)).toBeInTheDocument();
+  });
+
+  it('displays the button if one is defined', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        button: {
+          id: 1,
+          text: 'Button text',
+          url: 'url',
+        },
+      },
+    });
+
+    expect(screen.getByText('Button text')).toBeInTheDocument();
+  });
+
+  it('displays the logo', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'alt',
+      defaultProps.slice.logos[0].alt
+    );
+  });
+});

package/src/slices/LogoGridWithText/LogoGridWithText.tsx

@@ -0,0 +1,95 @@
+import {
+  Box,
+  DefaultSectionContainer,
+  Flex,
+  Heading,
+  RichText,
+  SimpleGrid,
+  useToken,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { ArrowRight } from '@phosphor-icons/react';
+import strapiLinkUrl from '@/utils/strapiLinkUrl';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiImageWithLink from '@/models/strapi/StrapiImageWithLink';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import { LogoFlexContainer } from './styles';
+
+export interface LogoGridWithTextProps {
+  slice: {
+    title: string;
+    text: string;
+    button?: StrapiLink;
+    logos: StrapiImageWithLink[];
+  };
+}
+
+export const LogoGridWithText: React.FC<LogoGridWithTextProps> = ({
+  slice,
+}: LogoGridWithTextProps) => {
+  const [primary50] = useToken('colors', ['primary.50']);
+
+  return (
+    <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
+      <Wrapper>
+        <SimpleGrid columns={2} gap="28" minChildWidth="16rem">
+          <Box
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="flex-start"
+          >
+            <Heading as="h2" size="3xl" mb="4">
+              {slice.title}
+            </Heading>
+            <RichText content={slice.text} />
+            {slice.button && (
+              <StrapiLinkButton
+                link={slice.button}
+                size="md"
+                colorScheme="white"
+                variant="outline"
+                mt="6"
+                rightIcon={<ArrowRight />}
+              />
+            )}
+          </Box>
+          <LogoFlexContainer>
+            {slice.logos.map((logo) => (
+              <Flex
+                key={logo.id}
+                justifyContent="center"
+                alignItems="center"
+                flexGrow={1}
+                flexShrink={0}
+                flexBasis={slice.logos.length > 2 ? '34%' : '90%'} // 34% are just enough to not allow three in one row
+              >
+                <Box position="relative" height="20" width="100%">
+                  {logo.link ? (
+                    <a href={strapiLinkUrl(logo.link)}>
+                      <Image
+                        src={strapiMediaUrl(logo.img, 'small')}
+                        alt={logo.alt}
+                        fill
+                        style={{ objectFit: logo.objectFit || 'contain' }}
+                      />
+                    </a>
+                  ) : (
+                    <Image
+                      src={strapiMediaUrl(logo.img, 'small')}
+                      alt={logo.alt}
+                      fill
+                      style={{ objectFit: logo.objectFit || 'contain' }}
+                    />
+                  )}
+                </Box>
+              </Flex>
+            ))}
+          </LogoFlexContainer>
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/LogoGridWithText/index.ts

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

package/src/slices/LogoGridWithText/styles.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_LG } from '@/constants/breakpoints';
+
+export const LogoFlexContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--boemly-space-28);
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    gap: var(--boemly-space-12);
+  }
+`;

package/src/slices/MapHero/MapHero.stories.tsx

@@ -0,0 +1,112 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import {
+  storybookStrapiGradientBottomUpMock,
+  storybookStrapiMapMock,
+} from '@/test/storybookMocks/storybookStrapiMedia';
+import MapHero from '.';
+
+export default {
+  title: 'sections/MapHero',
+  component: MapHero,
+} as Meta<typeof MapHero>;
+
+const Template: StoryFn<typeof MapHero> = (args) => <MapHero {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
+    mobileMap: {
+      id: 1,
+      alt: 'Mobile map alt text',
+      img: { data: storybookStrapiMapMock },
+    },
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
+    mobileMap: {
+      id: 1,
+      alt: 'Mobile map alt text',
+      img: { data: storybookStrapiMapMock },
+    },
+  },
+};
+
+export const WithTaglineAndSubTitle = Template.bind({});
+WithTaglineAndSubTitle.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Text',
+    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
+    mobileMap: {
+      id: 1,
+      alt: 'Mobile map alt text',
+      img: { data: storybookStrapiMapMock },
+    },
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Text',
+    buttons: [{ id: 1, text: 'Button', url: 'https://tree.ly' }],
+    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
+    mobileMap: {
+      id: 1,
+      alt: 'Mobile map alt text',
+      img: { data: storybookStrapiMapMock },
+    },
+  },
+};
+
+export const WithTwoButtons = Template.bind({});
+WithTwoButtons.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Text',
+    buttons: [
+      { id: 1, text: 'Button 1', url: 'https://tree.ly' },
+      { id: 2, text: 'Button 2', url: 'https://tree.ly' },
+    ],
+    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
+    mobileMap: {
+      id: 1,
+      alt: 'Mobile map alt text',
+      img: { data: storybookStrapiMapMock },
+    },
+  },
+};
+
+export const WithShape = Template.bind({});
+WithShape.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Text',
+    buttons: [{ id: 1, text: 'Button', url: 'https://tree.ly' }],
+    shape: {
+      id: 1,
+      alt: 'Shape',
+      img: { data: storybookStrapiGradientBottomUpMock },
+    },
+    map: { id: 1, alt: 'Map alt text', img: { data: storybookStrapiMapMock } },
+    mobileMap: {
+      id: 1,
+      alt: 'Mobile map alt text',
+      img: { data: storybookStrapiMapMock },
+    },
+  },
+};

package/src/slices/MapHero/MapHero.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import MapHero from '.';
+import { MapHeroProps } from './MapHero';
+
+const defaultProps: MapHeroProps = {
+  slice: {
+    title: 'Title',
+    map: {
+      id: 1,
+      alt: 'Map alt text',
+      img: { data: strapiMediaMock },
+    },
+    mobileMap: {
+      id: 1,
+      alt: 'Map alt text',
+      img: { data: strapiMediaMock },
+    },
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<MapHero {...combinedProps} />);
+};
+
+describe('The MapHero component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays a map', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'alt',
+      defaultProps.slice.map.alt
+    );
+  });
+
+  it('displays no link if there is no button in the slice', async () => {
+    setup();
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  it('displays a link if there is a button in the slice', () => {
+    setup({
+      slice: { ...defaultProps.slice, buttons: [{ url: 'url', text: 'Link' }] },
+    });
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+  });
+
+  it('displays two links if there are two buttons in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        buttons: [
+          { url: 'url', text: 'Link-1' },
+          { url: 'url', text: 'Link-2' },
+        ],
+      },
+    });
+
+    expect(screen.getAllByRole('link')).toHaveLength(2);
+    expect(screen.getByText('Link-1')).toBeInTheDocument();
+    expect(screen.getByText('Link-2')).toBeInTheDocument();
+  });
+
+  it('displays a shape if there is a shape in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        textAlign: 'left',
+        shape: { id: 1, img: { data: strapiMediaMock }, alt: 'Shape alt text' },
+      },
+    });
+
+    expect(screen.getAllByRole('img').length).toBe(2);
+  });
+});