@treely/strapi-slices 1.0.0 → 1.0.2

package/src/slices/QAndA/QAndA.stories.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import QAndA from '.';
 
 export default {
-  title: 'sections/QAndA',
+  title: 'slices/QAndA',
   component: QAndA,
 } as Meta<typeof QAndA>;
 

package/src/slices/QAndA/QAndA.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiHeroCardMock } from '@/test/strapiMocks/strapiHeroCard';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiHeroCardMock } from '../../test/strapiMocks/strapiHeroCard';
 import QAndA from '.';
 import { QAndAProps } from './QAndA';
 

package/src/slices/QAndA/QAndA.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Box,
   Heading,
@@ -12,12 +13,12 @@ import {
 import { ArrowRight } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import strapiLinkUrl from '@/utils/strapiLinkUrl';
-import StrapiHeroCard from '@/models/strapi/StrapiHeroCard';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import convertToKebabCase from '@/utils/convertToKebabCase';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import strapiLinkUrl from '../../utils/strapiLinkUrl';
+import StrapiHeroCard from '../../models/strapi/StrapiHeroCard';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import convertToKebabCase from '../../utils/convertToKebabCase';
 
 const VARIANTS = {
   gray: {

package/src/slices/QuoteCards/QuoteCards.stories.tsx

@@ -1,14 +1,15 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import {
   storybookStrapiAvatarMock,
   storybookStrapiCoverMock,
   storybookStrapiGradientTopDownMock,
-} from '@/test/storybookMocks/storybookStrapiMedia';
+} from '../../test/storybookMocks/storybookStrapiMedia';
 import QuoteCards from '.';
 
 export default {
-  title: 'sections/QuoteCards',
+  title: 'slices/QuoteCards',
   component: QuoteCards,
 } as Meta<typeof QuoteCards>;
 

package/src/slices/QuoteCards/QuoteCards.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiQuoteCardMock } from '@/test/strapiMocks/strapiQuoteCard';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
-import { strapiHeroCardMock } from '@/test/strapiMocks/strapiHeroCard';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiQuoteCardMock } from '../../test/strapiMocks/strapiQuoteCard';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
+import { strapiHeroCardMock } from '../../test/strapiMocks/strapiHeroCard';
 import QuoteCards from '.';
 import { QuoteCardsProps } from './QuoteCards';
 

package/src/slices/QuoteCards/QuoteCards.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Image from 'next/image';
 import {
   Box,
@@ -8,14 +9,13 @@ import {
   SimpleGrid,
   Wrapper,
 } from 'boemly';
-import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiQuoteCard from '@/models/strapi/StrapiQuoteCard';
-import StrapiHeroCard from '@/models/strapi/StrapiHeroCard';
-import strapiLinkUrl from '@/utils/strapiLinkUrl';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import convertToKebabCase from '@/utils/convertToKebabCase';
-import { QuoteCardHeroContainer, QuoteCardsContainer } from './styles';
+import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiQuoteCard from '../../models/strapi/StrapiQuoteCard';
+import StrapiHeroCard from '../../models/strapi/StrapiHeroCard';
+import strapiLinkUrl from '../../utils/strapiLinkUrl';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import convertToKebabCase from '../../utils/convertToKebabCase';
 
 interface QuoteCardsSlice extends StrapiDefaultHeader {
   cards: StrapiQuoteCard[];
@@ -30,9 +30,11 @@ export const QuoteCards: React.FC<QuoteCardsProps> = ({
   slice,
 }: QuoteCardsProps) => (
   <>
-    <QuoteCardsContainer
-      withHero={!!slice.hero}
+    <Box
       id={convertToKebabCase(slice.title)}
+      position="relative"
+      paddingTop="28"
+      paddingBottom={!!slice.hero ? '80' : '28'}
     >
       {slice.shapes && slice.shapes.length === 2 && (
         <>
@@ -104,9 +106,9 @@ export const QuoteCards: React.FC<QuoteCardsProps> = ({
           ))}
         </SimpleGrid>
       </Wrapper>
-    </QuoteCardsContainer>
+    </Box>
     {slice.hero && (
-      <QuoteCardHeroContainer>
+      <Box marginTop="-40" paddingBottom="28">
         <Wrapper>
           <HeroCard
             title={slice.hero.title}
@@ -129,7 +131,7 @@ export const QuoteCards: React.FC<QuoteCardsProps> = ({
             }
           />
         </Wrapper>
-      </QuoteCardHeroContainer>
+      </Box>
     )}
   </>
 );

package/src/slices/RichTextSection/RichTextSection.stories.tsx

@@ -1,9 +1,10 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import RichTextSection from '.';
 
 export default {
-  title: 'sections/RichTextSection',
+  title: 'slices/RichTextSection',
   component: RichTextSection,
 } as Meta<typeof RichTextSection>;
 

package/src/slices/RichTextSection/RichTextSection.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@/test/testUtils';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
 import RichTextSection from '.';
 import { RichTextSectionProps } from './RichTextSection';
 

package/src/slices/RichTextSection/RichTextSection.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   DefaultSectionContainer,
   Grid,

package/src/slices/ShopCheckout/ShopCheckout.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import ShopCheckout from '.';

package/src/slices/ShopCheckout/ShopCheckout.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen, userEvent, waitFor } from '@/test/testUtils';
-import { DEFAULT_USE_ROUTER_RETURN_VALUE } from '@/test/defaultMocks/next';
+import React from 'react';
+import { render, screen, userEvent, waitFor } from '../../test/testUtils';
+import { DEFAULT_USE_ROUTER_RETURN_VALUE } from '../../test/defaultMocks/next';
 import { ShopCheckoutProps } from './ShopCheckout';
 import ShopCheckout from '.';
 import { useRouter } from '../../../__mocks__/next/router';

package/src/slices/ShopCheckout/ShopCheckout.tsx

@@ -1,3 +1,4 @@
+import React, { useContext, useCallback } from 'react';
 import {
   Badge,
   BoemlyFormControl,
@@ -18,14 +19,13 @@ import {
 } from 'boemly';
 import { Field, FieldProps, Form, Formik, FormikProps } from 'formik';
 import { useRouter } from 'next/router';
-import { useCallback } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { FPM_API_URI } from '@/constants/api';
-import CheckoutForm from '@/models/forms/CheckoutForm';
+import { FPM_API_URI } from '../../constants/api';
+import CheckoutForm from '../../models/forms/CheckoutForm';
 import {
   MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY,
   MINIMUM_CONTRIBUTION_VALUE_IN_MONEY,
-} from '@/constants/domain';
+} from '../../constants/domain';
+import { IntlContext } from '../../components/ContextProvider';
 
 export interface ShopCheckoutProps {
   slice: {
@@ -44,28 +44,35 @@ export interface ShopCheckoutProps {
 
 export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
   const [primary50] = useToken('colors', ['primary.50']);
-  const { formatMessage, formatNumber } = useIntl();
+  const { formatMessage, formatNumber, locale } = useContext(IntlContext);
   const { push } = useRouter();
 
-  const validateForm = useCallback((values: CheckoutForm) => {
-    const errors: Partial<{ contributionValue: string }> = {};
-
-    if (!values.contributionValue) {
-      errors.contributionValue = formatMessage({
-        id: 'sections.shopCheckout.contributionValue.validation.empty',
-      });
-    } else if (values.contributionValue < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY) {
-      errors.contributionValue = formatMessage({
-        id: `sections.shopCheckout.contributionValue.validation.tooLow.${slice.currency}`,
-      });
-    } else if (values.contributionValue > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY) {
-      errors.contributionValue = formatMessage({
-        id: 'sections.shopCheckout.contributionValue.validation.tooHigh',
-      });
-    }
-
-    return errors;
-  }, []);
+  const validateForm = useCallback(
+    (values: CheckoutForm) => {
+      const errors: Partial<{ contributionValue: string }> = {};
+
+      if (!values.contributionValue) {
+        errors.contributionValue = formatMessage({
+          id: 'sections.shopCheckout.contributionValue.validation.empty',
+        });
+      } else if (
+        values.contributionValue < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY
+      ) {
+        errors.contributionValue = formatMessage({
+          id: `sections.shopCheckout.contributionValue.validation.tooLow.${slice.currency}`,
+        });
+      } else if (
+        values.contributionValue > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY
+      ) {
+        errors.contributionValue = formatMessage({
+          id: 'sections.shopCheckout.contributionValue.validation.tooHigh',
+        });
+      }
+
+      return errors;
+    },
+    [locale]
+  );
 
   const onSubmit = ({ contributionValue }: CheckoutForm) => {
     const url = new URL(`${FPM_API_URI}/v1/webhooks/shop/checkout`);
@@ -163,9 +170,9 @@ export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
                           })}
                           rightAddonsOrElements={[
                             <InputRightAddon key="1">
-                              <FormattedMessage
-                                id={`sections.shopCheckout.contributionValue.unit.${slice.currency}`}
-                              />
+                              {formatMessage({
+                                id: `sections.shopCheckout.contributionValue.unit.${slice.currency}`,
+                              })}
                             </InputRightAddon>,
                           ]}
                           isInvalid={
@@ -215,7 +222,7 @@ export const ShopCheckout = ({ slice }: ShopCheckoutProps): JSX.Element => {
                   <Spacer height="6" />
 
                   <Button type="submit" width="full">
-                    <FormattedMessage id="sections.shopCheckout.submit" />
+                    {formatMessage({ id: 'sections.shopCheckout.submit' })}
                   </Button>
                 </Form>
               )}

package/src/slices/SideBySideImages/SideBySideImages.stories.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import SideBySideImages from '.';
 
 export default {
-  title: 'sections/SideBySideImages',
+  title: 'slices/SideBySideImages',
   component: SideBySideImages,
 } as Meta<typeof SideBySideImages>;
 

package/src/slices/SideBySideImages/SideBySideImages.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import { SideBySideImagesProps } from './SideBySideImages';
 import SideBySideImages from '.';
 

package/src/slices/SideBySideImages/SideBySideImages.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Box,
   DefaultSectionContainer,
@@ -8,8 +9,8 @@ import {
   Wrapper,
 } from 'boemly';
 import Image from 'next/image';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 
 export interface SideBySideImagesProps {
   slice: {

package/src/slices/SmallHero/SmallHero.stories.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import SmallHero from '.';
 
 export default {
-  title: 'sections/SmallHero',
+  title: 'slices/SmallHero',
   component: SmallHero,
 } as Meta<typeof SmallHero>;
 

package/src/slices/SmallHero/SmallHero.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import SmallHero from '.';
 import { SmallHeroProps } from './SmallHero';
 

package/src/slices/SmallHero/SmallHero.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Box,
   DefaultSectionHeader,
@@ -7,11 +8,10 @@ import {
   Wrapper,
 } from 'boemly';
 import Image from 'next/image';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import { HeadingContainer } from './styles';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 
 export interface SmallHeroProps {
   slice: {
@@ -66,7 +66,14 @@ export const SmallHero: React.FC<SmallHeroProps> = ({
         {slice.gradient && <Gradient />}
       </>
     )}
-    <HeadingContainer>
+    <Box
+      position="absolute"
+      left="0"
+      top="60%"
+      width="full"
+      textAlign="center"
+      transform="translateY(-50%)"
+    >
       <Wrapper>
         <>
           {slice.tags && (
@@ -111,6 +118,6 @@ export const SmallHero: React.FC<SmallHeroProps> = ({
           )}
         </>
       </Wrapper>
-    </HeadingContainer>
+    </Box>
   </Box>
 );

package/src/slices/Steps/Steps.stories.tsx

@@ -1,14 +1,15 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import {
   storybookStrapiCoverMock,
   storybookStrapiGradientBottomUpMock,
   storybookStrapiGradientTopDownMock,
-} from '@/test/storybookMocks/storybookStrapiMedia';
+} from '../../test/storybookMocks/storybookStrapiMedia';
 import Steps from '.';
 
 export default {
-  title: 'sections/Steps',
+  title: 'slices/Steps',
   component: Steps,
 } as Meta<typeof Steps>;
 

package/src/slices/Steps/Steps.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import Steps from '.';
 import { StepsProps } from './Steps';
 

package/src/slices/Steps/Steps.tsx

@@ -1,7 +1,10 @@
+import React, { createRef, useEffect, useRef, useState } from 'react';
 import {
   Box,
+  Center,
   DefaultSectionContainer,
   DefaultSectionHeader,
+  Flex,
   Gradient,
   Heading,
   RichText,
@@ -11,21 +14,13 @@ import {
   Wrapper,
 } from 'boemly';
 import Image from 'next/image';
-import { createRef, useEffect, useRef, useState } from 'react';
 import { useWindowScroll, useWindowSize } from 'react-use';
 import { useRouter } from 'next/router';
-import StrapiShapesCard from '@/models/strapi/StrapiShapesCard';
-import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import strapiLinkUrl from '@/utils/strapiLinkUrl';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import {
-  ImageContainer,
-  ProgressDivider,
-  StepContainer,
-  StepNumber,
-  StepsContainer,
-} from './styles';
+import StrapiShapesCard from '../../models/strapi/StrapiShapesCard';
+import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import strapiLinkUrl from '../../utils/strapiLinkUrl';
+import StrapiImage from '../../models/strapi/StrapiImage';
 
 interface StepsSlice extends StrapiDefaultHeader {
   steps: {
@@ -77,7 +72,13 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
       <DefaultSectionContainer backgroundColor={gray900} title={slice.title}>
         <>
           {slice.image && (
-            <ImageContainer>
+            <Box
+              position="absolute"
+              top="0"
+              left="0"
+              width="full"
+              height="full"
+            >
               <Image
                 src={strapiMediaUrl(slice.image.img, 'xLarge')}
                 alt={slice.image.alt}
@@ -85,7 +86,7 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
                 style={{ objectFit: slice.image.objectFit || 'cover' }}
               />
               <Gradient />
-            </ImageContainer>
+            </Box>
           )}
         </>
         <Wrapper>
@@ -109,14 +110,19 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
               }}
             />
 
-            <StepsContainer>
+            <Box marginTop={['16', null, '24']}>
               {slice.steps.map(({ id, step, title, text }, index) => (
-                <StepContainer key={id}>
-                  <StepNumber>
+                <Flex flexDir="column" alignItems="center" key={id}>
+                  <Center
+                    width="10"
+                    height="10"
+                    borderRadius="full"
+                    backgroundColor="white"
+                  >
                     <Text size="smRegularNormal" color="black">
                       {step}
                     </Text>
-                  </StepNumber>
+                  </Center>
                   <Heading size="lg" color="white" mt="4" textAlign="center">
                     {title}
                   </Heading>
@@ -134,17 +140,31 @@ export const Steps: React.FC<StepsProps> = ({ slice }: StepsProps) => {
                     </Box>
                   )}
                   {(index + 1 < slice.steps.length || slice.card) && (
-                    <ProgressDivider
+                    <Box
                       ref={stepRefs[index]}
-                      progress={stepProgress[index]}
+                      position="relative"
+                      marginTop="4"
+                      marginBottom="6"
+                      height="12"
                     >
-                      <div className="dotted" />
-                      <div className="progress" />
-                    </ProgressDivider>
+                      <Box
+                        position="absolute"
+                        height="full"
+                        borderLeft="dashed 1px white"
+                        opacity="0.5"
+                      />
+                      <Box
+                        position="absolute"
+                        height={`${stepProgress[index]}%`}
+                        borderRight="solid 1px white"
+                        opacity="1"
+                        transition="height ease var(--medium-transition-duration)"
+                      />
+                    </Box>
                   )}
-                </StepContainer>
+                </Flex>
               ))}
-            </StepsContainer>
+            </Box>
 
             {slice.card && (
               <ShapesCard

package/src/slices/TextCardGrid/TextCardGrid.stories.tsx

@@ -1,13 +1,14 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import {
   storybookStrapiCoverMock,
   storybookStrapiGradientBottomUpMock,
-} from '@/test/storybookMocks/storybookStrapiMedia';
+} from '../../test/storybookMocks/storybookStrapiMedia';
 import TextCardGrid from '.';
 
 export default {
-  title: 'sections/TextCardGrid',
+  title: 'slices/TextCardGrid',
   component: TextCardGrid,
 } as Meta<typeof TextCardGrid>;
 

package/src/slices/TextCardGrid/TextCardGrid.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import TextCardGrid from '.';
 import { TextCardGridProps } from './TextCardGrid';
 

package/src/slices/TextCardGrid/TextCardGrid.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { css } from '@emotion/react';
 import {
   Box,
@@ -13,11 +14,11 @@ import {
 } from 'boemly';
 import Image from 'next/image';
 import { CaretRight } from '@phosphor-icons/react';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiDefaultHeader from '@/models/strapi/StrapiDefaultHeader';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 
 interface TextCardGridSlice extends StrapiDefaultHeader {
   variant: 'shape' | 'image';

package/src/slices/TextCarousel/TextCarousel.stories.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiTreeIconMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import { storybookStrapiTreeIconMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import TextCarousel from '.';
 
 export default {
-  title: 'sections/TextCarousel',
+  title: 'slices/TextCarousel',
   component: TextCarousel,
 } as Meta<typeof TextCarousel>;
 

package/src/slices/TextCarousel/TextCarousel.test.tsx

@@ -1,6 +1,7 @@
-import { strapiLinkPageMock } from '@/test/strapiMocks/strapiLinkPage';
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { strapiLinkPageMock } from '../../test/strapiMocks/strapiLinkPage';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import TextCarousel from '.';
 import { TextCarouselProps } from './TextCarousel';