@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/Timeline/Timeline.test.tsx

@@ -1,227 +0,0 @@
-import React from 'react';
-import Timeline from '.';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { TimelineProps } from './Timeline';
-import { render, screen, userEvent, waitFor } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import messagesEn from './messages.en';
-
-const defaultProps: TimelineProps = {
-  slice: {
-    title: 'Title',
-    timelineItems: [
-      {
-        id: 1,
-        title: 'Item 1',
-      },
-    ],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Timeline {...combinedProps} />);
-};
-
-describe('The Timeline component', () => {
-  it('displays the correct tagline and text, if they are defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        tagline: 'Timeline tagline',
-        text: 'Timeline text',
-      },
-    });
-    expect(screen.getByText('Timeline tagline')).toBeInTheDocument();
-    expect(screen.getByText('Timeline text')).toBeInTheDocument();
-  });
-
-  it('displays the timeline items', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          defaultProps.slice.timelineItems[0],
-          { id: 2, title: 'Item 2' },
-        ],
-      },
-    });
-
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
-  });
-
-  it('displays the tagline and text in the timeline items, if they are defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          {
-            ...defaultProps.slice.timelineItems[0],
-            tagline: 'Item 1 tagline',
-            text: 'Item 1 text',
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByText('Item 1 tagline')).toBeInTheDocument();
-    expect(screen.getByText('Item 1 text')).toBeInTheDocument();
-  });
-
-  it('displays the button in the timeline items, if it is defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          {
-            ...defaultProps.slice.timelineItems[0],
-            button: {
-              id: '1',
-              url: 'https://tree.ly',
-              text: 'Optional Button',
-            },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Optional Button')).toBeInTheDocument();
-  });
-
-  it('displays the badge if it is defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          {
-            ...defaultProps.slice.timelineItems[0],
-            badge: { text: 'Badge', variant: 'green' },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getAllByText('Badge')[0]).toBeInTheDocument();
-  });
-
-  it('displays the logo, icon and image if they are defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          {
-            ...defaultProps.slice.timelineItems[0],
-            logo: {
-              id: 1,
-              alt: 'Logo alt text',
-              img: { data: strapiMediaMock },
-            },
-            image: {
-              id: 1,
-              alt: 'Image alt text',
-              img: { data: strapiMediaMock },
-            },
-            icon: {
-              id: 1,
-              alt: 'Icon alt text',
-              img: { data: strapiMediaMock },
-            },
-          },
-        ],
-      },
-    });
-
-    expect(screen.getAllByRole('img')[2]).toHaveAttribute(
-      'alt',
-      'Image alt text'
-    );
-    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
-      'alt',
-      'Logo alt text'
-    );
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      'Icon alt text'
-    );
-  });
-
-  it('displays the background shapes if  if it is defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          { ...defaultProps.slice.timelineItems[0], backgroundShapes: true },
-        ],
-      },
-    });
-
-    expect(
-      screen.getByAltText(messagesEn['sections.timeline.backgroundShapes'])
-    ).toBeInTheDocument();
-  });
-
-  it('displays the "Show three more milestones" button if more than three timeline items are defined in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          {
-            ...defaultProps.slice.timelineItems[0],
-          },
-          {
-            id: 2,
-            title: 'Item 2',
-          },
-          {
-            id: 3,
-            title: 'Item 3',
-          },
-          {
-            id: 4,
-            title: 'Item 4',
-          },
-        ],
-      },
-    });
-
-    expect(screen.queryByText('Item 4')).not.toBeInTheDocument();
-    expect(
-      screen.getByText(messagesEn['sections.timeline.showMoreButton'])
-    ).toBeInTheDocument();
-  });
-
-  it('renders three more timeline items if the "Show three more milestones" button is clicked, when all timeline items are rendered, the  "Show three more milestones" button is not displayed', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        timelineItems: [
-          {
-            ...defaultProps.slice.timelineItems[0],
-          },
-          {
-            id: 2,
-            title: 'Item 2',
-          },
-          {
-            id: 3,
-            title: 'Item 3',
-          },
-          {
-            id: 4,
-            title: 'Item 4',
-          },
-        ],
-      },
-    });
-
-    waitFor(() => {
-      userEvent.click(
-        screen.getByText(messagesEn['sections.timeline.showMoreButton'])
-      );
-      expect(screen.findByText('Item 4')).toBeInTheDocument();
-      expect(screen.findByRole('button')).not.toBeInTheDocument();
-    });
-  });
-});

package/src/slices/Timeline/Timeline.tsx

@@ -1,332 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Button,
-  Box,
-  Container,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  Flex,
-  Heading,
-  RichText,
-  SimpleGrid,
-  Spacer,
-  Tag,
-  Text,
-  Wrapper,
-  useMediaQuery,
-} from 'boemly';
-import Image from 'next/image';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import { CDN_URI } from '../../constants/api';
-import { IntlContext } from 'react-intl';
-import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
-import { useState } from 'react';
-import FullScreenImage from '../../components/FullScreenImage';
-
-export interface TimelineProps {
-  slice: {
-    title: string;
-    text?: string;
-    tagline?: string;
-
-    timelineItems: TimelineItem[];
-  };
-}
-
-export interface TimelineItem {
-  id: number;
-  tagline?: string;
-  title: string;
-  text?: string;
-  badge?: { text: string; variant: 'orange' | 'green' | 'red' | 'gray' };
-  logo?: StrapiImage;
-  icon?: StrapiImage;
-  image?: StrapiImage;
-  button?: StrapiLink;
-  backgroundShapes?: boolean;
-}
-
-export const Timeline: React.FC<TimelineProps> = ({ slice }: TimelineProps) => {
-  const { formatMessage } = useContext(IntlContext);
-  const [visibleItems, setVisibleItems] = useState(3);
-  const [mobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const showMoreItems = () => {
-    setVisibleItems((prevVisibleItems) => prevVisibleItems + 3);
-  };
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <Flex flexDir={['column', null, null, 'row']}>
-          <Box
-            width={['full', null, null, '50%']}
-            position={[null, null, null, 'sticky']}
-            top={['16', null, null, '32']}
-            height="full"
-            paddingRight={[null, null, null, '28']}
-          >
-            <DefaultSectionHeader
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.text}
-            />
-            {mobile && (
-              <>
-                <Spacer h="10" />
-                <Flex justifyContent="center">
-                  <Box
-                    borderRadius="full"
-                    width="3"
-                    height="3"
-                    margin="1.5"
-                    backgroundColor="gray"
-                  />
-                </Flex>
-                <Box
-                  overflow="visible"
-                  borderRight="dashed 1px var(--boemly-colors-gray-200)"
-                  transform="translateX(-50%)"
-                  position="relative"
-                  height="20"
-                />
-              </>
-            )}
-          </Box>
-          <Box
-            overflow="visible"
-            maxWidth={['full', null, null, '50%']}
-            borderLeft={[
-              null,
-              null,
-              null,
-              'dashed 1px var(--boemly-colors-gray-200)',
-            ]}
-            position="relative"
-            width="full"
-          >
-            <Flex
-              flexDir="column"
-              overflow="visible"
-              gap={[null, null, null, '8']}
-            >
-              {slice.timelineItems.slice(0, visibleItems).map((item, index) => (
-                <SimpleGrid
-                  gap={['none', null, null, '4']}
-                  key={item.id}
-                  columns={[1, null, null, 2]}
-                  alignContent="center"
-                  gridTemplateColumns={[null, null, null, '1fr 16fr']}
-                  position="relative"
-                >
-                  <Flex
-                    alignItems="center"
-                    justifyContent={['center', null, null, 'flex-start']}
-                  >
-                    <Box
-                      position="absolute"
-                      transform={[null, null, null, 'translateX(-50%)']}
-                      backgroundColor="white"
-                    >
-                      {item.icon ? (
-                        <Box padding="2">
-                          <Image
-                            src={strapiMediaUrl(item.icon.img, 'xSmall')}
-                            alt={item.icon.alt}
-                            width="21"
-                            height="21"
-                          />
-                        </Box>
-                      ) : (
-                        <Box padding="2">
-                          <Box
-                            borderRadius="full"
-                            backgroundColor="primary.800"
-                            width="2"
-                            height="2"
-                          />
-                        </Box>
-                      )}
-                      {mobile && (
-                        <Box
-                          overflow="visible"
-                          borderRight="dashed 1px var(--boemly-colors-gray-200)"
-                          transform="translateX(-50%)"
-                          position="relative"
-                          height="10"
-                        />
-                      )}
-                    </Box>
-                  </Flex>
-                  <Container
-                    p={[null, null, null, '3']}
-                    zIndex="base"
-                    position="relative"
-                    elevation="none"
-                  >
-                    {item.backgroundShapes ? (
-                      <Box
-                        position="absolute"
-                        left="0"
-                        top="0"
-                        width="full"
-                        height="full"
-                        zIndex="-1"
-                      >
-                        <Image
-                          src={`${CDN_URI}/assets/v3/strapi-slices/timeline-shapes.svg`}
-                          alt={formatMessage({
-                            id: 'sections.timeline.backgroundShapes',
-                          })}
-                          fill
-                          style={{
-                            objectFit: 'cover',
-                            borderRadius: 'var(--boemly-radii-xl)',
-                          }}
-                        />
-                      </Box>
-                    ) : (
-                      <></>
-                    )}
-
-                    <Flex flexDir="column">
-                      <Flex
-                        alignItems="flex-start"
-                        justifyContent="space-between"
-                      >
-                        <Box>
-                          {item.tagline && (
-                            <>
-                              <Text color="primary.800" size="smMonoUppercase">
-                                {item.tagline}
-                              </Text>
-                              <Spacer h="2" />
-                            </>
-                          )}
-                        </Box>
-                        <Flex>
-                          {item.badge && (
-                            <Tag
-                              colorScheme={item.badge.variant}
-                              borderRadius="md"
-                            >
-                              {item.badge.text}
-                            </Tag>
-                          )}
-                          {item.logo && (
-                            <Box position="relative" height="8" width="16">
-                              <Image
-                                src={strapiMediaUrl(item.logo.img, 'small')}
-                                alt={item.logo.alt}
-                                fill
-                                style={{
-                                  objectFit: item.logo.objectFit,
-                                }}
-                              />
-                            </Box>
-                          )}
-                        </Flex>
-                      </Flex>
-                      <Heading
-                        size="lg"
-                        mt={['6', null, null, '3']}
-                        maxWidth="xs"
-                      >
-                        {item.title}
-                      </Heading>
-                      {item.text && (
-                        <Box mt="3">
-                          <RichText content={item.text} />
-                        </Box>
-                      )}
-                      {item.button && (
-                        <Box textAlign="left">
-                          <Spacer h="4" />
-                          <StrapiLinkButton
-                            link={item.button}
-                            size="sm"
-                            variant="outline"
-                            component="Timeline"
-                          />
-                        </Box>
-                      )}
-                      {item.image ? (
-                        <>
-                          <Box
-                            position="relative"
-                            mt="4"
-                            height={['2xs', null, null, null, '48']}
-                            minWidth={[null, null, null, null, '50%']}
-                          >
-                            <Image
-                              src={strapiMediaUrl(item.image.img, 'xLarge')}
-                              alt={item.image.alt}
-                              fill
-                              style={{
-                                cursor: mobile ? 'unset' : 'pointer',
-                                objectFit: item.image.objectFit || 'cover',
-                                borderRadius: 'var(--boemly-radii-xl)',
-                              }}
-                              onClick={() => !mobile && setIsOpen(true)}
-                            />
-                            <FullScreenImage
-                              images={[item.image]}
-                              isOpen={isOpen}
-                              onClose={() => setIsOpen(false)}
-                            />
-                          </Box>
-                        </>
-                      ) : (
-                        <></>
-                      )}
-                    </Flex>
-                  </Container>
-                  {mobile && index + 1 < slice.timelineItems.length && (
-                    <Box
-                      overflow="visible"
-                      borderRight="dashed 1px var(--boemly-colors-gray-200)"
-                      transform="translateX(-50%)"
-                      position="relative"
-                      height="20"
-                    />
-                  )}
-                </SimpleGrid>
-              ))}
-            </Flex>
-            {visibleItems < slice.timelineItems.length && (
-              <>
-                <Box
-                  width="full"
-                  height={['36', null, null, '64']}
-                  position="absolute"
-                  bottom="0"
-                  zIndex="1"
-                  background="linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.98) 76.54%, #FFF 100%)"
-                />
-                <Box
-                  bottom="0"
-                  textAlign="center"
-                  zIndex="overlay"
-                  position="relative"
-                >
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={showMoreItems}
-                    m={[null, null, null, '8']}
-                  >
-                    {formatMessage({ id: 'sections.timeline.showMoreButton' })}
-                  </Button>
-                </Box>
-              </>
-            )}
-          </Box>
-        </Flex>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/Timeline/index.ts

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

package/src/slices/Timeline/messages.de.ts

@@ -1,5 +0,0 @@
-const messagesDe = {
-  'sections.timeline.backgroundShapes': 'Hintergrundformen',
-  'sections.timeline.showMoreButton': 'Drei weitere Meilensteine anzeigen',
-};
-export default messagesDe;

package/src/slices/Timeline/messages.en.ts

@@ -1,5 +0,0 @@
-const messagesEn = {
-  'sections.timeline.backgroundShapes': 'Background shapes',
-  'sections.timeline.showMoreButton': 'Show three more milestones',
-};
-export default messagesEn;

package/src/slices/Video/Video.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import Video from '.';
-
-export default {
-  title: 'slices/Video',
-  component: Video,
-} as Meta<typeof Video>;
-
-const Template: StoryFn<typeof Video> = (args) => <Video {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  slice: {
-    title: 'Title',
-    youTubeID: 'QnzFqtWIJCI',
-  },
-};

package/src/slices/Video/Video.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import Video from '.';
-import { VideoProps } from './Video';
-
-const defaultProps: VideoProps = {
-  slice: {
-    title: 'Title',
-    youTubeID: 'youTubeID',
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<Video {...combinedProps} />);
-};
-
-describe('The Video component', () => {
-  it('displays an iframe with a video', () => {
-    setup();
-
-    expect(screen.getByTestId('video-iframe')).toHaveAttribute(
-      'src',
-      'https://www.youtube.com/embed/youTubeID'
-    );
-  });
-});

package/src/slices/Video/Video.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Box, DefaultSectionContainer, Wrapper } from 'boemly';
-import { useMeasure } from 'react-use';
-
-interface VideoSlice {
-  youTubeID: string;
-  title: string;
-}
-
-export interface VideoProps {
-  slice: VideoSlice;
-}
-
-export const Video: React.FC<VideoProps> = ({ slice }: VideoProps) => {
-  const [ref, { width }] = useMeasure<HTMLDivElement>();
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <Box ref={ref} borderRadius="xl">
-          <iframe
-            data-testid="video-iframe"
-            width={width}
-            height={(width / 16) * 9}
-            src={`https://www.youtube.com/embed/${slice.youTubeID}`}
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            title={slice.title}
-            style={{ borderRadius: 'var(--boemly-radii-xl)' }}
-          />
-        </Box>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/Video/index.ts

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