@treely/strapi-slices 1.0.0

package/src/slices/TextCarousel/TextCarousel.stories.tsx

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

package/src/slices/TextCarousel/TextCarousel.test.tsx

@@ -0,0 +1,90 @@
+import { strapiLinkPageMock } from '@/test/strapiMocks/strapiLinkPage';
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import TextCarousel from '.';
+import { TextCarouselProps } from './TextCarousel';
+
+const defaultProps: TextCarouselProps = {
+  slice: {
+    title: 'Title',
+    slides: [
+      {
+        id: 1,
+        title: 'Card Title 1',
+        text: 'Card Text 1',
+        icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 2,
+        title: 'Card Title 2',
+        text: 'Card Text 2',
+        icon: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 3,
+        title: 'Card Title 3',
+        text: 'Card Text 3',
+        icon: { id: 3, alt: 'Alt text 3', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 4,
+        title: 'Card Title 4',
+        text: 'Card Text 4',
+        icon: { id: 4, alt: 'Alt text 4', img: { data: strapiMediaMock } },
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<TextCarousel {...combinedProps} />);
+};
+
+describe('The TextCarousel component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays the slide titles', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.slides[0].title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the slide texts', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.slides[0].text)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the icon', () => {
+    setup();
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
+      'alt',
+      defaultProps.slice.slides[0].icon.alt
+    );
+  });
+
+  it('displays the link if a button is in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        button: {
+          id: 1,
+          text: 'Link text',
+          page: strapiLinkPageMock,
+        },
+      },
+    });
+
+    expect(screen.getByRole('link')).toHaveTextContent('Link text');
+  });
+});

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -0,0 +1,91 @@
+import {
+  Center,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  TextCardWithIcon,
+  useToken,
+  Wrapper,
+} from 'boemly';
+import { useRef } from 'react';
+import Image from 'next/image';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiTextCardWithIcon from '@/models/strapi/StrapiTextCardWithIcons';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import {
+  CardContainer,
+  CarouselContainer,
+  CarouselInnerContainer,
+} from './styles';
+
+interface TextCarouselSlice extends StrapiDefaultHeader {
+  slides: StrapiTextCardWithIcon[];
+  button?: StrapiLink;
+}
+export interface TextCarouselProps {
+  slice: TextCarouselSlice;
+}
+
+export const TextCarousel: React.FC<TextCarouselProps> = ({
+  slice,
+}: TextCarouselProps) => {
+  const [primary50] = useToken('colors', ['primary.50']);
+
+  const containerRef = useRef(null);
+
+  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' }}
+        />
+      </Wrapper>
+
+      <CarouselContainer ref={containerRef}>
+        <CarouselInnerContainer
+          drag="x"
+          dragConstraints={containerRef}
+          numberOfItems={slice.slides.length}
+        >
+          {slice.slides.map(({ id, title, text, icon }) => (
+            <CardContainer key={id} numberOfItems={slice.slides.length}>
+              <TextCardWithIcon
+                title={title}
+                text={text}
+                icon={
+                  <Image
+                    src={strapiMediaUrl(icon.img, 'small')}
+                    alt={icon.alt}
+                    fill
+                    style={{ objectFit: icon.objectFit || 'contain' }}
+                  />
+                }
+                displayAs="column"
+              />
+            </CardContainer>
+          ))}
+        </CarouselInnerContainer>
+      </CarouselContainer>
+
+      <>
+        {slice.button && (
+          <Wrapper>
+            <Center>
+              <StrapiLinkButton
+                link={slice.button}
+                size="xl"
+                mt={['8', null, '14']}
+              />
+            </Center>
+          </Wrapper>
+        )}
+      </>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/TextCarousel/index.ts

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

package/src/slices/TextCarousel/styles.ts

@@ -0,0 +1,65 @@
+import { motion } from 'framer-motion';
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD } from '@/constants/breakpoints';
+
+export const CarouselContainer = styled.div`
+  overflow-x: scroll;
+
+  margin-top: var(--boemly-space-6);
+  padding: var(--boemly-space-8) 0;
+
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    margin-top: var(--boemly-space-4);
+  }
+`;
+
+interface CarouselInnerContainerProps {
+  numberOfItems: number;
+}
+export const CarouselInnerContainer = styled(
+  motion.div
+)<CarouselInnerContainerProps>`
+  display: flex;
+  justify-content: center;
+  width: calc(
+    (var(--boemly-sizes-sm) + var(--boemly-space-16)) *
+      ${({ numberOfItems }) => numberOfItems} + var(--boemly-space-16)
+  );
+  min-width: var(--boemly-sizes-full);
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    width: calc(
+      (var(--boemly-sizes-xs) + var(--boemly-space-4)) *
+        ${({ numberOfItems }) => numberOfItems} + var(--boemly-space-6)
+    );
+  }
+`;
+
+interface CardContainerProps {
+  numberOfItems: number;
+}
+export const CardContainer = styled.div<CardContainerProps>`
+  width: ${({ numberOfItems }) =>
+    numberOfItems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)'};
+
+  margin-right: var(--boemly-space-16);
+
+  &:first-of-type {
+    margin-left: var(--boemly-space-16);
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    width: var(--boemly-sizes-xs);
+
+    margin-right: var(--boemly-space-4);
+
+    &:first-of-type {
+      margin-left: var(--boemly-space-6);
+    }
+  }
+`;

package/src/slices/TextWithCard/TextWithCard.stories.tsx

@@ -0,0 +1,113 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import TextWithCard from '.';
+
+export default {
+  title: 'sections/TextWithCard',
+  component: TextWithCard,
+} as Meta<typeof TextWithCard>;
+
+const Template: StoryFn<typeof TextWithCard> = (args) => (
+  <TextWithCard {...args} />
+);
+
+const listItems = [
+  { 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' };
+const card = {
+  id: 1,
+  image: {
+    id: 1,
+    alt: 'Image alt text',
+    img: { data: storybookStrapiCoverMock },
+  },
+  title: 'Card title',
+  facts: [
+    { id: 1, text: 'Fact 1' },
+    { id: 2, text: 'Fact 2' },
+    { id: 3, text: 'Fact 3' },
+    { id: 4, text: 'Fact 4' },
+  ],
+  footerTitle: 'Footer title',
+  footerSubTitle: 'Footer sub title',
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    cardPosition: 'left',
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    cardPosition: 'left',
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    cardPosition: 'left',
+  },
+};
+
+export const WithList = Template.bind({});
+WithList.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    listItems,
+    cardPosition: 'left',
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    listItems,
+    button,
+    cardPosition: 'left',
+  },
+};
+
+export const WithCard = Template.bind({});
+WithCard.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    listItems,
+    button,
+    card,
+    cardPosition: 'left',
+  },
+};
+
+export const WithCardOnRight = Template.bind({});
+WithCardOnRight.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    listItems,
+    button,
+    card,
+    cardPosition: 'right',
+  },
+};

package/src/slices/TextWithCard/TextWithCard.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiProjectCardMock } from '@/test/strapiMocks/strapiProjectCard';
+import TextWithCard from '.';
+import { TextWithCardProps } from './TextWithCard';
+
+const defaultProps: TextWithCardProps = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    cardPosition: 'left',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<TextWithCard {...combinedProps} />);
+};
+
+describe('The TextWithCard 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,
+        listItems: [{ 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.queryByText(strapiProjectCardMock.title)
+    ).not.toBeInTheDocument();
+  });
+
+  it('displays a card if there is a card in the slice', () => {
+    setup({
+      slice: { ...defaultProps.slice, card: strapiProjectCardMock },
+    });
+
+    expect(screen.getByText(strapiProjectCardMock.title)).toBeInTheDocument();
+  });
+
+  const cardPositions = ['left', 'right'];
+
+  cardPositions.forEach((cardPosition) => {
+    it(`displays the card on the right if the card position is '${cardPosition}'`, () => {
+      setup({ slice: { ...defaultProps.slice, cardPosition } });
+
+      expect(
+        screen.queryByTestId(`card-position-${cardPosition}`)
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -0,0 +1,115 @@
+import {
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Grid,
+  GridItem,
+  ProjectCard,
+  Spacer,
+  BoemlyList,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { ArrowRight } from '@phosphor-icons/react';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiProjectCard from '@/models/strapi/StrapiProjectCard';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+
+interface TextWithCardSlice {
+  tagline?: string;
+  title: string;
+  text?: string;
+  listItems?: {
+    id: number;
+    text: string;
+  }[];
+  button?: StrapiLink;
+  card?: StrapiProjectCard;
+  cardPosition: 'left' | 'right';
+}
+export interface TextWithCardProps {
+  slice: TextWithCardSlice;
+}
+
+export const TextWithCard: React.FC<TextWithCardProps> = ({
+  slice,
+}: TextWithCardProps) => {
+  const card = (
+    <GridItem
+      colSpan={[4, null, null, null, 2]}
+      rowSpan={1}
+      position="relative"
+      data-testid={`card-position-${slice.cardPosition}`}
+    >
+      {slice.card && (
+        <ProjectCard
+          facts={slice.card.facts}
+          footerSubTitle={slice.card.footerSubTitle}
+          footerTitle={slice.card.footerTitle}
+          title={slice.card.title}
+          image={
+            <Image
+              src={strapiMediaUrl(slice.card.image.img, 'medium')}
+              alt={slice.card.image.alt}
+              fill
+              style={{ objectFit: slice.card.image.objectFit || 'cover' }}
+            />
+          }
+        />
+      )}
+    </GridItem>
+  );
+
+  return (
+    <DefaultSectionContainer title={slice.title}>
+      <Wrapper>
+        <Grid
+          templateColumns={[
+            'repeat(4, auto)',
+            null,
+            null,
+            null,
+            'repeat(6, auto)',
+          ]}
+          templateRows={[
+            'repeat(2, auto)',
+            null,
+            null,
+            null,
+            'repeat(1, auto)',
+          ]}
+          rowGap="12"
+          columnGap={['0', null, null, null, '28']}
+        >
+          {slice.cardPosition === 'left' && card}
+          <GridItem colSpan={4} rowSpan={1} position="relative">
+            <DefaultSectionHeader
+              tagline={slice.tagline}
+              title={slice.title}
+              text={slice.text}
+            />
+
+            {slice.listItems && (
+              <>
+                <Spacer height="10" />
+                <BoemlyList listItems={slice.listItems} />
+                <Spacer height="10" />
+              </>
+            )}
+
+            {slice.button && (
+              <StrapiLinkButton
+                link={slice.button}
+                size="md"
+                colorScheme="white"
+                variant="outline"
+                rightIcon={<ArrowRight />}
+              />
+            )}
+          </GridItem>
+          {slice.cardPosition === 'right' && card}
+        </Grid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/TextWithCard/index.ts

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