@treely/strapi-slices 1.0.0

package/src/slices/TextWithTextCards/TextWithTextCards.stories.tsx

@@ -0,0 +1,121 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import {
+  storybookStrapiAvatarMock,
+  storybookStrapiGradientTopDownMock,
+  storybookStrapiTreeIconMock,
+} from '@/test/storybookMocks/storybookStrapiMedia';
+import TextWithTextCards from '.';
+
+export default {
+  title: 'sections/TextWithTextCards',
+  component: TextWithTextCards,
+} as Meta<typeof TextWithTextCards>;
+
+const Template: StoryFn<typeof TextWithTextCards> = (args) => (
+  <TextWithTextCards {...args} />
+);
+
+const cards = [
+  {
+    id: 1,
+    title: 'Title 1',
+    text: 'Text 1',
+    icon: {
+      id: 1,
+      alt: 'Icon alt text',
+      img: { data: storybookStrapiTreeIconMock },
+    },
+  },
+  {
+    id: 2,
+    title: 'Title 2',
+    text: 'Text 2',
+    icon: {
+      id: 1,
+      alt: 'Icon alt text',
+      img: { data: storybookStrapiTreeIconMock },
+    },
+  },
+  {
+    id: 3,
+    title: 'Title 3',
+    text: 'Text 3',
+    icon: {
+      id: 1,
+      alt: 'Icon alt text',
+      img: { data: storybookStrapiTreeIconMock },
+    },
+  },
+];
+
+const contact = {
+  id: 1,
+  title: 'Title',
+  text: 'Text',
+  avatar: {
+    id: 1,
+    name: 'Avatar name',
+    description: 'Avatar description',
+    image: {
+      id: 1,
+      alt: 'Image alt text',
+      img: { data: storybookStrapiAvatarMock },
+    },
+  },
+  button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    title: 'Title',
+    cards,
+  },
+};
+
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    cards,
+  },
+};
+
+export const WithTaglineAndText = Template.bind({});
+WithTaglineAndText.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    cards,
+  },
+};
+
+export const WithContact = Template.bind({});
+WithContact.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    cards,
+    contact,
+  },
+};
+
+export const WithShape = Template.bind({});
+WithShape.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    cards,
+    contact,
+    shape: {
+      id: 1,
+      alt: 'Shape alt text',
+      img: { data: storybookStrapiGradientTopDownMock },
+    },
+  },
+};

package/src/slices/TextWithTextCards/TextWithTextCards.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@/test/testUtils';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import { strapiContactMock } from '@/test/strapiMocks/strapiContact';
+import TextWithTextCards from '.';
+import { TextWithTextCardsProps } from './TextWithTextCards';
+
+const defaultProps: TextWithTextCardsProps = {
+  slice: {
+    title: 'Title',
+    cards: [
+      {
+        id: 1,
+        title: 'Card title',
+        text: 'Card text',
+        icon: { id: 1, alt: 'Alt text 1', img: { data: strapiMediaMock } },
+      },
+    ],
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<TextWithTextCards {...combinedProps} />);
+};
+
+describe('The TextWithTextCards component', () => {
+  it('displays the section header', () => {
+    setup();
+
+    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
+  });
+
+  it('displays the card', () => {
+    setup();
+
+    expect(
+      screen.getByText(defaultProps.slice.cards[0].title)
+    ).toBeInTheDocument();
+  });
+
+  it('displays the contact area if there is contact area data in the slice', () => {
+    setup({ slice: { ...defaultProps.slice, contact: strapiContactMock } });
+
+    expect(screen.getByText(strapiContactMock.text)).toBeInTheDocument();
+  });
+
+  it('displays the shape if there is shape in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        shape: { id: 1, alt: 'Alt text', img: { data: strapiMediaMock } },
+      },
+    });
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute('alt', 'Alt text');
+  });
+});

package/src/slices/TextWithTextCards/TextWithTextCards.tsx

@@ -0,0 +1,167 @@
+import {
+  ContactArea,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Grid,
+  GridItem,
+  TextCardWithIcon,
+  useMediaQuery,
+  useToken,
+  Wrapper,
+} from 'boemly';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { BREAKPOINT_LG_QUERY } from '@/constants/breakpoints';
+import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import strapiLinkUrl from '@/utils/strapiLinkUrl';
+import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
+import StrapiContactArea from '@/models/strapi/StrapiContactArea';
+import StrapiTextCardWithIcon from '@/models/strapi/StrapiTextCardWithIcons';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import { ShapeContainer } from './styles';
+
+interface TextWithTextCardsSlice extends StrapiDefaultHeader {
+  cards: StrapiTextCardWithIcon[];
+  contact?: StrapiContactArea;
+  shape?: StrapiImage;
+}
+export interface TextWithTextCardsProps {
+  slice: TextWithTextCardsSlice;
+}
+
+export const TextWithTextCards: React.FC<TextWithTextCardsProps> = ({
+  slice,
+}: TextWithTextCardsProps) => {
+  const { push } = useRouter();
+  const [white] = useToken('colors', ['white']);
+  const [belowBreakpoint] = useMediaQuery(BREAKPOINT_LG_QUERY);
+
+  return (
+    <DefaultSectionContainer backgroundColor={white} title={slice.title}>
+      <>
+        {slice.shape && (
+          <ShapeContainer>
+            <Image
+              src={strapiMediaUrl(slice.shape.img, 'medium')}
+              alt={slice.shape.alt}
+              fill
+              style={{ objectFit: slice.shape.objectFit || 'cover' }}
+            />
+          </ShapeContainer>
+        )}
+      </>
+      <Wrapper>
+        <>
+          <Grid
+            templateColumns={[
+              'repeat(8, 1fr)',
+              null,
+              null,
+              null,
+              'repeat(16, 1fr)',
+            ]}
+            templateRows={[
+              'repeat(2, auto)',
+              null,
+              null,
+              null,
+              'repeat(1, auto)',
+            ]}
+            rowGap="12"
+          >
+            <GridItem
+              colSpan={[8, null, null, null, 9]}
+              rowSpan={1}
+              pr={['0', null, null, null, '32']}
+            >
+              <DefaultSectionHeader
+                tagline={slice.tagline}
+                title={slice.title}
+                text={slice.text}
+                textProps={{ pr: ['0', null, null, null, '10'] }}
+              />
+
+              {slice.contact && !belowBreakpoint && (
+                <ContactArea
+                  title={slice.contact.title}
+                  text={slice.contact.text}
+                  avatar={{
+                    name: slice.contact.avatar.name,
+                    description: slice.contact.avatar.description,
+                    image: (
+                      <Image
+                        src={strapiMediaUrl(
+                          slice.contact.avatar.image.img,
+                          'small'
+                        )}
+                        alt={slice.contact.avatar.image.alt}
+                        fill
+                        style={{
+                          objectFit:
+                            slice.contact.avatar.image.objectFit || 'cover',
+                        }}
+                      />
+                    ),
+                  }}
+                  link={{
+                    text: slice.contact.button.text,
+                    onClick: () => push(strapiLinkUrl(slice.contact?.button)),
+                  }}
+                />
+              )}
+            </GridItem>
+            <GridItem
+              colSpan={[8, null, null, null, 7]}
+              rowSpan={1}
+              position="relative"
+            >
+              {slice.cards.map((card) => (
+                <TextCardWithIcon
+                  key={card.id}
+                  title={card.title}
+                  text={card.text}
+                  icon={
+                    <Image
+                      src={strapiMediaUrl(card.icon.img, 'small')}
+                      alt={card.icon.alt}
+                      fill
+                      style={{ objectFit: card.icon.objectFit || 'contain' }}
+                    />
+                  }
+                />
+              ))}
+            </GridItem>
+          </Grid>
+          {slice.contact && belowBreakpoint && (
+            <ContactArea
+              title={slice.contact.title}
+              text={slice.contact.text}
+              avatar={{
+                name: slice.contact.avatar.name,
+                description: slice.contact.avatar.description,
+                image: (
+                  <Image
+                    src={strapiMediaUrl(
+                      slice.contact.avatar.image.img,
+                      'small'
+                    )}
+                    alt={slice.contact.avatar.image.alt}
+                    fill
+                    style={{
+                      objectFit:
+                        slice.contact.avatar.image.objectFit || 'cover',
+                    }}
+                  />
+                ),
+              }}
+              link={{
+                text: slice.contact.button.text,
+                onClick: () => push(strapiLinkUrl(slice.contact?.button)),
+              }}
+            />
+          )}
+        </>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/TextWithTextCards/index.ts

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

package/src/slices/TextWithTextCards/styles.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { BREAKPOINT_LG } from '@/constants/breakpoints';
+
+export const ShapeContainer = styled.div`
+  position: absolute;
+  right: calc(var(--boemly-space-136) * -1);
+  top: calc((var(--boemly-space-28)) * -1);
+
+  width: var(--boemly-sizes-4xl);
+  height: var(--boemly-sizes-4xl);
+
+  @media screen and (max-width: ${BREAKPOINT_LG}) {
+    width: var(--boemly-sizes-sm);
+    height: var(--boemly-sizes-sm);
+
+    right: calc(var(--boemly-space-28) * -1);
+    top: var(--boemly-space-96);
+  }
+
+  border-bottom-right-radius: var(--boemly-radii-full);
+
+  & span,
+  div {
+    border-bottom-right-radius: var(--boemly-radii-full);
+  }
+`;

package/src/slices/Video/Video.stories.tsx

@@ -0,0 +1,18 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import Video from '.';
+
+export default {
+  title: 'sections/Video',
+  component: Video,
+} as Meta<typeof Video>;
+
+const Template: StoryFn<typeof Video> = (args) => <Video {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  slice: {
+    title: 'Title',
+    youTubeID: 'QnzFqtWIJCI',
+  },
+};

package/src/slices/Video/Video.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@/test/testUtils';
+import Video from '.';
+import { VideoProps } from './Video';
+
+const defaultProps: VideoProps = {
+  slice: {
+    title: 'Title',
+    youTubeID: 'youTubeID',
+  },
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<Video {...combinedProps} />);
+};
+
+describe('The Video component', () => {
+  it('displays an iframe with a video', () => {
+    setup();
+
+    expect(screen.getByTestId('video-iframe')).toHaveAttribute(
+      'src',
+      'https://www.youtube.com/embed/youTubeID'
+    );
+  });
+});

package/src/slices/Video/Video.tsx

@@ -0,0 +1,35 @@
+import { Box, DefaultSectionContainer, Wrapper } from 'boemly';
+import { useMeasure } from 'react-use';
+
+interface VideoSlice {
+  youTubeID: string;
+  title: string;
+}
+
+export interface VideoProps {
+  slice: VideoSlice;
+}
+
+export const Video: React.FC<VideoProps> = ({ slice }: VideoProps) => {
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        <Box ref={ref} borderRadius="xl">
+          <iframe
+            data-testid="video-iframe"
+            width={width}
+            height={(width / 16) * 9}
+            src={`https://www.youtube.com/embed/${slice.youTubeID}`}
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            title={slice.title}
+            style={{ borderRadius: 'var(--boemly-radii-xl)' }}
+          />
+        </Box>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/Video/index.ts

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

package/src/test/defaultMocks/next.ts

@@ -0,0 +1,29 @@
+import type { NextRouter } from 'next/router';
+
+export const DEFAULT_USE_ROUTER_RETURN_VALUE: NextRouter = {
+  asPath: '/',
+  back: jest.fn(),
+  basePath: '',
+  beforePopState: jest.fn(),
+  events: {
+    emit: jest.fn(),
+    off: jest.fn(),
+    on: jest.fn(),
+  },
+  isFallback: false,
+  isLocaleDomain: true,
+  isPreview: false,
+  isReady: true,
+  pathname: '/',
+  prefetch: jest.fn(),
+  push: jest.fn(),
+  query: {},
+  reload: jest.fn(),
+  replace: jest.fn(),
+  route: '/',
+  defaultLocale: 'en',
+  domainLocales: [],
+  locale: 'en',
+  locales: ['en', 'de'],
+  forward: jest.fn(),
+};

package/src/test/integrationMocks/fpmProjectMock.ts

@@ -0,0 +1,37 @@
+import FPMProject from '@/models/fpm/FPMProject';
+
+const fpmProjectMock: FPMProject = {
+  id: '1',
+  title: 'Project 1',
+  geom: {
+    type: 'Point',
+    coordinates: [10.036542145100883, 47.42636837845707],
+  },
+  area: 1400000,
+  location: 'Austria',
+  start: new Date('2020-01-01'),
+  end: new Date('2050-12-31'),
+  projectType: {
+    title: 'Project Type 1',
+    id: '1',
+    createdAt: new Date('2020-01-01'),
+    updatedAt: new Date('2020-01-01'),
+  },
+  projectDeveloper: {
+    name: 'Project Developer 1',
+    id: '1',
+    createdAt: new Date('2020-01-01'),
+    updatedAt: new Date('2020-01-01'),
+  },
+  verificationStandard: {
+    id: 'SilvaconsultFCSISO14',
+    createdAt: new Date('2020-01-01'),
+    updatedAt: new Date('2020-01-01'),
+  },
+  forecastedAmountYearly: 100,
+  riskBuffer: 10,
+  createdAt: new Date('2020-01-01'),
+  updatedAt: new Date('2020-01-01'),
+};
+
+export default fpmProjectMock;

package/src/test/mocks/portfolioProjectMock.ts

@@ -0,0 +1,11 @@
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import PortfolioProject from '@/models/PortfolioProject';
+import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
+
+const portfolioProjectMock: PortfolioProject = {
+  ...fpmProjectMock,
+  creditsAvailable: CreditsAvailableState.YES,
+  slug: 'portfolio-slug',
+};
+
+export default portfolioProjectMock;

package/src/test/setupTests.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom';
+import matchMediaPolyfill from 'mq-polyfill';
+
+matchMediaPolyfill(window);
+global.scrollTo = jest.fn();

package/src/test/storybookMocks/storybookMedia.ts

@@ -0,0 +1,2 @@
+export const storybookAvatarUrl =
+  'https://cdn.tree.ly/storybook/v1/avatar.jpeg';

package/src/test/storybookMocks/storybookStrapiMedia.ts

@@ -0,0 +1,58 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiMedia from '@/models/strapi/StrapiMedia';
+import { strapiMediaMock } from '../strapiMocks/strapiMedia';
+import { storybookAvatarUrl } from './storybookMedia';
+
+export const storybookStrapiAvatarMock: IStrapiData<StrapiMedia> = {
+  ...strapiMediaMock,
+  attributes: {
+    ...strapiMediaMock.attributes,
+    formats: {},
+    url: storybookAvatarUrl,
+  },
+};
+
+export const storybookStrapiCoverMock: IStrapiData<StrapiMedia> = {
+  ...strapiMediaMock,
+  attributes: {
+    ...strapiMediaMock.attributes,
+    formats: {},
+    url: 'https://cdn.tree.ly/storybook/v1/cover.jpeg',
+  },
+};
+
+export const storybookStrapiGradientTopDownMock: IStrapiData<StrapiMedia> = {
+  ...strapiMediaMock,
+  attributes: {
+    ...strapiMediaMock.attributes,
+    formats: {},
+    url: 'https://cdn.tree.ly/storybook/v1/shape_gradient_top_down.png',
+  },
+};
+
+export const storybookStrapiGradientBottomUpMock: IStrapiData<StrapiMedia> = {
+  ...strapiMediaMock,
+  attributes: {
+    ...strapiMediaMock.attributes,
+    formats: {},
+    url: 'https://cdn.tree.ly/storybook/v1/shape_gradient_buttom_up.png',
+  },
+};
+
+export const storybookStrapiTreeIconMock: IStrapiData<StrapiMedia> = {
+  ...strapiMediaMock,
+  attributes: {
+    ...strapiMediaMock.attributes,
+    formats: {},
+    url: 'https://cdn.tree.ly/storybook/v1/icon_tree.png',
+  },
+};
+
+export const storybookStrapiMapMock: IStrapiData<StrapiMedia> = {
+  ...strapiMediaMock,
+  attributes: {
+    ...strapiMediaMock.attributes,
+    formats: {},
+    url: 'https://cdn.tree.ly/storybook/v1/map.jpeg',
+  },
+};

package/src/test/strapiMocks/minimalGlobalData.ts

@@ -0,0 +1,24 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiGlobal from '@/models/strapi/StrapiGlobal';
+import { strapiMediaMock } from './strapiMedia';
+import { strapiMetadataMock } from './strapiMetadata';
+
+const minimalGlobalData: IStrapiData<StrapiGlobal> = {
+  id: 1,
+  attributes: {
+    metadata: strapiMetadataMock,
+    favicon: { data: strapiMediaMock },
+    metaTitleSuffix: 'Meta title suffix',
+    navbar: {
+      id: 1,
+      navMenus: undefined,
+      buttons: undefined,
+    },
+    footer: {
+      id: 1,
+      links: undefined,
+    },
+  },
+};
+
+export default minimalGlobalData;

package/src/test/strapiMocks/strapiAvatarWithName.ts

@@ -0,0 +1,12 @@
+import { strapiMediaMock } from './strapiMedia';
+
+export const strapiAvatarWithNameMock = {
+  id: 1,
+  name: 'Name',
+  description: 'Description',
+  image: {
+    id: 1,
+    alt: 'Alternative image',
+    img: { data: strapiMediaMock },
+  },
+};