@treely/strapi-slices 7.17.0 → 8.0.0

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

@@ -1,4 +0,0 @@
-const messagesDe = {
-  'sections.projectsMap.link.text': 'Mehr Infos',
-};
-export default messagesDe;

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

@@ -1,4 +0,0 @@
-const messagesEn = {
-  'sections.projectsMap.link.text': 'Show more info',
-};
-export default messagesEn;

package/src/slices/QAndA/QAndA.stories.tsx

@@ -1,109 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import QAndA from '.';
-
-export default {
-  title: 'slices/QAndA',
-  component: QAndA,
-} as Meta<typeof QAndA>;
-
-const Template: StoryFn<typeof QAndA> = (args) => <QAndA {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    questionsAndAnswers: [
-      { id: 1, key: 'Question 1', value: 'Answer 1' },
-      { id: 2, key: 'Question 2', value: 'Answer 2' },
-      { id: 3, key: 'Question 3', value: 'Answer 3' },
-    ],
-    otherQuestions: 'Other questions?',
-    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-    defaultIndex: [],
-  },
-};
-
-export const WithHero = Template.bind({});
-WithHero.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    questionsAndAnswers: [
-      { id: 1, key: 'Question 1', value: 'Answer 1' },
-      { id: 2, key: 'Question 2', value: 'Answer 2' },
-      { id: 3, key: 'Question 3', value: 'Answer 3' },
-    ],
-    otherQuestions: 'Other questions?',
-    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-    hero: {
-      id: 1,
-      title: 'Title',
-      subTitle: 'Sub title',
-      button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-      image: {
-        id: 1,
-        alt: 'Hero image alt text',
-        img: { data: storybookStrapiCoverMock },
-      },
-    },
-    defaultIndex: [],
-  },
-};
-
-export const WithScroll = Template.bind({});
-WithScroll.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    questionsAndAnswers: [
-      { id: 1, key: 'Question 1', value: 'Answer 1' },
-      { id: 2, key: 'Question 2', value: 'Answer 2' },
-      { id: 3, key: 'Question 3', value: 'Answer 3' },
-      { id: 4, key: 'Question 3', value: 'Answer 4' },
-      { id: 5, key: 'Question 3', value: 'Answer 5' },
-      { id: 6, key: 'Question 3', value: 'Answer 6' },
-      { id: 7, key: 'Question 3', value: 'Answer 7' },
-    ],
-    otherQuestions: 'Other questions?',
-    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-    defaultIndex: [],
-  },
-};
-
-export const Gray = Template.bind({});
-Gray.args = {
-  slice: {
-    variant: 'gray',
-    tagline: 'Tagline',
-    title: 'Title',
-    questionsAndAnswers: [
-      { id: 1, key: 'Question 1', value: 'Answer 1' },
-      { id: 2, key: 'Question 2', value: 'Answer 2' },
-      { id: 3, key: 'Question 3', value: 'Answer 3' },
-    ],
-    otherQuestions: 'Other questions?',
-    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-    defaultIndex: [],
-  },
-};
-
-export const White = Template.bind({});
-White.args = {
-  slice: {
-    variant: 'white',
-    tagline: 'Tagline',
-    title: 'Title',
-    questionsAndAnswers: [
-      { id: 1, key: 'Question 1', value: 'Answer 1' },
-      { id: 2, key: 'Question 2', value: 'Answer 2' },
-      { id: 3, key: 'Question 3', value: 'Answer 3' },
-    ],
-    otherQuestions: 'Other questions?',
-    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-    defaultIndex: [],
-  },
-};

package/src/slices/QAndA/QAndA.test.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiHeroCardMock } from '../../test/strapiMocks/strapiHeroCard';
-import QAndA from '.';
-import { QAndAProps } from './QAndA';
-
-const defaultProps: QAndAProps = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    otherQuestions: 'Other question?',
-    button: {
-      id: 1,
-      text: 'Text',
-      url: 'url',
-    },
-    questionsAndAnswers: [
-      { id: 1, key: 'Key 1', value: 'Value 1' },
-      { id: 2, key: 'Key 2', value: 'Value 2' },
-    ],
-    defaultIndex: [],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<QAndA {...combinedProps} />);
-};
-
-describe('The QAndA component', () => {
-  it('displays the tagline', () => {
-    setup();
-
-    expect(screen.getByText(defaultProps.slice.tagline)).toBeInTheDocument();
-  });
-
-  it('displays the title', () => {
-    setup();
-
-    expect(screen.getByText(defaultProps.slice.title)).toBeInTheDocument();
-  });
-
-  it('displays the questions and answers', () => {
-    setup();
-
-    expect(screen.getByText('Key 1')).toBeInTheDocument();
-    expect(screen.getByText('Value 1')).toBeInTheDocument();
-    expect(screen.getByText('Key 2')).toBeInTheDocument();
-    expect(screen.getByText('Value 2')).toBeInTheDocument();
-  });
-
-  it('displays a hero card if there is a hero in the slice', () => {
-    setup({ slice: { ...defaultProps.slice, hero: strapiHeroCardMock } });
-
-    expect(screen.getByText(strapiHeroCardMock.title)).toBeInTheDocument();
-  });
-
-  it('renders correctly in the white variant', () => {
-    setup({ slice: { ...defaultProps.slice, variant: 'white' } });
-
-    expect(screen.getByText(defaultProps.slice.tagline)).toBeInTheDocument();
-  });
-
-  it('renders correctly in the gray variant', () => {
-    setup({ slice: { ...defaultProps.slice, variant: 'gray' } });
-
-    expect(screen.getByText(defaultProps.slice.tagline)).toBeInTheDocument();
-  });
-});

package/src/slices/QAndA/QAndA.tsx

@@ -1,178 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  Heading,
-  HeroCard,
-  SimpleGrid,
-  Text,
-  BoemlyAccordion,
-  Wrapper,
-  Flex,
-  Spacer,
-} from 'boemly';
-import { ArrowRight } from '@phosphor-icons/react';
-import { useRouter } from 'next/router';
-import Image from 'next/image';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import strapiLinkUrl from '../../utils/strapiLinkUrl';
-import StrapiHeroCard from '../../models/strapi/StrapiHeroCard';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import convertToKebabCase from '../../utils/convertToKebabCase';
-import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
-
-const VARIANTS = {
-  gray: {
-    backgroundColor: 'primary.50',
-    tagLineColor: 'primary.500',
-    textColor: 'black',
-    accordionVariant: 'black',
-    otherQuestionsBackground: 'primary.700',
-  },
-  green: {
-    backgroundColor: 'primary.800',
-    tagLineColor: 'white',
-    textColor: 'white',
-    accordionVariant: 'white',
-    otherQuestionsBackground: 'primary.900',
-  },
-  white: {
-    backgroundColor: 'white',
-    tagLineColor: 'primary.500',
-    textColor: 'black',
-    accordionVariant: 'black',
-    otherQuestionsBackground: 'primary.700',
-  },
-};
-
-export interface QAndAProps {
-  slice: {
-    tagline: string;
-    title: string;
-    questionsAndAnswers: {
-      id: number;
-      key: string;
-      value: string;
-    }[];
-    otherQuestions: string;
-    button: StrapiLink;
-    hero?: StrapiHeroCard;
-    variant?: keyof typeof VARIANTS;
-    defaultIndex: number[];
-  };
-}
-
-export const QAndA: React.FC<QAndAProps> = ({ slice }: QAndAProps) => {
-  const { push } = useRouter();
-  const analyticsFunction = useContext(AnalyticsContext);
-
-  const handleHeroButtonClick = () => {
-    if (slice.hero?.button) {
-      analyticsFunction?.({
-        type: 'track',
-        props: {
-          action: 'click',
-          component: 'QAndA',
-          buttonText: slice.hero.button.text,
-          buttonUrl: strapiLinkUrl(slice.hero.button),
-          section: 'hero',
-        },
-      });
-      push(strapiLinkUrl(slice.hero.button));
-    }
-  };
-
-  const variant = VARIANTS[slice.variant ?? 'green'];
-
-  return (
-    <>
-      <Box
-        pb={slice.hero ? 80 : 28}
-        id={convertToKebabCase(slice.title)}
-        backgroundColor={variant.backgroundColor}
-      >
-        <Wrapper>
-          <SimpleGrid columns={[1, null, null, 2]}>
-            <Box mr="16" paddingY="28">
-              <Text size="mdMonoUppercase" color={variant.tagLineColor}>
-                {slice.tagline}
-              </Text>
-              <Heading
-                as="h2"
-                size="3xl"
-                color={variant.textColor}
-                mt="6"
-                mb="16"
-              >
-                {slice.title}
-              </Heading>
-            </Box>
-            <Box
-              maxHeight={['unset', null, null, 'xl']}
-              paddingTop={['0', null, null, '28']}
-              paddingRight={['0', null, null, '6']}
-              overflowY={['unset', null, null, 'scroll']}
-            >
-              <Box>
-                <BoemlyAccordion
-                  rows={slice.questionsAndAnswers}
-                  defaultIndex={slice.defaultIndex}
-                  variant={variant.accordionVariant as 'white' | 'black'}
-                />
-                <Flex
-                  padding="8"
-                  backgroundColor={variant.otherQuestionsBackground}
-                  borderRadius="2xl"
-                  mt="14"
-                  flexDir={['column', null, null, 'row']}
-                  justifyContent={['flex-start', null, null, 'space-between']}
-                  alignItems={['flex-start', null, null, 'center']}
-                >
-                  <Heading as="h6" size="sm" color="white">
-                    {slice.otherQuestions}
-                  </Heading>
-                  <Spacer minHeight={['4', null, null, '0']} />
-                  <StrapiLinkButton
-                    size="lg"
-                    colorScheme="white"
-                    background="white"
-                    rightIcon={<ArrowRight />}
-                    link={slice.button}
-                    component="QAndA"
-                  />
-                </Flex>
-              </Box>
-            </Box>
-          </SimpleGrid>
-        </Wrapper>
-      </Box>
-
-      {slice.hero && (
-        <Box pb="28" mt="-56">
-          <Wrapper>
-            <HeroCard
-              title={slice.hero.title}
-              subTitle={slice.hero.subTitle}
-              link={
-                slice.hero.button && {
-                  text: slice.hero.button.text,
-                  onClick: handleHeroButtonClick,
-                }
-              }
-              image={
-                slice.hero.image && (
-                  <Image
-                    src={strapiMediaUrl(slice.hero.image.img, 'xLarge')}
-                    alt={slice.hero.image.alt}
-                    fill
-                    style={{ objectFit: slice.hero.image.objectFit || 'cover' }}
-                  />
-                )
-              }
-            />
-          </Wrapper>
-        </Box>
-      )}
-    </>
-  );
-};

package/src/slices/QAndA/index.ts

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

package/src/slices/QuoteCards/QuoteCards.stories.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import {
-  storybookStrapiAvatarMock,
-  storybookStrapiCoverMock,
-  storybookStrapiGradientTopDownMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import QuoteCards from '.';
-
-export default {
-  title: 'slices/QuoteCards',
-  component: QuoteCards,
-} as Meta<typeof QuoteCards>;
-
-const Template: StoryFn<typeof QuoteCards> = (args) => <QuoteCards {...args} />;
-
-const cards = [
-  {
-    id: 1,
-    text: 'Card text 1',
-    avatar: {
-      id: 1,
-      name: 'Avatar name',
-      description: 'Avatar description',
-      image: {
-        id: 1,
-        alt: 'Avatar image alt text',
-        img: { data: storybookStrapiAvatarMock },
-      },
-    },
-  },
-  {
-    id: 2,
-    text: 'Card text 2',
-    avatar: {
-      id: 1,
-      name: 'Avatar name',
-      description: 'Avatar description',
-      image: {
-        id: 1,
-        alt: 'Avatar image alt text',
-        img: { data: storybookStrapiAvatarMock },
-      },
-    },
-  },
-];
-const shapes = [
-  { id: 1, alt: 'Shape 1', img: { data: storybookStrapiCoverMock } },
-  { id: 2, alt: 'Shape 2', img: { data: storybookStrapiGradientTopDownMock } },
-];
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    cards: [cards[0]],
-  },
-};
-
-export const WithMultipleCards = Template.bind({});
-WithMultipleCards.args = {
-  slice: {
-    title: 'Title',
-    cards,
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    cards,
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    cards,
-  },
-};
-
-export const WithShapes = Template.bind({});
-WithShapes.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    shapes,
-    cards,
-  },
-};
-
-export const WithHero = Template.bind({});
-WithHero.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    shapes,
-    cards,
-    hero: {
-      id: 1,
-      title: 'Title',
-      subTitle: 'Sub title',
-      button: { id: 1, text: 'Button', url: 'https://tree.ly' },
-      image: {
-        id: 1,
-        alt: 'Hero image alt text',
-        img: { data: storybookStrapiCoverMock },
-      },
-    },
-  },
-};

package/src/slices/QuoteCards/QuoteCards.test.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiQuoteCardMock } from '../../test/strapiMocks/strapiQuoteCard';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import { strapiHeroCardMock } from '../../test/strapiMocks/strapiHeroCard';
-import QuoteCards from '.';
-import { QuoteCardsProps } from './QuoteCards';
-
-const defaultProps: QuoteCardsProps = {
-  slice: {
-    title: 'Title',
-    cards: [strapiQuoteCardMock],
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<QuoteCards {...combinedProps} />);
-};
-
-describe('The QuoteCards component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays the card', () => {
-    setup();
-
-    expect(screen.getByText(strapiQuoteCardMock.text)).toBeInTheDocument();
-  });
-
-  it('displays shapes if there are shapes in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        shapes: [
-          { id: 1, alt: 'alt 1', img: { data: strapiMediaMock } },
-          { id: 2, alt: 'alt 2', img: { data: strapiMediaMock } },
-        ],
-      },
-    });
-
-    expect(screen.getAllByRole('img')).toHaveLength(3);
-  });
-
-  it('displays a hero card if there is a hero in the slice', () => {
-    setup({ slice: { ...defaultProps.slice, hero: strapiHeroCardMock } });
-
-    expect(screen.getByText(strapiHeroCardMock.title)).toBeInTheDocument();
-  });
-});

package/src/slices/QuoteCards/QuoteCards.tsx

@@ -1,160 +0,0 @@
-import React, { useContext } from 'react';
-import Image from 'next/image';
-import {
-  Box,
-  DefaultSectionHeader,
-  HeroCard,
-  QuoteCard,
-  Shape,
-  SimpleGrid,
-  Wrapper,
-} from 'boemly';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiQuoteCard from '../../models/strapi/StrapiQuoteCard';
-import StrapiHeroCard from '../../models/strapi/StrapiHeroCard';
-import strapiLinkUrl from '../../utils/strapiLinkUrl';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import convertToKebabCase from '../../utils/convertToKebabCase';
-import { useRouter } from 'next/router';
-import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
-
-interface QuoteCardsSlice extends StrapiDefaultHeader {
-  cards: StrapiQuoteCard[];
-  shapes?: StrapiImage[];
-  hero?: StrapiHeroCard;
-}
-export interface QuoteCardsProps {
-  slice: QuoteCardsSlice;
-}
-
-export const QuoteCards: React.FC<QuoteCardsProps> = ({
-  slice,
-}: QuoteCardsProps) => {
-  const { push } = useRouter();
-  const analyticsFunction = useContext(AnalyticsContext);
-
-  const handleHeroCardButtonClick = () => {
-    if (slice.hero?.button) {
-      analyticsFunction?.({
-        type: 'track',
-        props: {
-          action: 'click',
-          component: 'QuoteCards',
-          buttonText: slice.hero.button.text,
-          buttonUrl: strapiLinkUrl(slice.hero.button),
-          section: 'hero',
-        },
-      });
-      push(strapiLinkUrl(slice.hero.button));
-    }
-  };
-
-  return (
-    <>
-      <Box
-        id={convertToKebabCase(slice.title)}
-        position="relative"
-        paddingTop="28"
-        paddingBottom={!!slice.hero ? '80' : '28'}
-      >
-        {slice.shapes && slice.shapes.length === 2 && (
-          <>
-            <Shape
-              shape={
-                <Image
-                  src={strapiMediaUrl(slice.shapes[0].img, 'small')}
-                  alt={slice.shapes[0].alt}
-                  fill
-                  style={{ objectFit: slice.shapes[0].objectFit || 'cover' }}
-                />
-              }
-              top="0"
-              right="0"
-              size="xs"
-              radius="bottom-left"
-            />
-            <Shape
-              shape={
-                <Image
-                  src={strapiMediaUrl(slice.shapes[1].img, 'small')}
-                  alt={slice.shapes[1].alt}
-                  fill
-                  style={{ objectFit: slice.shapes[1].objectFit || 'cover' }}
-                />
-              }
-              bottom="0"
-              left="0"
-              radius="top-right"
-            />
-          </>
-        )}
-        <Wrapper>
-          <Box maxW="3xl">
-            <DefaultSectionHeader
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.text}
-            />
-          </Box>
-          <SimpleGrid
-            columns={2}
-            gap="20"
-            rowGap="6"
-            mt="16"
-            minChildWidth={['100%', null, '16rem']}
-          >
-            {slice.cards.map((card) => (
-              <Box key={card.id} width="full" maxWidth="2xl">
-                <QuoteCard
-                  key={card.id}
-                  avatar={{
-                    name: card.avatar.name,
-                    description: card.avatar.description,
-                    image: (
-                      <Image
-                        src={strapiMediaUrl(card.avatar.image.img, 'small')}
-                        alt={card.avatar.image.alt}
-                        fill
-                        style={{
-                          objectFit: card.avatar.image.objectFit || 'cover',
-                        }}
-                      />
-                    ),
-                  }}
-                  text={card.text}
-                />
-              </Box>
-            ))}
-          </SimpleGrid>
-        </Wrapper>
-      </Box>
-      {slice.hero && (
-        <Box marginTop="-40" paddingBottom="28">
-          <Wrapper>
-            <HeroCard
-              title={slice.hero.title}
-              subTitle={slice.hero.subTitle}
-              link={
-                slice.hero.button && {
-                  text: slice.hero.button.text,
-                  onClick: handleHeroCardButtonClick,
-                }
-              }
-              image={
-                slice.hero.image && (
-                  <Image
-                    src={strapiMediaUrl(slice.hero.image.img, 'xLarge')}
-                    alt={slice.hero.image.alt}
-                    fill
-                    style={{ objectFit: slice.hero.image.objectFit || 'cover' }}
-                  />
-                )
-              }
-            />
-          </Wrapper>
-        </Box>
-      )}
-    </>
-  );
-};