@treely/strapi-slices 2.4.0 → 3.0.0

package/dist/test/integrationMocks/portfolioProjectMock.d.ts

@@ -0,0 +1,3 @@
+import { PortfolioProject } from '../..';
+declare const portfolioProjectMock: PortfolioProject;
+export default portfolioProjectMock;

package/dist/unit.messages.de.d.ts

@@ -1,5 +1,5 @@
-declare const _default: {
+declare const unitMessagesDe: {
     'unit.formatter.tonsCo2': string;
     'unit.formatter.tonsCo2PerYear': string;
 };
-export default _default;
+export default unitMessagesDe;

package/dist/unit.messages.en.d.ts

@@ -1,5 +1,5 @@
-declare const _default: {
+declare const unitMessagesEn: {
     'unit.formatter.tonsCo2': string;
     'unit.formatter.tonsCo2PerYear': string;
 };
-export default _default;
+export default unitMessagesEn;

package/package.json

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

package/src/components/CreditsAvailableBadge/messages.de.ts

@@ -1,7 +1,8 @@
-export default {
+const messagesDe = {
   'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
   'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
   'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
   'components.creditsAvailableBadge.text.notYet':
     'Noch keine Credits verfügbar',
 };
+export default messagesDe;

package/src/components/CreditsAvailableBadge/messages.en.ts

@@ -1,6 +1,7 @@
-export default {
+const messagesEn = {
   'components.creditsAvailableBadge.text.yes': 'Credits available',
   'components.creditsAvailableBadge.text.some': 'Some remaining credits',
   'components.creditsAvailableBadge.text.no': 'No remaining credits',
   'components.creditsAvailableBadge.text.notYet': 'No credits available yet',
 };
+export default messagesEn;

package/src/components/SliceRenderer/SliceRenderer.tsx

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

package/src/components/portfolio/DocumentsDownloadList/messages.de.ts

@@ -1,6 +1,7 @@
-export default {
+const messagesDe = {
   'features.portfolio.documentsDownloadList.projectDocuments':
     'Projektdokumente',
   'features.portfolio.documentsDownloadList.downloadDocument':
     'Dokument herunterladen',
 };
+export default messagesDe;

package/src/components/portfolio/DocumentsDownloadList/messages.en.ts

@@ -1,6 +1,7 @@
-export default {
+const messagesEn = {
   'features.portfolio.documentsDownloadList.projectDocuments':
     'Project documents',
   'features.portfolio.documentsDownloadList.downloadDocument':
     'Download document',
 };
+export default messagesEn;

package/src/components/portfolio/PortfolioProjectCard/PortfolioProjectCard.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '../../../test/testUtils';
+import PortfolioProjectCard from '.';
+import { PortfolioProjectCardProps } from './PortfolioProjectCard';
+import portfolioProjectMock from '../../../test/integrationMocks/portfolioProjectMock';
+import messagesEn from './messages.en';
+
+const defaultProps: PortfolioProjectCardProps = {
+  project: portfolioProjectMock,
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<PortfolioProjectCard {...combinedProps} />);
+};
+
+describe('The PortfolioProjectCard component', () => {
+  it('displays the project card', () => {
+    setup();
+
+    expect(screen.getByText(portfolioProjectMock.title)).toBeInTheDocument();
+  });
+
+  it('displays the area', () => {
+    setup();
+
+    expect(screen.getByText('140 ha')).toBeInTheDocument();
+  });
+
+  it('displays the location', () => {
+    setup();
+
+    expect(
+      screen.getByText(portfolioProjectMock.location as string)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the credits availability', () => {
+    setup();
+
+    expect(
+      screen.getByText(messagesEn['components.portfolioProjectCard.text.yes'])
+    ).toBeInTheDocument();
+  });
+
+  it('displays the footer sub title', () => {
+    setup();
+
+    expect(
+      screen.getByText(portfolioProjectMock.footerSubTitle as string)
+    ).toBeInTheDocument();
+  });
+});

package/src/components/portfolio/PortfolioProjectCard/PortfolioProjectCard.tsx

@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import { ProjectCard } from 'boemly';
+import { PortfolioProject, strapiMediaUrl } from '../../..';
+import CreditsAvailableState from '../../../models/CreditsAvailableState';
+import { FORMAT_AS_HECTARE_CONFIG } from '../../../constants/formatter';
+import Image from 'next/image';
+import { IntlContext } from '../../ContextProvider';
+
+export interface PortfolioProjectCardProps {
+  project: PortfolioProject;
+}
+
+export const PortfolioProjectCard = ({
+  project,
+}: PortfolioProjectCardProps) => {
+  const { formatMessage, formatNumber } = useContext(IntlContext);
+
+  const creditsAvailableMessages: Record<CreditsAvailableState, string> = {
+    [CreditsAvailableState.YES]: formatMessage({
+      id: 'components.portfolioProjectCard.text.yes',
+    }),
+
+    [CreditsAvailableState.SOME]: formatMessage({
+      id: 'components.portfolioProjectCard.text.some',
+    }),
+
+    [CreditsAvailableState.NO]: formatMessage({
+      id: 'components.portfolioProjectCard.text.no',
+    }),
+
+    [CreditsAvailableState.NOT_YET]: formatMessage({
+      id: 'components.portfolioProjectCard.text.notYet',
+    }),
+  };
+
+  return (
+    <ProjectCard
+      title={project.title}
+      facts={[
+        {
+          id: 1,
+          text: formatNumber(
+            (project.area || 0) / 10000,
+            FORMAT_AS_HECTARE_CONFIG
+          ),
+        },
+        { id: 2, text: project.location || '' },
+      ]}
+      footerTitle={
+        creditsAvailableMessages[
+          project.creditsAvailable ?? CreditsAvailableState.NOT_YET
+        ]
+      }
+      footerSubTitle={project.footerSubTitle || ''}
+      image={
+        project.thumbnail && (
+          <Image
+            src={strapiMediaUrl(project.thumbnail?.img, 'medium')}
+            alt={project.thumbnail?.alt}
+            fill
+            style={{
+              objectFit: project.thumbnail?.objectFit || 'cover',
+            }}
+          />
+        )
+      }
+    />
+  );
+};

package/src/components/portfolio/PortfolioProjectCard/index.ts

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

package/src/components/portfolio/PortfolioProjectCard/messages.de.ts

@@ -0,0 +1,8 @@
+const messagesDe = {
+  'components.portfolioProjectCard.text.yes': 'Credits verfügbar',
+  'components.portfolioProjectCard.text.some': 'Einige verbleibende Credits',
+  'components.portfolioProjectCard.text.no': 'Keine verbleibenden Credits',
+  'components.portfolioProjectCard.text.notYet': 'Noch keine Credits verfügbar',
+};
+
+export default messagesDe;

package/src/components/portfolio/PortfolioProjectCard/messages.en.ts

@@ -0,0 +1,8 @@
+const messagesEn = {
+  'components.portfolioProjectCard.text.yes': 'Credits available',
+  'components.portfolioProjectCard.text.some': 'Some remaining credits',
+  'components.portfolioProjectCard.text.no': 'No remaining credits',
+  'components.portfolioProjectCard.text.notYet': 'No credits available yet',
+};
+
+export default messagesEn;

package/src/components/portfolio/ProjectInfo/messages.de.ts

@@ -1,4 +1,4 @@
-export default {
+const messagesDe = {
   'features.projectInfo.projectInfo.value': 'Projekt Infos',
   'features.projectInfo.properties.area': 'Projekt Fläche',
   'features.projectInfo.properties.location': 'Standort',
@@ -17,3 +17,4 @@ export default {
   'features.projectInfo.properties.year':
     '{years} {years, plural, one {Jahr} other {Jahre} }',
 };
+export default messagesDe;

package/src/components/portfolio/ProjectInfo/messages.en.ts

@@ -1,4 +1,4 @@
-export default {
+const messagesEn = {
   'features.projectInfo.projectInfo.value': 'Project Infos',
   'features.projectInfo.properties.area': 'Project Area',
   'features.projectInfo.properties.location': 'Location',
@@ -17,3 +17,4 @@ export default {
   'features.projectInfo.properties.year':
     '{years} {years, plural, one {year} other {years} }',
 };
+export default messagesEn;

package/src/components/portfolio/SmallCheckout/messages.de.ts

@@ -1,4 +1,4 @@
-export default {
+const messagesDe = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF':
     'Geben Sie den Beitrag in Fr. ein',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR':
@@ -24,3 +24,4 @@ export default {
     'Für Unternehmenskunden bieten wir individuelle Lösungen an. Kontaktieren Sie uns.',
   'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren',
 };
+export default messagesDe;

package/src/components/portfolio/SmallCheckout/messages.en.ts

@@ -1,4 +1,4 @@
-export default {
+const messagesEn = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF':
     'Contribution Amount in CHF',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR':
@@ -24,3 +24,4 @@ export default {
     'For enterprise-customers we offer custom solutions. Feel free to contact us.',
   'portfolio.smallCheckout.cta.button': 'Contact our Sales Team',
 };
+export default messagesEn;

package/src/models/PortfolioProject.ts

@@ -1,9 +1,12 @@
+import { StrapiImage } from '..';
 import CreditsAvailableState from './CreditsAvailableState';
 import FPMProject from './fpm/FPMProject';
 
 interface PortfolioProject extends FPMProject {
   slug?: string;
+  thumbnail?: StrapiImage | null;
   creditsAvailable?: CreditsAvailableState;
+  footerSubTitle?: string;
 }
 
 export default PortfolioProject;

package/src/models/strapi/StrapiProject.ts

@@ -1,6 +1,8 @@
 import CreditsAvailableState from '../CreditsAvailableState';
 import Locale from '../Locale';
+import IStrapi from './IStrapi';
 import IStrapiData from './IStrapiData';
+import StrapiImage from './StrapiImage';
 import StrapiLocalization from './StrapiLocalization';
 import StrapiMetadata from './StrapiMetadata';
 import StrapiPortfolio from './StrapiPortfolio';
@@ -11,14 +13,14 @@ interface StrapiProject {
   locale: Locale;
   fpmProjectId?: string;
   creditsAvailable?: CreditsAvailableState;
+  footerSubTitle?: string;
   createdAt: string;
   updatedAt: string;
   metadata: StrapiMetadata | null;
+  thumbnail: StrapiImage | null;
   slices: any[];
   localizations: StrapiLocalization[];
-  portfolio: {
-    data?: IStrapiData<StrapiPortfolio>;
-  };
+  portfolio: IStrapi<IStrapiData<StrapiPortfolio>>;
   topBanner?: StrapiTopBanner;
 }
 

package/src/models/strapi/StrapiProjectCard.ts

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

package/src/rootMessages.de.ts

@@ -9,6 +9,7 @@ import creditsAvailableBadgeMessagesDe from './components/CreditsAvailableBadge/
 import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
 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 unitMessagesDe from './unit.messages.en';
 
@@ -18,6 +19,7 @@ const rootMessagesDe = {
   //
   ...creditsAvailableBadgeMessagesDe,
   ...portfolioDocumentsDownloadListMessagesDe,
+  ...portfolioProjectCardMessagesDe,
   ...portfolioProjectInfoMessagesDe,
   ...portfolioSmallCheckoutMessagesDe,
 

package/src/rootMessages.en.ts

@@ -9,6 +9,7 @@ import creditsAvailableBadgeMessagesEn from './components/CreditsAvailableBadge/
 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 portfolioProjectCardMessagesEn from './components/portfolio/PortfolioProjectCard/messages.en';
 
 import unitMessagesEn from './unit.messages.en';
 
@@ -18,6 +19,7 @@ const rootMessagesEn = {
   //
   ...creditsAvailableBadgeMessagesEn,
   ...portfolioDocumentsDownloadListMessagesEn,
+  ...portfolioProjectCardMessagesEn,
   ...portfolioProjectInfoMessagesEn,
   ...portfolioSmallCheckoutMessagesEn,
 

package/src/slices/Comparison/messages.de.ts

@@ -1,3 +1,4 @@
-export default {
+const messagesDe = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen',
 };
+export default messagesDe;

package/src/slices/Comparison/messages.en.ts

@@ -1,3 +1,4 @@
-export default {
+const messagesEn = {
   'sections.comparison.backgroundShapes': 'Background shapes',
 };
+export default messagesEn;

package/src/slices/Cta/Cta.tsx

@@ -300,7 +300,7 @@ export const Cta: React.FC<CtaProps> = ({ slice }: CtaProps) => {
                       minWidth={[null, null, null, null, '50%']}
                     >
                       <Image
-                        src={strapiMediaUrl(ctaCard.image.img, 'medium')}
+                        src={strapiMediaUrl(ctaCard.image.img, 'xLarge')}
                         alt={ctaCard.image.alt}
                         fill
                         style={{
@@ -390,7 +390,7 @@ export const Cta: React.FC<CtaProps> = ({ slice }: CtaProps) => {
                       minWidth={[null, null, null, null, '50%']}
                     >
                       <Image
-                        src={strapiMediaUrl(ctaCard.image.img, 'medium')}
+                        src={strapiMediaUrl(ctaCard.image.img, 'xLarge')}
                         alt={ctaCard.image.alt}
                         fill
                         style={{

package/src/slices/Cta/messages.de.ts

@@ -1,4 +1,5 @@
-export default {
+const messagesDe = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen',
 };
+export default messagesDe;

package/src/slices/Cta/messages.en.ts

@@ -1,4 +1,5 @@
-export default {
+const messagesEn = {
   'sections.cta.backgroundShapesDark': 'Dark background shapes',
   'sections.cta.backgroundShapesLight': 'Light background shapes',
 };
+export default messagesEn;

package/src/slices/CustomerStories/messages.de.ts

@@ -1,3 +1,4 @@
-export default {
+const messagesDe = {
   'sections.customerStories.more': 'Weiterlesen',
 };
+export default messagesDe;

package/src/slices/CustomerStories/messages.en.ts

@@ -1,3 +1,4 @@
-export default {
+const messagesEn = {
   'sections.customerStories.more': 'Read more',
 };
+export default messagesEn;

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.tsx

@@ -97,7 +97,7 @@ export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
         </SliderInnerContainer>
       </SliderContainer>
 
-      <ButtonsContainer show={allowScroll && !isOpen}>
+      <ButtonsContainer show={(allowScroll && !isOpen).toString()}>
         <Box>
           <AnimatePresence>
             {canMoveLeft && (

package/src/slices/FullWidthImageSlider/styles.ts

@@ -26,7 +26,7 @@ export const SliderContainer = styled(Box)`
 `;
 
 interface ButtonsContainerProps {
-  show: boolean;
+  show: string;
 }
 export const ButtonsContainer = styled(Box)<ButtonsContainerProps>`
   display: ${({ show }: ButtonsContainerProps) => (show ? 'flex' : 'none')};

package/src/slices/Glossary/messages.de.ts

@@ -1,7 +1,8 @@
-export default {
+const messagesDe = {
   'sections.glossary.copyButtonLabel':
     'Kopiere den Link zu diesem Abschnitt in die Zwischenablage',
   'sections.glossary.copySuccessMessage': 'Link in die Zwischenablage kopiert',
   'sections.glossary.copyFailureMessage':
     'Link konnte nicht in die Zwischenablage kopiert werden',
 };
+export default messagesDe;

package/src/slices/Glossary/messages.en.ts

@@ -1,6 +1,7 @@
-export default {
+const messagesEn = {
   'sections.glossary.copyButtonLabel':
     'Copy a link to this section to your clipboard',
   'sections.glossary.copySuccessMessage': 'Copied the link to your clipboard',
   'sections.glossary.copyFailureMessage': 'Could not copy link to clipboard',
 };
+export default messagesEn;

package/src/slices/ProjectFacts/messages.de.ts

@@ -1,4 +1,5 @@
-export default {
+const messagesDe = {
   'sections.projectFacts.projectInfo.value': 'Projekt Infos',
   'projects.projectFacts.properties.area': 'Fläche',
 };
+export default messagesDe;

package/src/slices/ProjectFacts/messages.en.ts

@@ -1,4 +1,5 @@
-export default {
+const messagesEn = {
   'sections.projectFacts.projectInfo.value': 'Project Infos',
   'projects.projectFacts.properties.area': 'Area',
 };
+export default messagesEn;

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import Locale from '../../models/Locale';
 import ProjectsGrid from '.';
+import portfolioProjectMock from '../../test/integrationMocks/portfolioProjectMock';
 
 export default {
   title: 'slices/ProjectsGrid',
@@ -14,60 +13,7 @@ const Template: StoryFn<typeof ProjectsGrid> = (args) => (
   <ProjectsGrid {...args} />
 );
 
-const card = {
-  id: 1,
-  image: {
-    id: 1,
-    alt: 'Image alt text',
-    img: { data: storybookStrapiCoverMock },
-  },
-  title: 'Card title',
-  facts: [
-    { id: 1, text: 'Fact 1' },
-    { id: 2, text: 'Fact 2' },
-  ],
-  footerTitle: 'Footer title',
-  footerSubTitle: 'Footer sub title',
-  project: {
-    data: {
-      id: 1,
-      attributes: {
-        slug: 'slug',
-        metadata: null,
-        slices: [],
-        locale: 'en' as Locale,
-        createdAt: '2020-01-01T00:00:00.000Z',
-        updatedAt: '2020-01-01T00:00:00.000Z',
-        localizations: [],
-        portfolio: { data: undefined },
-      },
-    },
-  },
-};
-
 export const Minimal = Template.bind({});
 Minimal.args = {
-  slice: {
-    projects: [
-      {
-        ...card,
-        project: {
-          data: {
-            ...card.project.data,
-            attributes: { ...card.project.data.attributes, slug: 'slug-1' },
-          },
-        },
-      },
-      {
-        ...card,
-        id: 2,
-        project: {
-          data: {
-            ...card.project.data,
-            attributes: { ...card.project.data.attributes, slug: 'slug-2' },
-          },
-        },
-      },
-    ],
-  },
+  projects: [portfolioProjectMock],
 };

package/src/slices/ProjectsGrid/ProjectsGrid.test.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import { render, screen } from '../../test/testUtils';
-import { strapiProjectCardMock } from '../../test/strapiMocks/strapiProjectCard';
 import ProjectsGrid from '.';
 import { ProjectsGridProps } from './ProjectsGrid';
+import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
+import CreditsAvailableState from '../../models/CreditsAvailableState';
 
 const defaultProps: ProjectsGridProps = {
-  slice: {
-    projects: [strapiProjectCardMock],
-  },
+  projects: [
+    {
+      ...fpmProjectMock,
+      slug: 'slug',
+      isPublic: true,
+      thumbnail: { img: { data: strapiMediaMock }, alt: 'Alt Text', id: 1 },
+      footerSubTitle: 'certified-123',
+      creditsAvailable: CreditsAvailableState.YES,
+    },
+  ],
 };
 
 const setup = (props = {}) => {
@@ -19,14 +28,6 @@ describe('The ProjectsGrid component', () => {
   it('displays the project cards', () => {
     setup();
 
-    expect(
-      screen.getByText(defaultProps.slice.projects[0].title)
-    ).toBeInTheDocument();
-  });
-
-  it('displays a link to a project', () => {
-    setup();
-
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/portfolio/slug');
+    expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
   });
 });