@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/CarouselMarqueeBanner/CarouselMarqueeBanner.test.tsx

@@ -1,188 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import { CarouselMarqueeBannerProps } from './CarouselMarqueeBanner';
-import CarouselMarqueeBanner from '.';
-import { useMediaQuery } from 'boemly';
-import useWindowSize from 'react-use/lib/useWindowSize';
-import AutoScroll from 'embla-carousel-auto-scroll';
-
-jest.mock('boemly', () => ({
-  ...jest.requireActual('boemly'),
-  useMediaQuery: jest.fn(),
-}));
-
-jest.mock('react-use/lib/useWindowSize', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-jest.mock('embla-carousel-auto-scroll', () => {
-  return jest.fn(() => ({
-    init: jest.fn(),
-    destroy: jest.fn(),
-    options: {},
-  }));
-});
-
-const defaultProps: CarouselMarqueeBannerProps = {
-  slice: {
-    title: 'Carousel',
-    logos: [
-      {
-        id: 1,
-        alt: 'Logo 1',
-        img: {
-          data: {
-            ...strapiMediaMock,
-            attributes: {
-              ...strapiMediaMock.attributes,
-              width: 1000,
-              height: 600,
-            },
-          },
-        },
-        objectFit: 'contain',
-      },
-      {
-        id: 2,
-        alt: 'Logo 2',
-        img: {
-          data: {
-            ...strapiMediaMock,
-            attributes: {
-              ...strapiMediaMock.attributes,
-              width: 800,
-              height: 500,
-            },
-          },
-        },
-        objectFit: 'cover',
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  return render(<CarouselMarqueeBanner {...combinedProps} />);
-};
-
-describe('The CarouselMarqueeBanner component', () => {
-  beforeEach(() => {
-    (useMediaQuery as jest.Mock).mockReturnValue([false]);
-    (useWindowSize as jest.Mock).mockReturnValue({ width: 1024 });
-
-    const mockIntersectionObserver = jest.fn();
-    mockIntersectionObserver.mockReturnValue({
-      observe: () => null,
-      unobserve: () => null,
-      disconnect: () => null,
-    });
-    window.IntersectionObserver = mockIntersectionObserver;
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders the title when provided', () => {
-    setup();
-    expect(screen.getByText('Carousel')).toBeInTheDocument();
-  });
-
-  it('does not render title when not provided', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        title: undefined,
-      },
-    });
-    expect(screen.queryByText('Carousel')).not.toBeInTheDocument();
-  });
-
-  it('renders logos when less than 5 without duplication', () => {
-    setup();
-    const logos = screen.getAllByRole('img');
-    // 2 original logos without duplication
-    expect(logos).toHaveLength(2);
-
-    expect(logos[0]).toHaveAttribute('alt', 'Logo 1');
-    expect(logos[1]).toHaveAttribute('alt', 'Logo 2');
-  });
-
-  it('renders duplicated logos when more than 5 logos exist', () => {
-    const moreThanFiveLogos = [
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-    ];
-
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        logos: moreThanFiveLogos,
-      },
-    });
-
-    const logos = screen.getAllByRole('img');
-    // Duplicated logos based on window width
-    expect(logos.length).toBeGreaterThan(5);
-  });
-
-  it('uses mobile speed for auto-scroll on mobile', async () => {
-    (useMediaQuery as jest.Mock).mockReturnValue([true]); // Simulate mobile view
-
-    const moreThanFiveLogos = [
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-    ];
-
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        logos: moreThanFiveLogos,
-      },
-    });
-
-    expect(AutoScroll).toHaveBeenCalledWith(
-      expect.objectContaining({
-        speed: 0.5,
-      })
-    );
-  });
-
-  it('handles empty logos array gracefully', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        logos: [],
-      },
-    });
-    expect(screen.getByText('Carousel')).toBeInTheDocument();
-  });
-
-  it('adjusts loop array length based on window width', () => {
-    (useWindowSize as jest.Mock).mockReturnValue({ width: 2500 });
-    const moreThanFiveLogos = [
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-      ...defaultProps.slice.logos,
-    ];
-
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        logos: moreThanFiveLogos,
-      },
-    });
-
-    const logos = screen.getAllByRole('img');
-    // Ensure more logos are rendered when width > 2000
-    expect(logos.length).toBeGreaterThan(5);
-  });
-});

package/src/slices/CarouselMarqueeBanner/CarouselMarqueeBanner.tsx

@@ -1,186 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  DefaultSectionContainer,
-  Flex,
-  Heading,
-  Spacer,
-  Box,
-  useMediaQuery,
-  useToken,
-} from 'boemly';
-import Image from 'next/image';
-import useEmblaCarousel from 'embla-carousel-react';
-import { useWindowSize } from 'react-use';
-
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import AutoScroll from 'embla-carousel-auto-scroll';
-import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
-import { getClosestRatio } from '../../utils/getClosestRatio';
-import { CarouselInnerContainer, LogoGrid } from './styles';
-
-export interface CarouselMarqueeBannerProps {
-  slice: {
-    title?: string;
-    logos: StrapiImage[];
-  };
-}
-
-// Separate component containing the actual logic
-const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
-  slice,
-}) => {
-  const [primary50] = useToken('colors', ['primary.50']);
-  const { width: windowWidth } = useWindowSize();
-  const hasEnoughLogosForLoop = slice.logos.length >= 5;
-  const LOOP_ARRAY_LENGTH = windowWidth > 2000 ? 5 : 4;
-
-  // Duplicate Logos to create a full loop
-  const logosToRender = hasEnoughLogosForLoop
-    ? Array.from({ length: LOOP_ARRAY_LENGTH }, () => slice.logos).flat()
-    : slice.logos;
-
-  const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
-
-  // Carousel setup
-  const [emblaRef] = useEmblaCarousel(
-    {
-      loop: hasEnoughLogosForLoop,
-      align: 'start',
-      containScroll: 'trimSnaps',
-      dragFree: true,
-    },
-    hasEnoughLogosForLoop
-      ? [
-          AutoScroll({
-            playOnInit: true,
-            speed: isMobile ? 0.5 : 1,
-            stopOnInteraction: false,
-            stopOnMouseEnter: false,
-            stopOnFocusIn: false,
-          }),
-        ]
-      : []
-  );
-
-  const renderLogos = (): React.ReactNode => {
-    if (!hasEnoughLogosForLoop) {
-      return (
-        <LogoGrid>
-          {slice.logos.map((logo, index) => (
-            <Box
-              key={`${logo.id}-${index}`}
-              flexShrink={0}
-              transform="translate3d(0, 0, 0)"
-            >
-              <Flex
-                height="full"
-                width="full"
-                justifyContent="center"
-                alignItems="center"
-              >
-                <Box
-                  position="relative"
-                  height={isMobile ? '16' : '36'}
-                  width={`calc(var(--boemly-sizes-10)
-                      * ${getClosestRatio(
-                        logo.img.data.attributes.width,
-                        logo.img.data.attributes.height
-                      )})`}
-                >
-                  <Image
-                    src={strapiMediaUrl(logo.img, 'large')}
-                    alt={logo.alt}
-                    fill
-                    style={{
-                      objectFit: logo.objectFit || 'contain',
-                      filter: 'grayscale(100%)',
-                    }}
-                  />
-                </Box>
-              </Flex>
-            </Box>
-          ))}
-        </LogoGrid>
-      );
-    }
-
-    return (
-      <Box width="full" overflow="hidden" ref={emblaRef} cursor="pointer">
-        <CarouselInnerContainer logoCount={slice.logos.length}>
-          {logosToRender.map((logo, index) => (
-            <Box
-              key={`${logo.id}-${index}`}
-              flexShrink={0}
-              transform="translate3d(0, 0, 0)"
-            >
-              <Flex
-                height="full"
-                width="full"
-                justifyContent="center"
-                alignItems="center"
-              >
-                <Box
-                  position="relative"
-                  height={isMobile ? '16' : '36'}
-                  width={`calc(var(--boemly-sizes-10) * ${getClosestRatio(
-                    logo.img.data.attributes.width,
-                    logo.img.data.attributes.height
-                  )})`}
-                >
-                  <Image
-                    src={strapiMediaUrl(logo.img, 'large')}
-                    alt={logo.alt}
-                    fill
-                    style={{
-                      objectFit: logo.objectFit || 'contain',
-                      filter: 'grayscale(100%)',
-                    }}
-                  />
-                </Box>
-              </Flex>
-            </Box>
-          ))}
-        </CarouselInnerContainer>
-      </Box>
-    );
-  };
-
-  return (
-    <DefaultSectionContainer backgroundColor={primary50}>
-      <>
-        {slice.title ? (
-          <>
-            <Flex alignItems="center" flexDirection="column">
-              <Heading size="md" fontWeight="500">
-                {slice.title}
-              </Heading>
-            </Flex>
-            <Spacer height="12" minHeight="12" />
-          </>
-        ) : null}
-
-        {renderLogos()}
-      </>
-    </DefaultSectionContainer>
-  );
-};
-
-// Lazy-rendering the child component after client-side hydration
-export const CarouselMarqueeBanner: React.FC<CarouselMarqueeBannerProps> = ({
-  slice,
-}: CarouselMarqueeBannerProps) => {
-  const [showChild, setShowChild] = useState(false);
-
-  useEffect(() => {
-    setShowChild(true); // Hydrate the component after the client-side is ready
-  }, []);
-
-  if (!showChild) {
-    return <div />;
-  }
-
-  return <CarouselMarqueeBannerContent slice={slice} />;
-};
-
-export default CarouselMarqueeBanner;

package/src/slices/CarouselMarqueeBanner/index.ts

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

package/src/slices/CarouselMarqueeBanner/styles.ts

@@ -1,40 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from '@emotion/styled';
-import { BREAKPOINT_MD } from '../../constants/breakpoints';
-
-interface CarouselInnerContainerProps {
-  logoCount: number;
-}
-
-export const CarouselInnerContainer = styled(
-  motion.div
-)<CarouselInnerContainerProps>`
-  display: flex;
-  justify-content: ${(props) =>
-    props.logoCount < 5 ? 'center' : 'flex-start'};
-  gap: var(--boemly-space-24);
-  padding-right: var(--boemly-space-24);
-  padding-left: var(--boemly-space-24);
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    width: calc(
-      ${(props) => props.logoCount} *
-        (var(--boemly-sizes-16) + var(--boemly-space-6))
-    );
-    justify-content: ${(props) =>
-      props.logoCount < 5 ? 'center' : 'flex-start'};
-  }
-`;
-
-export const LogoGrid = styled(motion.div)`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--boemly-space-24);
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--boemly-space-6);
-  }
-`;

package/src/slices/Comparison/Comparison.stories.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { storybookStrapiTreeIconMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import Comparison from '.';
-import { ComparisonCard } from './Comparison';
-
-export default {
-  title: 'slices/Comparison',
-  component: Comparison,
-} as Meta<typeof Comparison>;
-
-const Template: StoryFn<typeof Comparison> = (args) => <Comparison {...args} />;
-
-const comparisonCard: ComparisonCard = {
-  id: 1,
-  title: 'Title',
-  subTitle: 'Subtitle',
-  badge: 'Badge',
-  variant: 'white',
-  image: {
-    id: 71,
-    alt: 'Alt',
-    img: { data: storybookStrapiTreeIconMock },
-    objectFit: 'contain',
-  },
-  button: {
-    id: 1,
-    text: 'Button',
-    url: 'https://tree.ly',
-  },
-  factTitle: 'Fact Title',
-  factSubtitle: 'Fact Subtitle',
-  lists: [
-    {
-      id: '1',
-      title: 'Title',
-      items: [
-        {
-          id: '1',
-          text: 'Text',
-          icon: 'bullet',
-        },
-        {
-          id: '2',
-          text: 'Text',
-          icon: 'check',
-        },
-        {
-          id: '3',
-          text: 'Text',
-          icon: 'cross',
-        },
-      ],
-    },
-    {
-      id: '2',
-      title: 'Title',
-      items: [
-        {
-          id: '1',
-          text: 'Text',
-          icon: 'bullet',
-        },
-        {
-          id: '2',
-          text: 'Text',
-          icon: 'check',
-        },
-        {
-          id: '3',
-          text: 'Text',
-          icon: 'cross',
-        },
-      ],
-    },
-  ],
-};
-
-export const White = Template.bind({});
-White.args = {
-  slice: {
-    comparisonCards: [
-      comparisonCard,
-      { ...comparisonCard, id: 2 },
-      { ...comparisonCard, id: 3 },
-    ],
-  },
-};
-
-export const Gray = Template.bind({});
-Gray.args = {
-  slice: {
-    comparisonCards: [
-      { ...comparisonCard, variant: 'gray' },
-      { ...comparisonCard, id: 2, variant: 'gray' },
-      { ...comparisonCard, id: 3, variant: 'gray' },
-    ],
-  },
-};
-
-export const WithGreen = Template.bind({});
-WithGreen.args = {
-  slice: {
-    comparisonCards: [
-      { ...comparisonCard, variant: 'gray' },
-      { ...comparisonCard, id: 2, variant: 'green' },
-      { ...comparisonCard, id: 3 },
-    ],
-  },
-};
-
-export const WithTitle = Template.bind({});
-WithTitle.args = {
-  slice: {
-    title: 'Title',
-    subTitle: 'Subtitle',
-    tagline: 'Tagline',
-    comparisonCards: [
-      { ...comparisonCard, variant: 'gray' },
-      { ...comparisonCard, id: 2, variant: 'green' },
-      { ...comparisonCard, id: 3 },
-    ],
-  },
-};

package/src/slices/Comparison/Comparison.test.tsx

@@ -1,174 +0,0 @@
-import React from 'react';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import { ComparisonProps } from './Comparison';
-import { pushSpy, useRouter } from '../../../__mocks__/next/router';
-import Comparison from '.';
-import messagesEn from './messages.en';
-
-const defaultProps: ComparisonProps = {
-  slice: {
-    comparisonCards: [
-      {
-        id: 1,
-        title: 'Card 1',
-        subTitle: 'Subtitle 1',
-        variant: 'white',
-        lists: [
-          {
-            id: '1',
-            title: 'List',
-            items: [
-              { id: '1', text: 'Item', icon: 'check' },
-              { id: '2', text: 'Item', icon: 'bullet' },
-              { id: '3', text: 'Item', icon: 'bullet' },
-            ],
-          },
-        ],
-      },
-      {
-        id: 2,
-        title: 'Card 2',
-        subTitle: 'Subtitle 2',
-        variant: 'white',
-        lists: [
-          {
-            id: '2',
-            title: 'List',
-            items: [
-              { id: '4', text: 'Item', icon: 'check' },
-              { id: '5', text: 'Item', icon: 'bullet' },
-              { id: '6', text: 'Item', icon: 'bullet' },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Comparison {...combinedProps} />);
-};
-
-describe('The Comparison component', () => {
-  afterEach(() => {
-    pushSpy.mockRestore();
-  });
-
-  afterAll(() => {
-    useRouter.mockRestore();
-  });
-
-  it('displays the correct title and susbtitle, if they are defined in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        title: 'Comparison title',
-        subTitle: 'Comparison subtitle',
-        tagline: 'Comparison tagline',
-      },
-    });
-    expect(screen.getByText('Comparison title')).toBeInTheDocument();
-    expect(screen.getByText('Comparison subtitle')).toBeInTheDocument();
-    expect(screen.getByText('Comparison tagline')).toBeInTheDocument();
-  });
-
-  it('displays the comparison cards', () => {
-    setup();
-
-    expect(screen.getByText('Card 1')).toBeInTheDocument();
-    expect(screen.getByText('Card 2')).toBeInTheDocument();
-  });
-
-  it('displays the list with items', () => {
-    setup();
-
-    expect(screen.getAllByText('List')).toHaveLength(2);
-    expect(screen.getAllByText('Item')).toHaveLength(6);
-  });
-
-  it('displays the fact title and subtitle if they are defined in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        comparisonCards: [
-          {
-            ...defaultProps.slice.comparisonCards[0],
-            factTitle: 'Fact Title',
-            factSubtitle: 'Fact Subtitle',
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByText('Fact Title')).toBeInTheDocument();
-    expect(screen.getByText('Fact Subtitle')).toBeInTheDocument();
-  });
-
-  it('displays the badge if it is defined in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        comparisonCards: [
-          {
-            ...defaultProps.slice.comparisonCards[0],
-            badge: 'Badge',
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByText('Badge')).toBeInTheDocument();
-  });
-
-  it('displays the button if the button is defined in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        comparisonCards: [
-          {
-            ...defaultProps.slice.comparisonCards[0],
-            button: { id: '1', url: 'https://tree.ly', text: 'Button' },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Button')).toBeInTheDocument();
-  });
-
-  it('displays the background shapes if variant is green in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        comparisonCards: [
-          { ...defaultProps.slice.comparisonCards[0], variant: 'green' },
-        ],
-      },
-    });
-
-    expect(
-      screen.getByAltText(messagesEn['sections.comparison.backgroundShapes'])
-    ).toBeInTheDocument();
-  });
-
-  it('displays the image if it is defined in slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        comparisonCards: [
-          {
-            ...defaultProps.slice.comparisonCards[0],
-            image: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getAllByRole('img')[1]).toHaveAttribute('alt', 'Alt text');
-  });
-});