@treely/strapi-slices 1.0.0

package/src/slices/Glossary/Glossary.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen, waitFor, userEvent } from '@/test/testUtils';
+import Glossary from '.';
+import { GlossaryProps } from './Glossary';
+import messagesEn from './messages.en';
+
+const copyToClipboardSpy = jest.fn();
+const mockedResult = jest.fn().mockReturnValue({ noUserInteraction: false });
+
+jest.mock('react-use', () => ({
+  ...jest.requireActual('react-use'),
+  useCopyToClipboard: () => [mockedResult(), copyToClipboardSpy],
+}));
+
+const defaultProps: GlossaryProps = {
+  slice: {
+    glossary_items: [
+      {
+        id: 1,
+        attributes: {
+          title: 'chocolate-title',
+          text: 'chocolate-text',
+          slug: 'chocolate-slug',
+        },
+      },
+      {
+        id: 2,
+        attributes: {
+          title: 'ananas-title',
+          text: 'ananas-text',
+          slug: 'ananas-slug',
+        },
+      },
+      {
+        id: 3,
+        attributes: {
+          title: 'another-title',
+          text: 'another-text',
+          slug: 'another-slug',
+        },
+      },
+    ],
+  },
+};
+
+const setup = () => render(<Glossary {...defaultProps} />);
+
+describe('The Glossary component', () => {
+  afterEach(() => {
+    copyToClipboardSpy.mockClear();
+    mockedResult.mockClear();
+  });
+
+  it('groups the items by the first letter of the title', () => {
+    setup();
+
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('C')).toBeInTheDocument();
+  });
+
+  it('the title and text of the items', () => {
+    setup();
+
+    expect(screen.getByText('chocolate-title')).toBeInTheDocument();
+    expect(screen.getByText('chocolate-text')).toBeInTheDocument();
+  });
+
+  it('adds the slug as an id to the title', () => {
+    setup();
+
+    expect(screen.getByText('chocolate-title')).toHaveAttribute(
+      'id',
+      'chocolate-slug'
+    );
+  });
+
+  it('adds a button that copies the anchor link to the users clipboard', async () => {
+    setup();
+
+    await userEvent.click(screen.getAllByRole('button')[0]);
+
+    await waitFor(() => {
+      expect(copyToClipboardSpy).toHaveBeenCalledWith(
+        'http://localhost/#ananas-slug'
+      );
+    });
+  });
+
+  it('shows a success message when copying succeeded', async () => {
+    mockedResult.mockReturnValueOnce({
+      noUserInteraction: false,
+      value: 'http://localhost/#ananas-slug',
+    });
+
+    setup();
+
+    await userEvent.click(screen.getAllByRole('button')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+    });
+  });
+});

package/src/slices/Glossary/Glossary.tsx

@@ -0,0 +1,107 @@
+import {
+  DefaultSectionContainer,
+  Divider,
+  Flex,
+  GridItem,
+  Heading,
+  IconButton,
+  SimpleGrid,
+  Text,
+  Wrapper,
+} from 'boemly';
+import { Check, Link as LinkIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useCopyToClipboard } from 'react-use';
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiGlossaryItem from '@/models/strapi/StrapiGlossaryItem';
+
+export interface GlossaryProps {
+  slice: {
+    glossary_items: IStrapiData<StrapiGlossaryItem>[];
+  };
+}
+
+export const Glossary: React.FC<GlossaryProps> = ({ slice }: GlossaryProps) => {
+  const [clipboardState, copyToClipboard] = useCopyToClipboard();
+  const { formatMessage } = useIntl();
+  const grouped: Record<string, StrapiGlossaryItem[]> = {};
+  const [copiedItem, setCopiedItem] = useState<string>();
+
+  slice.glossary_items
+    .sort((a, b) => a.attributes.title.localeCompare(b.attributes.title))
+    .forEach((curr) => {
+      const index = curr.attributes.title.at(0)?.toUpperCase() || 'A';
+      if (!grouped[index]) {
+        grouped[index] = [];
+      }
+      grouped[index].push(curr.attributes);
+    }, {});
+
+  const handleAnchorClick = async (slug: string) => {
+    if (window?.location) {
+      const currentUrl = window.location.href.split('#')[0];
+      copyToClipboard(`${currentUrl}#${slug}`);
+      setCopiedItem(slug);
+
+      setTimeout(() => {
+        setCopiedItem(undefined);
+      }, 1200);
+    }
+  };
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        <SimpleGrid>
+          {Object.entries(grouped).map(([letter, items], index) => (
+            <GridItem maxW="xl" placeSelf="center" key={letter}>
+              <Heading size="3xl" mb="8">
+                {letter}
+              </Heading>
+
+              <SimpleGrid spacing="6">
+                {items.map((item) => (
+                  <GridItem key={item.slug}>
+                    <Flex mb="2" gap="1.5" alignItems="center">
+                      <Heading
+                        size="xl"
+                        id={item.slug}
+                        scrollMarginTop="calc(var(--header-height) + var(--boemly-sizes-10))"
+                      >
+                        {item.title}
+                      </Heading>
+                      <IconButton
+                        variant="ghost"
+                        size="xs"
+                        icon={
+                          copiedItem === item.slug ? (
+                            <Check size="16" data-testid="check-icon" />
+                          ) : (
+                            <LinkIcon size="16" />
+                          )
+                        }
+                        title={formatMessage({
+                          id: 'sections.glossary.copyButtonLabel',
+                        })}
+                        aria-label={formatMessage({
+                          id: 'sections.glossary.copyButtonLabel',
+                        })}
+                        onClick={async () => handleAnchorClick(item.slug)}
+                      />
+                    </Flex>
+                    <Text color="black">{item.text}</Text>
+                  </GridItem>
+                ))}
+              </SimpleGrid>
+
+              {index !== Object.keys(grouped).length - 1 && (
+                <Divider maxW="xl" placeSelf="center" mb="10" mt="10" />
+              )}
+            </GridItem>
+          ))}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/Glossary/index.ts

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

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

@@ -0,0 +1,7 @@
+export default {
+  'sections.glossary.copyButtonLabel':
+    'Kopiere den Link zu diesem Abschnitt in die Zwischenablage',
+  'sections.glossary.copySuccessMessage': 'Link in die Zwischenablage kopiert',
+  'sections.glossary.copyFailureMessage':
+    'Link konnte nicht in die Zwischenablage kopiert werden',
+};

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

@@ -0,0 +1,6 @@
+export default {
+  'sections.glossary.copyButtonLabel':
+    'Copy a link to this section to your clipboard',
+  'sections.glossary.copySuccessMessage': 'Copied the link to your clipboard',
+  'sections.glossary.copyFailureMessage': 'Could not copy link to clipboard',
+};

package/src/slices/Hero/Hero.stories.tsx

@@ -0,0 +1,129 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import {
+  storybookStrapiCoverMock,
+  storybookStrapiGradientBottomUpMock,
+} from '@/test/storybookMocks/storybookStrapiMedia';
+import Hero from '.';
+
+export default {
+  title: 'sections/Hero',
+  component: Hero,
+} as Meta<typeof Hero>;
+
+const Template: StoryFn<typeof Hero> = (args) => <Hero {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'center',
+    additionalButtons: [],
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'center',
+    additionalButtons: [],
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'center',
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+    additionalButtons: [],
+  },
+};
+
+export const WithAdditionalButton = Template.bind({});
+WithAdditionalButton.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'center',
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+    additionalButtons: [
+      {
+        button: {
+          id: 1,
+          text: 'Button Right',
+          url: 'https://tree.ly',
+        },
+        variant: 'outline',
+      },
+    ],
+  },
+};
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'center',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    additionalButtons: [],
+  },
+};
+
+export const TextAlignLeft = Template.bind({});
+TextAlignLeft.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'left',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    additionalButtons: [],
+  },
+};
+
+export const TextAlignLeftWithShape = Template.bind({});
+TextAlignLeftWithShape.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'left',
+    image: {
+      id: 1,
+      alt: 'Alt text',
+      img: { data: storybookStrapiCoverMock },
+    },
+    shape: {
+      id: 1,
+      alt: 'Shape alt text',
+      img: { data: storybookStrapiGradientBottomUpMock },
+    },
+    additionalButtons: [],
+  },
+};

package/src/slices/Hero/Hero.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import Hero from '.';
+import { HeroProps } from './Hero';
+
+const defaultProps: HeroProps = {
+  slice: {
+    title: 'Title',
+    subTitle: 'Sub title',
+    textAlign: 'center',
+    additionalButtons: [],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<Hero {...combinedProps} />);
+};
+
+describe('The Hero component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays no link if there is no button in the slice', async () => {
+    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.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+  });
+
+  it('displays the additional buttons', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        button: { id: '1', url: 'url', text: 'Link Left' },
+        additionalButtons: [
+          {
+            button: { id: '2', url: 'url', text: 'Link Right' },
+            variant: 'outline',
+          },
+        ],
+      },
+    });
+
+    expect(screen.getAllByRole('link')).toHaveLength(2);
+    expect(screen.getByText('Link Left')).toBeInTheDocument();
+    expect(screen.getByText('Link Right')).toBeInTheDocument();
+  });
+
+  it('displays no image if there is no image in the slice', () => {
+    setup();
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('displays an image if there is an image in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        image: { id: 1, img: { data: strapiMediaMock }, alt: 'Image alt text' },
+      },
+    });
+
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Image alt text');
+  });
+
+  it('displays a shape if there is a shape in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        textAlign: 'left',
+        shape: { id: 1, img: { data: strapiMediaMock }, alt: 'Shape alt text' },
+      },
+    });
+
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+});

package/src/slices/Hero/Hero.tsx

@@ -0,0 +1,95 @@
+import { DefaultSectionHeader, Flex, Gradient, Wrapper } from 'boemly';
+import Image from 'next/image';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiButtonWithVariant from '@/models/strapi/StrapiButtonWithVariant';
+import { ShapeContainer, HeadingContainer, HeroContainer } from './styles';
+
+export interface HeroProps {
+  slice: {
+    tagline?: string;
+    title: string;
+    subTitle: string;
+    button?: StrapiLink;
+    additionalButtons: StrapiButtonWithVariant[];
+    image?: StrapiImage;
+    textAlign: 'left' | 'center';
+    shape?: StrapiImage;
+  };
+}
+
+export const Hero: React.FC<HeroProps> = ({ slice }: HeroProps) => (
+  <HeroContainer>
+    {slice.image && (
+      <>
+        <Image
+          src={strapiMediaUrl(slice.image.img, 'xLarge')}
+          alt={slice.image.alt}
+          fill
+          style={{ objectFit: slice.image.objectFit || 'cover' }}
+        />
+        <Gradient />
+      </>
+    )}
+    {slice.shape && (
+      <ShapeContainer>
+        <Image
+          src={strapiMediaUrl(slice.shape.img, 'medium')}
+          alt={slice.shape.alt}
+          fill
+          style={{ objectFit: slice.shape.objectFit || 'cover' }}
+        />
+      </ShapeContainer>
+    )}
+    <HeadingContainer textAlign={slice.textAlign}>
+      <Wrapper>
+        <>
+          <DefaultSectionHeader
+            isHero
+            tagline={slice.tagline}
+            title={slice.title}
+            text={slice.subTitle}
+            taglineProps={{ color: 'white' }}
+            titleProps={{
+              color: 'white',
+              maxW: slice.textAlign === 'center' ? '4xl' : '3xl',
+              mx: slice.textAlign === 'center' ? 'auto' : 'unset',
+              textAlign: slice.textAlign,
+            }}
+            textProps={{
+              maxW: '2xl',
+              mx: slice.textAlign === 'center' ? 'auto' : 'unset',
+              textAlign: slice.textAlign,
+              color: 'white',
+            }}
+          />
+
+          <Flex
+            gap="8"
+            justifyContent={slice.textAlign === 'center' ? 'center' : 'start'}
+          >
+            {slice.button && (
+              <StrapiLinkButton
+                key={slice.button.id}
+                mt="10"
+                size="xl"
+                link={slice.button}
+              />
+            )}
+            {slice.additionalButtons.map((button) => (
+              <StrapiLinkButton
+                key={button.button.id}
+                mt="10"
+                size="xl"
+                variant={button.variant}
+                link={button.button}
+              />
+            ))}
+          </Flex>
+        </>
+      </Wrapper>
+    </HeadingContainer>
+  </HeroContainer>
+);

package/src/slices/Hero/index.ts

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

package/src/slices/Hero/styles.ts

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD, BREAKPOINT_XL } from '@/constants/breakpoints';
+
+export const HeroContainer = styled.div`
+  position: relative;
+  width: 100vw;
+  height: var(--default-hero-height);
+  min-height: var(--boemly-sizes-2xl);
+  background-color: var(--boemly-colors-gray-900);
+  overflow-x: hidden;
+`;
+
+interface HeroContainerProps {
+  textAlign: 'left' | 'center';
+}
+
+export const HeadingContainer = styled.div<HeroContainerProps>`
+  position: absolute;
+  left: 0;
+  top: 56%;
+  width: 100vw;
+  text-align: ${({ textAlign }) => textAlign};
+  transform: translateY(-50%);
+`;
+
+export const ShapeContainer = styled.div`
+  position: absolute;
+
+  height: var(--boemly-sizes-sm);
+  width: var(--boemly-sizes-sm);
+
+  right: var(--boemly-space-24);
+  bottom: 0;
+
+  border-top-right-radius: 100%;
+  & span,
+  div {
+    border-top-right-radius: 100%;
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_XL}) {
+    height: var(--boemly-sizes-2xs);
+    width: var(--boemly-sizes-2xs);
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    right: calc(var(--boemly-space-16) * -1);
+
+    height: var(--boemly-sizes-3xs);
+    width: var(--boemly-sizes-3xs);
+  }
+`;