@treely/strapi-slices 3.1.0 → 3.2.0

package/package.json

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

package/src/constants/sectionsConfig.ts

@@ -18,4 +18,5 @@ export const SECTIONS_WITH_PROJECTS = [
   'sections.projects-grid',
   'sections.projects-map',
   'sections.project-facts',
+  'sections.text-with-card',
 ];

package/src/models/strapi/StrapiProjectCard.ts

@@ -1,10 +1,20 @@
-import IStrapi from './IStrapi';
 import IStrapiData from './IStrapiData';
+import StrapiImage from './StrapiImage';
 import StrapiProject from './StrapiProject';
 
 interface StrapiProjectCard {
   id: number;
-  project: IStrapi<IStrapiData<StrapiProject>>;
+  title: string;
+  facts: {
+    id: number;
+    text: string;
+  }[];
+  footerTitle: string;
+  footerSubTitle: string;
+  image: StrapiImage;
+  project?: {
+    data?: IStrapiData<StrapiProject>;
+  };
 }
 
 export default StrapiProjectCard;

package/src/slices/ProjectsGrid/ProjectsGrid.stories.tsx

@@ -3,6 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import ProjectsGrid from '.';
 import portfolioProjectMock from '../../test/integrationMocks/portfolioProjectMock';
+import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
 
 export default {
   title: 'slices/ProjectsGrid',
@@ -16,4 +17,7 @@ const Template: StoryFn<typeof ProjectsGrid> = (args) => (
 export const Minimal = Template.bind({});
 Minimal.args = {
   projects: [portfolioProjectMock],
+  slice: {
+    projects: { data: [strapiProjectMock] },
+  },
 };

package/src/slices/TextWithCard/TextWithCard.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import portfolioProjectMock from '../../test/integrationMocks/portfolioProjectMock';
-import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import TextWithCard from '.';
 
 export default {
@@ -22,9 +21,21 @@ const listItems = [
 const button = { id: 1, text: 'Button', url: 'https://tree.ly' };
 const card = {
   id: 1,
-  project: { data: strapiProjectMock },
+  image: {
+    id: 1,
+    alt: 'Image alt text',
+    img: { data: storybookStrapiCoverMock },
+  },
+  title: 'Card title',
+  facts: [
+    { id: 1, text: 'Fact 1' },
+    { id: 2, text: 'Fact 2' },
+    { id: 3, text: 'Fact 3' },
+    { id: 4, text: 'Fact 4' },
+  ],
+  footerTitle: 'Footer title',
+  footerSubTitle: 'Footer sub title',
 };
-const projects = [{ ...portfolioProjectMock, slug: 'slug' }];
 
 export const Minimal = Template.bind({});
 Minimal.args = {
@@ -32,7 +43,6 @@ Minimal.args = {
     title: 'Title',
     cardPosition: 'left',
   },
-  projects,
 };
 
 export const WithTagline = Template.bind({});
@@ -42,7 +52,6 @@ WithTagline.args = {
     title: 'Title',
     cardPosition: 'left',
   },
-  projects,
 };
 
 export const WithTaglineAndText = Template.bind({});
@@ -53,7 +62,6 @@ WithTaglineAndText.args = {
     text: 'Text',
     cardPosition: 'left',
   },
-  projects,
 };
 
 export const WithList = Template.bind({});
@@ -65,7 +73,6 @@ WithList.args = {
     listItems,
     cardPosition: 'left',
   },
-  projects,
 };
 
 export const WithButton = Template.bind({});
@@ -78,7 +85,6 @@ WithButton.args = {
     button,
     cardPosition: 'left',
   },
-  projects,
 };
 
 export const WithCard = Template.bind({});
@@ -92,7 +98,6 @@ WithCard.args = {
     card,
     cardPosition: 'left',
   },
-  projects,
 };
 
 export const WithCardOnRight = Template.bind({});
@@ -106,5 +111,4 @@ WithCardOnRight.args = {
     card,
     cardPosition: 'right',
   },
-  projects,
 };

package/src/slices/TextWithCard/TextWithCard.test.tsx

@@ -3,27 +3,17 @@ import { render, screen } from '../../test/testUtils';
 import { strapiProjectCardMock } from '../../test/strapiMocks/strapiProjectCard';
 import TextWithCard from '.';
 import { TextWithCardProps } from './TextWithCard';
-import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import CreditsAvailableState from '../../models/CreditsAvailableState';
+import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
+import portfolioProjectMock from '../../test/mocks/portfolioProjectMock';
 
 const defaultProps: TextWithCardProps = {
+  projects: [],
   slice: {
     tagline: 'Tagline',
     title: 'Title',
     text: 'Text',
     cardPosition: 'left',
   },
-  projects: [
-    {
-      ...fpmProjectMock,
-      slug: 'slug',
-      isPublic: true,
-      thumbnail: { img: { data: strapiMediaMock }, alt: 'Alt Text', id: 1 },
-      footerSubTitle: 'certified-123',
-      creditsAvailable: CreditsAvailableState.YES,
-    },
-  ],
 };
 
 const setup = (props = {}) => {
@@ -74,15 +64,26 @@ describe('The TextWithCard component', () => {
   it('displays no card if there is no card in the slice', () => {
     setup();
 
-    expect(screen.queryByText(fpmProjectMock.title)).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(strapiProjectCardMock.title)
+    ).not.toBeInTheDocument();
   });
 
-  it('displays the card if a project has been selected', () => {
+  it('displays a card if there is a card in the slice', () => {
     setup({
       slice: { ...defaultProps.slice, card: strapiProjectCardMock },
     });
 
-    expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
+    expect(screen.getByText(strapiProjectCardMock.title)).toBeInTheDocument();
+  });
+
+  it('displays the card, filled with information from the FPM if a project is selected', () => {
+    setup({
+      projects: [portfolioProjectMock],
+      slice: { ...defaultProps.slice, project: { data: strapiProjectMock } },
+    });
+
+    expect(screen.getByText(portfolioProjectMock.title)).toBeInTheDocument();
   });
 
   const cardPositions = ['left', 'right'];

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -4,15 +4,18 @@ import {
   DefaultSectionHeader,
   Grid,
   GridItem,
+  ProjectCard,
   Spacer,
   BoemlyList,
   Wrapper,
 } from 'boemly';
+import Image from 'next/image';
 import { ArrowRight } from '@phosphor-icons/react';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import StrapiLink from '../../models/strapi/StrapiLink';
 import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
 import StrapiLinkButton from '../../components/StrapiLinkButton';
-import PortfolioProject from '../../models/PortfolioProject';
+import { IStrapi, IStrapiData, PortfolioProject, StrapiProject } from '../..';
 import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
 
 interface TextWithCardSlice {
@@ -25,6 +28,7 @@ interface TextWithCardSlice {
   }[];
   button?: StrapiLink;
   card?: StrapiProjectCard;
+  project?: IStrapi<IStrapiData<StrapiProject>>;
   cardPosition: 'left' | 'right';
 }
 export interface TextWithCardProps {
@@ -36,8 +40,10 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
   slice,
   projects,
 }: TextWithCardProps) => {
-  const fpmData = projects.find(
-    (project) => project.slug === slice.card?.project?.data.attributes.slug
+  const portfolioProject = projects.find(
+    (p) =>
+      slice.project?.data.attributes.fpmProjectId &&
+      p.id === slice.project?.data.attributes.fpmProjectId
   );
 
   const card = (
@@ -47,8 +53,22 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
       position="relative"
       data-testid={`card-position-${slice.cardPosition}`}
     >
-      {slice.card && fpmData && (
-        <PortfolioProjectCard project={{ ...slice.card, ...fpmData }} />
+      {portfolioProject && <PortfolioProjectCard project={portfolioProject} />}
+      {!portfolioProject && slice.card && (
+        <ProjectCard
+          facts={slice.card.facts}
+          footerSubTitle={slice.card.footerSubTitle}
+          footerTitle={slice.card.footerTitle}
+          title={slice.card.title}
+          image={
+            <Image
+              src={strapiMediaUrl(slice.card.image.img, 'medium')}
+              alt={slice.card.image.alt}
+              fill
+              style={{ objectFit: slice.card.image.objectFit || 'cover' }}
+            />
+          }
+        />
       )}
     </GridItem>
   );

package/src/test/strapiMocks/strapiProjectCard.ts

@@ -1,7 +1,20 @@
 import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
+import { strapiMediaMock } from './strapiMedia';
 import { strapiProjectMock } from './strapiProject';
 
 export const strapiProjectCardMock: StrapiProjectCard = {
   id: 1,
+  title: 'My forest',
+  facts: [
+    { id: 1, text: 'text1' },
+    { id: 2, text: 'text2' },
+  ],
+  footerTitle: 'Footer title',
+  footerSubTitle: 'Footer sub title',
+  image: {
+    id: 1,
+    alt: 'Alt text',
+    img: { data: strapiMediaMock },
+  },
   project: { data: strapiProjectMock },
 };