@treely/strapi-slices 1.0.0

package/src/slices/CtaOnly/CtaOnly.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryFn } from '@storybook/react';
+import CtaOnly from '.';
+import RichTextSection from '../RichTextSection';
+import { RichTextSectionProps } from '../RichTextSection/RichTextSection';
+
+export default {
+  title: 'sections/CTAOnly',
+  component: CtaOnly,
+  subcomponents: { RichTextSection },
+} as Meta<typeof CtaOnly>;
+
+const richTextWithTitleArgs: RichTextSectionProps = {
+  slice: {
+    content: `
+# Heading 1
+This is some rich text that is not part of the CtaOnly section.
+The actual CtaOnly section is only the button below.
+`,
+  },
+};
+
+const richTextArgs: RichTextSectionProps = {
+  slice: {
+    content: `
+This is some rich text that is also not part of the CtaOnly section.
+`,
+  },
+};
+
+const Template: StoryFn<typeof CtaOnly> = (args) => (
+  <>
+    <RichTextSection {...richTextWithTitleArgs} />
+    <CtaOnly {...args} />
+    <RichTextSection {...richTextArgs} />
+  </>
+);
+
+export const WithRichText = Template.bind({});
+WithRichText.args = {
+  slice: {
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+  },
+};

package/src/slices/CtaOnly/CtaOnly.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@/test/testUtils';
+import { CtaOnlyProps } from './CtaOnly';
+import CtaOnly from '.';
+
+const defaultProps: CtaOnlyProps = {
+  slice: {
+    button: {
+      id: 1,
+      text: 'Link',
+      url: 'url',
+    },
+  },
+};
+
+const setup = () => {
+  render(<CtaOnly {...defaultProps} />);
+};
+
+describe('The CTAOnly component', () => {
+  it('displays a link', () => {
+    setup();
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+  });
+});

package/src/slices/CtaOnly/CtaOnly.tsx

@@ -0,0 +1,17 @@
+import { Box, Wrapper } from 'boemly';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiLink from '@/models/strapi/StrapiLink';
+
+export interface CtaOnlyProps {
+  slice: {
+    button: StrapiLink;
+  };
+}
+
+export const CtaOnly: React.FC<CtaOnlyProps> = ({ slice }: CtaOnlyProps) => (
+  <Wrapper>
+    <Box position="absolute" top="-28" transform="translateY(50%)">
+      <StrapiLinkButton size="md" link={slice.button} />
+    </Box>
+  </Wrapper>
+);

package/src/slices/CtaOnly/index.ts

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

package/src/slices/CustomerStories/CustomerStories.stories.tsx

@@ -0,0 +1,20 @@
+import { strapiCustomerStoryMock } from '@/test/strapiMocks/strapiCustomerStory';
+import { Meta, StoryFn } from '@storybook/react';
+import CustomerStories from '.';
+
+export default {
+  title: 'sections/CustomerStories',
+  component: CustomerStories,
+} as Meta<typeof CustomerStories>;
+
+const Template: StoryFn<typeof CustomerStories> = (args) => (
+  <CustomerStories {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    customer_stories: [strapiCustomerStoryMock],
+  },
+  customerStories: [strapiCustomerStoryMock],
+};

package/src/slices/CustomerStories/CustomerStories.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@/test/testUtils';
+import { mergeDeep } from '@/utils/mergeDeep';
+import { strapiCustomerStoryMock } from '@/test/strapiMocks/strapiCustomerStory';
+import { CustomerStoriesProps } from './CustomerStories';
+import CustomerStories from '.';
+
+const defaultProps: CustomerStoriesProps = {
+  slice: {
+    customer_stories: [
+      {
+        ...strapiCustomerStoryMock,
+        attributes: {
+          ...strapiCustomerStoryMock.attributes,
+          createdAt: '2022-01-10T15:04:32.897Z',
+        },
+      },
+    ],
+  },
+  customerStories: [strapiCustomerStoryMock],
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<CustomerStories {...combinedProps} />);
+};
+
+describe('The CustomerStories component', () => {
+  it('displays all the customer story titles', () => {
+    setup();
+
+    expect(
+      screen.getByText(strapiCustomerStoryMock.attributes.title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays nothing if the customer story that should be displayed does not exists in the delivered customer stories', () => {
+    setup({ customerStories: [] });
+
+    expect(
+      screen.queryByText(strapiCustomerStoryMock.attributes.title)
+    ).not.toBeInTheDocument();
+  });
+});

package/src/slices/CustomerStories/CustomerStories.tsx

@@ -0,0 +1,84 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiCustomerStory from '@/models/strapi/StrapiCustomerStory';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import {
+  Box,
+  Button,
+  Center,
+  Container,
+  DefaultSectionContainer,
+  Heading,
+  SimpleGrid,
+  Text,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import Link from 'next/link';
+import { FormattedMessage } from 'react-intl';
+
+export interface CustomerStoriesProps {
+  slice: {
+    customer_stories: IStrapiData<StrapiCustomerStory>[];
+  };
+  customerStories: IStrapiData<StrapiCustomerStory>[];
+}
+
+export const CustomerStories = ({
+  slice,
+  customerStories,
+}: CustomerStoriesProps): JSX.Element => (
+  <DefaultSectionContainer>
+    <Wrapper>
+      <SimpleGrid columns={[1, null, null, 2]} spacingX={56} spacingY={24}>
+        {slice.customer_stories.map(({ attributes }) => {
+          const customerStory: IStrapiData<StrapiCustomerStory> | undefined =
+            customerStories.find(
+              (cs) => cs.attributes.slug === attributes.slug
+            );
+          if (!customerStory) {
+            return null;
+          }
+          return (
+            <Container padding="none" key={customerStory.id}>
+              <Center
+                height="24"
+                backgroundColor="primary.50"
+                borderTopRadius="xl"
+              >
+                <Box position="relative" height="12" width="12">
+                  <Image
+                    src={strapiMediaUrl(
+                      customerStory.attributes.customerLogo.img,
+                      'medium'
+                    )}
+                    alt={customerStory.attributes.customerLogo.alt}
+                    fill
+                    style={{
+                      objectFit:
+                        customerStory.attributes.customerLogo.objectFit,
+                    }}
+                  />
+                </Box>
+              </Center>
+              <Box px="6" pt="12" pb="6">
+                <Text size="xsMonoUppercase" color="gray.500" mb="2">
+                  {customerStory.attributes.customerIndustry}
+                </Text>
+                <Heading size="xl">{customerStory.attributes.title}</Heading>
+                <Button
+                  as={Link}
+                  href={`/customer-stories/${customerStory.attributes.slug}`}
+                  variant="outline"
+                  size="sm"
+                  mt="12"
+                >
+                  <FormattedMessage id="sections.customerStories.more" />
+                </Button>
+              </Box>
+            </Container>
+          );
+        })}
+      </SimpleGrid>
+    </Wrapper>
+  </DefaultSectionContainer>
+);

package/src/slices/CustomerStories/index.ts

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

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

@@ -0,0 +1,3 @@
+export default {
+  'sections.customerStories.more': 'Weiterlesen',
+};

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

@@ -0,0 +1,3 @@
+export default {
+  'sections.customerStories.more': 'Read more',
+};

package/src/slices/Facts/Facts.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryFn } from '@storybook/react';
+import Facts from '.';
+
+export default {
+  title: 'sections/Facts',
+  component: Facts,
+} as Meta<typeof Facts>;
+
+const Template: StoryFn<typeof Facts> = (args) => <Facts {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    variant: 'gray',
+    facts: [
+      { key: 'Key 1', value: 'Value 1' },
+      { key: 'Key 2', value: 'Value 2' },
+      { key: 'Key 3', value: 'Value 3' },
+    ],
+  },
+};
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    variant: 'gray',
+    facts: [
+      { key: 'Key 1', value: 'Value 1' },
+      { key: 'Key 2', value: 'Value 2' },
+      { key: 'Key 3', value: 'Value 3' },
+    ],
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+    variant: 'gray',
+    facts: [
+      { key: 'Key 1', value: 'Value 1' },
+      { key: 'Key 2', value: 'Value 2' },
+      { key: 'Key 3', value: 'Value 3' },
+      { key: 'Key 4', value: 'Value 4' },
+    ],
+  },
+};
+
+export const Green = Template.bind({});
+Green.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+    variant: 'green',
+    facts: [
+      { key: 'Key 1', value: 'Value 1' },
+      { key: 'Key 2', value: 'Value 2' },
+      { key: 'Key 3', value: 'Value 3' },
+      { key: 'Key 4', value: 'Value 4' },
+    ],
+  },
+};
+
+export const White = Template.bind({});
+White.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    subTitle: 'Sub title',
+    variant: 'white',
+    button: {
+      id: 1,
+      text: 'Button',
+      url: 'https://tree.ly',
+    },
+    facts: [
+      { key: 'Key 1', value: 'Value 1' },
+      { key: 'Key 2', value: 'Value 2' },
+      { key: 'Key 3', value: 'Value 3' },
+      { key: 'Key 4', value: 'Value 4' },
+      { key: 'Key 5', value: 'Value 5' },
+    ],
+  },
+};

package/src/slices/Facts/Facts.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@/test/testUtils';
+import Facts from '.';
+import { FactsProps } from './Facts';
+
+const defaultProps: FactsProps = {
+  slice: {
+    variant: 'gray',
+    facts: [
+      { key: 'Fact 1', value: 'Value 1' },
+      { key: 'Fact 2', value: 'Value 2' },
+      { key: 'Fact 3', value: 'Value 3' },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<Facts {...combinedProps} />);
+};
+
+describe('The Facts component', () => {
+  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 chakra-button with css-e5zvm4 class if the slice.variant is gray', () => {
+    setup({
+      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
+    });
+
+    expect(screen.getByRole('link')).toHaveClass('chakra-button css-e5zvm4');
+  });
+
+  it('displays the chakra-button with css-y35h5g class if the slice.variant is green', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        variant: 'green',
+        button: { url: 'url', text: 'Link' },
+      },
+    });
+
+    expect(screen.getByRole('link')).toHaveClass('chakra-button css-y35h5g');
+  });
+
+  it('displays the title header when slice.title is defined', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        title: 'Test Title',
+        tagline: 'Test Tagline',
+        subTitle: 'Test Subtitle',
+      },
+    });
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Tagline')).toBeInTheDocument();
+    expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+  });
+
+  it('does not display the title header when slice.title is undefined', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        tagline: 'Test Tagline',
+        subTitle: 'Test Subtitle',
+      },
+    });
+
+    expect(screen.queryByText('Test Tagline')).toBeNull();
+  });
+
+  it('displays the facts', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+      },
+    });
+
+    expect(screen.getByText('Fact 1')).toBeInTheDocument();
+    expect(screen.getByText('Fact 2')).toBeInTheDocument();
+    expect(screen.getByText('Fact 3')).toBeInTheDocument();
+  });
+
+  it('does not display a link if the button in the slice is undefined', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+      },
+    });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

package/src/slices/Facts/Facts.tsx

@@ -0,0 +1,140 @@
+import {
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Flex,
+  Heading,
+  Spacer,
+  Text,
+} from 'boemly';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiLink from '@/models/strapi/StrapiLink';
+
+export interface FactsProps {
+  slice: {
+    tagline?: string;
+    title?: string;
+    subTitle?: string;
+    button?: StrapiLink;
+    variant: 'gray' | 'green' | 'white';
+    facts: { key: string; value: string }[];
+  };
+}
+
+const VARIANTS = {
+  gray: {
+    backgroundColor: 'primary.50',
+    tagLineColor: 'primary.500',
+    titleColor: 'black',
+    subTitleColor: 'black',
+    factKeyColor: 'gray.700',
+    factValueColor: 'gray.700',
+  },
+  green: {
+    backgroundColor: 'primary.800',
+    tagLineColor: 'white',
+    titleColor: 'white',
+    subTitleColor: 'white',
+    factKeyColor: 'whiteAlpha.900',
+    factValueColor: 'white',
+  },
+  white: {
+    backgroundColor: 'white',
+    tagLineColor: 'primary.500',
+    titleColor: 'black',
+    subTitleColor: 'black',
+    factKeyColor: 'gray.700',
+    factValueColor: 'gray.700',
+  },
+};
+
+export const Facts: React.FC<FactsProps> = ({ slice }: FactsProps) => (
+  <DefaultSectionContainer
+    backgroundColor={VARIANTS[slice.variant].backgroundColor}
+    flexDir="column"
+    textAlign="center"
+    justifyContent="space-between"
+    paddingX={['6', null, '8']}
+    title={slice.title}
+  >
+    <>
+      {slice.title && (
+        <>
+          <DefaultSectionHeader
+            tagline={slice.tagline}
+            text={slice.subTitle}
+            title={slice.title}
+            taglineProps={{
+              color: VARIANTS[slice.variant].tagLineColor,
+              textAlign: 'center',
+            }}
+            titleProps={{
+              color: VARIANTS[slice.variant].titleColor,
+              textAlign: 'center',
+              maxW: '6xl',
+              marginX: 'auto',
+            }}
+            textProps={{
+              color: VARIANTS[slice.variant].subTitleColor,
+              textAlign: 'center',
+              maxW: '3xl',
+              marginX: 'auto',
+            }}
+          />
+          <Spacer height={['0', null, '12']} />
+        </>
+      )}
+      <Flex
+        justifyContent={slice.facts.length < 3 ? 'center' : 'flex-start'}
+        alignItems="center"
+        flexWrap="wrap"
+        mx={[null, null, null, '22', '28']}
+        flexDir={['column', null, null, 'row']}
+        gap={[null, null, null, '12']}
+      >
+        {slice.facts.map((fact) => (
+          <Flex
+            key={fact.key}
+            flexDir="column"
+            width={[
+              'var(--boemly-sizes-full)',
+              null,
+              null,
+              'calc((var(--boemly-sizes-full) - var(--boemly-space-24))/ 3 )',
+            ]}
+            mt={['8', '8', '8', slice.facts.length > 3 ? '16' : '0']}
+          >
+            <Heading
+              fontSize="6xl"
+              fontFamily="GintoNord"
+              lineHeight="10"
+              fontWeight="700"
+              color={VARIANTS[slice.variant].factValueColor}
+              mb="2"
+              as="p"
+            >
+              {fact.value}
+            </Heading>
+
+            <Text
+              size="mdLowNormal"
+              color={VARIANTS[slice.variant].factKeyColor}
+            >
+              {fact.key}
+            </Text>
+          </Flex>
+        ))}
+      </Flex>
+
+      {slice.button && (
+        <>
+          <Spacer height={['0', null, '20']} />
+          <StrapiLinkButton
+            link={slice.button}
+            size="md"
+            variant={slice.variant === 'green' ? 'outline' : 'solid'}
+          />
+        </>
+      )}
+    </>
+  </DefaultSectionContainer>
+);

package/src/slices/Facts/index.ts

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

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.stories.tsx

@@ -0,0 +1,41 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiAvatarMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import FullWidthHighlightQuote from '.';
+
+export default {
+  title: 'sections/FullWidthHighlightQuote',
+  component: FullWidthHighlightQuote,
+} as Meta<typeof FullWidthHighlightQuote>;
+
+const Template: StoryFn<typeof FullWidthHighlightQuote> = (args) => (
+  <FullWidthHighlightQuote {...args} />
+);
+
+const avatar = {
+  id: 1,
+  name: 'Avatar name',
+  description: 'Avatar description',
+  image: {
+    id: 1,
+    alt: 'Avatar image alt text',
+    img: { data: storybookStrapiAvatarMock },
+  },
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    quote: '"Quote"',
+    avatarWithName: avatar,
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    quote: '"Quote"',
+    avatarWithName: avatar,
+  },
+};

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiAvatarWithNameMock } from '@/test/strapiMocks/strapiAvatarWithName';
+import FullWidthHighlightQuote from '.';
+import { FullWidthHighlightQuoteProps } from './FullWidthHighlightQuote';
+
+const defaultProps: FullWidthHighlightQuoteProps = {
+  slice: {
+    quote: 'Quote',
+    avatarWithName: strapiAvatarWithNameMock,
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<FullWidthHighlightQuote {...combinedProps} />);
+};
+
+describe('The FullWidthHighlightQuote component', () => {
+  it('displays a tagline if there is a tagline in the slice', () => {
+    setup({ slice: { ...defaultProps.slice, tagline: 'Tagline' } });
+
+    expect(screen.getByText('Tagline')).toBeInTheDocument();
+  });
+
+  it('displays the quote', () => {
+    setup();
+
+    expect(screen.getByText(defaultProps.slice.quote)).toBeInTheDocument();
+  });
+
+  it('displays the avatar with name', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'alt',
+      strapiAvatarWithNameMock.image.alt
+    );
+  });
+});