@treely/strapi-slices 1.0.0

package/src/rootMessages.en.ts

@@ -0,0 +1,41 @@
+import comparisonMessagesEn from '@/slices/Comparison/messages.en';
+import ctaMessagesEn from '@/slices/Cta/messages.en';
+import customerStoriesEn from '@/slices/CustomerStories/messages.en';
+import glossaryMessagesEn from '@/slices/Glossary/messages.en';
+import projectFactsMessagesEn from '@/slices/ProjectFacts/messages.en';
+import projectsMapMessagesEn from '@/slices/ProjectsMap/messages.en';
+import shopCheckoutMessagesEn from '@/slices/ShopCheckout/messages.en';
+import creditsAvailableBadgeMessagesEn from '@/components/CreditsAvailableBadge/messages.en';
+import portfolioDocumentsDownloadListMessagesEn from '@/components/portfolio/DocumentsDownloadList/messages.en';
+import portfolioProjectInfoMessagesEn from '@/components/portfolio/ProjectInfo/messages.en';
+import portfolioSmallCheckoutMessagesEn from '@/components/portfolio/SmallCheckout/messages.en';
+
+import unitMessagesEn from './unit.messages.en';
+
+const rootMessagesEn = {
+  //
+  // Components
+  //
+  ...creditsAvailableBadgeMessagesEn,
+  ...portfolioDocumentsDownloadListMessagesEn,
+  ...portfolioProjectInfoMessagesEn,
+  ...portfolioSmallCheckoutMessagesEn,
+
+  //
+  // Sections
+  //
+  ...comparisonMessagesEn,
+  ...ctaMessagesEn,
+  ...customerStoriesEn,
+  ...glossaryMessagesEn,
+  ...projectFactsMessagesEn,
+  ...projectsMapMessagesEn,
+  ...shopCheckoutMessagesEn,
+
+  //
+  // Units
+  //
+  ...unitMessagesEn,
+};
+
+export default rootMessagesEn;

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

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

@@ -0,0 +1,114 @@
+import {
+  Box,
+  DatePersonPair,
+  DefaultSectionContainer,
+  Heading,
+  SimpleGrid,
+  Spacer,
+  Text,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { useIntl } from 'react-intl';
+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';
+
+export interface BlogProps {
+  slice: {
+    blog_posts: IStrapiData<StrapiBlogPost>[];
+  };
+  blogPosts: IStrapiData<StrapiBlogPost>[];
+}
+
+export const Blog: React.FC<BlogProps> = ({ slice, blogPosts }: BlogProps) => {
+  const { formatDate } = useIntl();
+  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 (
+              <Link
+                href={`/blog/${blogPost.attributes.slug}`}
+                passHref
+                key={blogPost.attributes.slug}
+                legacyBehavior
+              >
+                <BlogItemContainer>
+                  <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 && (
+                      <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>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/Blog/index.ts

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

package/src/slices/Blog/styles.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_MD } from '@/constants/breakpoints';
+
+export const BlogItemContainer = styled.a`
+  cursor: pointer;
+  & div img {
+    transition: transform var(--default-ease) var(--medium-transition-duration);
+  }
+
+  &:hover {
+    & > div:first-of-type img {
+      transform: scale(1.03);
+    }
+  }
+`;
+
+export const ImageContainer = styled.div`
+  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

@@ -0,0 +1,148 @@
+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 '.';
+
+export default {
+  title: 'sections/BlogCards',
+  component: BlogCards,
+} as Meta<typeof BlogCards>;
+
+const Template: StoryFn<typeof BlogCards> = (args) => <BlogCards {...args} />;
+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: {
+      data: {
+        id: 1,
+        attributes: {
+          name: 'Business',
+          locale: 'en',
+          createdAt: '2022-01-10T14:59:44.830Z',
+          updatedAt: '2022-01-10T14:59:44.839Z',
+        },
+      },
+    },
+    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',
+  },
+  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',
+  },
+  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',
+    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' },
+    },
+  ],
+};