@treely/strapi-slices 2.4.0 → 3.0.0

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -1,21 +1,12 @@
 import React from 'react';
-import {
-  Box,
-  DefaultSectionContainer,
-  ProjectCard,
-  SimpleGrid,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
+import { Box, DefaultSectionContainer, SimpleGrid, Wrapper } from 'boemly';
 import Link from 'next/link';
 import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
+import PortfolioProject from '../../models/PortfolioProject';
+import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
 
 export interface ProjectsGridProps {
-  slice: {
-    projects: StrapiProjectCard[];
-  };
+  projects: PortfolioProject[];
 }
 
 const ConditionalWrapper = ({
@@ -29,53 +20,46 @@ const ConditionalWrapper = ({
 }) => (condition ? wrapper(children) : children);
 
 export const ProjectsGrid: React.FC<ProjectsGridProps> = ({
-  slice,
-}: ProjectsGridProps) => (
-  <DefaultSectionContainer>
-    <Wrapper>
-      <SimpleGrid columns={[1, null, null, 2, null, 3]} gap="16">
-        {slice.projects.map((card) => (
-          <ConditionalWrapper
-            key={card.id}
-            condition={!!card.project?.data}
-            wrapper={(children: JSX.Element) => (
-              <Link
-                href={`/portfolio/${card.project?.data?.attributes.slug}`}
-                passHref
-                key={card.id}
-                legacyBehavior
-              >
-                {children}
-              </Link>
-            )}
-          >
-            <Box
-              as="a"
-              cursor="pointer"
-              borderRadius="2xl"
-              width="fit-content"
-              height="fit-content"
-              transition={`box-shadow ease ${MEDIUM_TRANSITION_DURATION}s`}
-              _hover={{ boxShadow: 'lg' }}
+  projects,
+}: ProjectsGridProps) => {
+  const filteredProjects = projects.filter(
+    (p) => p.thumbnail && p.slug && p.isPublic
+  );
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        <SimpleGrid columns={[1, null, null, 2, null, 3]} gap="16">
+          {filteredProjects.map((project) => (
+            <ConditionalWrapper
+              key={project.id}
+              condition={!!project.slug}
+              wrapper={(children: JSX.Element) => (
+                <Link
+                  href={`/portfolio/${project.slug}`}
+                  passHref
+                  key={project.id}
+                  legacyBehavior
+                >
+                  {children}
+                </Link>
+              )}
             >
-              <ProjectCard
-                title={card.title}
-                facts={card.facts}
-                footerTitle={card.footerTitle}
-                footerSubTitle={card.footerSubTitle}
-                image={
-                  <Image
-                    src={strapiMediaUrl(card.image.img, 'medium')}
-                    alt={card.image.alt}
-                    fill
-                    style={{ objectFit: card.image.objectFit || 'cover' }}
-                  />
-                }
-              />
-            </Box>
-          </ConditionalWrapper>
-        ))}
-      </SimpleGrid>
-    </Wrapper>
-  </DefaultSectionContainer>
-);
+              <Box
+                as="a"
+                cursor="pointer"
+                borderRadius="2xl"
+                width="fit-content"
+                height="fit-content"
+                transition={`box-shadow ease ${MEDIUM_TRANSITION_DURATION}s`}
+                _hover={{ boxShadow: 'lg' }}
+              >
+                <PortfolioProjectCard project={project} />
+              </Box>
+            </ConditionalWrapper>
+          ))}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/ProjectsMap/mapboxStyle.ts

@@ -142,13 +142,13 @@ const mapboxStyle = css`
   .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
     opacity: 0.25;
   }
-  .mapboxgl-ctrl-group button:first-child {
+  .mapboxgl-ctrl-group button:first-of-type {
     border-radius: 4px 4px 0 0;
   }
-  .mapboxgl-ctrl-group button:last-child {
+  .mapboxgl-ctrl-group button:last-of-type {
     border-radius: 0 0 4px 4px;
   }
-  .mapboxgl-ctrl-group button:only-child {
+  .mapboxgl-ctrl-group button:only-of-type {
     border-radius: inherit;
   }
   .mapboxgl-ctrl button:not(:disabled):hover {

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

@@ -1,3 +1,4 @@
-export default {
+const messagesDe = {
   'sections.projectsMap.link.text': 'Mehr Infos',
 };
+export default messagesDe;

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

@@ -1,3 +1,4 @@
-export default {
+const messagesEn = {
   'sections.projectsMap.link.text': 'Show more info',
 };
+export default messagesEn;

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

@@ -1,4 +1,4 @@
-export default {
+const messagesDe = {
   'sections.shopCheckout.intro.price': 'Preis',
 
   'sections.shopCheckout.contributionValue.label.EUR':
@@ -21,3 +21,4 @@ export default {
 
   'sections.shopCheckout.submit': 'Kaufen',
 };
+export default messagesDe;

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

@@ -1,4 +1,4 @@
-export default {
+const messagesEn = {
   'sections.shopCheckout.intro.price': 'Price',
 
   'sections.shopCheckout.contributionValue.label.EUR':
@@ -21,3 +21,4 @@ export default {
 
   'sections.shopCheckout.submit': 'Checkout',
 };
+export default messagesEn;

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -51,10 +51,10 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
         <CarouselInnerContainer
           drag="x"
           dragConstraints={containerRef}
-          numberOfItems={slice.slides.length}
+          numberofitems={slice.slides.length}
         >
           {slice.slides.map(({ id, title, text, icon }) => (
-            <CardContainer key={id} numberOfItems={slice.slides.length}>
+            <CardContainer key={id} numberofitems={slice.slides.length}>
               <TextCardWithIcon
                 title={title}
                 text={text}

package/src/slices/TextCarousel/styles.ts

@@ -20,7 +20,7 @@ export const CarouselContainer = styled(Box)`
 `;
 
 interface CarouselInnerContainerProps {
-  numberOfItems: number;
+  numberofitems: number;
 }
 export const CarouselInnerContainer = styled(
   motion.div
@@ -29,7 +29,7 @@ export const CarouselInnerContainer = styled(
   justify-content: center;
   width: calc(
     (var(--boemly-sizes-sm) + var(--boemly-space-16)) *
-      ${({ numberOfItems }: CarouselInnerContainerProps) => numberOfItems} +
+      ${({ numberofitems }: CarouselInnerContainerProps) => numberofitems} +
       var(--boemly-space-16)
   );
   min-width: var(--boemly-sizes-full);
@@ -37,18 +37,18 @@ export const CarouselInnerContainer = styled(
   @media screen and (max-width: ${BREAKPOINT_MD}) {
     width: calc(
       (var(--boemly-sizes-xs) + var(--boemly-space-4)) *
-        ${({ numberOfItems }: CarouselInnerContainerProps) => numberOfItems} +
+        ${({ numberofitems }: CarouselInnerContainerProps) => numberofitems} +
         var(--boemly-space-6)
     );
   }
 `;
 
 interface CardContainerProps {
-  numberOfItems: number;
+  numberofitems: number;
 }
 export const CardContainer = styled(Box)<CardContainerProps>`
-  width: ${({ numberOfItems }: CardContainerProps) =>
-    numberOfItems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)'};
+  width: ${({ numberofitems }: CardContainerProps) =>
+    numberofitems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)'};
 
   margin-right: var(--boemly-space-16);
 

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

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

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

@@ -3,6 +3,9 @@ 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: {
@@ -11,6 +14,16 @@ 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 = {}) => {
@@ -61,17 +74,15 @@ describe('The TextWithCard component', () => {
   it('displays no card if there is no card in the slice', () => {
     setup();
 
-    expect(
-      screen.queryByText(strapiProjectCardMock.title)
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText(fpmProjectMock.title)).not.toBeInTheDocument();
   });
 
-  it('displays a card if there is a card in the slice', () => {
+  it('displays the card if a project has been selected', () => {
     setup({
       slice: { ...defaultProps.slice, card: strapiProjectCardMock },
     });
 
-    expect(screen.getByText(strapiProjectCardMock.title)).toBeInTheDocument();
+    expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
   });
 
   const cardPositions = ['left', 'right'];

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -4,17 +4,16 @@ 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;
@@ -30,11 +29,17 @@ 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]}
@@ -42,21 +47,8 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
       position="relative"
       data-testid={`card-position-${slice.cardPosition}`}
     >
-      {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' }}
-            />
-          }
-        />
+      {slice.card && fpmData && (
+        <PortfolioProjectCard project={{ ...slice.card, ...fpmData }} />
       )}
     </GridItem>
   );

package/src/test/integrationMocks/portfolioProjectMock.ts

@@ -0,0 +1,18 @@
+import { PortfolioProject } from '../..';
+import fpmProjectMock from './fpmProjectMock';
+import { strapiProjectMock } from '../strapiMocks/strapiProject';
+import { storybookStrapiCoverMock } from '../storybookMocks/storybookStrapiMedia';
+
+const portfolioProjectMock: PortfolioProject = {
+  ...strapiProjectMock.attributes,
+  ...fpmProjectMock,
+  isPublic: true,
+  footerSubTitle: 'Certified, 2023',
+  thumbnail: {
+    id: 1,
+    img: { data: storybookStrapiCoverMock },
+    alt: 'Project Thumbnail',
+  },
+};
+
+export default portfolioProjectMock;

package/src/test/strapiMocks/strapiProject.ts

@@ -3,6 +3,7 @@ import StrapiProject from '../../models/strapi/StrapiProject';
 import CreditsAvailableState from '../../models/CreditsAvailableState';
 import { strapiPortfolioMock } from './strapiPortfolioMock';
 import fpmProjectMock from '../integrationMocks/fpmProjectMock';
+import { strapiMediaMock } from './strapiMedia';
 
 export const strapiProjectMock: IStrapiData<StrapiProject> = {
   id: 1,
@@ -11,6 +12,7 @@ export const strapiProjectMock: IStrapiData<StrapiProject> = {
     locale: 'en',
     fpmProjectId: fpmProjectMock.id,
     creditsAvailable: CreditsAvailableState.YES,
+    footerSubTitle: 'Certified, 2023',
     createdAt: '2022-01-10T15:04:32.897Z',
     updatedAt: '2022-01-11T10:21:42.317Z',
     metadata: null,
@@ -24,6 +26,11 @@ export const strapiProjectMock: IStrapiData<StrapiProject> = {
     portfolio: {
       data: strapiPortfolioMock,
     },
+    thumbnail: {
+      img: { data: strapiMediaMock },
+      alt: 'Project Thumbnail',
+      id: 1,
+    },
     localizations: [
       {
         id: 2,

package/src/test/strapiMocks/strapiProjectCard.ts

@@ -1,20 +1,7 @@
 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 },
 };

package/src/unit.messages.de.ts

@@ -1,4 +1,5 @@
-export default {
+const unitMessagesDe = {
   'unit.formatter.tonsCo2': '{number} /tCO₂',
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/Jahr',
 };
+export default unitMessagesDe;

package/src/unit.messages.en.ts

@@ -1,4 +1,5 @@
-export default {
+const unitMessagesEn = {
   'unit.formatter.tonsCo2': '{number} /tCO₂',
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year',
 };
+export default unitMessagesEn;