Merge pull request #703 from dnum-mi/develop

Develop
dnum-mi · Dec 24, 2023 · 13ae9e1 · 13ae9e1
2 parents df8a6e8 + 625646c
commit 13ae9e1
Show file tree

Hide file tree

Showing 99 changed files with 4,421 additions and 676 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/.husky/pre-push b/.husky/pre-push
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,7 +1,7 @@
-import type { Preview } from "@storybook/vue3"
-import { setup } from "@storybook/vue3"
+import type { Preview } from '@storybook/vue3'
+import { setup } from '@storybook/vue3'
 import { themes } from '@storybook/theming'
-import { withThemeByDataAttribute } from "@storybook/addon-styling"
+import { withThemeByDataAttribute } from '@storybook/addon-styling'
 import { FocusTrap } from 'focus-trap-vue'
 import { defineComponent } from 'vue'
 import { OhVueIcon as VIcon} from 'oh-vue-icons'
@@ -33,7 +33,7 @@ const preview: Preview = {
     docs: {
       theme: { ...themes.normal, ...VueDsfrTheme },
     },
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -5,6 +5,65 @@ import { whyframe } from '@whyframe/core'
 import { whyframeVue } from '@whyframe/vue'
 import { hmrFix } from './plugins/hmrFix.js'
 
+const composants = [
+  {
+    text: 'DsfrAccordion',
+    link: '/composants/DsfrAccordion.md',
+  },
+  {
+    text: 'DsfrAlert',
+    link: '/composants/DsfrAlert.md',
+  },
+  {
+    text: 'DsfrBackToTop',
+    link: '/composants/DsfrBackToTop.md',
+  },
+  {
+    text: 'DsfrBadge',
+    link: '/composants/DsfrBadge.md',
+  },
+  {
+    text: 'DsfrBreadcrumb',
+    link: '/composants/DsfrBreadcrumb.md',
+  },
+  {
+    text: 'DsfrButton',
+    link: '/composants/DsfrButton.md',
+  },
+  {
+    text: 'DsfrButtonGroup',
+    link: '/composants/DsfrButtonGroup.md',
+  },
+  {
+    text: 'DsfrCard',
+    link: '/composants/DsfrCard.md',
+  },
+  {
+    text: 'DsfrRange',
+    link: '/composants/DsfrRange.md',
+  },
+  {
+    text: 'DsfrNotice',
+    link: '/composants/DsfrNotice.md',
+  },
+  {
+    text: 'DsfrSegmented',
+    link: '/composants/DsfrSegmented.md',
+  },
+  {
+    text: 'DsfrSegmentedSet',
+    link: '/composants/DsfrSegmentedSet.md',
+  },
+  {
+    text: 'DsfrTag',
+    link: '/composants/DsfrTag.md',
+  },
+  {
+    text: 'DsfrTooltip',
+    link: '/composants/DsfrTooltip.md',
+  },
+]
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "VueDsfr",
@@ -14,11 +73,54 @@ export default defineConfig({
   appearance: { listenToStorageChanges: false }, // handling this in Story.vue itself to avoid flickering
 
   rewrites: {
+    'src/components/DsfrButton/DsfrButtonGroup.md': 'composants/DsfrButtonGroup.md',
+    'src/components/DsfrSegmented/DsfrSegmentedSet.md': 'composants/DsfrSegmentedSet.md',
     'src/components/:comp/:comp.md': 'composants/:comp.md',
     'docs/:splat*': ':splat*',
   },
 
   themeConfig: {
+    docFooter: {
+      next: 'Page suivante',
+      prev: 'Page précédente',
+    },
+    logo: '/nouveau-logo-marianne-gouvernement.png',
+    nav: [
+      {
+        text: 'Guide',
+        link: '/guide/pour-commencer',
+        items: [
+          { text: 'Tous les composants', link: '/composants' },
+          { text: 'Tous les types', link: '/types' }
+        ],
+      },
+      {
+        text: 'Références',
+        items: [
+          { text: 'Tous les composants', link: '/composants' },
+          { text: 'Tous les types', link: '/types' }
+        ],
+      },
+      {
+        text: 'Liens',
+        items: [
+          {
+            text: 'Système de Design Français',
+            link: 'https://www.systeme-de-design.gouv.fr/',
+            target: '_blank'
+          },
+          {
+            text: 'Storybook de VueDsfr',
+            link: 'https://vue-ds.fr/',
+            target: '_blank'
+          },
+        ],
+      },
+    ],
+    outline:{
+      level: [2, 3],
+      label: 'Sur cette page :',
+    },
     search: {
       provider: 'local',
       options: {
@@ -36,97 +138,80 @@ export default defineConfig({
               selectText: 'aller à ce texte',
               navigateText: 'naviguer dans les résultats',
               closeText: 'fermer'
-            }
-      }
+            },
+          },
         },
       }
     },
-    outline:{
-      level: [2, 3],
-      label: 'Sur cette page :',
+    sidebar: {
+      '/composants': composants,
+      '/': [
+        {
+          text: 'Guide',
+          items: [
+            {
+              text: 'Introduction',
+              link: '/guide/',
+            },
+            {
+              text: 'Commencer',
+              link: '/guide/pour-commencer',
+            },
+            {
+              text: 'L’écosystème',
+              link: '/guide/ecosysteme',
+            },
+            {
+              text: 'Les icônes',
+              link: '/guide/icones',
+            },
+            {
+              text: 'Guide du développeur',
+              link: '/guide/guide-developpeur',
+            },
+          ]
+        },
+        {
+          text: 'Tous les types',
+          link: '/types',
+          items: [],
+        },
+        {
+          text: 'Tous les composants',
+          link: '/composants',
+          items: [],
+        },
+        {
+          text: 'Recettes nuxt',
+          link: '/nuxt/',
+        },
+      ],
     },
-    logo: '/nouveau-logo-marianne-gouvernement.png',
-    // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: 'Home', link: '/' },
-    ],
-
-    sidebar: [
-      {
-        text: 'Pour commencer',
-        collapsed: false,
-        items: [
-          {
-            text: 'Commencer',
-            link: '/pour-commencer',
-          },
-          {
-            text: 'L’écosystème',
-            link: '/ecosysteme',
-          },
-          {
-            text: 'Les icônes',
-            link: '/icones',
-          },
-          {
-            text: 'Guide du développeur',
-            link: '/guide-developpeur',
-          },
-        ]
-      },
-      {
-        text: 'Tous les types',
-        link: '/types',
-        items: []
-      },
-      {
-        text: 'Tous les composants',
-        link: '/composants',
-        collapsed: false,
-        items: [
-          {
-            text: 'DsfrAlert',
-            link: '/composants/DsfrAlert.md',
-          },
-          {
-            text: 'DsfrBadge',
-            link: '/composants/DsfrBadge.md',
-          },
-          {
-            text: 'DsfrNotice',
-            link: '/composants/DsfrNotice.md',
-          },
-        ]
-      },
-      {
-        text: 'Recettes nuxt',
-        link: '/nuxt/',
-      },
-    ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/dnum-mi/vue-dsfr' }
+      { icon: 'github', link: 'https://github.com/dnum-mi/vue-dsfr' },
+      { icon: 'discord', link: 'https://discord.gg/jbBJ9769ZZ' },
     ]
   },
 
   vite: {
     plugins: [
       whyframe({ defaultSrc: '/_frame', components: [{ name: 'Story' }] }),
       whyframeVue({ include: /\.(vue|md)$/ }),
-      hmrFix()
+      hmrFix(),
     ],
 
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('../src', import.meta.url)),
-      }
+      },
     },
 
     // not needed, just there to prevent reload on cold start
     optimizeDeps: {
       include: [
         '@vueuse/core',
-      ]
-    }
+      ],
+    },
   },
 })
diff --git a/.vitepress/theme/VIconLink.vue b/.vitepress/theme/VIconLink.vue
@@ -5,16 +5,17 @@ withDefaults(defineProps<{
   href: string
   rel?: string
   target?: string
+  internal?: boolean
   icon?: string | InstanceType<typeof VIcon>['$props']
   iconLeft: string | InstanceType<typeof VIcon>['$props']
 }>(), {
-  rel: 'noreferrer',
+  rel: 'noopener noreferrer',
   target: '_blank',
 })
 </script>
 
 <template>
-  <a :href="href" :target="target" :rel="rel">
+  <a :href="href" :target="internal ? undefined : target" :rel="internal ? undefined : rel">
     <VIcon v-if="iconLeft" style="margin-right: 0.125rem;" v-bind="typeof iconLeft == 'object' ? iconLeft : { name: iconLeft }" />
     <slot />
     <VIcon v-if="icon" style="margin-left: 0.125rem;" v-bind="typeof icon == 'object' ? icon : { name: icon }" />

diff --git a/.vitepress/theme/icons.ts b/.vitepress/theme/icons.ts
@@ -1,9 +1,15 @@
 export {
-  RiCloseLine,
+  GiChocolateBar,
+  RiArrowDownLine,
   RiArrowDropDownLine,
   RiArrowDropUpLine,
+  RiCloseLine,
+  RiMoonLine,
+  RiRefreshLine,
   SiDiscord,
   SiGithub,
   SiNpm,
+  SiNuxtdotjs,
   SiVisualstudiocode,
+  ViFileTypeStorybook,
 } from 'oh-vue-icons/icons'
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -1,6 +1,7 @@
 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 VIconLink from './VIconLink.vue'
@@ -16,5 +17,6 @@ export default {
     app.component('VIcon', VIcon)
     app.component('VIconLink', VIconLink)
     app.component('Story', Story)
+    app.component('RouterLink', RouterLink)
   }
 } satisfies Theme