@treely/strapi-slices 7.17.0 → 8.0.1

package/src/models/strapi/StrapiTextCardWithIcons.ts

@@ -1,13 +0,0 @@
-import StrapiImage from './StrapiImage';
-import StrapiLink from './StrapiLink';
-
-interface StrapiTextCardWithIcon {
-  id: number;
-  title: string;
-  text: string;
-  icon: StrapiImage;
-  button?: StrapiLink;
-  image?: StrapiImage;
-}
-
-export default StrapiTextCardWithIcon;

package/src/models/strapi/StrapiTopBanner.ts

@@ -1,9 +0,0 @@
-import StrapiLink from './StrapiLink';
-
-interface StrapiTopBanner {
-  id: number;
-  title: string;
-  link?: StrapiLink;
-}
-
-export default StrapiTopBanner;

package/src/rootMessages.de.ts

@@ -1,53 +0,0 @@
-import comparisonMessagesDe from './slices/Comparison/messages.de';
-import creditsAvailableBadgeMessagesDe from './components/CreditsAvailableBadge/messages.de';
-import ctaMessagesDe from './slices/Cta/messages.de';
-import customerCardMessagesDe from './components/CustomerCard/messages.de';
-import customerQuoteCardMessagesDe from './components/CustomerQuoteCard/messages.de';
-import eventCardMessagesDe from './components/EventCard/messages.de';
-import eventsMessagesDe from './slices/Events/messages.de';
-import glossaryMessagesDe from './slices/Glossary/messages.de';
-import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
-import projectFactsMessagesDe from './slices/ProjectFacts/messages.de';
-import projectGridCardMessagesDe from './components/ProjectGridCard/messages.de';
-import projectsMapMessagesDe from './slices/ProjectsMap/messages.de';
-import portfolioProjectInfoMessagesDe from './components/portfolio/ProjectInfo/messages.de';
-import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
-import shopCheckoutMessagesDe from './slices/ShopCheckout/messages.de';
-import textCarouselMessagesDe from './slices/TextCarousel/messages.de';
-import timelineMessagesDe from './slices/Timeline/messages.de';
-
-import unitMessagesDe from './unit.messages.de';
-
-const rootMessagesDe = {
-  //
-  // Components
-  //
-  ...creditsAvailableBadgeMessagesDe,
-  ...eventCardMessagesDe,
-  ...portfolioDocumentsDownloadListMessagesDe,
-  ...portfolioProjectInfoMessagesDe,
-  ...portfolioSmallCheckoutMessagesDe,
-  ...projectGridCardMessagesDe,
-
-  //
-  // Slices
-  //
-  ...comparisonMessagesDe,
-  ...ctaMessagesDe,
-  ...customerCardMessagesDe,
-  ...customerQuoteCardMessagesDe,
-  ...eventsMessagesDe,
-  ...glossaryMessagesDe,
-  ...projectFactsMessagesDe,
-  ...projectsMapMessagesDe,
-  ...shopCheckoutMessagesDe,
-  ...textCarouselMessagesDe,
-  ...timelineMessagesDe,
-
-  //
-  // Units
-  //
-  ...unitMessagesDe,
-};
-
-export default rootMessagesDe;

package/src/rootMessages.en.ts

@@ -1,53 +0,0 @@
-import comparisonMessagesEn from './slices/Comparison/messages.en';
-import creditsAvailableBadgeMessagesEn from './components/CreditsAvailableBadge/messages.en';
-import ctaMessagesEn from './slices/Cta/messages.en';
-import customerCardMessagesEn from './components/CustomerCard/messages.en';
-import customerQuoteCardMessagesEn from './components/CustomerQuoteCard/messages.en';
-import eventCardMessagesEn from './components/EventCard/messages.en';
-import eventsMessagesEn from './slices/Events/messages.en';
-import glossaryMessagesEn from './slices/Glossary/messages.en';
-import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/DocumentsDownloadList/messages.en';
-import projectFactsMessagesEn from './slices/ProjectFacts/messages.en';
-import projectGridCardMessagesEn from './components/ProjectGridCard/messages.en';
-import projectsMapMessagesEn from './slices/ProjectsMap/messages.en';
-import portfolioProjectInfoMessagesEn from './components/portfolio/ProjectInfo/messages.en';
-import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
-import shopCheckoutMessagesEn from './slices/ShopCheckout/messages.en';
-import textCarouselMessagesEn from './slices/TextCarousel/messages.en';
-import timelineMessagesEn from './slices/Timeline/messages.en';
-
-import unitMessagesEn from './unit.messages.en';
-
-const rootMessagesEn = {
-  //
-  // Components
-  //
-  ...creditsAvailableBadgeMessagesEn,
-  ...eventCardMessagesEn,
-  ...portfolioDocumentsDownloadListMessagesEn,
-  ...portfolioProjectInfoMessagesEn,
-  ...portfolioSmallCheckoutMessagesEn,
-  ...projectGridCardMessagesEn,
-
-  //
-  // Slices
-  //
-  ...comparisonMessagesEn,
-  ...ctaMessagesEn,
-  ...customerCardMessagesEn,
-  ...customerQuoteCardMessagesEn,
-  ...eventsMessagesEn,
-  ...glossaryMessagesEn,
-  ...projectFactsMessagesEn,
-  ...projectsMapMessagesEn,
-  ...shopCheckoutMessagesEn,
-  ...textCarouselMessagesEn,
-  ...timelineMessagesEn,
-
-  //
-  // Units
-  //
-  ...unitMessagesEn,
-};
-
-export default rootMessagesEn;

package/src/slices/Blog/Blog.test.tsx

@@ -1,147 +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 { BlogProps } from './Blog';
-import Blog from '.';
-
-const defaultProps: BlogProps = {
-  slice: {
-    blog_posts: [
-      {
-        ...strapiBlogPostMock,
-        attributes: {
-          ...strapiBlogPostMock.attributes,
-          createdAt: '2022-01-10T15:04:32.897Z',
-        },
-      },
-    ],
-  },
-  blogPosts: [strapiBlogPostMock],
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Blog {...combinedProps} />);
-};
-
-describe('The Blog component', () => {
-  it('displays all the post titles', () => {
-    setup();
-
-    expect(
-      screen.getByText(strapiBlogPostMock.attributes.title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays the category if the blog post includes a 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 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('sorts the blog posts by date', () => {
-    setup({
-      slice: {
-        blog_posts: [
-          {
-            ...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',
-            },
-          },
-        ],
-      },
-      blogPosts: [
-        strapiBlogPostMock,
-        {
-          ...strapiBlogPostMock,
-          attributes: {
-            ...strapiBlogPostMock.attributes,
-            slug: 'my-slug',
-            title: 'My Title',
-          },
-        },
-      ],
-    });
-
-    expect(screen.getAllByRole('heading')[0].textContent).toBe('My Title');
-    expect(screen.getAllByRole('heading')[1].textContent).toBe(
-      strapiBlogPostMock.attributes.title
-    );
-  });
-});

package/src/slices/Blog/Blog.tsx

@@ -1,112 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  DatePersonPair,
-  DefaultSectionContainer,
-  Heading,
-  SimpleGrid,
-  Spacer,
-  Text,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import Link from 'next/link';
-import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import IStrapiData from '../../models/strapi/IStrapiData';
-import { BlogItemContainer, ImageContainer } from './styles';
-import { IntlContext } from '../../components/ContextProvider';
-
-export interface BlogProps {
-  slice: {
-    blog_posts: IStrapiData<StrapiBlogPost>[];
-  };
-  blogPosts: IStrapiData<StrapiBlogPost>[];
-}
-
-export const Blog: React.FC<BlogProps> = ({ slice, blogPosts }: BlogProps) => {
-  const { formatDate } = useContext(IntlContext);
-  const sortedBlogPosts = slice.blog_posts.sort(
-    (a, b) =>
-      new Date(b.attributes.createdAt).getTime() -
-      new Date(a.attributes.createdAt).getTime()
-  );
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <SimpleGrid columns={[1, null, null, 2]} spacingX={56} spacingY={24}>
-          {sortedBlogPosts.map(({ attributes }) => {
-            const blogPost: IStrapiData<StrapiBlogPost> | undefined =
-              blogPosts.find((bp) => bp.attributes.slug === attributes.slug);
-            if (!blogPost) {
-              return null;
-            }
-            return (
-              <BlogItemContainer
-                key={blogPost.attributes.slug}
-                as={Link}
-                href={`/blog/${blogPost.attributes.slug}`}
-              >
-                <ImageContainer>
-                  <Image
-                    src={strapiMediaUrl(blogPost.attributes.img.img, 'large')}
-                    alt={blogPost.attributes.img.alt}
-                    fill
-                    style={{
-                      objectFit: blogPost.attributes.img.objectFit || 'cover',
-                    }}
-                  />
-                </ImageContainer>
-                <Box px="2" py="8">
-                  {blogPost.attributes.category.data && (
-                    <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>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/Blog/index.ts

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

package/src/slices/Blog/styles.ts

@@ -1,38 +0,0 @@
-import styled from '@emotion/styled';
-import { BREAKPOINT_MD } from '../../constants/breakpoints';
-import { Box, Link } from 'boemly';
-
-export const BlogItemContainer = styled(Link)`
-  text-decoration: none;
-
-  & div img {
-    transition: transform var(--default-ease) var(--medium-transition-duration);
-  }
-
-  &:hover {
-    text-decoration: none;
-
-    & > div:first-of-type img {
-      transform: scale(1.03);
-    }
-  }
-`;
-
-export const ImageContainer = styled(Box)`
-  width: 100%;
-  height: var(--boemly-sizes-xs);
-  position: relative;
-  border-radius: var(--boemly-radii-2xl);
-
-  // Fixes the flickering of borders during animation in Safari
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
-
-  & span,
-  div {
-    border-radius: var(--boemly-radii-2xl);
-  }
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    height: var(--boemly-sizes-3xs);
-  }
-`;

package/src/slices/BlogCards/BlogCards.stories.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import {
-  storybookStrapiAvatarMock,
-  storybookStrapiCoverMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
-import IStrapiData from '../../models/strapi/IStrapiData';
-import BlogCards from '.';
-import { IStrapi, StrapiCategory } from '../..';
-
-export default {
-  title: 'slices/BlogCards',
-  component: BlogCards,
-} as Meta<typeof BlogCards>;
-
-const Template: StoryFn<typeof BlogCards> = (args) => <BlogCards {...args} />;
-const blogPostCategory: IStrapi<IStrapiData<StrapiCategory>> = {
-  data: {
-    id: 1,
-    attributes: {
-      name: 'Business',
-      locale: 'en',
-      createdAt: '2022-01-10T14:59:44.830Z',
-      updatedAt: '2022-01-10T14:59:44.839Z',
-    },
-  },
-};
-const blogPost: IStrapiData<StrapiBlogPost> = {
-  id: 1,
-  attributes: {
-    title: 'Title',
-    slug: 'slug',
-    teaser:
-      'A collection of helpful tips to guide anyone who’s just getting started with learning about accessibility and accessible design.',
-
-    author: {
-      data: {
-        id: 1,
-        attributes: {
-          name: 'Lukas Bals',
-          locale: 'en',
-          createdAt: '2022-01-10T15:36:45.012Z',
-          updatedAt: '2022-01-10T15:36:45.042Z',
-          img: {
-            id: 72,
-            alt: 'Lukas Bals',
-            img: {
-              data: storybookStrapiAvatarMock,
-            },
-          },
-        },
-      },
-    },
-    category: blogPostCategory,
-    locale: 'en',
-    createdAt: '2022-01-10T15:04:32.897Z',
-    updatedAt: '2022-01-11T10:21:42.317Z',
-    metadata: null,
-    img: {
-      id: 71,
-      alt: 'Alt',
-      img: {
-        data: storybookStrapiCoverMock,
-      },
-    },
-    slices: [
-      {
-        __component: 'sections.rich-text',
-        id: 6,
-        content: '# This is my rich text!',
-      },
-    ],
-    localizations: [
-      {
-        id: 2,
-        locale: 'de',
-      },
-    ],
-  },
-};
-
-export const White = Template.bind({});
-White.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    variant: 'white',
-    blogPostCategory,
-  },
-  blogPosts: [
-    blogPost,
-    {
-      ...blogPost,
-      id: 2,
-      attributes: { ...blogPost.attributes, title: 'Title 2' },
-    },
-    {
-      ...blogPost,
-      id: 3,
-      attributes: { ...blogPost.attributes, title: 'Title 3' },
-    },
-  ],
-};
-
-export const Gray = Template.bind({});
-Gray.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    variant: 'gray',
-    blogPostCategory,
-  },
-  blogPosts: [
-    blogPost,
-    {
-      ...blogPost,
-      id: 2,
-      attributes: { ...blogPost.attributes, title: 'Title 2' },
-    },
-    {
-      ...blogPost,
-      id: 3,
-      attributes: { ...blogPost.attributes, title: 'Title 3' },
-    },
-  ],
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    variant: 'white',
-    blogPostCategory,
-    button: { id: 1, url: 'url', text: 'Button' },
-  },
-  blogPosts: [
-    blogPost,
-    {
-      ...blogPost,
-      id: 2,
-      attributes: { ...blogPost.attributes, title: 'Title 2' },
-    },
-    {
-      ...blogPost,
-      id: 3,
-      attributes: { ...blogPost.attributes, title: 'Title 3' },
-    },
-  ],
-};