@treely/strapi-slices 1.0.0

package/src/slices/ImageTextSequence/ImageTextSequence.stories.tsx

@@ -0,0 +1,124 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import ImageTextSequence from '.';
+
+export default {
+  title: 'sections/ImageTextSequence',
+  component: ImageTextSequence,
+} as Meta<typeof ImageTextSequence>;
+
+const Template: StoryFn<typeof ImageTextSequence> = (args) => (
+  <ImageTextSequence {...args} />
+);
+
+const imageTextRows = [
+  {
+    id: 1,
+    title: 'Row title 1',
+    text: 'Row text 1',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+  },
+  {
+    id: 2,
+    title: 'Row title 2',
+    text: 'Row text 2',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+  },
+  {
+    id: 3,
+    title: 'Row title 3',
+    text: 'Row text 3',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+  },
+];
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    imageTextRows,
+    background: true,
+  },
+};
+Minimal.parameters = {
+  backgrounds: { default: 'grey' },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    imageTextRows,
+    background: true,
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    imageTextRows,
+    background: true,
+  },
+};
+
+export const WithButtons = Template.bind({});
+WithButtons.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    imageTextRows: [
+      {
+        ...imageTextRows[0],
+        button: {
+          id: 1,
+          text: 'Button 1',
+          url: 'https://tree.ly',
+        },
+      },
+      {
+        ...imageTextRows[1],
+        button: {
+          id: 2,
+          text: 'Button 2',
+          url: 'https://tree.ly',
+        },
+      },
+      {
+        ...imageTextRows[2],
+        button: {
+          id: 3,
+          text: 'Button 3',
+          url: 'https://tree.ly',
+        },
+      },
+    ],
+    background: true,
+  },
+};
+
+export const WithoutBackgroundMap = Template.bind({});
+WithoutBackgroundMap.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    imageTextRows,
+    background: false,
+  },
+};

package/src/slices/ImageTextSequence/ImageTextSequence.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import ImageTextSequence from '.';
+import { ImageTextSequenceProps } from './ImageTextSequence';
+
+const defaultProps: ImageTextSequenceProps = {
+  slice: {
+    title: 'Title',
+    imageTextRows: [
+      {
+        id: 1,
+        title: 'Row Title',
+        text: 'Row Text',
+        image: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+      },
+    ],
+    background: true,
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ImageTextSequence {...combinedProps} />);
+};
+
+describe('The ImageTextSequence component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays the titles of the rows', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.imageTextRows[0].title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the texts of the rows', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.imageTextRows[0].text)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the images of the rows', () => {
+    setup();
+
+    expect(screen.getAllByRole('img')).toHaveLength(2);
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
+      'alt',
+      defaultProps.slice.imageTextRows[0].image.alt
+    );
+  });
+
+  it('displays a link if there is a button in the row', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        imageTextRows: [
+          {
+            ...defaultProps.slice.imageTextRows[0],
+            button: { url: 'url', text: 'Link' },
+          },
+        ],
+      },
+    });
+
+    expect(screen.queryByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+  });
+
+  it('displays the background map if background is set to true', () => {
+    setup();
+
+    expect(screen.getAllByRole('img')).toHaveLength(2);
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute('alt', 'Map');
+  });
+
+  it('displays no background map if background is set to false', () => {
+    setup({
+      slice: { ...defaultProps.slice, background: false },
+    });
+
+    expect(screen.getAllByRole('img')).toHaveLength(1);
+    expect(screen.getAllByRole('img')[0]).not.toHaveAttribute('alt', 'Map');
+  });
+});

package/src/slices/ImageTextSequence/ImageTextSequence.tsx

@@ -0,0 +1,143 @@
+import {
+  Box,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Heading,
+  SimpleGrid,
+  Text,
+  useMediaQuery,
+  useToken,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { Fragment } from 'react';
+import { CaretRight } from '@phosphor-icons/react';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import { BREAKPOINT_LG_QUERY } from '@/constants/breakpoints';
+import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import {
+  DesktopMapContainer,
+  ImageContainer,
+  MobileMapContainer,
+} from './styles';
+import { CDN_URI } from '@/constants/api';
+
+interface ImageTextSequenceSlice extends StrapiDefaultHeader {
+  imageTextRows: {
+    id: number;
+    title: string;
+    text: string;
+    button?: StrapiLink;
+    image: StrapiImage;
+  }[];
+  background?: boolean;
+}
+export interface ImageTextSequenceProps {
+  slice: ImageTextSequenceSlice;
+}
+
+export const ImageTextSequence: React.FC<ImageTextSequenceProps> = ({
+  slice,
+}: ImageTextSequenceProps) => {
+  const [oneColumnGrid] = useMediaQuery(BREAKPOINT_LG_QUERY);
+  const [primary50] = useToken('colors', ['primary.50']);
+  const [gray700] = useToken('colors', ['gray.700']);
+
+  return (
+    <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
+      {slice.background ? (
+        <>
+          <DesktopMapContainer>
+            <Image
+              src={`${CDN_URI}/assets/v3/strapi-slices/desktop-map-border.svg`}
+              alt="Map"
+              width="786"
+              height="897"
+            />
+          </DesktopMapContainer>
+          <MobileMapContainer>
+            <Image
+              src={`${CDN_URI}/assets/v3/strapi-slices/mobile-map-border.svg`}
+              alt="Map"
+              width="227"
+              height="452"
+            />
+          </MobileMapContainer>
+        </>
+      ) : (
+        <></>
+      )}
+      <Wrapper>
+        <DefaultSectionHeader
+          tagline={slice.tagline}
+          title={slice.title}
+          text={slice.text}
+          taglineProps={{ textAlign: ['left', null, null, null, 'center'] }}
+          titleProps={{
+            maxW: '6xl',
+            marginX: ['0', null, null, null, 'auto'],
+            textAlign: ['left', null, null, null, 'center'],
+          }}
+          textProps={{
+            maxW: '2xl',
+            marginX: ['0', null, null, null, 'auto'],
+            textAlign: ['left', null, null, null, 'center'],
+            color: 'black',
+          }}
+        />
+
+        <SimpleGrid
+          gap="16"
+          mt={['28', null, null, null, '40']}
+          columns={[1, null, null, null, 2]}
+        >
+          {slice.imageTextRows.map(
+            ({ id, title, text, button, image }, index) => {
+              const imageBox = (
+                <Box>
+                  <ImageContainer>
+                    <Image
+                      src={strapiMediaUrl(image.img, 'large')}
+                      alt={image.alt}
+                      fill
+                      style={{ objectFit: image.objectFit || 'contain' }}
+                    />
+                  </ImageContainer>
+                </Box>
+              );
+              return (
+                <Fragment key={id}>
+                  {(oneColumnGrid || index % 2 !== 0) && imageBox}
+                  <Box
+                    display="flex"
+                    alignItems="flex-start"
+                    flexDirection="column"
+                    justifyContent="center"
+                  >
+                    <Heading as="h2" size="xl" mb="4">
+                      {title}
+                    </Heading>
+                    <Text size="mdRegularNormal">{text}</Text>
+                    {button && (
+                      <StrapiLinkButton
+                        mt="5"
+                        link={button}
+                        size="sm"
+                        variant="outline"
+                        rightIcon={<CaretRight size="10" color={gray700} />}
+                      />
+                    )}
+                  </Box>
+                  {!oneColumnGrid && index % 2 === 0 && imageBox}
+                </Fragment>
+              );
+            }
+          )}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/ImageTextSequence/index.ts

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

package/src/slices/ImageTextSequence/styles.ts

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_LG } from '@/constants/breakpoints';
+
+export const DesktopMapContainer = styled.div`
+  position: absolute;
+  top: 0;
+  right: var(--boemly-space-24);
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    display: none;
+  }
+`;
+
+export const MobileMapContainer = styled.div`
+  position: absolute;
+  top: var(--boemly-space-64);
+  right: calc(var(--boemly-space-14) * -1);
+  display: none;
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    display: unset;
+  }
+`;
+
+export const ImageContainer = styled.div`
+  position: relative;
+  width: 100%;
+  min-height: var(--boemly-sizes-sm);
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    min-height: var(--boemly-sizes-2xs);
+  }
+`;

package/src/slices/LeftTextRightCard/LeftTextRightCard.stories.tsx

@@ -0,0 +1,93 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import LeftTextRightCard from '.';
+
+export default {
+  title: 'sections/LeftTextRightCard',
+  component: LeftTextRightCard,
+} as Meta<typeof LeftTextRightCard>;
+
+const Template: StoryFn<typeof LeftTextRightCard> = (args) => (
+  <LeftTextRightCard {...args} />
+);
+
+const checkMarkLabels = [
+  { id: 1, text: 'List item 1' },
+  { id: 2, text: 'List item 2' },
+  { id: 3, text: 'List item 3' },
+];
+const button = { id: 1, text: 'Button', url: 'https://tree.ly' };
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+  },
+};
+
+export const WithList = Template.bind({});
+WithList.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    checkMarkLabels,
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    checkMarkLabels,
+    button,
+  },
+};
+
+export const WithCard = Template.bind({});
+WithCard.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    checkMarkLabels,
+    button,
+    card: {
+      id: 1,
+      image: {
+        id: 1,
+        alt: 'Image alt text',
+        img: { data: storybookStrapiCoverMock },
+      },
+      portfolioNumber: 'Portfolio #1',
+      title: 'Card title',
+      facts: [
+        { id: 1, key: 'Fact key 1', value: 'Face value 1' },
+        { id: 2, key: 'Fact key 2', value: 'Face value 2' },
+        { id: 3, key: 'Fact key 3', value: 'Face value 3' },
+        { id: 4, key: 'Fact key 4', value: 'Face value 4' },
+      ],
+      button,
+    },
+  },
+};

package/src/slices/LeftTextRightCard/LeftTextRightCard.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiPortfolioCardMock } from '@/test/strapiMocks/strapiPortfolioCard';
+import LeftTextRightCard from '.';
+import { LeftTextRightCardProps } from './LeftTextRightCard';
+
+const defaultProps: LeftTextRightCardProps = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<LeftTextRightCard {...combinedProps} />);
+};
+
+describe('The LeftTextRightCard component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays no check marks if there are no check marks in the slice', () => {
+    setup();
+
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+  });
+
+  it('displays the check marks if there are check marks in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        checkMarkLabels: [{ id: 1, text: 'Check mark label' }],
+      },
+    });
+
+    expect(screen.queryAllByRole('listitem')).toHaveLength(1);
+    expect(screen.getByText('Check mark label')).toBeInTheDocument();
+  });
+
+  it('displays no link if there is no button in the slice', () => {
+    setup();
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  it('displays a link if there is a button in the slice', () => {
+    setup({
+      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
+    });
+
+    expect(screen.queryByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+  });
+
+  it('displays no card if there is no card in the slice', () => {
+    setup();
+
+    expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+  });
+
+  it('displays a card if there is a card in the slice', () => {
+    setup({
+      slice: { ...defaultProps.slice, card: strapiPortfolioCardMock },
+    });
+
+    expect(screen.getByText(strapiPortfolioCardMock.title)).toBeInTheDocument();
+  });
+});

package/src/slices/LeftTextRightCard/LeftTextRightCard.tsx

@@ -0,0 +1,108 @@
+import {
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Grid,
+  GridItem,
+  PortfolioCard,
+  Spacer,
+  BoemlyList,
+  Wrapper,
+} from 'boemly';
+import { ArrowRight } from '@phosphor-icons/react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import strapiLinkUrl from '@/utils/strapiLinkUrl';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiPortfolioCard from '@/models/strapi/StrapiPortfolioCard';
+import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+
+interface LeftTextRightCardSlice extends StrapiDefaultHeader {
+  checkMarkLabels?: {
+    id: number;
+    text: string;
+  }[];
+  button?: StrapiLink;
+  card?: StrapiPortfolioCard;
+}
+export interface LeftTextRightCardProps {
+  slice: LeftTextRightCardSlice;
+}
+
+export const LeftTextRightCard: React.FC<LeftTextRightCardProps> = ({
+  slice,
+}: LeftTextRightCardProps) => {
+  const { push } = useRouter();
+
+  return (
+    <DefaultSectionContainer title={slice.title}>
+      <Wrapper>
+        <Grid
+          templateColumns={[
+            'repeat(8, 1fr)',
+            null,
+            null,
+            null,
+            'repeat(12, 1fr)',
+          ]}
+          templateRows={['repeat(2, 1fr)', null, null, null, 'repeat(1, 1fr)']}
+          rowGap="12"
+        >
+          <GridItem colSpan={8} rowSpan={1} pr={['0', null, null, null, '28']}>
+            <DefaultSectionHeader
+              tagline={slice.tagline}
+              title={slice.title}
+              text={slice.text}
+            />
+
+            {slice.checkMarkLabels && (
+              <>
+                <Spacer height="10" />
+                <BoemlyList listItems={slice.checkMarkLabels} />
+                <Spacer height="10" />
+              </>
+            )}
+
+            {slice.button && (
+              <StrapiLinkButton
+                link={slice.button}
+                size="md"
+                colorScheme="white"
+                variant="outline"
+                rightIcon={<ArrowRight />}
+              />
+            )}
+          </GridItem>
+          <GridItem
+            colSpan={[8, null, null, null, 4]}
+            rowSpan={1}
+            position="relative"
+          >
+            {slice.card && (
+              <PortfolioCard
+                title={slice.card.title}
+                button={
+                  slice.card.button && {
+                    text: slice.card.button.text,
+                    onClick: () => push(strapiLinkUrl(slice.card?.button)),
+                  }
+                }
+                facts={slice.card.facts}
+                image={
+                  <Image
+                    src={strapiMediaUrl(slice.card.image.img, 'medium')}
+                    alt={slice.card.image.alt}
+                    fill
+                    style={{ objectFit: slice.card.image.objectFit || 'cover' }}
+                  />
+                }
+                portfolioNumber={slice.card.portfolioNumber}
+              />
+            )}
+          </GridItem>
+        </Grid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/LeftTextRightCard/index.ts

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