@treely/strapi-slices 3.0.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "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

@@ -92,7 +92,6 @@ export const SliceRenderer = ({
             <TextWithCard
               key={`${slice.__component}-${slice.id}`}
               slice={slice}
-              projects={projects}
             />
           );
         case 'sections.logo-grid-with-text':
@@ -195,6 +194,7 @@ export const SliceRenderer = ({
           return (
             <ProjectsGrid
               key={`${slice.__component}-${slice.id}`}
+              slice={slice}
               projects={projects}
             />
           );

package/src/constants/sectionsConfig.ts

@@ -15,6 +15,7 @@ export const SECTIONS_WITH_BLOG_POSTS = [
 ];
 export const SECTIONS_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
 export const SECTIONS_WITH_PROJECTS = [
+  'sections.projects-grid',
   'sections.projects-map',
   'sections.project-facts',
 ];

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.test.tsx

@@ -5,8 +5,12 @@ import { ProjectsGridProps } from './ProjectsGrid';
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
 import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import CreditsAvailableState from '../../models/CreditsAvailableState';
+import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
 
 const defaultProps: ProjectsGridProps = {
+  slice: {
+    projects: { data: [strapiProjectMock] },
+  },
   projects: [
     {
       ...fpmProjectMock,

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -4,8 +4,12 @@ import Link from 'next/link';
 import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
 import PortfolioProject from '../../models/PortfolioProject';
 import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
+import { IStrapi, IStrapiData, StrapiProject } from '../..';
 
 export interface ProjectsGridProps {
+  slice: {
+    projects: IStrapi<IStrapiData<StrapiProject>[]>;
+  };
   projects: PortfolioProject[];
 }
 
@@ -21,9 +25,15 @@ const ConditionalWrapper = ({
 
 export const ProjectsGrid: React.FC<ProjectsGridProps> = ({
   projects,
+  slice,
 }: ProjectsGridProps) => {
   const filteredProjects = projects.filter(
-    (p) => p.thumbnail && p.slug && p.isPublic
+    (fpmProject) =>
+      fpmProject.thumbnail &&
+      slice.projects.data.some(
+        (strapiProject) =>
+          strapiProject.attributes.fpmProjectId === fpmProject.id
+      )
   );
 
   return (

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,9 +3,6 @@ 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';
 
 const defaultProps: TextWithCardProps = {
   slice: {
@@ -14,16 +11,6 @@ const defaultProps: TextWithCardProps = {
     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 +61,17 @@ 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();
   });
 
   const cardPositions = ['left', 'right'];

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -4,16 +4,17 @@ 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 PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
 
 interface TextWithCardSlice {
   tagline?: string;
@@ -29,17 +30,11 @@ interface TextWithCardSlice {
 }
 export interface TextWithCardProps {
   slice: TextWithCardSlice;
-  projects: PortfolioProject[];
 }
 
 export const TextWithCard: React.FC<TextWithCardProps> = ({
   slice,
-  projects,
 }: TextWithCardProps) => {
-  const fpmData = projects.find(
-    (project) => project.slug === slice.card?.project?.data.attributes.slug
-  );
-
   const card = (
     <GridItem
       colSpan={[4, null, null, null, 2]}
@@ -47,8 +42,21 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
       position="relative"
       data-testid={`card-position-${slice.cardPosition}`}
     >
-      {slice.card && fpmData && (
-        <PortfolioProjectCard project={{ ...slice.card, ...fpmData }} />
+      {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 },
 };