refactor(DsfrMedia): ✨ remanie les stories DsfrPicture et DsfrVideo

- Mettre à jour les fichiers de stories au format CSF3 pour suivre les bonnes pratiques de Storybook.
- Améliorer la lisibilité et la maintenabilité des stories.
- Assurer le bon fonctionnement des contrôles et des actions dans l'interface de Storybook.

- **DsfrPicture.stories.ts**: Refactorisation complète au format CSF3, avec mise à jour de la fonction `play`.
- **DsfrVideo.stories.ts**: Passage au format CSF3, avec correction des imports et mise à jour de la fonction `play`.

Author: laruiss

src/components/DsfrMedia/DsfrPicture.stories.ts

@@ -1,8 +1,10 @@
-import { expect, within } from 'storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { expect, within } from '@storybook/test'
 
 import DsfrPicture from './DsfrPicture.vue'
 
-export default {
+const meta = {
   component: DsfrPicture,
   title: 'Composants/DsfrPicture',
   argTypes: {
@@ -37,52 +39,41 @@ export default {
         'Permet d’alterner entre les différents ratio possibles pour le contenu ("32x9", "16x9", "3x2", "4x3", "1x1", "3x4", "2x3") la chaine de caractères changera la classe associée, "16x9" par défaut',
     },
   },
-}
+} satisfies Meta<typeof DsfrPicture>
+
+export default meta
+type Story = StoryObj<typeof meta>
 
-export const ImageSrc = (args) => ({
-  components: { DsfrPicture },
-  data () {
-    return args
+export const ImageSrc: Story = {
+  name: 'Image avec source',
+  args: {
+    size: 'medium',
+    src: 'https://loremflickr.com/300/200/cat',
+    alt: '',
+    title: 'Photographie d’un chaton',
+    legend: 'Photographie d’un chaton',
+    ratio: '16x9',
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    const img = canvas.getByTitle(args.title!)
+    const figCaption = canvas.getByText(args.legend!)
+    expect(img).toHaveAttribute('src', args.src)
+    expect(img).toHaveAttribute('title', args.title)
+    expect(figCaption).toHaveProperty('tagName', 'FIGCAPTION')
   },
-  template: `
-    <DsfrPicture
-      :src="src"
-      :alt="alt"
-      :title="title"
-      :legend="legend"
-      :size="size"
-      :ratio="ratio"
-      style="max-width: 500px"
-    />
-  `,
-})
-ImageSrc.args = {
-  size: 'medium',
-  src: 'https://loremflickr.com/300/200/cat',
-  alt: '',
-  title: 'Photographie d’un chaton',
-  legend: 'Photographie d’un chaton',
-  ratio: '16x9',
-}
-ImageSrc.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const img = canvas.getByTitle(ImageSrc.args.title)
-  const figCaption = canvas.getByText(ImageSrc.args.legend)
-  expect(img).toHaveAttribute('src', ImageSrc.args.src)
-  expect(img).toHaveAttribute('title', ImageSrc.args.title)
-  expect(figCaption).toHaveProperty('tagName', 'FIGCAPTION')
 }
 
-export const ImageSvg = (args) => ({
-  components: { DsfrPicture },
-  data () {
-    return args
-  },
-  template: `
+export const ImageSvg: Story = {
+  name: 'Image avec SVG',
+  render: args => ({
+    components: { DsfrPicture },
+    setup: () => ({ args }),
+    template: `
     <DsfrPicture
-      :legend="legend"
-      :size="size"
-      :ratio="ratio"
+      :legend="args.legend"
+      :size="args.size"
+      :ratio="args.ratio"
       style="max-width: 500px"
     >
       <svg version="1.1" id="Layer_1" style="enable-background:new 0 0 122.88 106.42; width: 200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 106.42"  xml:space="preserve">
@@ -93,9 +84,10 @@ export const ImageSvg = (args) => ({
       </svg>
     </DsfrPicture>
   `,
-})
-ImageSvg.args = {
-  size: 'medium',
-  legend: 'Vue in Gotham',
-  ratio: '16x9',
+  }),
+  args: {
+    size: 'medium',
+    legend: 'Vue in Gotham',
+    ratio: '16x9',
+  },
 }

src/components/DsfrMedia/DsfrVideo.stories.ts

@@ -1,5 +1,7 @@
-import { setup } from '@storybook/vue3-vite'
-import { expect, within } from 'storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { expect, fn, within } from '@storybook/test'
+import { setup } from '@storybook/vue3'
 
 import DsfrModal from '../DsfrModal/DsfrModal.vue'
 import VIcon from '../VIcon/VIcon.vue'
@@ -14,7 +16,7 @@ setup((app) => {
 const delay = (timeout = 100) =>
   new Promise((resolve) => setTimeout(resolve, timeout))
 
-export default {
+const meta = {
   component: DsfrVideo,
   title: 'Composants/DsfrVideo',
   argTypes: {
@@ -47,45 +49,34 @@ export default {
       description:
         'Permet d’alterner entre les différents ratio possibles pour le contenu ("32x9", "16x9", "3x2", "4x3", "1x1", "3x4", "2x3") la chaine de caractères changera la classe associée, "16x9" par défaut',
     },
-    expandTranscription: {
-      control: 'event',
-      description: 'Event d\'ouverture de la modale contenant la transcription',
+    onExpandTranscription: {
+      action: fn(),
     },
   },
-}
+} satisfies Meta<typeof DsfrVideo>
+
+export default meta
+type Story = StoryObj<typeof meta>
 
-export const Video = (args) => ({
-  components: { DsfrVideo },
-  data () {
-    return args
+export const Video: Story = {
+  name: 'Vidéo',
+  args: {
+    size: 'medium',
+    src: 'https://www.youtube.com/embed/HyirpmPL43I',
+    legend: 'Vidéo traitant du Service National Universel',
+    transcriptionTitle: 'Titre de la transcription',
+    transcriptionContent: 'Contenu de la transcription',
+    ratio: '16x9',
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    const caption = canvas.getByText(args.legend!)
+    const transcriptionContent = canvas.getByText(args.transcriptionContent!)
+    const button = canvas.getByRole('button')
+    expect(transcriptionContent).not.toBeVisible()
+    expect(caption).toHaveClass('fr-content-media__caption')
+    button.click()
+    await delay(500)
+    expect(transcriptionContent).toBeVisible()
   },
-  template: `
-    <DsfrVideo
-      :src="src"
-      :legend="legend"
-      :size="size"
-      :transcriptionTitle="transcriptionTitle"
-      :transcriptionContent="transcriptionContent"
-      :ratio="ratio"
-    />
-  `,
-})
-Video.args = {
-  size: 'medium',
-  src: 'https://www.youtube.com/embed/HyirpmPL43I',
-  legend: 'Vidéo traitant du Service National Universel',
-  transcriptionTitle: 'Titre de la transcription',
-  transcriptionContent: 'Contenu de la transcription',
-  ratio: '16x9',
-}
-Video.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const caption = canvas.getByText(Video.args.legend)
-  const transcriptionContent = canvas.getByText(Video.args.transcriptionContent)
-  const button = canvas.getByRole('button')
-  expect(transcriptionContent).not.toBeVisible()
-  expect(caption).toHaveClass('fr-content-media__caption')
-  button.click()
-  await delay(500)
-  expect(transcriptionContent).toBeVisible()
 }