Merge pull request #114 from laruiss/develop

Develop

Author: laruiss

.storybook/preview.js

@@ -27,7 +27,32 @@ export const parameters = {
         'Docs',
         ['Introduction', 'Guide d’utilisation', 'Guide du développeur'],
         'Basic',
-        ['Titres', 'Titres Alternatifs']
+        [
+          'Titres',
+          'Titres Alternatifs',
+          'Alertes',
+          'Fil d’Ariane - Breadcrumb',
+          'Logo Officiel - Official logo',
+          'Boutons - Button',
+          'Groupe de Boutons - ButtonGroup',
+          'Champs de saisie - Input',
+          'Case à cocher - Checkbox',
+          'Boutons radio - Radio button',
+          'Liste déroulante - Select',
+          'Interrupteur - Toggle switch',
+          'Étiquettes - Tags',
+        ],
+        'Éléments',
+        [
+          'Carte - Card',
+          'Barre de recherche - Search bar',
+          'En-tête - Header',
+          'Lettres d’information et réseaux - Follow',
+          'Pied de page - Footer',
+          'Modale - Modal',
+          'Onglets - Tabs', ['Onglets', 'Titre', 'Onglets'],
+          'Table'
+        ],
       ],
     },
   }

src/assets/utils-dsfr.css

@@ -242,6 +242,10 @@
   justify-content: center;
 }
 
+.row-reverse {
+  flex-direction: row-reverse;
+}
+
 .items-center {
   align-items: center;
 }

src/components/DsfrAlert/DsfrAlert.stories.js

@@ -12,7 +12,7 @@ export default {
   argTypes: {
     dark: {
       control: 'boolean',
-      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre* (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
     },
     title: {
       control: 'text',

src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.js

@@ -4,9 +4,15 @@ export default {
   component: DsfrBreadcrumb,
   title: 'Basic/Fil d’Ariane - Breadcrumb',
   argTypes: {
-    dark: { control: 'boolean' },
-    links: { control: 'object' },
-    showButton: { control: 'boolean' },
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+
+    links: {
+      control: 'object',
+      description: 'Tableau d’objets, chaque objet contiendra 2 propriétés : `to` avec le lien et `text` avec le texte à afficher',
+    },
   },
 }
 
@@ -36,14 +42,12 @@ export const FilDAriane = (args) => ({
   <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
     <DsfrBreadcrumb
       :links="links"
-      :showButton="showButton"
     />
   </div>
   `,
 })
 
 FilDAriane.args = {
-  links,
   dark: false,
-  showButton: true,
+  links,
 }

src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue

@@ -33,7 +33,7 @@
           >
             {{ link.text }}
           </router-link>
-          {{ link.to ? '' : link.text }}
+          <a v-else>{{ link.text }}</a>
           <v-icon
             v-if="index !== links.length - 1"
             class="icon"

src/components/DsfrButton/DsfrButton.stories.js

@@ -10,21 +10,30 @@ export default {
   component: DsfrButton,
   title: 'Basic/Boutons - Button',
   argTypes: {
-    secondary: {
-      control: 'boolean',
-      description: 'Indique si le bouton est un bouton **secondaire**',
-    },
     dark: {
       control: 'boolean',
       description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
     },
+    secondary: {
+      control: 'boolean',
+      description: 'Indique si le bouton est un bouton **secondaire**',
+    },
     label: {
       control: 'text',
       description: '**Texte** du bouton',
     },
-    disabled: { control: 'boolean', description: 'Indique si le bouton est **inactivé**' },
-    icon: { control: 'text', description: '**Nom de l’icône** (tel que sur le site [RemixIcon](https://remixicon.com), exemple: `"ri-search-line"`) à afficher à côté du texte du bouton.\n\n Par défaut, l’icône est à gauche' },
-    iconRight: { control: 'boolean', description: 'Indique si l’icône doit **s’afficher à droite** (`true`)' },
+    disabled: {
+      control: 'boolean',
+      description: 'Indique si le bouton est **inactivé**',
+    },
+    icon: {
+      control: 'text',
+      description: '**Nom de l’icône** (tel que sur le site [RemixIcon](https://remixicon.com), exemple: `"ri-search-line"`) à afficher à côté du texte du bouton.\n\n Par défaut, l’icône est à gauche',
+    },
+    iconRight: {
+      control: 'boolean',
+      description: 'Indique si l’icône doit **s’afficher à droite** (`true`)',
+    },
     onClick: { action: 'clicked' },
   },
 }

src/components/DsfrButton/DsfrButtonGroup.stories.js

@@ -12,7 +12,7 @@ export default {
   argTypes: {
     dark: {
       control: 'boolean',
-      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre* (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
     },
     buttons: {
       control: 'object',

src/components/DsfrCard/DsfrCard.stories.js

@@ -4,15 +4,42 @@ export default {
   component: DsfrCard,
   title: 'Éléments/Carte - Card',
   argTypes: {
-    dark: { control: 'boolean' },
-    noArrow: { control: 'boolean' },
-    altImg: { control: 'text' },
-    detail: { control: 'text' },
-    description: { control: 'text' },
-    imgSrc: { control: 'text' },
-    link: { control: 'text' },
-    title: { control: 'text' },
-    horizontal: { control: 'boolean' },
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    noArrow: {
+      control: 'boolean',
+      description: 'Indique si la carte doit afficher une flèche vers la droite (`false`, défaut) ou non (`true`)',
+    },
+    altImg: {
+      control: 'text',
+      description: 'Texte alternatif à ajouter à l’image de la carte',
+    },
+    detail: {
+      control: 'text',
+      description: 'Texte de détail de la carte',
+    },
+    description: {
+      control: 'text',
+      description: 'Texte de description de la carte',
+    },
+    imgSrc: {
+      control: 'text',
+      description: 'URL de l’image de la carte',
+    },
+    link: {
+      control: 'text',
+      description: 'URL cible de la carte',
+    },
+    title: {
+      control: 'text',
+      description: 'Titre de la carte',
+    },
+    horizontal: {
+      control: 'boolean',
+      description: 'Indique si le contenu de la carte doit être horizontal (passe de toute façon en vertical sur mobile)',
+    },
   },
 }
 

src/components/DsfrCheckbox/DsfrCheckbox.stories.js

@@ -2,16 +2,40 @@ import DsfrCheckbox from './DsfrCheckbox.vue'
 
 export default {
   component: DsfrCheckbox,
-  title: 'Basic/Case à cocher - Checkbox',
+  title: 'Basic/Case à cocher - Checkbox/Cases',
   argTypes: {
-    dark: { control: 'boolean' },
-    label: { control: 'text' },
-    name: { control: 'text' },
-    hint: { control: 'text' },
-    disabled: { control: 'boolean' },
-    checked: { control: 'boolean' },
-    errorMessage: { control: 'text' },
-    validMessage: { control: 'text' },
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    label: {
+      control: 'text',
+      description: 'Label de la case à cocher',
+    },
+    name: {
+      control: 'text',
+      description: 'Valeur de l’attribut `name` de la case à cocher',
+    },
+    hint: {
+      control: 'text',
+      description: 'Indice de la case à cocher',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Indique si la case à cocher est désactivée',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Indique si la case à cocher est cochée',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Texte du message à afficher en cas d’erreur',
+    },
+    validMessage: {
+      control: 'text',
+      description: 'Texte du message à afficher en cas de succès',
+    },
     onChange: { action: 'changed' },
   },
 }

src/components/DsfrCheckbox/DsfrCheckboxSet.stories.js

@@ -2,20 +2,24 @@ import DsfrCheckboxSet from './DsfrCheckboxSet.vue'
 
 export default {
   component: DsfrCheckboxSet,
-  title: 'Basic/Case à cocher - Checkbox',
+  title: 'Basic/Case à cocher - Checkbox/Groupe de cases',
   argTypes: {
-    dark: { control: 'boolean' },
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+
     disabled: {
       control: 'boolean',
       description: 'Indique si l’ensemble des checkboxes doivent être désactivées (`true`) ou non (`false`, défaut)',
     },
     errorMessage: {
       control: 'text',
-      description: 'Message à afficher en cas d’ensemble de champs valide',
+      description: 'Texte du message à afficher en cas d’erreur',
     },
     validMessage: {
       control: 'text',
-      description: 'Message à afficher en cas d’ensemble de champs valide',
+      description: 'Texte du message à afficher en cas de succès',
     },
     inline: {
       control: 'boolean',
@@ -29,13 +33,13 @@ export default {
       control: 'object',
       description: 'Tableau de `string` (la valeur `value` de la checkbox sera identique au `label`) ou d’objets contenant les props à passer à chaque composant DsfrCheckbox, sauf `modelValue` qui sera calculée à partir de `modelValue` du DsfrCheckboxSet.',
     },
-    onChange: {
-      action: 'changed',
-    },
     modelValue: {
       control: 'object',
       description: 'Tableau des valeurs sélectionnées (cochées) du groupe de checkboxes',
     },
+    onChange: {
+      action: 'changed',
+    },
   },
 }