@treely/strapi-slices 1.0.0

package/src/slices/BlogCards/BlogCards.test.tsx

@@ -0,0 +1,277 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiBlogPostMock } from '@/test/strapiMocks/strapiBlogPost';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import { mergeDeep } from '@/utils/mergeDeep';
+import BlogCards from '.';
+import { BlogCardsProps } from './BlogCards';
+
+const defaultProps: BlogCardsProps = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Main Title',
+    subTitle: 'Subtitle',
+    variant: 'white',
+  },
+  blogPosts: [strapiBlogPostMock],
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<BlogCards {...combinedProps} />);
+};
+
+describe('The BlogCards component', () => {
+  it('displays the title', () => {
+    setup();
+
+    expect(screen.getByText('Main Title')).toBeInTheDocument();
+  });
+
+  it('displays the post titles', () => {
+    setup();
+
+    expect(
+      screen.getByText(strapiBlogPostMock.attributes.title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the category', () => {
+    setup({
+      blogPosts: [
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            category: {
+              data: {
+                attributes: {
+                  name: 'Category',
+                },
+              },
+            },
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByText('Category')).toBeInTheDocument();
+  });
+
+  it('displays a teaser if the blog post includes a teaser', () => {
+    setup({
+      blogPosts: [
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            teaser: 'Teaser',
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByText('Teaser')).toBeInTheDocument();
+  });
+  it('displays a button if the button is defined in slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        button: { url: 'url', text: 'Button' },
+      },
+    });
+
+    expect(screen.getByText('Button')).toBeInTheDocument();
+  });
+
+  it('displays an author if the blog post includes an author', () => {
+    setup({
+      blogPosts: [
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            author: {
+              data: {
+                attributes: {
+                  name: 'Author',
+                  img: { id: 1, alt: 'Alt', img: { data: strapiMediaMock } },
+                },
+              },
+            },
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByText('Author')).toBeInTheDocument();
+  });
+
+  it('displays nothing if the blog post that should be displayed does not exists in the delivered blog posts', () => {
+    setup({ blogPosts: [] });
+
+    expect(
+      screen.queryByText(strapiBlogPostMock.attributes.title)
+    ).not.toBeInTheDocument();
+  });
+
+  it('displays only three latest blog posts', () => {
+    setup({
+      blogPosts: [
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: strapiBlogPostMock.attributes.slug,
+            createdAt: '2022-01-10T15:04:32.897Z',
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'my-slug',
+            createdAt: '2022-01-12T15:04:32.897Z',
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-1',
+            createdAt: '2022-01-16T15:04:32.897Z',
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-2',
+            createdAt: '2022-01-14T15:04:32.897Z',
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-3',
+            createdAt: '2022-01-20T15:04:32.897Z',
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByText('1/14/2022')).toBeInTheDocument();
+    expect(screen.getByText('1/16/2022')).toBeInTheDocument();
+    expect(screen.getByText('1/20/2022')).toBeInTheDocument();
+  });
+
+  it('displays three latest filtered by category blog posts, if the filter is applied', () => {
+    setup({
+      slice: {
+        blogPostCategory: {
+          data: {
+            attributes: {
+              name: 'About',
+            },
+          },
+        },
+      },
+      blogPosts: [
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: strapiBlogPostMock.attributes.slug,
+            createdAt: '2022-01-10T15:04:32.897Z',
+            category: {
+              data: {
+                attributes: {
+                  name: 'About',
+                },
+              },
+            },
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'my-slug',
+            createdAt: '2022-01-12T15:04:32.897Z',
+            category: {
+              data: {
+                attributes: {
+                  name: 'About',
+                },
+              },
+            },
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-1',
+            createdAt: '2022-01-16T15:04:32.897Z',
+            category: {
+              data: {
+                attributes: {
+                  name: 'Forest',
+                },
+              },
+            },
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-2',
+            createdAt: '2022-01-14T15:04:32.897Z',
+            category: {
+              data: {
+                attributes: {
+                  name: 'Tech',
+                },
+              },
+            },
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-3',
+            createdAt: '2022-01-20T15:04:32.897Z',
+            category: {
+              data: {
+                attributes: {
+                  name: 'About',
+                },
+              },
+            },
+          },
+        },
+        {
+          ...strapiBlogPostMock,
+          attributes: {
+            ...strapiBlogPostMock.attributes,
+            slug: 'slug-4',
+            createdAt: '2022-01-11T15:04:32.897Z',
+            category: {
+              data: {
+                attributes: {
+                  name: 'About',
+                },
+              },
+            },
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByText('1/11/2022')).toBeInTheDocument();
+    expect(screen.getByText('1/12/2022')).toBeInTheDocument();
+    expect(screen.getByText('1/20/2022')).toBeInTheDocument();
+  });
+});

package/src/slices/BlogCards/BlogCards.tsx

@@ -0,0 +1,210 @@
+import {
+  Text,
+  Heading,
+  Spacer,
+  DatePersonPair,
+  DefaultSectionHeader,
+  DefaultSectionContainer,
+  Wrapper,
+  SimpleGrid,
+  Box,
+  Flex,
+  useMediaQuery,
+  useToken,
+} from 'boemly';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useIntl } from 'react-intl';
+import { CaretRight } from '@phosphor-icons/react';
+import { useMemo } from 'react';
+import StrapiBlogPost from '@/models/strapi/StrapiBlogPost';
+import IStrapiData from '@/models/strapi/IStrapiData';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiCategory from '@/models/strapi/StrapiCategory';
+import IStrapi from '@/models/strapi/IStrapi';
+import { BREAKPOINT_LG_QUERY } from '@/constants/breakpoints';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import { BlogItemContainer, ImageContainer } from '../Blog/styles';
+
+export interface BlogCardsProps {
+  slice: {
+    tagline: string;
+    title: string;
+    subTitle: string;
+    button?: StrapiLink;
+    variant: 'white' | 'gray';
+    blogPostCategory?: IStrapi<IStrapiData<StrapiCategory>>;
+  };
+  blogPosts: IStrapiData<StrapiBlogPost>[];
+}
+
+const VARIANTS = {
+  white: {
+    backgroundColor: 'white',
+  },
+  gray: {
+    backgroundColor: 'primary.50',
+  },
+};
+
+const sortByCreatedAt = (
+  a: IStrapiData<StrapiBlogPost>,
+  b: IStrapiData<StrapiBlogPost>
+): number =>
+  new Date(b.attributes.createdAt).getTime() -
+  new Date(a.attributes.createdAt).getTime();
+
+export const BlogCards: React.FC<BlogCardsProps> = ({
+  slice,
+  blogPosts,
+}: BlogCardsProps) => {
+  const { formatDate } = useIntl();
+  const [mobile] = useMediaQuery(BREAKPOINT_LG_QUERY);
+  const [gray700] = useToken('colors', ['gray.700']);
+
+  const sortedBlogPosts = useMemo(
+    () => blogPosts.sort(sortByCreatedAt),
+    [blogPosts]
+  );
+
+  const blogPostsToDisplay = useMemo(
+    () =>
+      slice.blogPostCategory?.data?.attributes.name
+        ? sortedBlogPosts
+            .filter(
+              (blogPost) =>
+                blogPost.attributes.category?.data.attributes.name ===
+                slice.blogPostCategory?.data?.attributes.name
+            )
+            .slice(0, 3)
+        : sortedBlogPosts.slice(0, 3),
+    [sortedBlogPosts, slice]
+  );
+
+  return (
+    <DefaultSectionContainer
+      backgroundColor={VARIANTS[slice.variant].backgroundColor}
+      title={slice.title}
+    >
+      <Wrapper>
+        {mobile || !slice.button ? (
+          <DefaultSectionHeader
+            tagline={slice.tagline}
+            title={slice.title}
+            text={slice.subTitle}
+            titleProps={{ maxW: '2xl' }}
+            textProps={{ maxW: '2xl' }}
+          />
+        ) : (
+          <Flex justifyContent="space-between" alignItems="center" gap="60">
+            <Box>
+              <DefaultSectionHeader
+                tagline={slice.tagline}
+                title={slice.title}
+                text={slice.subTitle}
+              />
+            </Box>
+            <Box minWidth="40">
+              <StrapiLinkButton
+                link={slice.button}
+                size="lg"
+                variant="outline"
+                rightIcon={<CaretRight color={gray700} />}
+              />
+            </Box>
+          </Flex>
+        )}
+        <Spacer height="14" />
+        <SimpleGrid
+          columns={[1, null, null, 3]}
+          spacingX={4}
+          spacingY={24}
+          flexShrink="0"
+        >
+          {blogPostsToDisplay.map((blogPost) => (
+            <Link
+              href={`/blog/${blogPost.attributes.slug}`}
+              passHref
+              key={blogPost.attributes.slug}
+              legacyBehavior
+            >
+              <BlogItemContainer data-testid="blog-item">
+                <ImageContainer>
+                  <Image
+                    src={strapiMediaUrl(blogPost.attributes.img.img, 'medium')}
+                    alt={blogPost.attributes.img.alt}
+                    fill
+                    style={{
+                      objectFit: blogPost.attributes.img.objectFit || 'cover',
+                    }}
+                  />
+                </ImageContainer>
+                <Box px="2" py="8">
+                  {blogPost.attributes.category && (
+                    <Text size="smMonoUppercase" color="primary.800" mb="2">
+                      {blogPost.attributes.category.data.attributes.name}
+                    </Text>
+                  )}
+                  <Heading size="lg">{blogPost.attributes.title}</Heading>
+                  {blogPost.attributes.teaser && (
+                    <Text size="mdRegularNormal" mt="2">
+                      {blogPost.attributes.teaser}
+                    </Text>
+                  )}
+
+                  <Spacer height="4" />
+
+                  <DatePersonPair
+                    date={formatDate(blogPost.attributes.createdAt)}
+                    person={
+                      blogPost.attributes.author
+                        ? {
+                            name: blogPost.attributes.author.data.attributes
+                              .name,
+                            image: (
+                              <Image
+                                src={strapiMediaUrl(
+                                  blogPost.attributes.author.data.attributes.img
+                                    .img,
+                                  'thumbnail'
+                                )}
+                                alt={
+                                  blogPost.attributes.author.data.attributes.img
+                                    .alt
+                                }
+                                fill
+                                style={{
+                                  objectFit:
+                                    blogPost.attributes.author.data.attributes
+                                      .img.objectFit || 'cover',
+                                }}
+                              />
+                            ),
+                          }
+                        : undefined
+                    }
+                  />
+                </Box>
+              </BlogItemContainer>
+            </Link>
+          ))}
+        </SimpleGrid>
+        <>
+          {mobile && slice.button && (
+            <>
+              <Box minWidth="40" mt="6">
+                <StrapiLinkButton
+                  link={slice.button}
+                  size="lg"
+                  variant="outline"
+                  rightIcon={<CaretRight color={gray700} />}
+                />
+              </Box>
+            </>
+          )}
+        </>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/BlogCards/index.ts

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

package/src/slices/Comparison/Comparison.stories.tsx

@@ -0,0 +1,123 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { storybookStrapiTreeIconMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import Comparison from '.';
+import { ComparisonCard } from './Comparison';
+
+export default {
+  title: 'sections/Comparison',
+  component: Comparison,
+} as Meta<typeof Comparison>;
+
+const Template: StoryFn<typeof Comparison> = (args) => <Comparison {...args} />;
+
+const comparisonCard: ComparisonCard = {
+  id: 1,
+  title: 'Title',
+  subTitle: 'Subtitle',
+  badge: 'Badge',
+  variant: 'white',
+  image: {
+    id: 71,
+    alt: 'Alt',
+    img: { data: storybookStrapiTreeIconMock },
+    objectFit: 'contain',
+  },
+  button: {
+    id: 1,
+    text: 'Button',
+    url: 'https://tree.ly',
+  },
+  factTitle: 'Fact Title',
+  factSubtitle: 'Fact Subtitle',
+  lists: [
+    {
+      id: '1',
+      title: 'Title',
+      items: [
+        {
+          id: '1',
+          text: 'Text',
+          icon: 'bullet',
+        },
+        {
+          id: '2',
+          text: 'Text',
+          icon: 'check',
+        },
+        {
+          id: '3',
+          text: 'Text',
+          icon: 'cross',
+        },
+      ],
+    },
+    {
+      id: '2',
+      title: 'Title',
+      items: [
+        {
+          id: '1',
+          text: 'Text',
+          icon: 'bullet',
+        },
+        {
+          id: '2',
+          text: 'Text',
+          icon: 'check',
+        },
+        {
+          id: '3',
+          text: 'Text',
+          icon: 'cross',
+        },
+      ],
+    },
+  ],
+};
+
+export const White = Template.bind({});
+White.args = {
+  slice: {
+    comparisonCards: [
+      comparisonCard,
+      { ...comparisonCard, id: 2 },
+      { ...comparisonCard, id: 3 },
+    ],
+  },
+};
+
+export const Gray = Template.bind({});
+Gray.args = {
+  slice: {
+    comparisonCards: [
+      { ...comparisonCard, variant: 'gray' },
+      { ...comparisonCard, id: 2, variant: 'gray' },
+      { ...comparisonCard, id: 3, variant: 'gray' },
+    ],
+  },
+};
+
+export const WithGreen = Template.bind({});
+WithGreen.args = {
+  slice: {
+    comparisonCards: [
+      { ...comparisonCard, variant: 'gray' },
+      { ...comparisonCard, id: 2, variant: 'green' },
+      { ...comparisonCard, id: 3 },
+    ],
+  },
+};
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  slice: {
+    title: 'Title',
+    subTitle: 'Subtitle',
+    tagline: 'Tagline',
+    comparisonCards: [
+      { ...comparisonCard, variant: 'gray' },
+      { ...comparisonCard, id: 2, variant: 'green' },
+      { ...comparisonCard, id: 3 },
+    ],
+  },
+};