@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import {
-  DefaultSectionContainer,
-  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 { IStrapiData, PortfolioProject, StrapiProject } from '../..';
-import ProjectGridCard from '../../components/ProjectGridCard';
-
-interface TextWithCardSlice {
-  tagline?: string;
-  title: string;
-  text?: string;
-  listItems?: {
-    id: number;
-    text: string;
-  }[];
-  button?: StrapiLink;
-  card?: StrapiProjectCard;
-  project?: { data?: IStrapiData<StrapiProject> };
-  cardPosition: 'left' | 'right';
-}
-export interface TextWithCardProps {
-  slice: TextWithCardSlice;
-  projects: PortfolioProject[];
-}
-
-export const TextWithCard: React.FC<TextWithCardProps> = ({
-  slice,
-  projects,
-}: TextWithCardProps) => {
-  const portfolioProject = projects.find(
-    (p) =>
-      slice.project?.data?.attributes.fpmProjectId &&
-      p.id === slice.project.data.attributes.fpmProjectId
-  );
-
-  const card = (
-    <GridItem
-      colSpan={[4, null, null, null, 2]}
-      rowSpan={1}
-      position="relative"
-      data-testid={`card-position-${slice.cardPosition}`}
-    >
-      {portfolioProject && <ProjectGridCard project={portfolioProject} />}
-      {!portfolioProject && 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>
-  );
-
-  return (
-    <DefaultSectionContainer title={slice.title}>
-      <Wrapper>
-        <Grid
-          templateColumns={[
-            'repeat(4, auto)',
-            null,
-            null,
-            null,
-            'repeat(6, auto)',
-          ]}
-          templateRows={[
-            'repeat(2, auto)',
-            null,
-            null,
-            null,
-            'repeat(1, auto)',
-          ]}
-          rowGap="12"
-          columnGap={['0', null, null, null, '28']}
-        >
-          {slice.cardPosition === 'left' && card}
-          <GridItem colSpan={4} rowSpan={1} position="relative">
-            <DefaultSectionHeader
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.text}
-            />
-
-            {slice.listItems && (
-              <>
-                <Spacer height="10" />
-                <BoemlyList listItems={slice.listItems} />
-                <Spacer height="10" />
-              </>
-            )}
-
-            {slice.button && (
-              <StrapiLinkButton
-                link={slice.button}
-                size="md"
-                colorScheme="white"
-                variant="outline"
-                rightIcon={<ArrowRight />}
-                component="TextWithCard"
-              />
-            )}
-          </GridItem>
-          {slice.cardPosition === 'right' && card}
-        </Grid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/TextWithCard/index.ts

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

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

@@ -1,122 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import {
-  storybookStrapiAvatarMock,
-  storybookStrapiGradientTopDownMock,
-  storybookStrapiTreeIconMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import TextWithTextCards from '.';
-
-export default {
-  title: 'slices/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

@@ -1,58 +0,0 @@
-import React from 'react';
-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

@@ -1,196 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  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 { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
-
-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 analyticsFunction = useContext(AnalyticsContext);
-  const [white] = useToken('colors', ['white']);
-  const [belowBreakpoint] = useMediaQuery(BREAKPOINT_LG_QUERY);
-
-  const handleContactButtonClick = () => {
-    if (slice.contact?.button) {
-      analyticsFunction?.({
-        type: 'track',
-        props: {
-          action: 'click',
-          component: 'TextWithTextCards',
-          buttonText: slice.contact.button.text,
-          buttonUrl: strapiLinkUrl(slice.contact.button),
-          section: 'contact',
-        },
-      });
-      push(strapiLinkUrl(slice.contact.button));
-    }
-  };
-
-  return (
-    <DefaultSectionContainer backgroundColor={white} title={slice.title}>
-      <>
-        {slice.shape && (
-          <Box
-            position="absolute"
-            right={['-28', null, null, '-136']}
-            top={['96', null, null, '-28']}
-            width={['sm', null, null, '4xl']}
-            height={['sm', null, null, '4xl']}
-            borderBottomRightRadius="full"
-          >
-            <Image
-              src={strapiMediaUrl(slice.shape.img, 'medium')}
-              alt={slice.shape.alt}
-              fill
-              style={{
-                objectFit: slice.shape.objectFit || 'cover',
-                borderBottomRightRadius: 'var(--boemly-radii-full)',
-              }}
-            />
-          </Box>
-        )}
-      </>
-      <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: handleContactButtonClick,
-                  }}
-                />
-              )}
-            </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: handleContactButtonClick,
-              }}
-            />
-          )}
-        </>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/TextWithTextCards/index.ts

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

package/src/slices/Timeline/Timeline.stories.tsx

@@ -1,200 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import {
-  storybookStrapiAvatarMock,
-  storybookStrapiCoverMock,
-  storybookStrapiTreeIconMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import Timeline from '.';
-import { TimelineItem } from './Timeline';
-import { StrapiImage } from '../..';
-
-export default {
-  title: 'slices/Timeline',
-  component: Timeline,
-} as Meta<typeof Timeline>;
-
-const Template: StoryFn<typeof Timeline> = (args) => <Timeline {...args} />;
-
-const timelineItem: TimelineItem = {
-  id: 1,
-  tagline: '08 Jan 2024',
-  title: 'Title',
-  text: 'After a site visit in the summer of 2022, the project has now been successfully audited by TÜV Nord Cert according to ISO 14064-2, making it the second certified forest adaption climate protection project in the world.',
-  backgroundShapes: false,
-};
-const button = {
-  id: 1,
-  text: 'Button',
-  url: 'https://tree.ly',
-};
-const badge: { text: string; variant: 'orange' | 'green' | 'red' | 'gray' } = {
-  text: 'Badge',
-  variant: 'green',
-};
-const image = { id: 71, alt: 'Alt', img: { data: storybookStrapiCoverMock } };
-const icon = {
-  id: 1,
-  alt: 'Icon alt text',
-  img: { data: storybookStrapiTreeIconMock },
-};
-const logo: StrapiImage = {
-  id: 2,
-  alt: 'Avatar image alt text',
-  img: { data: storybookStrapiAvatarMock },
-  objectFit: 'contain',
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    timelineItems: [
-      timelineItem,
-      timelineItem,
-      timelineItem,
-      timelineItem,
-      timelineItem,
-    ],
-  },
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Tree.ly connects forest owners with companies, helping forest owners earn extra income by managing forests for climate resilience. Companies can purchase high-quality CO₂ credits, backing forest owners and showing their commitment to measurable climate protection.',
-    timelineItems: [
-      timelineItem,
-      timelineItem,
-      timelineItem,
-      timelineItem,
-      timelineItem,
-    ],
-  },
-};
-
-export const WithBackgroundShapes = Template.bind({});
-WithBackgroundShapes.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    timelineItems: [
-      { ...timelineItem, backgroundShapes: true },
-      { ...timelineItem, backgroundShapes: true },
-      { ...timelineItem, backgroundShapes: true },
-      { ...timelineItem, backgroundShapes: true },
-      { ...timelineItem, backgroundShapes: true },
-    ],
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    timelineItems: [
-      {
-        ...timelineItem,
-        button,
-      },
-      {
-        ...timelineItem,
-        button,
-      },
-      {
-        ...timelineItem,
-        button,
-      },
-      {
-        ...timelineItem,
-        button,
-      },
-      {
-        ...timelineItem,
-        button,
-      },
-    ],
-  },
-};
-
-export const WithBadgeOrLogo = Template.bind({});
-WithBadgeOrLogo.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    timelineItems: [
-      { ...timelineItem, badge },
-      {
-        ...timelineItem,
-        logo,
-      },
-      { ...timelineItem, logo, badge },
-      { ...timelineItem, badge },
-      { ...timelineItem, badge },
-    ],
-  },
-};
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    timelineItems: [
-      {
-        ...timelineItem,
-        image,
-      },
-      {
-        ...timelineItem,
-        image,
-      },
-      {
-        ...timelineItem,
-        image,
-      },
-      {
-        ...timelineItem,
-        image,
-      },
-      {
-        ...timelineItem,
-        image,
-      },
-    ],
-  },
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    timelineItems: [
-      {
-        ...timelineItem,
-        icon,
-      },
-      {
-        ...timelineItem,
-        icon,
-      },
-      {
-        ...timelineItem,
-        icon,
-      },
-      {
-        ...timelineItem,
-        icon,
-      },
-    ],
-  },
-};