@treely/strapi-slices 1.0.0

package/src/slices/MapHero/MapHero.tsx

@@ -0,0 +1,89 @@
+import { DefaultSectionHeader, Flex, useMediaQuery, Wrapper } from 'boemly';
+import Image from 'next/image';
+import { BREAKPOINT_LG_QUERY } from '@/constants/breakpoints';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import {
+  MapHeroContainer,
+  MapHeroTextContainer,
+  ShapeContainer,
+  MapContainer,
+  MapGradient,
+} from './styles';
+
+export interface MapHeroProps {
+  slice: {
+    tagline?: string;
+    title: string;
+    subTitle?: string;
+    buttons?: StrapiLink[];
+    shape?: StrapiImage;
+    map: StrapiImage;
+    mobileMap: StrapiImage;
+  };
+}
+
+export const MapHero: React.FC<MapHeroProps> = ({ slice }: MapHeroProps) => {
+  const [belowBreakpoint] = useMediaQuery(BREAKPOINT_LG_QUERY);
+
+  return (
+    <MapHeroContainer>
+      {slice.shape && (
+        <ShapeContainer>
+          <Image
+            src={strapiMediaUrl(slice.shape.img, 'medium')}
+            alt={slice.shape.alt}
+            fill
+            style={{ objectFit: slice.shape.objectFit || 'cover' }}
+          />
+        </ShapeContainer>
+      )}
+      <MapHeroTextContainer>
+        <Wrapper>
+          <>
+            <DefaultSectionHeader
+              isHero
+              tagline={slice.tagline}
+              title={slice.title}
+              text={slice.subTitle}
+              titleProps={{ maxW: ['100%', null, null, null, '60%'] }}
+              textProps={{ maxW: ['100%', null, null, null, '55%'] }}
+            />
+            {slice.buttons && slice.buttons.length > 0 && (
+              <Flex mt="10" flexDir="row" gap="5">
+                <StrapiLinkButton link={slice.buttons[0]} size="xl" />
+                {slice.buttons.length === 2 && (
+                  <StrapiLinkButton
+                    link={slice.buttons[1]}
+                    variant="outline"
+                    size="xl"
+                  />
+                )}
+              </Flex>
+            )}
+          </>
+        </Wrapper>
+      </MapHeroTextContainer>
+      <MapContainer>
+        {belowBreakpoint ? (
+          <Image
+            src={strapiMediaUrl(slice.mobileMap.img, 'xLarge')}
+            alt={slice.mobileMap.alt}
+            fill
+            style={{ objectFit: slice.mobileMap.objectFit || 'contain' }}
+          />
+        ) : (
+          <Image
+            src={strapiMediaUrl(slice.map.img, 'xLarge')}
+            alt={slice.map.alt}
+            fill
+            style={{ objectFit: slice.map.objectFit || 'cover' }}
+          />
+        )}
+        <MapGradient />
+      </MapContainer>
+    </MapHeroContainer>
+  );
+};

package/src/slices/MapHero/index.ts

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

package/src/slices/MapHero/styles.ts

@@ -0,0 +1,105 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_LG } from '@/constants/breakpoints';
+
+export const MapHeroContainer = styled.div`
+  position: relative;
+  width: 100vw;
+  height: var(--default-hero-height);
+  min-height: var(--boemly-sizes-3xl);
+  background-color: var(--boemly-colors-primary-50);
+  overflow: hidden;
+  z-index: var(--boemly-zIndices-base);
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    height: auto;
+  }
+`;
+
+export const MapHeroTextContainer = styled.div`
+  position: absolute;
+  width: 100vw;
+  top: 56%;
+  left: 0;
+  transform: translateY(-50%);
+  z-index: var(--boemly-zIndices-aboveBase);
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    position: relative;
+    transform: unset;
+
+    padding-top: var(--boemly-space-32);
+  }
+`;
+
+export const ShapeContainer = styled.div`
+  position: absolute;
+  bottom: calc(var(--boemly-space-8) * -1);
+  left: 0;
+
+  width: var(--boemly-sizes-sm);
+  height: var(--boemly-sizes-sm);
+
+  border-top-right-radius: var(--boemly-radii-full);
+
+  & span,
+  div {
+    border-top-right-radius: var(--boemly-radii-full);
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    display: none;
+  }
+`;
+
+export const MapContainer = styled.div`
+  position: absolute;
+
+  width: 50%;
+  height: 100%;
+
+  right: 0;
+  top: 0;
+
+  & img {
+    object-fit: cover !important;
+  }
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    width: 100%;
+    height: var(--boemly-sizes-4xl);
+    position: relative;
+    margin-top: calc(var(--boemly-space-72) * -1);
+    background-color: var(--boemly-colors-white);
+
+    & img {
+      object-fit: contain !important;
+    }
+  }
+`;
+
+export const MapGradient = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+
+  background: linear-gradient(
+    90deg,
+    var(--boemly-colors-primary-50) 0%,
+    var(--boemly-colors-primary-50) 10%,
+    rgba(243, 246, 245, 0.6) 28%,
+    rgba(243, 246, 245, 0) 40%,
+    rgba(243, 246, 245, 0) 100%
+  );
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    background: linear-gradient(
+      180deg,
+      var(--boemly-colors-primary-50) 0%,
+      var(--boemly-colors-primary-50) 36%,
+      rgba(243, 246, 245, 0.12) 46%,
+      rgba(243, 246, 245, 0) 100%
+    );
+  }
+`;

package/src/slices/ProjectFacts/ProjectFacts.stories.tsx

@@ -0,0 +1,91 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import ProjectFacts from '.';
+
+export default {
+  title: 'sections/ProjectFacts',
+  component: ProjectFacts,
+} as Meta<typeof ProjectFacts>;
+
+const Template: StoryFn<typeof ProjectFacts> = (args) => (
+  <ProjectFacts {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  project: fpmProjectMock,
+  slice: {
+    projectId: fpmProjectMock.id,
+  },
+};
+
+export const WithDocuments = Template.bind({});
+WithDocuments.args = {
+  project: fpmProjectMock,
+  slice: {
+    projectId: fpmProjectMock.id,
+
+    documentUrls: [
+      { id: 1, text: 'Document 1', url: 'https://example.org' },
+      { id: 2, text: 'Document 2', url: 'https://example.org' },
+      { id: 3, text: 'Document 3', url: 'https://example.org' },
+    ],
+  },
+};
+
+export const WithCheckout = Template.bind({});
+WithCheckout.args = {
+  project: fpmProjectMock,
+  slice: {
+    projectId: fpmProjectMock.id,
+    batchId: 'mock-id',
+    currency: 'EUR',
+    pricePerKg: 0.08,
+    checkoutText:
+      'With your support you help Example Project with sustainable forestry.',
+    initialContributionValue: 80,
+  },
+};
+
+export const FullProps = Template.bind({});
+FullProps.args = {
+  project: { ...fpmProjectMock, creditsAvailable: CreditsAvailableState.YES },
+  slice: {
+    projectId: fpmProjectMock.id,
+
+    batchId: 'mock-id',
+    currency: 'EUR',
+    pricePerKg: 0.08,
+    checkoutText:
+      'With your support you help Example Project with sustainable forestry.',
+    initialContributionValue: 80,
+
+    documentUrls: [
+      { id: 1, text: 'Document 1', url: 'https://example.org' },
+      { id: 2, text: 'Document 2', url: 'https://example.org' },
+      { id: 3, text: 'Document 3', url: 'https://example.org' },
+    ],
+
+    buyCreditsSubtitle: 'Buy Credits Subtitle',
+    areaSubtitle: 'Area Subtitle',
+    locationSubtitle: 'Location Subtitle',
+    startSubtitle: 'Start Subtitle',
+    timeSpanSubtitle: 'Time Span Subtitle',
+    projectTypeSubtitle: 'Project Type Subtitle',
+    projectDeveloperSubtitle: 'Project Developer Subtitle',
+    verificationStandardSubtitle: 'Verification Standard Subtitle',
+    forecastedAmountSubtitle: 'Forecasted Amount Subtitle',
+    riskBufferSubtitle: 'Risk Buffer Subtitle',
+
+    customTitle: 'Looking to buy more than 10.000 tCO₂?',
+    customSubtitle:
+      'For enterprise-customers we offer custom solutions. Feel free to contact us.',
+    customButton: {
+      id: 1,
+      text: 'Contact our Sales Team',
+      url: 'https://example.org',
+    },
+  },
+};

package/src/slices/ProjectFacts/ProjectFacts.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@/test/testUtils';
+import ProjectFacts from '.';
+import { ProjectFactsProps } from './ProjectFacts';
+import portfolioProjectMock from '@/test/mocks/portfolioProjectMock';
+
+const defaultProps: ProjectFactsProps = {
+  slice: {
+    projectId: 'project-id-1',
+  },
+};
+const setup = (props: Partial<ProjectFactsProps> = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ProjectFacts {...combinedProps} />);
+};
+
+describe('The ProjectFacts slice', () => {
+  it('displays nothing if there is no project', () => {
+    setup();
+
+    expect(
+      screen.getByText(
+        'Invalid configuration, check if a project this id exists in the FPM'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays the project info if there is a project', () => {
+    setup({ project: portfolioProjectMock });
+
+    expect(
+      screen.getByText(portfolioProjectMock.location || '')
+    ).toBeInTheDocument();
+  });
+});

package/src/slices/ProjectFacts/ProjectFacts.tsx

@@ -0,0 +1,95 @@
+import { DefaultSectionContainer, Flex, Wrapper } from 'boemly';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import PortfolioProject from '@/models/PortfolioProject';
+import SmallCheckout from '@/components/portfolio/SmallCheckout';
+import ProjectInfo from '@/components/portfolio/ProjectInfo';
+import DocumentsDownloadList from '@/components/portfolio/DocumentsDownloadList';
+import Contact from '@/components/portfolio/Contact';
+import StrapiImage from '@/models/strapi/StrapiImage';
+
+export interface ProjectFactsProps {
+  project?: PortfolioProject;
+  slice: {
+    projectId: string;
+
+    batchId?: string;
+    currency?: 'EUR' | 'CHF';
+    pricePerKg?: number;
+    initialContributionValue?: number;
+    checkoutText?: string;
+
+    customTitle?: string;
+    customSubtitle?: string;
+    customButton?: StrapiLink;
+    documentUrls?: StrapiLink[];
+
+    areaSubtitle?: string;
+    locationSubtitle?: string;
+    startSubtitle?: string;
+    timeSpanSubtitle?: string;
+    projectTypeSubtitle?: string;
+    projectDeveloperSubtitle?: string;
+    verificationStandardSubtitle?: string;
+    forecastedAmountSubtitle?: string;
+    riskBufferSubtitle?: string;
+    buyCreditsSubtitle?: string;
+
+    contactTitle?: string;
+    contactText?: string;
+    contactButton?: StrapiLink;
+    contactAvatar?: StrapiImage;
+  };
+}
+
+export const ProjectFacts: React.FC<ProjectFactsProps> = ({
+  slice,
+  project,
+}: ProjectFactsProps) => {
+  if (!project) {
+    return (
+      <>Invalid configuration, check if a project this id exists in the FPM</>
+    );
+  }
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        <Flex flexDir={['column', null, null, 'row']} gap="4" width="full">
+          <ProjectInfo project={project} subtitles={slice} />
+          <Flex flexDir="column" gap="4" width="full">
+            {slice.documentUrls && slice.documentUrls.length > 0 && (
+              <DocumentsDownloadList documentUrls={slice.documentUrls} />
+            )}
+            {slice.batchId &&
+            slice.pricePerKg &&
+            slice.currency &&
+            slice.initialContributionValue ? (
+              <SmallCheckout
+                batchId={slice.batchId}
+                checkoutText={slice.checkoutText}
+                currency={slice.currency}
+                initialContributionValue={slice.initialContributionValue}
+                pricePerKg={slice.pricePerKg}
+                title={slice.customTitle}
+                subtitle={slice.customSubtitle}
+                button={slice.customButton}
+              />
+            ) : (
+              (slice.contactTitle ||
+                slice.contactText ||
+                slice.contactButton ||
+                slice.contactAvatar) && (
+                <Contact
+                  title={slice.contactTitle}
+                  text={slice.contactText}
+                  button={slice.contactButton}
+                  avatar={slice.contactAvatar}
+                />
+              )
+            )}
+          </Flex>
+        </Flex>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/ProjectFacts/index.ts

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import Locale from '@/models/Locale';
+import ProjectsGrid from '.';
+
+export default {
+  title: 'sections/ProjectsGrid',
+  component: ProjectsGrid,
+} as Meta<typeof ProjectsGrid>;
+
+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' },
+          },
+        },
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,31 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiProjectCardMock } from '@/test/strapiMocks/strapiProjectCard';
+import ProjectsGrid from '.';
+import { ProjectsGridProps } from './ProjectsGrid';
+
+const defaultProps: ProjectsGridProps = {
+  slice: {
+    projects: [strapiProjectCardMock],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ProjectsGrid {...combinedProps} />);
+};
+
+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');
+  });
+});

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -0,0 +1,80 @@
+import {
+  Box,
+  DefaultSectionContainer,
+  ProjectCard,
+  SimpleGrid,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import Link from 'next/link';
+import { MEDIUM_TRANSITION_DURATION } from '@/constants/animations';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiProjectCard from '@/models/strapi/StrapiProjectCard';
+
+export interface ProjectsGridProps {
+  slice: {
+    projects: StrapiProjectCard[];
+  };
+}
+
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children,
+}: {
+  condition: boolean;
+  wrapper: (children: JSX.Element) => JSX.Element;
+  children: JSX.Element;
+}) => (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' }}
+            >
+              <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>
+);

package/src/slices/ProjectsGrid/index.ts

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