Merge pull request #780 from dnum-mi/develop

develop

.vitepress/config.ts

@@ -114,6 +114,14 @@ const composants = [
  text: 'DsfrCard',
  link: '/composants/DsfrCard.md',
  },
+ {
+ text: 'DsfrCheckbox',
+ link: '/composants/DsfrCheckbox.md',
+ },
+ {
+ text: 'DsfrCheckboxSet',
+ link: '/composants/DsfrCheckboxSet.md',
+ },
  {
  text: 'DsfrConsent',
  link: '/composants/DsfrConsent.md',
@@ -150,6 +158,10 @@ const composants = [
  text: 'DsfrFooterPartners',
  link: '/composants/DsfrFooterPartners.md',
  },
+ {
+ text: 'DsfrFranceConnect',
+ link: '/composants/DsfrFranceConnect.md',
+ },
  {
  text: 'DsfrHeader',
  link: '/composants/DsfrHeader.md',
@@ -174,6 +186,14 @@ const composants = [
  text: 'DsfrNotice',
  link: '/composants/DsfrNotice.md',
  },
+ {
+ text: 'DsfrRadioButton',
+ link: '/composants/DsfrRadioButton.md',
+ },
+ {
+ text: 'DsfrRadioButtonSet',
+ link: '/composants/DsfrRadioButtonSet.md',
+ },
  {
  text: 'DsfrRange',
  link: '/composants/DsfrRange.md',

demo-app/App.vue

@@ -198,6 +198,10 @@ const navItems: DsfrNavigationProps['navItems'] = [
  },
  ],
  },
+ {
+ to: { name: 'Tags' },
+ text: 'Tags',
+ },
 ]
 
 const beforeMandatoryLinks = [{ label: 'Before', to: '/before' }]
@@ -263,7 +267,7 @@ const search = ref('')
  </template>
  </DsfrHeader>
 
- <main class="fr-container">
+ <main class="fr-container fr-pb-2w">
  <h1>Demo VueDsfr</h1>
 
  <DsfrBreadcrumb

demo-app/router.js

@@ -4,6 +4,7 @@ import AboutUs from './views/AboutUs.vue'
 import AppHome from './views/AppHome.vue'
 import AppAlerts from './views/AppAlerts.vue'
 import AppTabs from './views/AppTabs.vue'
+import AppTags from './views/AppTags.vue'
 import SchemeSettings from './views/SchemeSettings.vue'
 import LanguageSelector from './views/LanguageSelector.vue'
 import AppForm from './views/AppForm.vue'
@@ -27,6 +28,7 @@ export const routes = [
  { path: '/alerts', name: 'Alertes', component: AppAlerts },
  { path: '/bandeaux', name: 'Bandeaux', component: AppAlerts },
  { path: '/callout', name: 'MiseEnAvant', component: CalloutTest },
+ { path: '/tags', name: 'Tags', component: AppTags },
 ]
 
 export default createRouter({

demo-app/views/AppHome.vue

@@ -101,11 +101,26 @@ const onClick = () => {
  Cliquer pour voir une alerte
  </DsfrButton>
  </p>
+
  <AsyncButton
  :is-loading="isLoading"
  :disabled="disabled"
  @click="onClick($event)"
  >
  Cliquer pour voir un chargement
  </AsyncButton>
+
+ <p class="fr-my-2v">
+ <DsfrFranceConnect secure />
+ </p>
+
+ <p class="fr-my-2v">
+ <DsfrFranceConnect
+ url="https://example.com"
+ help-title="titre du lien d’aide"
+ help-label="texte du lien d’aide"
+ >
+ <span>Se connecter avec</span>
+ </DsfrFranceConnect>
+ </p>
 </template>

demo-app/views/AppTabs.vue

@@ -80,7 +80,7 @@ function selectTab (idx) {
  <DsfrCard
  detail="detail"
  description="description"
- img-src="https://placekitten.com/300/200"
+ img-src="https://loremflickr.com/300/200/cat"
  title="title"
  />
  </DsfrTabContent>

demo-app/views/AppTags.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import DsfrTag from '../../src/components/DsfrTag/DsfrTag.vue'
+import DsfrTags from '../../src/components/DsfrTag/DsfrTags.vue'
+
+const tags = [
+ {
+ icon: undefined,
+ label: 'Elément 1 de la liste de tags'
+ },
+ {
+ icon: 'ri-notification-3-line',
+ label: 'Elément 2 de la liste de tags'
+ }
+]
+</script>
+
+<template>
+ <div>
+ <DsfrTag label="Bonjour VueDsfr !" />
+ </div>
+ <div class="fr-mt-2w">
+ <DsfrTag label="Vue Power" icon="ri-notification-3-line" />
+ </div>
+ <div class="fr-mt-2w">
+ <DsfrTags :tags="tags" />
+ </div>
+</template>

docs/composants.md

@@ -53,8 +53,13 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 
 ## Formulaire (éléments de)
 
-- [DsfrFileUpload](./composants/DsfrInputGroup)
+- [DsfrFileUpload](./composants/DsfrFileUpload)
+- [DsfrFileDownload](./composants/DsfrFileDownload)
 - [DsfrInput](./composants/DsfrInput)
+- [DsfrRadioButton](./composants/DsfrRadioButton)
+- [DsfrRadioButtonSet](./composants/DsfrRadioButtonSet)
+- [DsfrCheckbox](./composants/DsfrCheckbox)
+- [DsfrCheckboxSet](./composants/DsfrCheckboxSet)
 - [DsfrInputGroup](./composants/DsfrInputGroup)
 - [DsfrRange](./composants/DsfrRange)
 

src/components/DsfrCard/DsfrCard.e2e.ts

@@ -20,7 +20,7 @@ const RouterLink = {
 
 describe('DsfrCard', () => {
  it('should mount DsfrCard', () => {
- const imgSrc = 'https://placekitten.com/500/300'
+ const imgSrc = 'https://loremflickr.com/500/300/cat'
  const link = 'https://www.systeme-de-design.gouv.fr/'
  const title = 'Le GROS titre'
  const description = 'La GROSSE description'

src/components/DsfrCard/DsfrCard.md

@@ -35,21 +35,21 @@ Autres props :
 
 | Nom | Type | Défaut | Obligatoire | Description |
 | ---------------------- | --------- | --------------- | ------------------ | ---- |
+| `title` | *`string`* | | ✅ | Titre de la carte |
+| `description` | *`string`* | | ✅ | Description de la carte |
 | `altImg` | *`string`* | `''` | | Contenu de l’attribut `alt` de l’image de la carte |
 | `buttons` | [*`DsfrButtonProps[]`*](/types#dsfrbutton-et-dsfrbuttongroup) | `[]` | | Tableau de props à donner à DsfrButton |
 | `detail` | *`string`* | `''` | | Texte à mettre dans la première zone de détail |
 | `detailIcon` | *`string`* | `''` | | Icône à mettre dans la première zone de détail ([nom d’une icône `oh-vue-icon` ou `DSFR`](/guide/icones)) |
 | `endDetail` | *`string`* | `''` | | Texte à mettre dans la deuxième zone de détail |
-| `endDetailIcon | *`string`* | `''` | | Icône à mettre dans la deuxième zone de détail ([nom d’une icône `oh-vue-icon` ou `DSFR`](/guide/icones)) |
-| `description` | *`string`* | | ✅ | Description de la carte |
+| `endDetailIcon` | *`string`* | `''` | | Icône à mettre dans la deuxième zone de détail ([nom d’une icône `oh-vue-icon` ou `DSFR`](/guide/icones)) |
 | `download` | *`boolean`* | `false` | | Est-ce que cette carte permet de télécharger un fichier ? |
 | `horizontal` | *`boolean`* | `false` | | Est-ce que la carte doit être affiché avec l’image et le texte au même niveau ? |
 | `imgSrc` | *`string`* | `''` | | URL vers l’image |
 | `link` | *`string`* | `''` | | Lien vers lequel la carte pointe |
 | `linksGroup` | *`({ label: string, to?: RouteLocationRaw, link?: string, href?: string })[]`* | `[]` | | liste de liens : objet contenant `to` ou `href` pour le lien et `label` avec le texte du lien |
-| `size` | *`'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined`* | `'md'` | | Taille de la carte |
-| `imgRatio` | *`'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined`* | `'md'` | |
-| `title` | *`string`* | | ✅ | Titre de la carte |
+| `size` | *`'md'* \| 'medium' \| 'large' \| 'lg' \| 'sm' \| 'small' \| undefined`* | `'md'` | | Taille de la carte |
+| `imgRatio` | *`'md' \| 'medium' \| 'large' \| 'lg' \ 'sm' \ 'small' \ undefined`* | `'md'` | |
 | `titleTag` | [*`TitleTag`*](/docs/types.md#title-tag "'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'") | `'h3'` | | Balise du titre de la carte |
 
 ## 🧩 Slots

src/components/DsfrCard/DsfrCard.spec.ts

@@ -31,7 +31,7 @@ describe('DsfrCard', () => {
  const description = `La carte donne des aperçus cliquables d’une page de contenu
  à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus
  de contenu similaires. La carte n’est jamais présentée de manière isolée.`
- const imgSrc = 'https://placekitten.com/300/200'
+ const imgSrc = 'https://loremflickr.com/300/200/cat'
  const altImg = 'Alternative text for image'
 
  // When

src/components/DsfrCard/DsfrCard.stories.ts

@@ -99,7 +99,7 @@ Card.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=1',
  link: 'https://www.systeme-de-design.gouv.fr/',
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  titleTag: undefined,
@@ -140,7 +140,7 @@ CardSansFleche.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=2',
  link: 'https://www.systeme-de-design.gouv.fr/',
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,
@@ -180,7 +180,7 @@ CardAvecBoutons.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=3',
  link: undefined,
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,
@@ -229,7 +229,7 @@ CardAvecLiens.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=4',
  link: undefined,
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,
@@ -283,7 +283,7 @@ CardAvecTags.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=5',
  link: undefined,
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,
@@ -344,7 +344,7 @@ CardAvecBadges.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=6',
  link: undefined,
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,
@@ -400,7 +400,7 @@ CardHorizontaleAvecBoutons.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=7',
  link: undefined,
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,
@@ -449,7 +449,7 @@ CardHorizontaleEtSmallAvecLiens.args = {
  altImg: '',
  detail: 'Détails sur la carte en question',
  description: 'Description sommaire de la carte',
- imgSrc: 'https://placekitten.com/300/200',
+ imgSrc: 'https://loremflickr.com/300/200/cat?random=8',
  link: undefined,
  title: 'Qu’est-ce que le Pass Culture et comment l’obtenir ?',
  noArrow: true,

src/components/DsfrCard/docs-demo/DsfrCardDemo.vue

@@ -1,15 +1,21 @@
 <script lang="ts" setup>
+import { OhVueIcon as VICon } from 'oh-vue-icons'
+import { getCurrentInstance } from 'vue'
+
 import DsfrCard from '../DsfrCard.vue'
 import DsfrTags from '../../DsfrTag/DsfrTags.vue'
 
+const app = getCurrentInstance()
+app?.appContext.app.component('VICon', VICon)
+
 const link = 'https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte'
 const description = 'Description exceptionellement précise'
 const detail = 'Détails absolument essentiels'
 const detailIcon = 'Détails absolument essentiels'
 const endDetail = 'Autres détails absolument essentiels'
 const endDetailIcon = 'fr-icon-arrow-right-line'
 const altImg = 'Un adorable quoique redoutable chaton'
-const imgSrc = 'https://placekitten.com/450/400'
+const imgSrc = 'https://loremflickr.com/450/400/cat'
 
 const exampleTags = [
  {

src/components/DsfrCard/docs-demo/DsfrCardDemoActions.vue

@@ -1,13 +1,19 @@
 <script lang="ts" setup>
+import { OhVueIcon as VICon } from 'oh-vue-icons'
+import { getCurrentInstance } from 'vue'
+
 import DsfrCard from '../DsfrCard.vue'
 
+const app = getCurrentInstance()
+app?.appContext.app.component('VICon', VICon)
+
 const description = 'Description exceptionellement précise'
 const detail = 'Détails absolument essentiels'
 const detailIcon = 'Détails absolument essentiels'
 const endDetail = 'Autres détails absolument essentiels'
 const endDetailIcon = 'fr-icon-arrow-right-line'
 const altImg = 'Un adorable quoique redoutable chaton'
-const imgSrc = 'https://placekitten.com/450/400'
+const imgSrc = 'https://loremflickr.com/450/400/cat'
 
 const actions = [
  {

src/components/DsfrCheckbox/DsfrCheckbox.md

@@ -0,0 +1,72 @@
+## 🌟 Introduction
+
+Les cases à cocher permettent à l’utilisateur de sélectionner une ou plusieurs options dans une liste. Elles sont utilisées pour effectuer des sélections multiples (de 0 à N éléments) ou bien pour permettre un choix binaire, lorsque l’utilisateur peut sélectionner ou désélectionner une seule option.
+
+La case à cocher peut être utilisée seule ou en liste. Évitez les listes de plus de 5 items et lorsque vous souhaitez contraindre le choix à un seul élément - utiliser [les boutons radios](/composants/DsfrRadioButton).
+
+🏅 La documentation sur **les cases à cocher** sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/case-a-cocher)
+
+<VIcon name="vi-file-type-storybook" /> La story sur **les cases à cocher** sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrcheckbox--docs)
+
+## 📐 Structure
+
+Le composant `DsfrCheckbox` est composé des éléments suivants :
+
+- Une case à cocher `<input type="checkbox">`
+- Un label associé à la case à cocher, défini par la prop `label` et personnalisable avec le slot `label`
+- Un message d'information, d'erreur (prop `errorMessage`) ou de validation (prop `validMessage`), affiché en dessous de la case à cocher
+
+## 🛠️ Props
+
+| Nom | Type | Défaut | Obligatoire | Description |
+|-----------------------|----------------------------|--------|--------------|----------------------------------------------------|
+| `name` | *`string`* | | ✅ | Nom du champ `<input>` |
+| `modelValue` | *`boolean`* | | ✅ | Valeur booléenne associée à la case à cocher |
+| `label` | *`string`* | | ✅ | Texte du label associé à la case à cocher |
+| `errorMessage` | *`string`* | `''` | | Message d'erreur à afficher en dessous de la case à cocher |
+| `hint` | *`string`* | `''` | | Texte d'information complémentaire affiché en dessous de la case à cocher |
+| `id` | *`string`* | chaîne pseudo-aléatoire | | Identifiant unique du composant (générée automatiquement si non fournie) |
+| `inline` | *`boolean`* | '' | | Affiche la case à cocher en ligne (par défaut : `false`) |
+| `required` | *`boolean`* | '' | | Indique si la case à cocher est obligatoire (par défaut : `false`) |
+| `small` | *`boolean`* | '' | | Affiche la case à cocher en taille réduite (par défaut : `false`) |
+| `validMessage` | *`string`* | '' | | Message de validation à afficher en dessous de la case à cocher |
+
+## 📡 Événements
+
+`DsfrCheckbox` émet l'événement suivant :
+
+| Nom | type | Description |
+|-----------------------|-----| -----------------------------------------------|
+| `update:modelValue` | *`boolean`* | Est émis lorsque la valeur de la case à cocher change |
+
+## 🧩 Slots
+
+`DsfrCheckbox` fournit les slots suivants pour la personnalisation :
+
+- `label` : Permet de personnaliser le contenu complet du label associé à la case à cocher.
+- `required-tip` : Permet d'ajouter un astérisque indiquant que le champ est obligatoire.
+
+## 📝 Exemples
+
+::: code-group
+
+<Story data-title="Démo" min-h="500px">
+ <DsfrCheckboxDemo />
+</Story>
+
+<<< docs-demo/DsfrCheckboxDemo.vue
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+
+<<< DsfrCheckbox.vue
+<<< DsfrCheckbox.types.ts
+
+:::
+
+<script setup>
+import DsfrCheckboxDemo from './docs-demo/DsfrCheckboxDemo.vue'
+</script>