@treely/strapi-slices 1.0.0

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

@@ -0,0 +1,67 @@
+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' },
+    ],
+  },
+};
+
+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

@@ -0,0 +1,157 @@
+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';
+
+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;
+  };
+}
+
+export const QAndA: React.FC<QAndAProps> = ({ slice }: QAndAProps) => {
+  const { push } = useRouter();
+
+  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={0}
+                  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}
+                  />
+                </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: () => push(strapiLinkUrl(slice.hero?.button)),
+                }
+              }
+              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

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

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

@@ -0,0 +1,118 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import {
+  storybookStrapiAvatarMock,
+  storybookStrapiCoverMock,
+  storybookStrapiGradientTopDownMock,
+} from '@/test/storybookMocks/storybookStrapiMedia';
+import QuoteCards from '.';
+
+export default {
+  title: 'sections/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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,135 @@
+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 { QuoteCardHeroContainer, QuoteCardsContainer } from './styles';
+
+interface QuoteCardsSlice extends StrapiDefaultHeader {
+  cards: StrapiQuoteCard[];
+  shapes?: StrapiImage[];
+  hero?: StrapiHeroCard;
+}
+export interface QuoteCardsProps {
+  slice: QuoteCardsSlice;
+}
+
+export const QuoteCards: React.FC<QuoteCardsProps> = ({
+  slice,
+}: QuoteCardsProps) => (
+  <>
+    <QuoteCardsContainer
+      withHero={!!slice.hero}
+      id={convertToKebabCase(slice.title)}
+    >
+      {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>
+    </QuoteCardsContainer>
+    {slice.hero && (
+      <QuoteCardHeroContainer>
+        <Wrapper>
+          <HeroCard
+            title={slice.hero.title}
+            subTitle={slice.hero.subTitle}
+            link={
+              slice.hero.button && {
+                text: slice.hero.button.text,
+                onClick: () => strapiLinkUrl(slice.hero?.button),
+              }
+            }
+            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>
+      </QuoteCardHeroContainer>
+    )}
+  </>
+);

package/src/slices/QuoteCards/index.ts

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

package/src/slices/QuoteCards/styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+interface QuoteCardsContainerProps {
+  withHero: boolean;
+}
+
+export const QuoteCardsContainer = styled.div<QuoteCardsContainerProps>`
+  position: relative;
+  padding-top: var(--boemly-space-28);
+  padding-bottom: ${({ withHero }) =>
+    withHero ? 'var(--boemly-space-80)' : 'var(--boemly-space-28)'};
+`;
+
+export const QuoteCardHeroContainer = styled.div`
+  margin-top: calc(var(--boemly-space-40) * -1);
+  padding-bottom: var(--boemly-space-28);
+`;

package/src/slices/RichTextSection/RichTextSection.stories.tsx

@@ -0,0 +1,27 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import RichTextSection from '.';
+
+export default {
+  title: 'sections/RichTextSection',
+  component: RichTextSection,
+} as Meta<typeof RichTextSection>;
+
+const Template: StoryFn<typeof RichTextSection> = (args) => (
+  <RichTextSection {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    content: `
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+Text
+`,
+  },
+};

package/src/slices/RichTextSection/RichTextSection.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@/test/testUtils';
+import RichTextSection from '.';
+import { RichTextSectionProps } from './RichTextSection';
+
+const defaultProps: RichTextSectionProps = {
+  slice: { content: 'Content' },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<RichTextSection {...combinedProps} />);
+};
+
+describe('The RichText component', () => {
+  it('displays the content', () => {
+    setup();
+
+    expect(screen.getByText(defaultProps.slice.content)).toBeInTheDocument();
+  });
+});

package/src/slices/RichTextSection/RichTextSection.tsx

@@ -0,0 +1,27 @@
+import {
+  DefaultSectionContainer,
+  Grid,
+  GridItem,
+  RichText,
+  Wrapper,
+} from 'boemly';
+
+export interface RichTextSectionProps {
+  slice: {
+    content: string;
+  };
+}
+
+export const RichTextSection: React.FC<RichTextSectionProps> = ({
+  slice,
+}: RichTextSectionProps) => (
+  <DefaultSectionContainer>
+    <Wrapper>
+      <Grid templateColumns="repeat(12, 1fr)" gap="4">
+        <GridItem colSpan={[12, null, null, 7]}>
+          <RichText content={slice.content} />
+        </GridItem>
+      </Grid>
+    </Wrapper>
+  </DefaultSectionContainer>
+);

package/src/slices/RichTextSection/index.ts

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