@treely/strapi-slices 7.17.0 → 8.0.1

package/src/slices/CtaOnly/CtaOnly.stories.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import CtaOnly from '.';
-import RichTextSection from '../RichTextSection';
-import { RichTextSectionProps } from '../RichTextSection/RichTextSection';
-
-export default {
-  title: 'slices/CTAOnly',
-  component: CtaOnly,
-  subcomponents: { RichTextSection },
-} as Meta<typeof CtaOnly>;
-
-const richTextWithTitleArgs: RichTextSectionProps = {
-  slice: {
-    content: `
-# Heading 1
-This is some rich text that is not part of the CtaOnly section.
-The actual CtaOnly section is only the button below.
-`,
-  },
-};
-
-const richTextArgs: RichTextSectionProps = {
-  slice: {
-    content: `
-This is some rich text that is also not part of the CtaOnly section.
-`,
-  },
-};
-
-const Template: StoryFn<typeof CtaOnly> = (args) => (
-  <>
-    <RichTextSection {...richTextWithTitleArgs} />
-    <CtaOnly {...args} />
-    <RichTextSection {...richTextArgs} />
-  </>
-);
-
-export const WithRichText = Template.bind({});
-WithRichText.args = {
-  slice: {
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-  },
-};

package/src/slices/CtaOnly/CtaOnly.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { CtaOnlyProps } from './CtaOnly';
-import CtaOnly from '.';
-
-const defaultProps: CtaOnlyProps = {
-  slice: {
-    button: {
-      id: 1,
-      text: 'Link',
-      url: 'url',
-    },
-  },
-};
-
-const setup = () => {
-  render(<CtaOnly {...defaultProps} />);
-};
-
-describe('The CTAOnly component', () => {
-  it('displays a link', () => {
-    setup();
-
-    expect(screen.getByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-});

package/src/slices/CtaOnly/CtaOnly.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Box, Wrapper } from 'boemly';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import StrapiLink from '../../models/strapi/StrapiLink';
-
-export interface CtaOnlyProps {
-  slice: {
-    button: StrapiLink;
-  };
-}
-
-export const CtaOnly: React.FC<CtaOnlyProps> = ({ slice }: CtaOnlyProps) => (
-  <Wrapper>
-    <Box position="absolute" top="-28" transform="translateY(50%)">
-      <StrapiLinkButton size="md" link={slice.button} component="CtaOnly" />
-    </Box>
-  </Wrapper>
-);

package/src/slices/CtaOnly/index.ts

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

package/src/slices/CustomerStories/CustomerStories.stories.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import {
-  strapiCustomerStoryMock,
-  strapiCustomerStoryWithCustomerQuoteCardMock,
-  strapiCustomerStoryWithLogoCardMock,
-} from '../../test/strapiMocks/strapiCustomerStory';
-import { Meta, StoryFn } from '@storybook/react';
-import CustomerStories from '.';
-
-export default {
-  title: 'slices/CustomerStories',
-  component: CustomerStories,
-} as Meta<typeof CustomerStories>;
-
-const Template: StoryFn<typeof CustomerStories> = (args) => (
-  <CustomerStories {...args} />
-);
-
-export const WithCustomerCard = Template.bind({});
-WithCustomerCard.args = {
-  slice: {
-    customer_stories: [strapiCustomerStoryMock],
-  },
-  customerStories: [strapiCustomerStoryMock],
-};
-
-export const WithQuoteCard = Template.bind({});
-WithQuoteCard.args = {
-  slice: {
-    customer_stories: [strapiCustomerStoryWithCustomerQuoteCardMock],
-  },
-  customerStories: [strapiCustomerStoryWithCustomerQuoteCardMock],
-};
-
-export const WithLogoCard = Template.bind({});
-WithLogoCard.args = {
-  slice: {
-    customer_stories: [strapiCustomerStoryWithLogoCardMock],
-  },
-  customerStories: [strapiCustomerStoryWithLogoCardMock],
-};
-
-export const WithMultipleCards = Template.bind({});
-WithMultipleCards.args = {
-  slice: {
-    customer_stories: [
-      strapiCustomerStoryMock,
-      strapiCustomerStoryWithCustomerQuoteCardMock,
-      strapiCustomerStoryWithLogoCardMock,
-      strapiCustomerStoryWithLogoCardMock,
-      strapiCustomerStoryMock,
-      strapiCustomerStoryWithCustomerQuoteCardMock,
-    ],
-  },
-  customerStories: [
-    strapiCustomerStoryMock,
-    strapiCustomerStoryWithCustomerQuoteCardMock,
-    strapiCustomerStoryWithLogoCardMock,
-    strapiCustomerStoryWithLogoCardMock,
-    strapiCustomerStoryMock,
-    strapiCustomerStoryWithCustomerQuoteCardMock,
-  ],
-};

package/src/slices/CustomerStories/CustomerStories.test.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
-import { CustomerStoriesProps } from './CustomerStories';
-import CustomerStories from '.';
-
-const defaultProps: CustomerStoriesProps = {
-  slice: {
-    customer_stories: [
-      {
-        ...strapiCustomerStoryMock,
-        attributes: {
-          ...strapiCustomerStoryMock.attributes,
-          createdAt: '2022-01-10T15:04:32.897Z',
-        },
-      },
-    ],
-  },
-  customerStories: [strapiCustomerStoryMock],
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<CustomerStories {...combinedProps} />);
-};
-
-describe('The CustomerStories component', () => {
-  it('displays all the customer story titles', () => {
-    setup();
-
-    expect(
-      screen.getByText(strapiCustomerStoryMock.attributes.title || '')
-    ).toBeInTheDocument();
-  });
-
-  it('displays nothing if the customer story that should be displayed does not exists in the delivered customer stories', () => {
-    setup({ customerStories: [] });
-
-    expect(
-      screen.queryByText(strapiCustomerStoryMock.attributes.title || '')
-    ).not.toBeInTheDocument();
-  });
-});

package/src/slices/CustomerStories/CustomerStories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import IStrapiData from '../../models/strapi/IStrapiData';
-import StrapiCustomerStory from '../../models/strapi/StrapiCustomerStory';
-import { Box, DefaultSectionContainer, SimpleGrid, Wrapper } from 'boemly';
-import CustomerCard from '../../components/CustomerCard';
-import CustomerQuoteCard from '../../components/CustomerQuoteCard';
-import LogoCard from '../../components/LogoCard';
-
-export interface CustomerStoriesProps {
-  slice: {
-    customer_stories: IStrapiData<StrapiCustomerStory>[];
-  };
-  customerStories: IStrapiData<StrapiCustomerStory>[];
-}
-
-export const CustomerStories = ({
-  slice,
-  customerStories,
-}: CustomerStoriesProps): JSX.Element => {
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <SimpleGrid columns={[1, null, null, 2, 3]} spacingX={6} spacingY={6}>
-          {slice.customer_stories.map(({ attributes }) => {
-            const customerStory: IStrapiData<StrapiCustomerStory> | undefined =
-              customerStories.find(
-                (cs) => cs.attributes.slug === attributes.slug
-              );
-            if (!customerStory) {
-              return null;
-            }
-            return (
-              <Box key={customerStory.id}>
-                {attributes.variant === 'customerCard' && (
-                  <CustomerCard customerStory={customerStory.attributes} />
-                )}
-                {attributes.variant === 'quoteCard' && (
-                  <CustomerQuoteCard customerStory={customerStory.attributes} />
-                )}
-                {attributes.variant === 'logoCard' && (
-                  <LogoCard customerStory={customerStory.attributes} />
-                )}
-              </Box>
-            );
-          })}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/CustomerStories/index.ts

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

package/src/slices/Events/Events.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import Events from '.';
-
-export default {
-  title: 'slices/Events',
-  component: Events,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta<typeof Events>;
-
-const Template: StoryFn<typeof Events> = (args) => <Events {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    upcomingTitle: 'Ready to Learn more about Forest Climate Protection?',
-    upcomingDescription: 'Join us for these amazing events',
-    pastTitle: 'Past Events',
-    pastDescription: 'Check out our past events',
-    filterSearch: false,
-  },
-};
-
-export const WithFilterSearch = Template.bind({});
-WithFilterSearch.args = {
-  slice: {
-    upcomingTitle: 'Ready to Learn more about Forest Climate Protection?',
-    upcomingDescription: 'Join us for these amazing events',
-    pastTitle: 'Past Events',
-    pastDescription: 'Check out our past events',
-    filterSearch: true,
-  },
-};

package/src/slices/Events/Events.test.tsx

@@ -1,350 +0,0 @@
-import { mergeDeep } from '../../utils/mergeDeep';
-import { EventsProps } from './Events';
-import Events from '.';
-import { render, screen, waitFor } from '../../test/testUtils';
-import React from 'react';
-import { strapiEventMock } from '../../test/strapiMocks/strapiEventMock';
-import useEvents from '../../models/hooks/useEvents';
-import messagesEn from './messages.en';
-import { EventType } from '../../models/strapi/StrapiEvent';
-import userEvent from '@testing-library/user-event';
-import messagesEnEventCard from '../../components/EventCard/messages.en';
-
-jest.mock('../../models/hooks/useEvents');
-
-const NOW = new Date('2025-01-01T12:00:00.000Z');
-
-const pastEventMock = {
-  ...strapiEventMock,
-  attributes: {
-    ...strapiEventMock.attributes,
-    title: 'Past Event',
-    start: '2024-12-01T10:00:00.000Z',
-    eventTypes: [{ id: 1, eventType: EventType.MEET_UP }],
-    languages: [{ id: 1, language: 'English', countryCode: 'GB' }],
-  },
-};
-
-const upcomingEventMock = {
-  ...strapiEventMock,
-  attributes: {
-    ...strapiEventMock.attributes,
-    title: 'Upcoming Event',
-    start: '2024-12-01T10:00:00.000Z',
-    eventTypes: [{ id: 1, eventType: EventType.CONFERENCE }],
-    languages: [{ id: 1, language: 'German', countryCode: 'DE' }],
-  },
-};
-
-const defaultProps: EventsProps = {
-  slice: {
-    upcomingTitle: 'Upcoming Events',
-    upcomingDescription: 'Join us for these amazing events',
-    pastTitle: 'Past Events',
-    pastDescription: 'Check out our past events',
-    filterSearch: true,
-  },
-};
-
-let getKeyCalls: string[] = [];
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<Events {...combinedProps} />);
-};
-
-describe('The Events slice', () => {
-  beforeEach(() => {
-    jest.useFakeTimers().setSystemTime(NOW);
-    getKeyCalls = [];
-
-    global.fetch = jest.fn().mockResolvedValue({
-      json: jest.fn().mockResolvedValue({
-        data: [upcomingEventMock, pastEventMock],
-      }),
-    });
-
-    (useEvents as jest.Mock).mockImplementation(({ getKey }) => {
-      const key = getKey(0, null);
-      getKeyCalls.push(key.toString());
-
-      if (getKey.toString().includes('filters[start][$gte]')) {
-        return {
-          data: [{ body: { data: [upcomingEventMock] } }],
-          isLoading: false,
-          isLoadingMore: false,
-          canLoadMore: false,
-          loadMore: jest.fn(),
-        };
-      }
-      if (getKey.toString().includes('filters[start][$lt]')) {
-        return {
-          data: [{ body: { data: [pastEventMock] } }],
-          isLoading: false,
-          isLoadingMore: false,
-          canLoadMore: false,
-          loadMore: jest.fn(),
-        };
-      }
-      return {
-        data: [],
-        isLoading: false,
-        isLoadingMore: false,
-        canLoadMore: false,
-        loadMore: jest.fn(),
-      };
-    });
-  });
-  afterEach(() => {
-    jest.clearAllMocks();
-    jest.useRealTimers();
-  });
-
-  it('displays the title and tagline if it is defined', async () => {
-    setup();
-
-    await waitFor(() => {
-      expect(screen.getByText('Upcoming Events')).toBeInTheDocument();
-      expect(screen.getByText('Past Events')).toBeInTheDocument();
-      expect(
-        screen.getByText('Join us for these amazing events')
-      ).toBeInTheDocument();
-      expect(screen.getByText('Check out our past events')).toBeInTheDocument();
-    });
-  });
-
-  it('displays upcoming and past events correctly', async () => {
-    setup();
-
-    await waitFor(() => {
-      expect(screen.getByText('Past Event')).toBeInTheDocument();
-      expect(screen.getByText('Upcoming Event')).toBeInTheDocument();
-      expect(screen.queryAllByText('Event Description')).toHaveLength(2);
-      expect(
-        screen.getByText(
-          messagesEnEventCard['sections.eventCard.eventType.meetup']
-        )
-      ).toBeInTheDocument();
-      expect(
-        screen.getByText(
-          messagesEnEventCard['sections.eventCard.eventType.conference']
-        )
-      ).toBeInTheDocument();
-      expect(screen.getByText('English')).toBeInTheDocument();
-      expect(screen.getByText('German')).toBeInTheDocument();
-    });
-  });
-
-  it('does not display the load more button when there are no more events to load', async () => {
-    setup();
-
-    await waitFor(() => {
-      expect(
-        screen.queryByText(messagesEn['sections.events.loadMore'])
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  it('displays the load more button when there are more events to load', async () => {
-    // Use past events for the testing, because the batch for past events is defined as 2 and
-    // the "Load button" will be shown when there are more then 2 past events
-    (useEvents as jest.Mock).mockImplementation(({ getKey }) => {
-      if (getKey.toString().includes('filters[start][$lt]')) {
-        return {
-          data: [
-            {
-              body: {
-                data: [
-                  pastEventMock,
-                  {
-                    ...pastEventMock,
-                    id: 2,
-                    attributes: {
-                      ...pastEventMock.attributes,
-                      title: 'Past Event 2',
-                    },
-                  },
-                  {
-                    ...pastEventMock,
-                    id: 3,
-                    attributes: {
-                      ...pastEventMock.attributes,
-                      title: 'Past Event 3',
-                    },
-                  },
-                ],
-              },
-            },
-          ],
-          isLoading: false,
-          isLoadingMore: false,
-          canLoadMore: true,
-          loadMore: jest.fn(),
-        };
-      }
-      setup();
-
-      expect(
-        screen.getByText(messagesEn['sections.events.loadMore'])
-      ).toBeInTheDocument();
-    });
-  });
-
-  it('display "no events" message if there are no events to display', async () => {
-    (useEvents as jest.Mock).mockImplementation(() => {
-      return {
-        data: [],
-        isLoading: false,
-        isLoadingMore: false,
-        canLoadMore: false,
-        loadMore: jest.fn(),
-      };
-    });
-    setup();
-
-    await waitFor(() => {
-      expect(
-        screen.getByText(messagesEn['sections.events.noUpcomingEvents'])
-      ).toBeInTheDocument();
-      expect(
-        screen.getByText(messagesEn['sections.events.noPastEvents'])
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('filters the events', () => {
-    it('by event type', async () => {
-      setup();
-
-      const selectButtons = await screen.findAllByRole('combobox');
-      expect(selectButtons).toHaveLength(3);
-      expect(selectButtons[0]).toHaveTextContent(
-        messagesEn['sections.events.eventsFilter.eventType']
-      );
-      const selectButton = selectButtons[0];
-
-      userEvent.click(selectButton);
-
-      await waitFor(async () => {
-        const options = await screen.getAllByRole('menuitemradio', {
-          hidden: true,
-        });
-        expect(options).toHaveLength(2);
-        expect(options[0]).toHaveTextContent(
-          messagesEnEventCard['sections.eventCard.eventType.conference']
-        );
-        expect(options[1]).toHaveTextContent(
-          messagesEnEventCard['sections.eventCard.eventType.meetup']
-        );
-
-        userEvent.click(options[0]);
-      });
-
-      await waitFor(() => {
-        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
-          expect.arrayContaining([
-            expect.stringContaining('filters[start][$gte]'),
-            expect.stringContaining(
-              'filters[$or][0][eventTypes][eventType]=Conference'
-            ),
-          ])
-        );
-      });
-    });
-
-    it('by language', async () => {
-      setup();
-
-      const selectButtons = await screen.findAllByRole('combobox');
-      expect(selectButtons).toHaveLength(3);
-      expect(selectButtons[1]).toHaveTextContent(
-        messagesEn['sections.events.eventsFilter.language']
-      );
-      const selectButton = selectButtons[1];
-
-      userEvent.click(selectButton);
-
-      await waitFor(async () => {
-        const options = await screen.getAllByRole('menuitemradio', {
-          hidden: true,
-        });
-        expect(options).toHaveLength(2);
-        expect(options[0]).toHaveTextContent('German');
-        expect(options[1]).toHaveTextContent('English');
-
-        userEvent.click(options[0]);
-      });
-
-      await waitFor(() => {
-        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
-          expect.arrayContaining([
-            expect.stringContaining('filters[start][$gte]'),
-            expect.stringContaining(
-              'filters[$or][0][languages][language]=German'
-            ),
-          ])
-        );
-      });
-    });
-  });
-
-  describe('sorts the events', () => {
-    it('by newest first', async () => {
-      setup();
-
-      const selectButtons = await screen.findAllByRole('combobox');
-      expect(selectButtons).toHaveLength(3);
-      // Default value of "Sort by" select is "Newest first"
-      expect(selectButtons[2]).toHaveTextContent(
-        messagesEn['sections.events.eventsFilter.sortBy.newest']
-      );
-
-      await waitFor(() => {
-        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
-          expect.arrayContaining([
-            expect.stringContaining(
-              `filters[start][$gte]=${NOW.toISOString()}`
-            ),
-          ])
-        );
-      });
-    });
-
-    it('by oldest first', async () => {
-      setup();
-
-      const selectButtons = await screen.findAllByRole('combobox');
-      expect(selectButtons).toHaveLength(3);
-      // Default value of "Sort by" select is "Newest first"
-      expect(selectButtons[2]).toHaveTextContent(
-        messagesEn['sections.events.eventsFilter.sortBy.newest']
-      );
-      const selectButton = selectButtons[2];
-
-      userEvent.click(selectButton);
-
-      await waitFor(async () => {
-        const options = await screen.getAllByRole('menuitemradio', {
-          hidden: true,
-        });
-        expect(options).toHaveLength(2);
-        expect(options[0]).toHaveTextContent(
-          messagesEn['sections.events.eventsFilter.sortBy.newest']
-        );
-        expect(options[1]).toHaveTextContent(
-          messagesEn['sections.events.eventsFilter.sortBy.oldest']
-        );
-
-        userEvent.click(options[1]);
-      });
-
-      await waitFor(() => {
-        expect(getKeyCalls.map(decodeURIComponent)).toEqual(
-          expect.arrayContaining([
-            expect.stringContaining(`filters[start][$lt]=${NOW.toISOString()}`),
-          ])
-        );
-      });
-    });
-  });
-});