Skip to content

Commit 95d3a1f

Browse files
authored
Merge pull request #143 from dnum-mi/develop
Develop
2 parents fbbaa14 + 47efcb3 commit 95d3a1f

27 files changed

+1178
-46
lines changed

README.md

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,107 @@
44
[Système de Design Français](https://www.systeme-de-design.gouv.fr/) (ou DSFR) sous forme de bibliothèque
55
de composants. Il peut s'utiliser facilement en tant que plugin.
66

7+
## Pré-requis
8+
9+
- npm : version 7 minimum
10+
- Node.js : version 16 minimum
11+
12+
### Installation des pré-requis (testé sous Ubuntu 20.04)
13+
14+
Suivez la procédure suivante en lançant les commandes détaillées ci-dessous :
15+
16+
1. Mise à jour des dépôts :
17+
18+
```shell
19+
sudo apt update
20+
```
21+
22+
2. Installer `Node.js` :
23+
24+
```shell
25+
sudo apt install nodejs
26+
```
27+
28+
3. Vérifier la version de `npm` (7 ou supérieur) :
29+
30+
```shell
31+
npm --version
32+
```
33+
34+
4. Installer `nvm` (Node Version Manager) :
35+
36+
Avec la commande curl :
37+
38+
```shell
39+
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
40+
```
41+
42+
Ou avec la commande wget :
43+
44+
```shell
45+
wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
46+
```
47+
48+
5. Fermer et rouvrir un terminal, ou bien taper la commande suivante dans tous les terminaux déjà ouverts :
49+
50+
```shell
51+
source ~/.bashrc
52+
```
53+
54+
6. Vérifier la version de NVM installée :
55+
56+
```shell
57+
nvm --version
58+
```
59+
60+
7. Vérifier qu'on pourra bien installer la version de nodejs avec la commande suivante, qui donne la liste des versions nodejs installables :
61+
62+
```shell
63+
nvm ls-remote
64+
```
65+
66+
8. Installer la version de nvm voulue :
67+
68+
```shell
69+
nvm install <version>
70+
```
71+
72+
exemple :
73+
74+
```shell
75+
nvm install 16
76+
```
77+
78+
9. Vérifier la version de `npm` (7 ou supérieur) :
79+
80+
```shell
81+
npm --version
82+
```
83+
84+
Remarque : certaines commandes peuvent demander un temps d'exécution assez conséquent (plusieurs minutes).
85+
786
## Installer la bibliothèque
887

988
```shell
1089
npm install @laruiss/vue-dsfr@beta
1190
```
1291

13-
N.B. : le `@beta` est important pour avoir la dernière version.
92+
---
93+
94+
**Note :**
95+
96+
Le **`@beta`** est très important pour avoir la dernière version.
97+
98+
---
1499

15-
## Utiliser la bibliothèque en tant le plugin Vue 3
100+
## Utiliser la bibliothèque en tant que plugin Vue 3
16101

17102
```js
18103
import { createApp } from 'vue'
19104
import App from './App.vue'
20105
import VueDsfr from '@laruiss/vue-dsfr' // Import (par défaut) de la bibliothèque
21106

22-
import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import des polices
107+
import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import de toutes les polices
23108
import '@laruiss/vue-dsfr/dist/vue-dsfr.css' // Import des styles globaux
24109

25110
const app = createApp(App)
@@ -43,4 +128,4 @@ Et ensuite, les composants sont utilisables directement dans les composants de l
43128

44129
# Plus d'informations
45130

46-
Veuillez consulter [le site officiel](https://vue-dsfr.netlify.app/) pour plus d'information.
131+
Veuillez consulter [le site officiel](https://vue-dsfr.netlify.app/) pour plus d'informations.

src/assets/core.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/*
2-
* DSFR v1.1.0 | SPDX-License-Identifier: MIT | License-Filename: LICENCE.md | restricted use (see terms and conditions)
3-
*/
4-
@charset "UTF-8";
5-
61
/* ------------------------------------ *\
72
CORE
83
\* ------------------------------------ */

src/assets/forms.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/*
2-
* DSFR v1.1.0 | SPDX-License-Identifier: MIT | License-Filename: LICENCE.md | restricted use (see terms and conditions)
3-
*/
4-
@charset "UTF-8";
5-
61
/* ------------------------------------ *\
72
FORMS
83
\* ------------------------------------ */
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { fireEvent, render } from '@testing-library/vue'
2+
3+
import DsfrCallout from './DsfrCallout.vue'
4+
5+
const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
6+
7+
describe('DsfrCallout', () => {
8+
it('should display a callout without a button', () => {
9+
const title = 'Titre de la mise en avant'
10+
const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
11+
12+
const { getByText } = render(DsfrCallout, {
13+
global: {
14+
components: {
15+
VIcon,
16+
},
17+
},
18+
props: {
19+
title,
20+
content,
21+
},
22+
})
23+
24+
const titleEl = getByText(title)
25+
const contentEl = getByText(content)
26+
27+
expect(titleEl).toHaveClass('fr-callout__title')
28+
expect(contentEl).toHaveClass('fr-callout__text')
29+
})
30+
31+
it('should display a callout with button and icon', async () => {
32+
const onClick = jest.fn()
33+
const label = 'Label bouton'
34+
const title = 'Titre de la mise en avant'
35+
const icon = 'ri-information-line'
36+
const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
37+
38+
const { container, getByText } = render(DsfrCallout, {
39+
global: {
40+
components: {
41+
VIcon,
42+
},
43+
},
44+
props: {
45+
title,
46+
content,
47+
button: {
48+
onClick,
49+
label,
50+
},
51+
icon,
52+
},
53+
})
54+
55+
const titleEl = getByText(title)
56+
const contentEl = getByText(content)
57+
const buttonEl = container.querySelector('.fr-btn')
58+
59+
await fireEvent.click(buttonEl)
60+
61+
expect(onClick).toHaveBeenCalledTimes(1)
62+
expect(titleEl).toHaveClass('fr-callout__title')
63+
expect(contentEl).toHaveClass('fr-callout__text')
64+
})
65+
})
Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import OhVueIcon from 'oh-vue-icons/dist/v3/icon.es'
2+
3+
import { RiInformationLine } from 'oh-vue-icons/icons'
4+
5+
import DsfrCallout from './DsfrCallout'
6+
7+
OhVueIcon.add(RiInformationLine)
8+
9+
export default {
10+
components: {
11+
DsfrCallout,
12+
},
13+
title: 'Éléments/Mise en Avant - Callout',
14+
argTypes: {
15+
dark: {
16+
control: 'boolean',
17+
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.*',
18+
},
19+
title: {
20+
control: 'text',
21+
description: 'Permet de passer le titre désiré en chaîne de caractères',
22+
},
23+
content: {
24+
control: 'text',
25+
description: 'Permet de passer le contenu désiré en chaîne de caractères',
26+
},
27+
icon: {
28+
control: 'text',
29+
description: 'Permet de passer l’icône désirée en chaîne de caractères (cf. remix-icon)',
30+
},
31+
onClick: {
32+
action: 'Clicked',
33+
},
34+
},
35+
}
36+
37+
export const MiseEnAvantSimple = (args) => ({
38+
components: {
39+
DsfrCallout,
40+
VIcon: OhVueIcon,
41+
},
42+
43+
data () {
44+
return {
45+
...args,
46+
button: args.button && {
47+
...args.button,
48+
onClick: args.onClick,
49+
},
50+
}
51+
},
52+
53+
template: `
54+
<div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
55+
<DsfrCallout
56+
:title="title"
57+
:content="content"
58+
:button="button"
59+
:icon="icon"
60+
/>
61+
</div>
62+
`,
63+
})
64+
MiseEnAvantSimple.args = {
65+
dark: false,
66+
title: 'Titre de la mise en avant',
67+
button: undefined,
68+
icon: '',
69+
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
70+
}
71+
72+
export const MiseEnAvant = (args) => ({
73+
components: {
74+
DsfrCallout,
75+
VIcon: OhVueIcon,
76+
},
77+
78+
data () {
79+
return {
80+
...args,
81+
button: args.button && {
82+
...args.button,
83+
onClick: args.onClick,
84+
},
85+
}
86+
},
87+
88+
template: `
89+
<div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
90+
<DsfrCallout
91+
:title="title"
92+
:content="content"
93+
:button="button"
94+
:icon="icon"
95+
/>
96+
</div>
97+
`,
98+
})
99+
MiseEnAvant.args = {
100+
dark: false,
101+
title: 'Titre de la mise en avant',
102+
button: {
103+
label: 'Label bouton',
104+
},
105+
icon: 'ri-information-line',
106+
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol',
107+
}
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script>
2+
import DsfrButton from '../DsfrButton/DsfrButton.vue'
3+
4+
export default {
5+
name: 'DsfrCallout',
6+
7+
components: {
8+
DsfrButton,
9+
},
10+
11+
props: {
12+
title: {
13+
type: String,
14+
default: 'Titre somptueusement mis en avant',
15+
},
16+
content: {
17+
type: String,
18+
default: 'Contenu admirablement mis en avant',
19+
},
20+
icon: {
21+
type: String,
22+
default: undefined,
23+
},
24+
button: {
25+
type: Object,
26+
default: () => undefined,
27+
required: false,
28+
},
29+
},
30+
}
31+
</script>
32+
33+
<template>
34+
<div class="fr-callout">
35+
<div
36+
class="fr-mt-n2w fr-mb-2w fr-ml-n4w"
37+
>
38+
<VIcon
39+
v-if="icon"
40+
:name="icon"
41+
scale="1.25"
42+
color="var(--g800)"
43+
/>
44+
</div>
45+
46+
<p class="fr-callout__title">
47+
{{ title }}
48+
</p>
49+
50+
<p class="fr-callout__text">
51+
{{ content }}
52+
</p>
53+
54+
<DsfrButton
55+
v-if="button"
56+
v-bind="button"
57+
@click="button.onClick"
58+
/>
59+
60+
<slot />
61+
</div>
62+
</template>
63+
64+
<style src="./callouts.css"></style>
65+
66+
<style scoped>
67+
.fr-callout__text {
68+
color: var(--g800);
69+
}
70+
</style>

0 commit comments

Comments
 (0)