Merge pull request #326 from dnum-mi/develop

RC11

Author: laruiss

package-lock.json

@@ -101,18 +101,17 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-url": "^6.1.0",
-    "@rushstack/eslint-patch": "^1.1.1",
-    "@storybook/addon-actions": "^6.4.20",
-    "@storybook/addon-docs": "^6.4.20",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-links": "^6.4.20",
+    "@rushstack/eslint-patch": "^1.1.2",
+    "@storybook/addon-actions": "^6.4.21",
+    "@storybook/addon-docs": "^6.4.21",
+    "@storybook/addon-essentials": "^6.4.21",
+    "@storybook/addon-links": "^6.4.21",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.1.24",
-    "@storybook/builder-webpack5": "^6.4.20",
-    "@storybook/client-api": "^6.4.20",
-    "@storybook/core-common": "^6.4.20",
-    "@storybook/manager-webpack5": "^6.4.20",
-    "@storybook/vue3": "^6.4.20",
+    "@storybook/builder-vite": "^0.1.26",
+    "@storybook/client-api": "^6.4.21",
+    "@storybook/client-logger": "^6.4.21",
+    "@storybook/core-common": "^6.4.21",
+    "@storybook/vue3": "^6.4.21",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^14.0.4",
     "@testing-library/vue": "^6.5.1",
@@ -139,12 +138,12 @@
     "cross-env": "^7.0.3",
     "cypress": "^9.5.3",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.12.0",
+    "eslint": "^8.13.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-storybook": "^0.5.7",
+    "eslint-plugin-storybook": "^0.5.8",
     "eslint-plugin-vue": "^8.6.0",
     "globby": "^13.1.1",
     "inquirer": "^8.2.2",
@@ -171,11 +170,11 @@
     "tsd-jsdoc": "^2.5.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.1",
-    "vitest": "^0.9.0",
+    "vitest": "^0.9.3",
     "vue-loader": "^17.0.0",
     "vue-router": "^4.0.14",
     "vue-router-mock": "^0.1.7",
-    "vue-tsc": "^0.33.9",
+    "vue-tsc": "^0.34.2",
     "vue-typegen": "^0.2.0",
     "yorkie": "^2.0.0"
   },
@@ -184,7 +183,7 @@
     "vue-router": "^4.0.14"
   },
   "optionalDependencies": {
-    "esbuild-linux-64": "^0.14.27"
+    "esbuild-linux-64": "^0.14.34"
   },
   "gitHooks": {
     "pre-commit": "lint-staged",

package.json

@@ -1,5 +1,19 @@
 import DsfrHeader from './DsfrHeader.vue'
 
+import { addIcons } from 'oh-vue-icons'
+
+import {
+  RiAddCircleLine,
+  RiLockLine,
+  RiAccountCircleLine,
+} from 'oh-vue-icons/icons/ri/index.js'
+
+addIcons(
+  RiAddCircleLine,
+  RiLockLine,
+  RiAccountCircleLine,
+)
+
 export default {
   component: DsfrHeader,
   title: 'Composants/En-tête - DsfrHeader',
@@ -31,12 +45,15 @@ export default {
     quickLinks: {
       control: 'object',
       description: `Tableau des liens d’accès rapide, chaque objet contiendra les props suivantes :
-
 - \`label\`: Texte du lien (\`'Notifications'\`, par ex.)
 - \`to\`: Chemin ou objet à passer à \`to\` de \`router-link\` ou \`nuxt-link\` (\`'/notification'\` ou \`{ name: 'Notifications' }\` par ex.)
 - \`href\`: URL à passer à \`href\` de la balise \`<a>\` (\`'https://systeme-de-design.gouv.fr\` par ex.) **pour un lien externe uniquement**.
-- \`icon\` pour le nom de l’icône à afficher (\`'phone-line'\` par ex.)
-- \`button\`: \`true\` pour avoir une balise \`button\`, \`false\` pour laisser en balise \`a\``,
+- \`icon\` Nom de l’icône [Remix Icon](https://remixicon.com/) (ou toute autre icône de [oh-vue-icons](https://oh-vue-icons.netlify.app/)) à afficher (\`'ri-phone-line'\` par ex.)
+- \`iconRight\` Permet de mettre l’icône à droite (si la valeur est \`true\` ou <em>truthy</em> et que \`icon\` est renseigné )
+- \`iconAttrs\` Ensemble des props/attributs à donner à \`<VIcon>\` (Cf. [Doc](https://oh-vue-icons.netlify.app/docs#props)). Ex. : \`{ scale: 0.9, animation: }\`
+- \`button\`: \`true\` pour avoir une balise \`button\`, \`false\` pour laisser en balise \`a\`
+- accepte aussi tout ce qui peut être mis sur un composant, par exemple \`class\`
+`,
     },
     modelValue: {
       control: 'text',
@@ -118,8 +135,8 @@ EnTete.args = {
   placeholder: '',
   homeTo: '#',
   quickLinks: [
-    { label: 'Créer un espace', to: '/path1', icon: 'add-circle-line' },
-    { label: 'Se connecter', to: '/path2', icon: 'lock-line' },
-    { label: 'S’enregistrer', to: '/path3', icon: 'account-line' },
+    { label: 'Créer un espace', to: '/space/create', icon: 'ri-add-circle-line', iconAttrs: { scale: 0.9 } },
+    { label: 'Se connecter', to: '/login', class: 'fr-fi-lock-line' },
+    { label: 'S’enregistrer', to: '/signin', icon: 'ri-account-circle-line', iconRight: true, iconAttrs: { animation: 'spin', speed: 'slow' } },
   ],
 }

src/components/DsfrHeader/DsfrHeader.stories.js

@@ -15,6 +15,11 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    iconAttrs: {
+      type: String,
+      default: undefined,
+    },
+    iconRight: Boolean,
     label: {
       type: String,
       default: '',
@@ -69,10 +74,23 @@ export default defineComponent({
   <component
     :is="is"
     class="fr-btn"
-    :class="`fr-fi-${icon}`"
     v-bind="linkData"
     @click.stop="onClick"
   >
+    <VIcon
+      v-if="(icon || iconAttrs) && !iconRight"
+      :name="icon"
+      class="fr-mr-1w"
+      v-bind="iconAttrs"
+    />
+
     {{ label }}
+
+    <VIcon
+      v-if="(icon || iconAttrs) && iconRight"
+      :name="icon"
+      class="fr-ml-1w"
+      v-bind="iconAttrs"
+    />
   </component>
 </template>

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -148,6 +148,39 @@ LabelVisible.args = {
   disabled: false,
 }
 
+export const ChampObligatoire = (args) => ({
+  components: {
+    DsfrInput,
+  },
+  data () {
+    return {
+      ...args,
+    }
+  },
+  template: `
+    <DsfrInput
+      :model-value="modelValue"
+      :label="label"
+      :label-visible="labelVisible"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="true"
+    />
+  `,
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+ChampObligatoire.args = {
+  dark: false,
+  label: 'Label champ de saisie',
+  labelVisible: true,
+  placeholder: 'Placeholder',
+  modelValue: '',
+  disabled: false,
+  isTextarea: true,
+}
+
 export const ChampEnErreur = (args) => ({
   components: {
     DsfrInput,

src/components/DsfrInput/DsfrInput.stories.js

@@ -5,7 +5,9 @@ import { getRandomId } from '../../utils/random-utils.js'
 
 export default defineComponent({
   name: 'DsfrInput',
+
   inheritAttrs: false,
+
   props: {
     id: {
       type: String,
@@ -39,7 +41,9 @@ export default defineComponent({
     isValid: Boolean,
     isTextarea: Boolean,
   },
+
   emits: ['update:modelValue'],
+
   computed: {
     isComponent () {
       return this.isTextarea ? 'textarea' : 'input'
@@ -59,12 +63,22 @@ export default defineComponent({
     }"
     :for="id"
   >
-    {{ label }} {{ $attrs.required ? '*' : '' }}
+    {{ label }}
+
+    <!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque (dans un `<span class="required">`) -->
+    <slot name="required-tip">
+      <span
+        v-if="$attrs.required"
+        class="required"
+      >&nbsp;*</span>
+    </slot>
+
     <span
       v-if="hint"
       class="fr-hint-text"
     >{{ hint }}</span>
   </label>
+
   <component
     :is="isComponent"
     v-if="!wrapper"
@@ -80,6 +94,7 @@ export default defineComponent({
     @input="$emit('update:modelValue', $event.target.value)"
     @keydown.esc="$emit('update:modelValue', '')"
   />
+
   <div
     v-else
     :class="[

src/components/DsfrInput/DsfrInput.vue

@@ -14,11 +14,14 @@ en [**Vue 3**](https://v3.vuejs.org/) sous forme de **bibliothèque de composant
 
 Pour commencer à l’utiliser, [c’est par ici !](/story/docs-2-guide-d-utilisation--page)
 
-# Qui sont les acteurs du projet
+# Les acteurs du projet
 
 - **Clément Debroize** [<img src={MailIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](mailto:[email protected]) [<img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](https://github.com/DaBadBunny)
 - **Pierre-Louis Egaud** [<img src={MailIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](mailto:[email protected]) [<img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](https://github.com/plegaud)
-- **Stanislas Ormières** [<img src={MailIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](mailto:[email protected]) [<img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](https://github.com/laruiss)
+- **Stanislas Ormières** [<img src={MailIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](mailto:[email protected]) [<img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](https://github.com/laruiss) *(Lead dev, architecte, devops)*
+
+Le projet a pu bénéficier des retours et de contributions de
+[Gildéric Deruette](https://github.com/gideruette) et [Sophie Aitis](https://github.com/sophieaitis)
 
 # Pourquoi VueDsfr
 
@@ -27,24 +30,26 @@ Vue 3. Le Système de design français (DSFR) est développé en JavaScript nati
 
 Le BRR a donc besoin d'un portage en Vue 3 de ce DSFR pour ses futurs projets qui devront le respecter.
 
-# Quels sont les principes et les buts de VueDsfr
+# VueDsfr en quelques mots
 
 Ce projet de bibliothèque de composants
 
-- doit être fait avec Vue 3
-- doit être utilisable facilement en tant que plugin
-- doit être utilisable facilement dans un projet npm
-- doit mettre à disposition deux types de documentation :
-  - une pour aider au développement
-  - une autre pour l'utilisation
-- doit publier un site complet avec les composants et leurs variants testables dans celui-ci dans un storybook
-- doit avoir un site déployé avec ce storybook disponible pour tous
-- doit avoir une couverture de test minimale
-- doit contenir le moins de CSS global possible et le CSS scopé inclus dans les composants
-- doit mettre à disposition les composants individuellement sans avoir à importer toute la bibliothèque
+- reproduit le plus fidèlement possible les composants du [DSFR](https://www.systeme-de-design.gouv.fr/)
+- est fait avec [Vue 3](https://vuejs.org)
+- est utilisable facilement en tant que plugin Vue 3
+- exporte les types (TypeScript) du plugin, des composants et des composables
+- est utilisable facilement dans un projet [npm](https://www.npmjs.com/package/@laruiss/vue-dsfr)
+- met à disposition deux parties dans la documentation :
+  - une pour [aider au développement](/?path=/story/docs-3-guide-du-développeur--page)
+  - une autre pour l'[utilisation](/?path=/story/docs-2-guide-d-utilisation--page)
+- publie un [site complet](vue-dsfr.netlify.app/) avec les composants et leurs variants testables dans celui-ci dans un storybook
+- déploie un site avec ce storybook disponible pour tous
+- a une couverture de test optimale
+- contient le CSS global du DSFR et (rarement) du CSS scopé inclus dans les composants
+- met à disposition les composants individuellement sans avoir à importer toute la bibliothèque
   (pour les petits projets)
 
-# Quels sont les choix techniques retenus
+# Les choix techniques retenus
 
 La bibliothèque est faite avec [Vue 3](https://v3.vuejs.org/) et [Vue-router 4](https://next.router.vuejs.org/).
 
@@ -57,13 +62,15 @@ Le serveur de développement est celui de [Storybook](https://storybook.js.org/)
 Storybook, et le site pour tester les composants est le storybook lui-même.
 
 Le CSS est écrit avec [PostCSS](https://postcss.org/) et notamment
-le plugin [postcss-preset-env](https://preset-env.cssdb.org/).
+le plugin [postcss-preset-env](https://preset-env.cssdb.org/) (mais très peu de CSS est propre à la bibliothèque).
 
 Storybook est configuré pour utiliser PostCSS.
 
-Les tests sont faits avec [Jest](https://jestjs.io) et [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/),
-et dans un futur proche avec [Cypress](https://www.cypress.io/).
+Les tests sont faits avec [Vitest](https://vitest.dev) et [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/),
+et des tests d’accessibilité sont faits avec [Cypress](https://www.cypress.io/) grâce aux
+[tests de composants](https://docs.cypress.io/guides/component-testing/introduction).
 
 Les icônes sont toujours celles de [RemixIcon](https://remixicon.com/), grâce à [Oh, Vue Icons!](https://github.com/Renovamen/oh-vue-icons/)
+(qui permet d’ajouter d’[autres icônes](/?path=/story/fondamentaux-4-1-icônes-personnalisées--page))
 
 La bibliothèque est compilée avec [Rollup](https://rollupjs.org/).