@treely/strapi-slices 5.0.0 → 5.1.1

package/dist/test/strapiMocks/strapiCustomerStory.d.ts

@@ -1,3 +1,4 @@
 import IStrapiData from '../../models/strapi/IStrapiData';
 import StrapiCustomerStory from '../../models/strapi/StrapiCustomerStory';
 export declare const strapiCustomerStoryMock: IStrapiData<StrapiCustomerStory>;
+export declare const strapiCustomerStoryMock1: IStrapiData<StrapiCustomerStory>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/CreditsAvailableBadge/messages.de.ts

@@ -2,7 +2,6 @@ const messagesDe = {
   'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
   'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
   'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
-  'components.creditsAvailableBadge.text.notYet':
-    'Noch keine Credits verfügbar',
+  'components.creditsAvailableBadge.text.notYet': 'Gutschriften bald verfügbar',
 };
 export default messagesDe;

package/src/components/CreditsAvailableBadge/messages.en.ts

@@ -2,6 +2,6 @@ const messagesEn = {
   'components.creditsAvailableBadge.text.yes': 'Credits available',
   'components.creditsAvailableBadge.text.some': 'Some remaining credits',
   'components.creditsAvailableBadge.text.no': 'No remaining credits',
-  'components.creditsAvailableBadge.text.notYet': 'No credits available yet',
+  'components.creditsAvailableBadge.text.notYet': 'Credits available soon',
 };
 export default messagesEn;

package/src/components/CustomerCard/CustomerCard.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
+import { CustomerCardProps } from './CustomerCard';
+import CustomerCard from '../CustomerCard';
+import messagesEn from './messages.en';
+
+const defaultProps: CustomerCardProps = {
+  customerStory: strapiCustomerStoryMock.attributes,
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<CustomerCard {...combinedProps} />);
+};
+
+describe('The CustomerCard component', () => {
+  it('displays the customer card title', () => {
+    setup();
+
+    expect(
+      screen.getByText(strapiCustomerStoryMock.attributes.title || '')
+    ).toBeInTheDocument();
+  });
+
+  it('displays the customer card image', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('displays the customer card industry', () => {
+    setup();
+
+    expect(
+      screen.getByText(
+        strapiCustomerStoryMock.attributes.customerCardCustomerIndustry || ''
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays the button', () => {
+    setup();
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText(messagesEn['sections.customerCard.more']));
+  });
+});

package/src/components/CustomerCard/CustomerCard.tsx

@@ -0,0 +1,63 @@
+import {
+  Container,
+  Center,
+  Heading,
+  Button,
+  Link,
+  Box,
+  Text,
+  Flex,
+} from 'boemly';
+import React, { useContext } from 'react';
+import { StrapiCustomerStory, strapiMediaUrl } from '../..';
+import Image from 'next/image';
+import { IntlContext } from '../../components/ContextProvider';
+
+export interface CustomerCardProps {
+  customerStory: StrapiCustomerStory;
+}
+export const CustomerCard = ({
+  customerStory,
+}: CustomerCardProps): JSX.Element => {
+  const { formatMessage } = useContext(IntlContext);
+
+  return (
+    <Container padding="none" height="full">
+      <Flex flexDir="column" height="full">
+        <Center height="24" backgroundColor="primary.50" borderTopRadius="xl">
+          {customerStory.cardImage && (
+            <Box position="relative" height="12" width="12">
+              <Image
+                src={strapiMediaUrl(customerStory.cardImage.img, 'medium')}
+                alt={customerStory.cardImage.alt}
+                fill
+                style={{
+                  objectFit: customerStory.cardImage.objectFit,
+                }}
+              />
+            </Box>
+          )}
+        </Center>
+        <Box px="6" pt="8" pb="6" mb="auto">
+          {customerStory.customerCardCustomerIndustry && (
+            <Text size="xsMonoUppercase" color="gray.500" mb="2">
+              {customerStory.customerCardCustomerIndustry}
+            </Text>
+          )}
+          {customerStory.title && (
+            <Heading size="md" fontWeight="500">
+              {customerStory.title}
+            </Heading>
+          )}
+        </Box>
+        <Box px="6" pt="8" pb="6">
+          <Link href={`/customer-stories/${customerStory.slug}`}>
+            <Button variant="outline" size="sm">
+              {formatMessage({ id: 'sections.customerCard.more' })}
+            </Button>
+          </Link>
+        </Box>
+      </Flex>
+    </Container>
+  );
+};

package/src/components/CustomerCard/index.ts

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

package/src/{slices/CustomerStories → components/CustomerCard}/messages.de.ts

@@ -1,4 +1,4 @@
 const messagesDe = {
-  'sections.customerStories.more': 'Weiterlesen',
+  'sections.customerCard.more': 'Weiterlesen',
 };
 export default messagesDe;

package/src/{slices/CustomerStories → components/CustomerCard}/messages.en.ts

@@ -1,4 +1,4 @@
 const messagesEn = {
-  'sections.customerStories.more': 'Read more',
+  'sections.customerCard.more': 'Read more',
 };
 export default messagesEn;

package/src/components/CustomerQuoteCard/CustomerQuoteCard.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
+import { CustomerQuoteCardProps } from './CustomerQuoteCard';
+import CustomerQuoteCard from '.';
+import messagesEn from './messages.en';
+
+const defaultProps: CustomerQuoteCardProps = {
+  customerStory: strapiCustomerStoryMock.attributes,
+};
+
+const setup = (props = {}) => {
+  const combinedProps = mergeDeep(defaultProps, props);
+  render(<CustomerQuoteCard {...combinedProps} />);
+};
+
+describe('The QuoteCustomerCard component', () => {
+  it('displays the customer name', () => {
+    setup();
+
+    expect(
+      screen.getByText(strapiCustomerStoryMock.attributes.customerName || '')
+    ).toBeInTheDocument();
+  });
+
+  it('displays the customer title', () => {
+    setup();
+
+    expect(
+      screen.getByText(
+        strapiCustomerStoryMock.attributes.quoteCardCustomerTitle || ''
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays the customer quote text', () => {
+    setup();
+
+    expect(
+      screen.getByText(strapiCustomerStoryMock.attributes.quoteCardQuote || '')
+    ).toBeInTheDocument();
+  });
+
+  it('displays the customer card image', () => {
+    setup();
+
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('displays the button', () => {
+    setup();
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByText(messagesEn['sections.customerQuoteCard.more']));
+  });
+});

package/src/components/CustomerQuoteCard/CustomerQuoteCard.tsx

@@ -0,0 +1,55 @@
+import { Container, Heading, Button, Link, Box, Text } from 'boemly';
+import React, { useContext } from 'react';
+import { StrapiCustomerStory, strapiMediaUrl } from '../..';
+import Image from 'next/image';
+import { IntlContext } from '../../components/ContextProvider';
+
+export interface CustomerQuoteCardProps {
+  customerStory: StrapiCustomerStory;
+}
+export const CustomerQuoteCard = ({
+  customerStory,
+}: CustomerQuoteCardProps): JSX.Element => {
+  const { formatMessage } = useContext(IntlContext);
+
+  return (
+    <Container p="1" backgroundColor="primary.100" height="full">
+      {customerStory.cardImage ? (
+        <Box
+          position="relative"
+          height="12"
+          width="12"
+          borderRadius="full"
+          overflow="hidden"
+        >
+          <Image
+            src={strapiMediaUrl(customerStory.cardImage.img, 'medium')}
+            alt={customerStory.cardImage.alt}
+            fill
+            style={{
+              objectFit: customerStory.cardImage.objectFit,
+            }}
+          />
+        </Box>
+      ) : (
+        <></>
+      )}
+      <Box>
+        <Box my="8">
+          <Heading size="md" fontWeight="500">
+            {customerStory.customerName}
+          </Heading>
+          <Text size="xs">{customerStory.quoteCardCustomerTitle}</Text>
+        </Box>
+        <Text size="xs" color="black">
+          {customerStory.quoteCardQuote}
+        </Text>
+        <Link href={`/customer-stories/${customerStory.slug}`}>
+          <Button variant="outline" size="sm" mt="8">
+            {formatMessage({ id: 'sections.customerQuoteCard.more' })}
+          </Button>
+        </Link>
+      </Box>
+    </Container>
+  );
+};

package/src/components/CustomerQuoteCard/index.ts

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

package/src/components/CustomerQuoteCard/messages.de.ts

@@ -0,0 +1,4 @@
+const messagesDe = {
+  'sections.customerQuoteCard.more': 'Weiterlesen',
+};
+export default messagesDe;

package/src/components/CustomerQuoteCard/messages.en.ts

@@ -0,0 +1,4 @@
+const messagesEn = {
+  'sections.customerQuoteCard.more': 'Read more',
+};
+export default messagesEn;

package/src/components/portfolio/PortfolioProjectCard/messages.de.ts

@@ -2,7 +2,7 @@ const messagesDe = {
   'components.portfolioProjectCard.text.yes': 'Credits verfügbar',
   'components.portfolioProjectCard.text.some': 'Einige verbleibende Credits',
   'components.portfolioProjectCard.text.no': 'Keine verbleibenden Credits',
-  'components.portfolioProjectCard.text.notYet': 'Noch keine Credits verfügbar',
+  'components.portfolioProjectCard.text.notYet': 'Gutschriften bald verfügbar',
 };
 
 export default messagesDe;

package/src/components/portfolio/PortfolioProjectCard/messages.en.ts

@@ -2,7 +2,7 @@ const messagesEn = {
   'components.portfolioProjectCard.text.yes': 'Credits available',
   'components.portfolioProjectCard.text.some': 'Some remaining credits',
   'components.portfolioProjectCard.text.no': 'No remaining credits',
-  'components.portfolioProjectCard.text.notYet': 'No credits available yet',
+  'components.portfolioProjectCard.text.notYet': 'Credits available soon',
 };
 
 export default messagesEn;

package/src/models/strapi/StrapiCustomerStory.ts

@@ -8,9 +8,11 @@ interface StrapiCustomerStory {
   title: string;
   slug: string;
   img: StrapiImage;
-  customerName: string;
-  customerIndustry: string;
-  customerLogo: StrapiImage;
+  customerName?: string;
+  customerCardCustomerIndustry?: string;
+  quoteCardCustomerTitle?: string;
+  cardImage?: StrapiImage;
+  quoteCardQuote?: string;
   locale: Locale;
   createdAt: string;
   updatedAt: string;
@@ -18,6 +20,7 @@ interface StrapiCustomerStory {
   slices: any[];
   localizations: StrapiLocalization[];
   topBanner?: StrapiTopBanner;
+  variant?: 'customerCard' | 'quoteCard';
 }
 
 export default StrapiCustomerStory;

package/src/rootMessages.de.ts

@@ -1,15 +1,16 @@
 import comparisonMessagesDe from './slices/Comparison/messages.de';
+import creditsAvailableBadgeMessagesDe from './components/CreditsAvailableBadge/messages.de';
 import ctaMessagesDe from './slices/Cta/messages.de';
-import customerStoriesDe from './slices/CustomerStories/messages.de';
+import customerCardMessagesDe from './components/CustomerCard/messages.de';
+import customerQuoteCardMessagesDe from './components/CustomerQuoteCard/messages.de';
 import glossaryMessagesDe from './slices/Glossary/messages.de';
+import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
 import projectFactsMessagesDe from './slices/ProjectFacts/messages.de';
 import projectsMapMessagesDe from './slices/ProjectsMap/messages.de';
-import shopCheckoutMessagesDe from './slices/ShopCheckout/messages.de';
-import creditsAvailableBadgeMessagesDe from './components/CreditsAvailableBadge/messages.de';
-import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
 import portfolioProjectInfoMessagesDe from './components/portfolio/ProjectInfo/messages.de';
-import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
 import portfolioProjectCardMessagesDe from './components/portfolio/PortfolioProjectCard/messages.de';
+import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
+import shopCheckoutMessagesDe from './slices/ShopCheckout/messages.de';
 import timelineMessagesDe from './slices/Timeline/messages.de';
 
 import unitMessagesDe from './unit.messages.de';
@@ -29,7 +30,8 @@ const rootMessagesDe = {
   //
   ...comparisonMessagesDe,
   ...ctaMessagesDe,
-  ...customerStoriesDe,
+  ...customerCardMessagesDe,
+  ...customerQuoteCardMessagesDe,
   ...glossaryMessagesDe,
   ...projectFactsMessagesDe,
   ...projectsMapMessagesDe,

package/src/rootMessages.en.ts

@@ -1,15 +1,16 @@
 import comparisonMessagesEn from './slices/Comparison/messages.en';
+import creditsAvailableBadgeMessagesEn from './components/CreditsAvailableBadge/messages.en';
 import ctaMessagesEn from './slices/Cta/messages.en';
-import customerStoriesEn from './slices/CustomerStories/messages.en';
+import customerCardMessagesEn from './components/CustomerCard/messages.en';
+import customerQuoteCardMessagesEn from './components/CustomerQuoteCard/messages.en';
 import glossaryMessagesEn from './slices/Glossary/messages.en';
+import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/DocumentsDownloadList/messages.en';
 import projectFactsMessagesEn from './slices/ProjectFacts/messages.en';
 import projectsMapMessagesEn from './slices/ProjectsMap/messages.en';
-import shopCheckoutMessagesEn from './slices/ShopCheckout/messages.en';
-import creditsAvailableBadgeMessagesEn from './components/CreditsAvailableBadge/messages.en';
-import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/DocumentsDownloadList/messages.en';
 import portfolioProjectInfoMessagesEn from './components/portfolio/ProjectInfo/messages.en';
-import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
 import portfolioProjectCardMessagesEn from './components/portfolio/PortfolioProjectCard/messages.en';
+import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
+import shopCheckoutMessagesEn from './slices/ShopCheckout/messages.en';
 import timelineMessagesEn from './slices/Timeline/messages.en';
 
 import unitMessagesEn from './unit.messages.en';
@@ -29,7 +30,8 @@ const rootMessagesEn = {
   //
   ...comparisonMessagesEn,
   ...ctaMessagesEn,
-  ...customerStoriesEn,
+  ...customerCardMessagesEn,
+  ...customerQuoteCardMessagesEn,
   ...glossaryMessagesEn,
   ...projectFactsMessagesEn,
   ...projectsMapMessagesEn,

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

@@ -1,5 +1,8 @@
 import React from 'react';
-import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
+import {
+  strapiCustomerStoryMock,
+  strapiCustomerStoryMock1,
+} from '../../test/strapiMocks/strapiCustomerStory';
 import { Meta, StoryFn } from '@storybook/react';
 import CustomerStories from '.';
 
@@ -12,10 +15,36 @@ const Template: StoryFn<typeof CustomerStories> = (args) => (
   <CustomerStories {...args} />
 );
 
-export const Minimal = Template.bind({});
-Minimal.args = {
+export const WithCustomerCard = Template.bind({});
+WithCustomerCard.args = {
   slice: {
     customer_stories: [strapiCustomerStoryMock],
   },
   customerStories: [strapiCustomerStoryMock],
 };
+
+export const WithQuoteCard = Template.bind({});
+WithQuoteCard.args = {
+  slice: {
+    customer_stories: [strapiCustomerStoryMock1],
+  },
+  customerStories: [strapiCustomerStoryMock1],
+};
+
+export const WithMultipleCards = Template.bind({});
+WithMultipleCards.args = {
+  slice: {
+    customer_stories: [
+      strapiCustomerStoryMock1,
+      strapiCustomerStoryMock,
+      strapiCustomerStoryMock,
+      strapiCustomerStoryMock1,
+    ],
+  },
+  customerStories: [
+    strapiCustomerStoryMock1,
+    strapiCustomerStoryMock,
+    strapiCustomerStoryMock,
+    strapiCustomerStoryMock1,
+  ],
+};

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

@@ -30,7 +30,7 @@ describe('The CustomerStories component', () => {
     setup();
 
     expect(
-      screen.getByText(strapiCustomerStoryMock.attributes.title)
+      screen.getByText(strapiCustomerStoryMock.attributes.title || '')
     ).toBeInTheDocument();
   });
 
@@ -38,7 +38,7 @@ describe('The CustomerStories component', () => {
     setup({ customerStories: [] });
 
     expect(
-      screen.queryByText(strapiCustomerStoryMock.attributes.title)
+      screen.queryByText(strapiCustomerStoryMock.attributes.title || '')
     ).not.toBeInTheDocument();
   });
 });

package/src/slices/CustomerStories/CustomerStories.tsx

@@ -1,21 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import IStrapiData from '../../models/strapi/IStrapiData';
 import StrapiCustomerStory from '../../models/strapi/StrapiCustomerStory';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import {
-  Box,
-  Button,
-  Center,
-  Container,
-  DefaultSectionContainer,
-  Heading,
-  SimpleGrid,
-  Text,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import Link from 'next/link';
-import { IntlContext } from '../../components/ContextProvider';
+import { Box, DefaultSectionContainer, SimpleGrid, Wrapper } from 'boemly';
+import CustomerCard from '../../components/CustomerCard';
+import CustomerQuoteCard from '../../components/CustomerQuoteCard';
 
 export interface CustomerStoriesProps {
   slice: {
@@ -28,12 +16,10 @@ export const CustomerStories = ({
   slice,
   customerStories,
 }: CustomerStoriesProps): JSX.Element => {
-  const { formatMessage } = useContext(IntlContext);
-
   return (
     <DefaultSectionContainer>
       <Wrapper>
-        <SimpleGrid columns={[1, null, null, 2]} spacingX={56} spacingY={24}>
+        <SimpleGrid columns={[1, null, null, 2, 3]} spacingX={6} spacingY={6}>
           {slice.customer_stories.map(({ attributes }) => {
             const customerStory: IStrapiData<StrapiCustomerStory> | undefined =
               customerStories.find(
@@ -43,43 +29,14 @@ export const CustomerStories = ({
               return null;
             }
             return (
-              <Container padding="none" key={customerStory.id}>
-                <Center
-                  height="24"
-                  backgroundColor="primary.50"
-                  borderTopRadius="xl"
-                >
-                  <Box position="relative" height="12" width="12">
-                    <Image
-                      src={strapiMediaUrl(
-                        customerStory.attributes.customerLogo.img,
-                        'medium'
-                      )}
-                      alt={customerStory.attributes.customerLogo.alt}
-                      fill
-                      style={{
-                        objectFit:
-                          customerStory.attributes.customerLogo.objectFit,
-                      }}
-                    />
-                  </Box>
-                </Center>
-                <Box px="6" pt="12" pb="6">
-                  <Text size="xsMonoUppercase" color="gray.500" mb="2">
-                    {customerStory.attributes.customerIndustry}
-                  </Text>
-                  <Heading size="xl">{customerStory.attributes.title}</Heading>
-                  <Button
-                    as={Link}
-                    href={`/customer-stories/${customerStory.attributes.slug}`}
-                    variant="outline"
-                    size="sm"
-                    mt="12"
-                  >
-                    {formatMessage({ id: 'sections.customerStories.more' })}
-                  </Button>
-                </Box>
-              </Container>
+              <Box key={customerStory.id}>
+                {attributes.variant === 'customerCard' && (
+                  <CustomerCard customerStory={customerStory.attributes} />
+                )}
+                {attributes.variant === 'quoteCard' && (
+                  <CustomerQuoteCard customerStory={customerStory.attributes} />
+                )}
+              </Box>
             );
           })}
         </SimpleGrid>