Add new content to Modal on storybook

Author: Kubit

src/components/modalV2/stories/modal.stories.tsx

@@ -2,11 +2,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ICONS } from '@/assets';
+import { Button } from '@/components/button';
+import { Carousel, CarouselAlignType } from '@/components/carousel';
 import { CssAnimationTimingFunction, CssAnimationVariants } from '@/components/cssAnimation';
 import { FooterPositionType } from '@/components/footer';
 import { ReplaceContent } from '@/components/storybook/replaceContent/replaceContent';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
+import { ROLES } from '@/types';
 
 import { ModalControlled as Story } from '../modalControlled';
 import { argtypes } from './argtypes';
@@ -59,18 +62,121 @@ export const Modal: Story = {
     variant: Object.values(variantsObject[themeSelected].ModalVariantType || {})[0] as string,
     title: { content: 'Modal title' },
     dataTestId: 'modal',
-    content: <ReplaceContent />,
-    open: true,
+    content: (
+      <Carousel
+        allowModifySliceWidth={true}
+        centerMode={false}
+        circular={false}
+        disableSwipe={false}
+        displayArrowsOnCarousel={false}
+        elements={[
+          <ReplaceContent
+            key={0}
+            aria-label="1 of 10"
+            aria-roledescription="slide"
+            id="carousel-item-1"
+            role={ROLES.GROUP}
+          >
+            First Slide
+          </ReplaceContent>,
+          <ReplaceContent
+            key={1}
+            aria-label="2 of 10"
+            aria-roledescription="slide"
+            id="carousel-item-2"
+            role={ROLES.GROUP}
+          >
+            Second Slide
+          </ReplaceContent>,
+          <ReplaceContent
+            key={2}
+            aria-label="3 of 10"
+            aria-roledescription="slide"
+            id="carousel-item-3"
+            role={ROLES.GROUP}
+          >
+            Third Slide
+          </ReplaceContent>,
+          <ReplaceContent
+            key={3}
+            aria-label="4 of 10"
+            aria-roledescription="slide"
+            id="carousel-item-4"
+            role={ROLES.GROUP}
+          >
+            Fourth Slide
+          </ReplaceContent>,
+          <ReplaceContent
+            key={4}
+            aria-label="5 of 10"
+            aria-roledescription="slide"
+            id="carousel-item-5"
+            role={ROLES.GROUP}
+          >
+            Fifth Slice
+          </ReplaceContent>,
+          <ReplaceContent
+            key={5}
+            aria-label="6 of 10"
+            aria-roledescription="slide"
+            id="carousel-item-6"
+            role={ROLES.GROUP}
+          >
+            Sixth Slide
+          </ReplaceContent>,
+        ]}
+        extraPadding={0}
+        extraPaddingAsArrow={true}
+        hasPagination={true}
+        leftArrow={{
+          icon: ICONS.ICON_CHEVRON_LEFT,
+          ['aria-label']: 'Left arrow aria label',
+        }}
+        numElementsPerPage={3}
+        numElementsToSlide={3}
+        onePageAlign={CarouselAlignType.CENTER}
+        pageControlArrowsControlVariant={
+          Object.values(variantsObject[themeSelected].ArrowsControlVariant || {})[0] as string
+        }
+        pageControlVariant={
+          Object.values(variantsObject[themeSelected].PageControlVariant || {})[0] as string
+        }
+        rightArrow={{
+          icon: ICONS.ICON_CHEVRON_RIGHT,
+          ['aria-label']: 'Right arrow aria label',
+        }}
+        variant={
+          Object.values(variantsObject[themeSelected].CarouselVariantType || {})[0] as string
+        }
+      />
+    ),
+    // open: true,
     closeIcon: { icon: ICONS.ICON_CLOSE },
+
     footer: {
       variant: Object.values(variantsObject[themeSelected].FooterVariants || {})[0] as string,
       content: [
-        <ReplaceContent key={0} data-position={FooterPositionType.LEFT} width={'100%'}>
-          Footer content
-        </ReplaceContent>,
-        <ReplaceContent key={0} data-position={FooterPositionType.RIGHT} width={'100%'}>
-          Footer content
-        </ReplaceContent>,
+        <Button
+          key={0}
+          disabled
+          data-position={FooterPositionType.LEFT}
+          size={Object.values(variantsObject[themeSelected].ButtonSizeType || {})[0] as string}
+          variant={
+            Object.values(variantsObject[themeSelected].ButtonVariantType || {})[0] as string
+          }
+        >
+          {'Button'}
+        </Button>,
+        <Button
+          key={1}
+          data-position={FooterPositionType.RIGHT}
+          size={Object.values(variantsObject[themeSelected].ButtonSizeType || {})[0] as string}
+          variant={
+            Object.values(variantsObject[themeSelected].ButtonVariantType || {})[0] as string
+          }
+        >
+          {'Button'}
+        </Button>,
       ],
     },
     popover: {
@@ -89,7 +195,7 @@ export const Modal: Story = {
         animationYEndPosition: '0px',
         animationXEndPosition: '0px',
       },
-      focusFirstDescendantAutomatically: false,
+      focusFirstDescendantAutomatically: true,
     },
     themeArgs: themesObject[themeSelected][STYLES_NAME.MODAL],
   },