Merge pull request #143 from dnum-mi/develop

Develop

Author: laruiss

README.md

@@ -4,22 +4,107 @@
 [Système de Design Français](https://www.systeme-de-design.gouv.fr/) (ou DSFR) sous forme de bibliothèque
 de composants. Il peut s'utiliser facilement en tant que plugin.
 
+## Pré-requis
+
+- npm : version 7 minimum
+- Node.js : version 16 minimum
+
+### Installation des pré-requis (testé sous Ubuntu 20.04)
+
+Suivez la procédure suivante en lançant les commandes détaillées ci-dessous :
+
+1. Mise à jour des dépôts :
+
+```shell
+sudo apt update
+```
+
+2. Installer `Node.js` :
+
+```shell
+sudo apt install nodejs
+```
+
+3. Vérifier la version de `npm` (7 ou supérieur) :
+
+```shell
+npm --version
+```
+
+4. Installer `nvm` (Node Version Manager) :
+
+Avec la commande curl :
+
+```shell
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+```
+
+Ou avec la commande wget :
+
+```shell
+wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+```
+
+5. Fermer et rouvrir un terminal, ou bien taper la commande suivante dans tous les terminaux déjà ouverts :
+
+```shell
+source ~/.bashrc
+```
+
+6. Vérifier la version de NVM installée :
+
+```shell
+nvm --version
+```
+
+7. Vérifier qu'on pourra bien installer la version de nodejs avec la commande suivante, qui donne la liste des versions nodejs installables :
+
+```shell
+nvm ls-remote
+```
+
+8. Installer la version de nvm voulue :
+
+```shell
+nvm install <version>
+```
+
+exemple :
+
+```shell
+nvm install 16
+```
+
+9. Vérifier la version de `npm` (7 ou supérieur) :
+
+```shell
+npm --version
+```
+
+Remarque : certaines commandes peuvent demander un temps d'exécution assez conséquent (plusieurs minutes).
+
 ## Installer la bibliothèque
 
 ```shell
 npm install @laruiss/vue-dsfr@beta
 ```
 
-N.B. : le `@beta` est important pour avoir la dernière version.
+---
+
+**Note :**
+
+Le **`@beta`** est très important pour avoir la dernière version.
+
+---
 
-## Utiliser la bibliothèque en tant le plugin Vue 3
+## Utiliser la bibliothèque en tant que plugin Vue 3
 
 ```js
 import { createApp } from 'vue'
 import App from './App.vue'
 import VueDsfr from '@laruiss/vue-dsfr'            // Import (par défaut) de la bibliothèque
 
-import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import des polices
+import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import de toutes les polices
 import '@laruiss/vue-dsfr/dist/vue-dsfr.css'       // Import des styles globaux
 
 const app = createApp(App)
@@ -43,4 +128,4 @@ Et ensuite, les composants sont utilisables directement dans les composants de l
 
 # Plus d'informations
 
-Veuillez consulter [le site officiel](https://vue-dsfr.netlify.app/) pour plus d'information.
+Veuillez consulter [le site officiel](https://vue-dsfr.netlify.app/) pour plus d'informations.

src/assets/core.css

@@ -1,8 +1,3 @@
-/*
- * DSFR v1.1.0 | SPDX-License-Identifier: MIT | License-Filename: LICENCE.md | restricted use (see terms and conditions)
- */
-@charset "UTF-8";
-
 /* ------------------------------------ *\
   CORE
 \* ------------------------------------ */

src/assets/forms.css

@@ -1,8 +1,3 @@
-/*
- * DSFR v1.1.0 | SPDX-License-Identifier: MIT | License-Filename: LICENCE.md | restricted use (see terms and conditions)
- */
-@charset "UTF-8";
-
 /* ------------------------------------ *\
   FORMS
 \* ------------------------------------ */

src/components/DsfrCallout/DsfrCallout.spec.js

@@ -0,0 +1,65 @@
+import { fireEvent, render } from '@testing-library/vue'
+
+import DsfrCallout from './DsfrCallout.vue'
+
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
+describe('DsfrCallout', () => {
+  it('should display a callout without a button', () => {
+    const title = 'Titre de la mise en avant'
+    const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+
+    const { getByText } = render(DsfrCallout, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        title,
+        content,
+      },
+    })
+
+    const titleEl = getByText(title)
+    const contentEl = getByText(content)
+
+    expect(titleEl).toHaveClass('fr-callout__title')
+    expect(contentEl).toHaveClass('fr-callout__text')
+  })
+
+  it('should display a callout with button and icon', async () => {
+    const onClick = jest.fn()
+    const label = 'Label bouton'
+    const title = 'Titre de la mise en avant'
+    const icon = 'ri-information-line'
+    const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+
+    const { container, getByText } = render(DsfrCallout, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        title,
+        content,
+        button: {
+          onClick,
+          label,
+        },
+        icon,
+      },
+    })
+
+    const titleEl = getByText(title)
+    const contentEl = getByText(content)
+    const buttonEl = container.querySelector('.fr-btn')
+
+    await fireEvent.click(buttonEl)
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(titleEl).toHaveClass('fr-callout__title')
+    expect(contentEl).toHaveClass('fr-callout__text')
+  })
+})

src/components/DsfrCallout/DsfrCallout.stories.js

@@ -0,0 +1,107 @@
+import OhVueIcon from 'oh-vue-icons/dist/v3/icon.es'
+
+import { RiInformationLine } from 'oh-vue-icons/icons'
+
+import DsfrCallout from './DsfrCallout'
+
+OhVueIcon.add(RiInformationLine)
+
+export default {
+  components: {
+    DsfrCallout,
+  },
+  title: 'Éléments/Mise en Avant - Callout',
+  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.*',
+    },
+    title: {
+      control: 'text',
+      description: 'Permet de passer le titre désiré en chaîne de caractères',
+    },
+    content: {
+      control: 'text',
+      description: 'Permet de passer le contenu désiré en chaîne de caractères',
+    },
+    icon: {
+      control: 'text',
+      description: 'Permet de passer l’icône désirée en chaîne de caractères (cf. remix-icon)',
+    },
+    onClick: {
+      action: 'Clicked',
+    },
+  },
+}
+
+export const MiseEnAvantSimple = (args) => ({
+  components: {
+    DsfrCallout,
+    VIcon: OhVueIcon,
+  },
+
+  data () {
+    return {
+      ...args,
+      button: args.button && {
+        ...args.button,
+        onClick: args.onClick,
+      },
+    }
+  },
+
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+      <DsfrCallout
+        :title="title"
+        :content="content"
+        :button="button"
+        :icon="icon"
+      />
+    </div>
+  `,
+})
+MiseEnAvantSimple.args = {
+  dark: false,
+  title: 'Titre de la mise en avant',
+  button: undefined,
+  icon: '',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
+}
+
+export const MiseEnAvant = (args) => ({
+  components: {
+    DsfrCallout,
+    VIcon: OhVueIcon,
+  },
+
+  data () {
+    return {
+      ...args,
+      button: args.button && {
+        ...args.button,
+        onClick: args.onClick,
+      },
+    }
+  },
+
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+      <DsfrCallout
+        :title="title"
+        :content="content"
+        :button="button"
+        :icon="icon"
+      />
+    </div>
+  `,
+})
+MiseEnAvant.args = {
+  dark: false,
+  title: 'Titre de la mise en avant',
+  button: {
+    label: 'Label bouton',
+  },
+  icon: 'ri-information-line',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
+}

src/components/DsfrCallout/DsfrCallout.vue

@@ -0,0 +1,70 @@
+<script>
+import DsfrButton from '../DsfrButton/DsfrButton.vue'
+
+export default {
+  name: 'DsfrCallout',
+
+  components: {
+    DsfrButton,
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: 'Titre somptueusement mis en avant',
+    },
+    content: {
+      type: String,
+      default: 'Contenu admirablement mis en avant',
+    },
+    icon: {
+      type: String,
+      default: undefined,
+    },
+    button: {
+      type: Object,
+      default: () => undefined,
+      required: false,
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="fr-callout">
+    <div
+      class="fr-mt-n2w  fr-mb-2w  fr-ml-n4w"
+    >
+      <VIcon
+        v-if="icon"
+        :name="icon"
+        scale="1.25"
+        color="var(--g800)"
+      />
+    </div>
+
+    <p class="fr-callout__title">
+      {{ title }}
+    </p>
+
+    <p class="fr-callout__text">
+      {{ content }}
+    </p>
+
+    <DsfrButton
+      v-if="button"
+      v-bind="button"
+      @click="button.onClick"
+    />
+
+    <slot />
+  </div>
+</template>
+
+<style src="./callouts.css"></style>
+
+<style scoped>
+.fr-callout__text {
+  color: var(--g800);
+}
+</style>