@treely/strapi-slices 7.16.2 → 8.0.0

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

@@ -1,279 +0,0 @@
-import React from 'react';
-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',
-    blogPostCategory: { data: null },
-  },
-  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

@@ -1,209 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-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 { CaretRight } from '@phosphor-icons/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';
-import { IntlContext } from '../../components/ContextProvider';
-
-export interface BlogCardsProps {
-  slice: {
-    tagline: string;
-    title: string;
-    subTitle: string;
-    button?: StrapiLink;
-    variant: 'white' | 'gray';
-    blogPostCategory: IStrapi<IStrapiData<StrapiCategory> | null>;
-  };
-  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 } = useContext(IntlContext);
-  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} />}
-                component="BlogCards"
-              />
-            </Box>
-          </Flex>
-        )}
-        <Spacer height="14" />
-        <SimpleGrid
-          columns={[1, null, null, 3]}
-          spacingX={4}
-          spacingY={24}
-          flexShrink="0"
-        >
-          {blogPostsToDisplay.map((blogPost) => (
-            <BlogItemContainer
-              as={Link}
-              href={`/blog/${blogPost.attributes.slug}`}
-              data-testid="blog-item"
-              key={blogPost.attributes.slug}
-            >
-              <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.data
-                      ? {
-                          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>
-          ))}
-        </SimpleGrid>
-        <>
-          {mobile && slice.button && (
-            <>
-              <Box minWidth="40" mt="6">
-                <StrapiLinkButton
-                  link={slice.button}
-                  size="lg"
-                  variant="outline"
-                  rightIcon={<CaretRight color={gray700} />}
-                  component="BlogCards"
-                />
-              </Box>
-            </>
-          )}
-        </>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/BlogCards/index.ts

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

package/src/slices/CarouselMarqueeBanner/CarouselMarqueeBanner.stories.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import CarouselMarqueeBanner from '.';
-import {
-  storybookStrapiAvatarMock,
-  storybookStrapiCoverMock,
-  storybookStrapiTreeIconMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-
-export default {
-  title: 'slices/CarouselMarqueeBanner',
-  component: CarouselMarqueeBanner,
-} as Meta<typeof CarouselMarqueeBanner>;
-
-const Template: StoryFn<typeof CarouselMarqueeBanner> = (args) => (
-  <CarouselMarqueeBanner {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  slice: {
-    logos: [
-      {
-        id: 1,
-        alt: 'Alt text 1',
-        img: { data: storybookStrapiAvatarMock },
-      },
-      {
-        id: 2,
-        alt: 'Alt text 2',
-        img: { data: storybookStrapiAvatarMock },
-      },
-      {
-        id: 3,
-        alt: 'Alt text 3',
-        img: { data: storybookStrapiAvatarMock },
-      },
-      {
-        id: 4,
-        alt: 'Alt text 4',
-        img: { data: storybookStrapiTreeIconMock },
-      },
-      {
-        id: 5,
-        alt: 'Partner Logo 5',
-        img: { data: storybookStrapiAvatarMock },
-      },
-    ],
-  },
-};
-
-export const WithTitle = Template.bind({});
-WithTitle.args = {
-  slice: {
-    title: 'Supported by strong partners',
-    logos: [
-      {
-        id: 1,
-        alt: 'Partner Logo 1',
-        img: { data: storybookStrapiAvatarMock },
-      },
-      {
-        id: 2,
-        alt: 'Partner Logo 2',
-        img: { data: storybookStrapiAvatarMock },
-      },
-      {
-        id: 3,
-        alt: 'Partner Logo 3',
-        img: { data: storybookStrapiAvatarMock },
-      },
-      {
-        id: 4,
-        alt: 'Partner Logo 4',
-        img: { data: storybookStrapiTreeIconMock },
-      },
-      {
-        id: 5,
-        alt: 'Partner Logo 5',
-        img: { data: storybookStrapiCoverMock },
-      },
-    ],
-  },
-};