docs(Modal): carousel example

packages/ui/src/components/Modal/__stories__/Carousel.stories.tsx

@@ -0,0 +1,73 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { Modal } from '..'
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import appleSilicon from './assets/apple-silicon-m4-content.webp'
+import costManager from './assets/cost-manager-content.webp'
+import image from './assets/illustration.webp'
+
+const IMAGES_STEP = [image, appleSilicon, costManager]
+const TEXT_STEP = [
+  'A new feature is available here and give you a lot of interesting options.',
+  'However this feature is not without any risk let me explain you why in the next step.',
+  'In fact, this feature might break the production environement and should be activate with caution.',
+]
+
+export const Carousel: StoryFn = props => {
+  const [step, setStep] = useState(0)
+  const isLastStep = step >= IMAGES_STEP.length - 1
+
+  return (
+    <Modal
+      image={IMAGES_STEP[step]}
+      size="medium"
+      disclosure={
+        <Button onClick={() => setStep(0)}>Open Carousel Modal</Button>
+      }
+      {...props}
+    >
+      {({ close }) => (
+        <Stack direction="column" gap="2">
+          <Text as="p" variant="body" sentiment="neutral">
+            {TEXT_STEP[step]}
+          </Text>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="end"
+          >
+            <Text
+              as="span"
+              variant="bodySmall"
+              sentiment="neutral"
+              prominence="weak"
+            >
+              {step + 1} of {IMAGES_STEP.length}
+            </Text>
+            <Button
+              onClick={() => {
+                if (!isLastStep) {
+                  setStep(step + 1)
+                } else {
+                  close()
+                }
+              }}
+            >
+              {isLastStep ? 'Done' : 'Next'}
+            </Button>
+          </Stack>
+        </Stack>
+      )}
+    </Modal>
+  )
+}
+
+Carousel.parameters = {
+  docs: {
+    description: {
+      story: 'Add an image at the top of the modal.',
+    },
+  },
+}

packages/ui/src/components/Modal/__stories__/Image.stories.tsx

@@ -4,8 +4,8 @@ import { Badge } from '../../Badge'
 import { Button } from '../../Button'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
-import image from '../assets/illustration.webp'
-import imageCorrectFormat from '../assets/illustrationCorrectFormat.webp'
+import image from './assets/illustration.webp'
+import imageCorrectFormat from './assets/illustrationCorrectFormat.webp'
 
 export const Image: StoryFn = props => (
   <Stack gap={2} direction="row">

packages/ui/src/components/Modal/__stories__/index.stories.tsx

@@ -25,3 +25,4 @@ export { AutoFocus } from './AutoFocus.stories'
 export { Open } from './Open.stories'
 export { NestedModal } from './NestedModal.stories'
 export { Image } from './Image.stories'
+export { Carousel } from './Carousel.stories'

packages/ui/src/components/Modal/__tests__/index.test.tsx

@@ -9,7 +9,7 @@ import {
 import { afterAll, beforeEach, describe, expect, test, vi } from 'vitest'
 import { Modal } from '..'
 import { useModal } from '../ModalProvider'
-import illustration from '../assets/illustration.webp'
+import illustration from '../__stories__/assets/illustration.webp'
 
 const customDialogBackdropStyles = css`
   background-color: aliceblue;

packages/ui/src/components/Tag/__stories__/LongTag.stories.tsx

@@ -6,7 +6,7 @@ LongTag.parameters = {
   docs: {
     description: {
       story:
-        'Loading for async operation or other use cases, You can define it by passing `isLoading` property to true.',
+        'Whenever a tag is too long it will automatically shrink and add a tooltip on top of it so the user can see the full text.',
     },
   },
 }