@treely/strapi-slices 1.0.0

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import {
+  DefaultSectionContainer,
+  Wrapper,
+  AvatarWithName,
+  Text,
+  Box,
+} from 'boemly';
+import StrapiAvatarWithName from '@/models/strapi/StrapiAvatarWithName';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+
+export interface FullWidthHighlightQuoteProps {
+  slice: {
+    tagline?: string;
+    quote: string;
+    avatarWithName: StrapiAvatarWithName;
+  };
+}
+
+export const FullWidthHighlightQuote: React.FC<
+  FullWidthHighlightQuoteProps
+> = ({ slice }: FullWidthHighlightQuoteProps) => (
+  <DefaultSectionContainer>
+    <Wrapper>
+      <Box maxWidth="5xl" marginX="auto" mb="8">
+        {slice.tagline && (
+          <Text
+            color="primary.700"
+            size="mdMonoUppercase"
+            textAlign="center"
+            mb="3"
+          >
+            {slice.tagline}
+          </Text>
+        )}
+        <Text color="black" size="xlRegularNormalBold" textAlign="center">
+          {slice.quote}
+        </Text>
+      </Box>
+      <AvatarWithName
+        name={slice.avatarWithName.name}
+        description={slice.avatarWithName.description}
+        image={
+          <Image
+            src={strapiMediaUrl(slice.avatarWithName.image.img, 'small')}
+            alt={slice.avatarWithName.image.alt}
+            fill
+            style={{
+              objectFit: slice.avatarWithName.image.objectFit || 'cover',
+            }}
+          />
+        }
+        orientation="vertical"
+      />
+    </Wrapper>
+  </DefaultSectionContainer>
+);

package/src/slices/FullWidthHighlightQuote/index.ts

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

package/src/slices/FullWidthImage/FullWidthImage.stories.tsx

@@ -0,0 +1,40 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import FullWidthImage from '.';
+
+export default {
+  title: 'sections/FullWidthImage',
+  component: FullWidthImage,
+} as Meta<typeof FullWidthImage>;
+
+const Template: StoryFn<typeof FullWidthImage> = (args) => (
+  <FullWidthImage {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    image: { id: 1, alt: 'Alt text', img: { data: storybookStrapiCoverMock } },
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    image: { id: 1, alt: 'Alt text', img: { data: storybookStrapiCoverMock } },
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    image: { id: 1, alt: 'Alt text', img: { data: storybookStrapiCoverMock } },
+  },
+};

package/src/slices/FullWidthImage/FullWidthImage.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import FullWidthImage from '.';
+import { FullWidthImageProps } from './FullWidthImage';
+
+const defaultProps: FullWidthImageProps = {
+  slice: {
+    title: 'Title',
+    image: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<FullWidthImage {...combinedProps} />);
+};
+
+describe('The FullWidthImage component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays the image', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'alt',
+      defaultProps.slice.image.alt
+    );
+  });
+});

package/src/slices/FullWidthImage/FullWidthImage.tsx

@@ -0,0 +1,63 @@
+import {
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Wrapper,
+  useMediaQuery,
+} from 'boemly';
+import Image from 'next/image';
+import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import FullScreenImage from '@/components/FullScreenImage';
+import { useState } from 'react';
+import { BREAKPOINT_MD_QUERY } from '@/constants/breakpoints';
+import { ImageContainer } from './styles';
+
+interface FullWidthImageSlice extends StrapiDefaultHeader {
+  image: StrapiImage;
+}
+export interface FullWidthImageProps {
+  slice: FullWidthImageSlice;
+}
+
+export const FullWidthImage: React.FC<FullWidthImageProps> = ({
+  slice,
+}: FullWidthImageProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
+
+  return (
+    <DefaultSectionContainer title={slice.title}>
+      <Wrapper>
+        <DefaultSectionHeader
+          isHero
+          tagline={slice.tagline}
+          title={slice.title}
+          text={slice.text}
+          taglineProps={{ textAlign: 'center', mt: ['32', null, null, '56'] }}
+          titleProps={{ textAlign: 'center', maxW: '6xl', marginX: 'auto' }}
+          textProps={{ textAlign: 'center', maxW: '3xl', marginX: 'auto' }}
+        />
+
+        <ImageContainer>
+          <Image
+            src={strapiMediaUrl(slice.image.img, 'xLarge')}
+            alt={slice.image.alt}
+            fill
+            style={{
+              objectFit: slice.image.objectFit || 'cover',
+              cursor: isMobile ? 'unset' : 'pointer',
+            }}
+            onClick={() => !isMobile && setIsOpen(true)}
+          />
+
+          <FullScreenImage
+            images={[slice.image]}
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+          />
+        </ImageContainer>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/FullWidthImage/index.ts

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

package/src/slices/FullWidthImage/styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD } from '@/constants/breakpoints';
+
+export const ImageContainer = styled.div`
+  position: relative;
+
+  margin-top: var(--boemly-space-20);
+  height: var(--boemly-sizes-xl);
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    height: var(--boemly-sizes-3xs);
+  }
+
+  & img {
+    border-radius: var(--boemly-radii-2xl);
+  }
+`;

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.stories.tsx

@@ -0,0 +1,75 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import FullWidthImageSlider from '.';
+
+export default {
+  title: 'sections/FullWidthImageSlider',
+  component: FullWidthImageSlider,
+} as Meta<typeof FullWidthImageSlider>;
+
+const Template: StoryFn<typeof FullWidthImageSlider> = (args) => (
+  <FullWidthImageSlider {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  slice: {
+    images: [
+      {
+        id: 1,
+        caption: 'Caption 1',
+        img: {
+          id: 1,
+          alt: 'Alt text 1',
+          img: { data: storybookStrapiCoverMock },
+        },
+      },
+      {
+        id: 2,
+        caption: 'Caption 2',
+        img: {
+          id: 2,
+          alt: 'Alt text 2',
+          img: { data: storybookStrapiCoverMock },
+        },
+      },
+      {
+        id: 3,
+        caption: 'Caption 3',
+        img: {
+          id: 3,
+          alt: 'Alt text 3',
+          img: { data: storybookStrapiCoverMock },
+        },
+      },
+      {
+        id: 4,
+        caption: 'Caption 4',
+        img: {
+          id: 4,
+          alt: 'Alt text 4',
+          img: { data: storybookStrapiCoverMock },
+        },
+      },
+      {
+        id: 5,
+        caption: 'Caption 5',
+        img: {
+          id: 5,
+          alt: 'Alt text 5',
+          img: { data: storybookStrapiCoverMock },
+        },
+      },
+      {
+        id: 6,
+        caption: 'Caption 6',
+        img: {
+          id: 6,
+          alt: 'Alt text 6',
+          img: { data: storybookStrapiCoverMock },
+        },
+      },
+    ],
+  },
+};

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import FullWidthImageSlider from '.';
+import { FullWidthImageSliderProps } from './FullWidthImageSlider';
+
+const defaultProps: FullWidthImageSliderProps = {
+  slice: {
+    images: [
+      {
+        id: 1,
+        caption: 'Caption 1',
+        img: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 2,
+        caption: 'Caption 2',
+        img: { id: 2, alt: 'Alt text 2', img: { data: strapiMediaMock } },
+      },
+      {
+        id: 3,
+        caption: 'Caption 3',
+        img: { id: 3, alt: 'Alt text 3', img: { data: strapiMediaMock } },
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<FullWidthImageSlider {...combinedProps} />);
+};
+
+describe('The FullWidthImageSlider component', () => {
+  it('displays the images', () => {
+    setup();
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute('alt', 'Alt text 1');
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('alt', 'Alt text 2');
+    expect(screen.getAllByRole('img')[2]).toHaveAttribute('alt', 'Alt text 3');
+  });
+
+  it('displays the captions', () => {
+    setup();
+
+    expect(screen.getByText('Caption 1')).toBeInTheDocument();
+    expect(screen.getByText('Caption 2')).toBeInTheDocument();
+    expect(screen.getByText('Caption 3')).toBeInTheDocument();
+  });
+});

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.tsx

@@ -0,0 +1,149 @@
+import { useRef, useState } from 'react';
+import {
+  Box,
+  IconButton,
+  DefaultSectionContainer,
+  Flex,
+  Text,
+  useMediaQuery,
+} from 'boemly';
+import Image from 'next/image';
+import { useMeasure, useWindowSize } from 'react-use';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import FullScreenImage from '@/components/FullScreenImage';
+import { BREAKPOINT_MD_QUERY } from '@/constants/breakpoints';
+import {
+  ButtonsContainer,
+  ItemContainer,
+  SliderContainer,
+  SliderInnerContainer,
+  ImageContainer,
+} from './styles';
+import { getClosestRatio } from './utils';
+
+export interface FullWidthImageSliderProps {
+  slice: {
+    images: {
+      id: number;
+      caption: string;
+      img: StrapiImage;
+    }[];
+  };
+}
+export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
+  slice,
+}: FullWidthImageSliderProps) => {
+  const containerRef = useRef(null);
+  const [imageRef, { width: imageWidth }] = useMeasure<HTMLDivElement>();
+  const { width: windowWidth } = useWindowSize();
+  const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
+
+  const [sliderIndex, setSliderIndex] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const allowScroll = windowWidth / 2 / imageWidth < slice.images.length;
+  const canMoveRight = sliderIndex < slice.images.length - 1;
+  const canMoveLeft = sliderIndex !== 0;
+
+  return (
+    <DefaultSectionContainer>
+      <SliderContainer ref={containerRef}>
+        <SliderInnerContainer
+          animate={{
+            x: imageWidth * -sliderIndex,
+          }}
+          transition={{
+            duration: 0.3,
+            ease: 'easeInOut',
+          }}
+          imageCount={slice.images.length}
+        >
+          {slice.images.map((image, index) => (
+            <ItemContainer key={image.id} ref={imageRef}>
+              <Flex
+                height="full"
+                width="full"
+                justifyContent="end"
+                flexDirection="column"
+                gap="2"
+              >
+                <ImageContainer
+                  aspectRatio={getClosestRatio(
+                    image.img.img.data.attributes.width,
+                    image.img.img.data.attributes.height
+                  )}
+                >
+                  <Image
+                    src={strapiMediaUrl(image.img.img, 'large')}
+                    alt={image.img.alt}
+                    fill
+                    style={{
+                      objectFit: image.img.objectFit || 'cover',
+                      cursor: isMobile ? 'unset' : 'pointer',
+                    }}
+                    onClick={() => {
+                      setSliderIndex(index);
+                      if (!isMobile) setIsOpen(true);
+                    }}
+                  />
+                </ImageContainer>
+                <Text height="6">{image.caption}</Text>
+              </Flex>
+            </ItemContainer>
+          ))}
+        </SliderInnerContainer>
+      </SliderContainer>
+
+      <ButtonsContainer show={allowScroll && !isOpen}>
+        <Box>
+          <AnimatePresence>
+            {canMoveLeft && (
+              <IconButton
+                key="leftButton"
+                as={motion.button}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                size="lg"
+                variant="outline"
+                onClick={() => setSliderIndex(sliderIndex - 1)}
+                aria-label="Move left"
+                icon={<ArrowLeft size={16} />}
+                pointerEvents="auto"
+              />
+            )}
+          </AnimatePresence>
+        </Box>
+        <Box>
+          <AnimatePresence>
+            {canMoveRight && (
+              <IconButton
+                key="rightButton"
+                as={motion.button}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                size="lg"
+                variant="outline"
+                onClick={() => setSliderIndex(sliderIndex + 1)}
+                aria-label="Move right"
+                icon={<ArrowRight size={16} />}
+                pointerEvents="auto"
+              />
+            )}
+          </AnimatePresence>
+        </Box>
+      </ButtonsContainer>
+
+      <FullScreenImage
+        images={slice.images.map((image) => image.img)}
+        openIndex={sliderIndex}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      />
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/FullWidthImageSlider/index.ts

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

package/src/slices/FullWidthImageSlider/styles.ts

@@ -0,0 +1,96 @@
+import { motion } from 'framer-motion';
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD } from '@/constants/breakpoints';
+
+export const SliderContainer = styled.div`
+  --mobile-image-width: calc(100vw - var(--boemly-space-24));
+  --desktop-image-width: var(--boemly-sizes-md);
+
+  width: var(--boemly-size-full);
+
+  overflow-x: hidden;
+
+  padding-left: max(
+    var(--boemly-space-8),
+    calc(50vw - var(--boemly-sizes-7xl) / 2 + var(--boemly-space-6))
+  );
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    overflow-x: scroll;
+    padding-left: max(
+      var(--boemly-space-8),
+      calc(50vw - var(--boemly-sizes-7xl) / 2 + var(--boemly-space-8))
+    );
+  }
+`;
+
+interface ButtonsContainerProps {
+  show: boolean;
+}
+export const ButtonsContainer = styled.div<ButtonsContainerProps>`
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  pointer-events: none;
+
+  // Place at 50% of height of tallest image minus size of button
+  position: absolute;
+  top: calc(50% - var(--boemly-sizes-12));
+  left: 0;
+  width: var(--boemly-sizes-full);
+
+  padding: 0 var(--boemly-sizes-32);
+  justify-content: space-between;
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    display: none;
+  }
+`;
+
+interface SliderInnerContainerProps {
+  imageCount: number;
+}
+export const SliderInnerContainer = styled(
+  motion.div
+)<SliderInnerContainerProps>`
+  display: flex;
+  gap: var(--boemly-space-6);
+
+  width: fit-content;
+`;
+
+export const ItemContainer = styled.div`
+  width: var(--desktop-image-width);
+
+  :last-of-type {
+    margin-right: var(--boemly-space-8);
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    width: var(--mobile-image-width);
+  }
+`;
+
+interface ImageContainerProps {
+  aspectRatio: number;
+}
+export const ImageContainer = styled.div<ImageContainerProps>`
+  position: relative;
+
+  max-height: var(--boemly-sizes-xl);
+  height: calc(
+    var(--desktop-image-width) / ${({ aspectRatio }) => aspectRatio}
+  );
+  width: var(--desktop-image-width);
+
+  border-radius: var(--boemly-radii-xl);
+
+  & img {
+    border-radius: var(--boemly-radii-xl);
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    height: calc(
+      var(--mobile-image-width) / ${({ aspectRatio }) => aspectRatio}
+    );
+    width: var(--mobile-image-width);
+  }
+`;

package/src/slices/FullWidthImageSlider/utils.test.ts

@@ -0,0 +1,10 @@
+import { getClosestRatio } from './utils';
+
+describe('The getClosestRatio util', () => {
+  it('calculates the closest allowed ratio', () => {
+    expect(getClosestRatio(100, 100)).toBe(1 / 1);
+    expect(getClosestRatio(2, 3)).toBe(2 / 3);
+    expect(getClosestRatio(3, 2)).toBe(3 / 2);
+    expect(getClosestRatio(3.2, 2.8)).toBe(1 / 1);
+  });
+});

package/src/slices/FullWidthImageSlider/utils.ts

@@ -0,0 +1,17 @@
+const ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2];
+
+export const getClosestRatio = (width: number, height: number): number => {
+  const ratio = width / height;
+
+  let minDiff = Math.abs(ratio - ALLOWED_RATIOS[0]);
+  let posMinDiff = 0;
+
+  ALLOWED_RATIOS.forEach((allowedRatio, index) => {
+    if (Math.abs(ratio - allowedRatio) < minDiff) {
+      minDiff = Math.abs(ratio - allowedRatio);
+      posMinDiff = index;
+    }
+  });
+
+  return ALLOWED_RATIOS[posMinDiff];
+};

package/src/slices/Glossary/Glossary.stories.tsx

@@ -0,0 +1,42 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import Glossary from '.';
+
+export default {
+  title: 'sections/Glossary',
+  component: Glossary,
+} as Meta<typeof Glossary>;
+
+const Template: StoryFn<typeof Glossary> = (args) => <Glossary {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  slice: {
+    glossary_items: [
+      {
+        id: 1,
+        attributes: {
+          title: 'Chocolate',
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
+          slug: 'chocolate-slug',
+        },
+      },
+      {
+        id: 2,
+        attributes: {
+          title: 'Ananas',
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
+          slug: 'ananas-slug',
+        },
+      },
+      {
+        id: 3,
+        attributes: {
+          title: 'Another',
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
+          slug: 'another-slug',
+        },
+      },
+    ],
+  },
+};