chore: ⬆️ met à jour DSFR 1.12.x

.github/workflows/run-tests.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
       - name: Install pnpm
         run: npm i -g pnpm
       - name: Install dependencies
@@ -32,5 +32,16 @@ jobs:
         run: pnpm lint --quiet
       - name: Test
         run: pnpm test
+      - name: Install Playwright
+        run: pnpx playwright install --with-deps
+      - name: Build Storybook
+        run: pnpm build-storybook --quiet
+      - name: Serve Storybook and run tests
+        env:
+          TEST_STORYBOOK_URL: http://localhost:6006
+        run: |
+          pnpx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "pnpx http-server storybook-static --port 6006 --silent" \
+            "pnpx wait-on tcp:6006 && pnpm test-storybook"
       - name: Build
         run: pnpm build

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit "$1"
+pnpx commitlint --edit "$1"

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
+pnpx lint-staged

.husky/pre-push

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm test
+pnpm test

.storybook/preview.ts

@@ -4,7 +4,7 @@ import { themes } from '@storybook/theming'
 import { withThemeByDataAttribute } from '@storybook/addon-styling'
 import { FocusTrap } from 'focus-trap-vue'
 import { defineComponent } from 'vue'
-import { OhVueIcon as VIcon } from 'oh-vue-icons'
+import VIcon from '../src/components/VIcon/VIcon.vue'
 
 import VueDsfrTheme from './vue-dsfr-theme.js'
 import '../src/assets/variables-fdr.css'

.vitepress/config.ts

@@ -62,6 +62,10 @@ const guideItems = [
     text: 'Les icônes',
     link: '/guide/icones.md',
   },
+  {
+    text: 'Migrations',
+    link: '/guide/migrations.md',
+  },
   {
     text: 'Guide du développeur',
     link: '/guide/guide-developpeur.md',
@@ -95,6 +99,10 @@ const composants = [
     text: 'DsfrAccordion',
     link: '/composants/DsfrAccordion.md',
   },
+  {
+    text: 'DsfrAccordionsGroup',
+    link: '/composants/DsfrAccordionsGroup.md',
+  },
   {
     text: 'DsfrAlert',
     link: '/composants/DsfrAlert.md',
@@ -119,6 +127,10 @@ const composants = [
     text: 'DsfrButtonGroup',
     link: '/composants/DsfrButtonGroup.md',
   },
+  {
+    text: 'DsfrCallout',
+    link: '/composants/DsfrCallout.md',
+  },
   {
     text: 'DsfrCard',
     link: '/composants/DsfrCard.md',
@@ -135,6 +147,10 @@ const composants = [
     text: 'DsfrConsent',
     link: '/composants/DsfrConsent.md',
   },
+  {
+    text: 'DsfrDataTable',
+    link: '/composants/DsfrDataTable.md',
+  },
   {
     text: 'DsfrErrorPage',
     link: '/composants/DsfrErrorPage.md',
@@ -271,6 +287,10 @@ const composants = [
     text: 'DsfrTooltip',
     link: '/composants/DsfrTooltip.md',
   },
+  {
+    text: 'VIcon',
+    link: '/composants/VIcon.md',
+  },
 ]
 
 // https://vitepress.dev/reference/site-config

.vitepress/theme/VIconLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { OhVueIcon as VIcon } from 'oh-vue-icons'
+import type VIcon from '../../src/components/VIcon.vue'
 
 withDefaults(defineProps<{
   href: string

.vitepress/theme/index.ts

@@ -1,19 +1,16 @@
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { RouterLink } from 'vue-router'
 
 import Story from './Story.vue'
 import AppColors from './AppColors.vue'
 import AppIcons from './AppIcons.vue'
 import VIconLink from './VIconLink.vue'
-import * as vpIcons from './icons'
 
 import './official-icons.css'
 import '@gouvfr/dsfr/dist/utility/icons/icons.main.css'
 import './style.css'
-
-addIcons(...Object.values(vpIcons))
+import VIcon from '../../src/components/VIcon/VIcon.vue'
 
 export default {
   extends: DefaultTheme,

.vscode/extensions.json

@@ -5,7 +5,6 @@
     // Language support for Vue 3
     // https://github.com/johnsoncodehk/volar
     "vue.volar",
-    "vue.vscode-typescript-vue-plugin",
 
     // Language support for PostCSS
     // https://github.com/csstools/postcss-language

.vscode/vue.code-snippets

@@ -4,6 +4,18 @@
   // $1, $2 for tab stops, $0 for the final cursor position, and \${1:label}, \${2:another} for placeholders. Placeholders with the
   // same ids are connected.
   // Example:
+  "play": {
+    "scope": "typescript",
+    "prefix": "play",
+    "body": [
+      "$1play = async ({ canvasElement }) => {",
+      "  const canvas = within(canvasElement)",
+      "  const $2 = canvas.get$3",
+      "  expect($4).to$5",
+      "}"
+    ],
+    "description": "Crée un début de fonction play de storybook"
+  },
   "vbase": {
     "scope": "vue",
     "prefix": "vbase",

demo-app/App.vue

@@ -75,10 +75,6 @@ const navItems: DsfrNavigationProps['navItems'] = [
     to: { name: 'Modal' },
     text: 'Modales',
   },
-  {
-    to: { name: 'Tabs' },
-    text: 'Onglets',
-  },
   {
     to: { name: 'Forms' },
     text: 'Formulaires',
@@ -95,6 +91,22 @@ const navItems: DsfrNavigationProps['navItems'] = [
     to: { name: 'Languages' },
     text: 'Languages',
   },
+  {
+    title: 'Accordéons et Onglets',
+    get active () {
+      return ['Accordéons', 'Onglets'].includes(route.name as string)
+    },
+    links: [
+      {
+        to: { name: 'Accordions' },
+        text: 'Accordéons',
+      },
+      {
+        to: { name: 'Tabs' },
+        text: 'Onglets',
+      },
+    ],
+  },
   {
     title: 'Alertes et Bandeau',
     get active () {