@treely/strapi-slices 3.3.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "3.3.0",
+  "version": "4.1.0",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -39,6 +39,7 @@ import StrapiCustomerStory from '../../models/strapi/StrapiCustomerStory';
 import Comparison from '../../slices/Comparison';
 import Locale from '../../models/Locale';
 import { ContextProvider } from '../ContextProvider';
+import Timeline from '../../slices/Timeline';
 
 export interface CustomSliceProps {
   slice: any;
@@ -296,6 +297,10 @@ export const SliceRenderer = ({
               slice={slice}
             />
           );
+        case 'sections.timeline':
+          return (
+            <Timeline key={`${slice.__component}-${slice.id}`} slice={slice} />
+          );
         default:
           if (CustomSlice) {
             return (

package/src/constants/{sectionsConfig.ts → slicesConfig.ts}

@@ -9,12 +9,9 @@ export const DARK_THEME_HEADER_SECTIONS = [
   'sections.hero',
   'sections.small-hero',
 ];
-export const SECTIONS_WITH_BLOG_POSTS = [
-  'sections.blog',
-  'sections.blog-cards',
-];
-export const SECTIONS_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
-export const SECTIONS_WITH_PROJECTS = [
+export const SLICES_WITH_BLOG_POSTS = ['sections.blog', 'sections.blog-cards'];
+export const SLICES_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
+export const SLICES_WITH_PROJECTS = [
   'sections.projects-grid',
   'sections.projects-map',
   'sections.project-facts',

package/src/index.tsx

@@ -52,12 +52,6 @@ import mergeGlobalAndStrapiProjectData from './utils/mergeGlobalAndStrapiProject
 import strapiLinkUrl from './utils/strapiLinkUrl';
 import strapiMediaUrl from './utils/strapiMediaUrl';
 
-import {
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_CUSTOMER_STORIES,
-  SECTIONS_WITH_PROJECTS,
-} from './constants/sectionsConfig';
-
 export * from './components/SEOTags';
 export * from './components/SliceRenderer';
 
@@ -69,11 +63,6 @@ export {
   mergeGlobalAndStrapiProjectData,
   strapiLinkUrl,
   strapiMediaUrl,
-
-  // Constants
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_CUSTOMER_STORIES,
-  SECTIONS_WITH_PROJECTS,
 };
 
 export type {

package/src/rootMessages.de.ts

@@ -10,6 +10,7 @@ import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/Doc
 import portfolioProjectInfoMessagesDe from './components/portfolio/ProjectInfo/messages.de';
 import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
 import portfolioProjectCardMessagesDe from './components/portfolio/PortfolioProjectCard/messages.de';
+import timelineMessagesDe from './slices/Timeline/messages.de';
 
 import unitMessagesDe from './unit.messages.en';
 
@@ -33,6 +34,7 @@ const rootMessagesDe = {
   ...projectFactsMessagesDe,
   ...projectsMapMessagesDe,
   ...shopCheckoutMessagesDe,
+  ...timelineMessagesDe,
 
   //
   // Units

package/src/rootMessages.en.ts

@@ -10,6 +10,7 @@ import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/Doc
 import portfolioProjectInfoMessagesEn from './components/portfolio/ProjectInfo/messages.en';
 import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
 import portfolioProjectCardMessagesEn from './components/portfolio/PortfolioProjectCard/messages.en';
+import timelineMessagesEn from './slices/Timeline/messages.en';
 
 import unitMessagesEn from './unit.messages.en';
 
@@ -33,6 +34,7 @@ const rootMessagesEn = {
   ...projectFactsMessagesEn,
   ...projectsMapMessagesEn,
   ...shopCheckoutMessagesEn,
+  ...timelineMessagesEn,
 
   //
   // Units

package/src/slices/Timeline/Timeline.stories.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import {
+  storybookStrapiAvatarMock,
+  storybookStrapiCoverMock,
+  storybookStrapiTreeIconMock,
+} from '../../test/storybookMocks/storybookStrapiMedia';
+import Timeline from '.';
+import { TimelineItem } from './Timeline';
+
+export default {
+  title: 'slices/Timeline',
+  component: Timeline,
+} as Meta<typeof Timeline>;
+
+const Template: StoryFn<typeof Timeline> = (args) => <Timeline {...args} />;
+
+const timelineItem: TimelineItem = {
+  id: 1,
+  tagline: '08 Jan 2024',
+  title: 'Title',
+  text: 'After a site visit in the summer of 2022, the project has now been successfully audited by TÜV Nord Cert according to ISO 14064-2, making it the second certified forest adaption climate protection project in the world.',
+  backgroundShapes: false,
+};
+const button = {
+  id: 1,
+  text: 'Button',
+  url: 'https://tree.ly',
+};
+const badge = { text: 'Badge', variant: 'green' };
+const image = { id: 71, alt: 'Alt', img: { data: storybookStrapiCoverMock } };
+const icon = {
+  id: 1,
+  alt: 'Icon alt text',
+  img: { data: storybookStrapiTreeIconMock },
+};
+const logo = {
+  id: 2,
+  alt: 'Avatar image alt text',
+  img: { data: storybookStrapiAvatarMock },
+  objectFit: 'contain',
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    timelineItems: [
+      timelineItem,
+      timelineItem,
+      timelineItem,
+      timelineItem,
+      timelineItem,
+    ],
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Tree.ly connects forest owners with companies, helping forest owners earn extra income by managing forests for climate resilience. Companies can purchase high-quality CO₂ credits, backing forest owners and showing their commitment to measurable climate protection.',
+    timelineItems: [
+      timelineItem,
+      timelineItem,
+      timelineItem,
+      timelineItem,
+      timelineItem,
+    ],
+  },
+};
+
+export const WithBackgroundShapes = Template.bind({});
+WithBackgroundShapes.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    timelineItems: [
+      { ...timelineItem, backgroundShapes: true },
+      { ...timelineItem, backgroundShapes: true },
+      { ...timelineItem, backgroundShapes: true },
+      { ...timelineItem, backgroundShapes: true },
+      { ...timelineItem, backgroundShapes: true },
+    ],
+  },
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    timelineItems: [
+      {
+        ...timelineItem,
+        button,
+      },
+      {
+        ...timelineItem,
+        button,
+      },
+      {
+        ...timelineItem,
+        button,
+      },
+      {
+        ...timelineItem,
+        button,
+      },
+      {
+        ...timelineItem,
+        button,
+      },
+    ],
+  },
+};
+
+export const WithBadgeOrLogo = Template.bind({});
+WithBadgeOrLogo.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    timelineItems: [
+      { ...timelineItem, badge },
+      {
+        ...timelineItem,
+        logo,
+      },
+      { ...timelineItem, logo, badge },
+      { ...timelineItem, badge },
+      { ...timelineItem, badge },
+    ],
+  },
+};
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    timelineItems: [
+      {
+        ...timelineItem,
+        image,
+      },
+      {
+        ...timelineItem,
+        image,
+      },
+      {
+        ...timelineItem,
+        image,
+      },
+      {
+        ...timelineItem,
+        image,
+      },
+      {
+        ...timelineItem,
+        image,
+      },
+    ],
+  },
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    timelineItems: [
+      {
+        ...timelineItem,
+        icon,
+      },
+      {
+        ...timelineItem,
+        icon,
+      },
+      {
+        ...timelineItem,
+        icon,
+      },
+      {
+        ...timelineItem,
+        icon,
+      },
+    ],
+  },
+};

package/src/slices/Timeline/Timeline.test.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import Timeline from '.';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { TimelineProps } from './Timeline';
+import { pushSpy, useRouter } from '../../../__mocks__/next/router';
+import { render, screen, userEvent, waitFor } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
+import messagesEn from './messages.en';
+
+const defaultProps: TimelineProps = {
+  slice: {
+    title: 'Title',
+    timelineItems: [
+      {
+        id: 1,
+        title: 'Item 1',
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<Timeline {...combinedProps} />);
+};
+
+describe('The Timeline component', () => {
+  it('displays the correct tagline and text, if they are defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        tagline: 'Timeline tagline',
+        text: 'Timeline text',
+      },
+    });
+    expect(screen.getByText('Timeline tagline')).toBeInTheDocument();
+    expect(screen.getByText('Timeline text')).toBeInTheDocument();
+  });
+
+  it('displays the timeline items', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          defaultProps.slice.timelineItems[0],
+          { id: 2, title: 'Item 2' },
+        ],
+      },
+    });
+
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('displays the tagline and text in the timeline items, if they are defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          {
+            ...defaultProps.slice.timelineItems[0],
+            tagline: 'Item 1 tagline',
+            text: 'Item 1 text',
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByText('Item 1 tagline')).toBeInTheDocument();
+    expect(screen.getByText('Item 1 text')).toBeInTheDocument();
+  });
+
+  it('displays the button in the timeline items, if it is defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          {
+            ...defaultProps.slice.timelineItems[0],
+            button: {
+              id: '1',
+              url: 'https://tree.ly',
+              text: 'Optional Button',
+            },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText('Optional Button')).toBeInTheDocument();
+  });
+
+  it('displays the badge if it is defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          {
+            ...defaultProps.slice.timelineItems[0],
+            badge: { text: 'Badge', variant: 'green' },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getAllByText('Badge')[0]).toBeInTheDocument();
+  });
+
+  it('displays the logo, icon and image if they are defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          {
+            ...defaultProps.slice.timelineItems[0],
+            logo: {
+              id: 1,
+              alt: 'Logo alt text',
+              img: { data: strapiMediaMock },
+            },
+            image: {
+              id: 1,
+              alt: 'Image alt text',
+              img: { data: strapiMediaMock },
+            },
+            icon: {
+              id: 1,
+              alt: 'Icon alt text',
+              img: { data: strapiMediaMock },
+            },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getAllByRole('img')[2]).toHaveAttribute(
+      'alt',
+      'Image alt text'
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
+      'alt',
+      'Logo alt text'
+    );
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
+      'alt',
+      'Icon alt text'
+    );
+  });
+
+  it('displays the background shapes if  if it is defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          { ...defaultProps.slice.timelineItems[0], backgroundShapes: true },
+        ],
+      },
+    });
+
+    expect(
+      screen.getByAltText(messagesEn['sections.timeline.backgroundShapes'])
+    ).toBeInTheDocument();
+  });
+
+  it('displays the "Show three more milestones" button if more than three timeline items are defined in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          {
+            ...defaultProps.slice.timelineItems[0],
+          },
+          {
+            id: 2,
+            title: 'Item 2',
+          },
+          {
+            id: 3,
+            title: 'Item 3',
+          },
+          {
+            id: 4,
+            title: 'Item 4',
+          },
+        ],
+      },
+    });
+
+    expect(screen.queryByText('Item 4')).not.toBeInTheDocument();
+    expect(
+      screen.getByText(messagesEn['sections.timeline.showMoreButton'])
+    ).toBeInTheDocument();
+  });
+
+  it('renders three more timeline items if the "Show three more milestones" button is clicked, when all timeline items are rendered, the  "Show three more milestones" button is not displayed', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        timelineItems: [
+          {
+            ...defaultProps.slice.timelineItems[0],
+          },
+          {
+            id: 2,
+            title: 'Item 2',
+          },
+          {
+            id: 3,
+            title: 'Item 3',
+          },
+          {
+            id: 4,
+            title: 'Item 4',
+          },
+        ],
+      },
+    });
+
+    waitFor(() => {
+      userEvent.click(
+        screen.getByText(messagesEn['sections.timeline.showMoreButton'])
+      );
+      expect(screen.findByText('Item 4')).toBeInTheDocument();
+      expect(screen.findByRole('button')).not.toBeInTheDocument();
+    });
+  });
+});