Skip to content

Commit

Permalink
🔖 chore(*): DSFR v1.9.1
Browse files Browse the repository at this point in the history
  • Loading branch information
lab9fr authored Apr 11, 2023
2 parents 501d917 + 62f7918 commit d14c877
Show file tree
Hide file tree
Showing 304 changed files with 4,846 additions and 2,072 deletions.
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/1-bug.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
name: Rapporter un bug
about: Rapporter un bug pour améliorer le DSFR
title: ''
labels: bug
assignees: ''

---

### Décrire le bug
Une description claire et précise du bug.

### Les étapes pour reproduire le bug
Exemple :
1. Aller à '...'
2. Cliquer sur '....'
3. Scroller jusqu’à '....'
4. Réduire la page
5. Le problème apparaît

### Comportement attendu
Une description claire et concise de ce qui devrait se produire.

### Capture d’écran
Ajouter des captures d’écran ou un exemple de code pour préciser le bug et le contexte.

### Configuration et système utilisé
- **Version du DSFR : **
- **Appareil (mobile, tablette, desktop) : **
- **Système d’exploitation : **
- **Navigateur et version : **

### Informations complémentaires
Ajouter toute autre information concernant le problème.
22 changes: 22 additions & 0 deletions .github/ISSUE_TEMPLATE/2-suggestion.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
name: Proposer une évolution
about: Suggérer une nouvelle idée, une amélioration, au Système de Design de l'État.
title: ''
labels: évolution
assignees: ''

---

**Si votre suggestion concerne un composant existant, merci de décrire le problème rencontré de façon claire et concise**
Exemple : sur le composant [...], je ne peux pas [...].

**Décrivez le comportement souhaité**
Une description claire et concise de ce que vous souhaitez qu'il se passe.

**Si vous avez déjà identifié une correction**
Une description précise de toutes les solutions ou fonctionnalités que vous avez considérées/essayées.

**Contexte & informations complémentaires**
Préciser le contexte, les cas d'usages ou scénarios envisageables.
Ajouter des captures d'écrans pour clarifier la demande.

17 changes: 17 additions & 0 deletions .github/ISSUE_TEMPLATE/3-doc.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
name: Problème sur la documentation
about: Rapporter une erreur ou proposer une suggestion pour améliorer la documentation du DSFR.
title: ''
labels: documentation
assignees: ''

---

### Documentation associée
Si la suggestion concerne une documentation existante, préciser de laquelle il s’agit. Ajouter un lien si possible.

### Suggestion
Comment cette documentation pourrait être améliorée.

### Sources (si applicable)
Merci de fournir les différentes sources et recherches qui pourraient appuyer cette suggestion.
4 changes: 4 additions & 0 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
contact_links:
- name: Contactez nous
url: https://www.systeme-de-design.gouv.fr/centre-de-support
about: Retrouvez plus d'information sur systeme-de-design.gouv.fr
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Si vous souhaitez contribuer au DSFR, veuillez prendre connaissance des document

## Installation
### Installation locale
Le **DSFR** est basé sur une architecture [NodeJS](https://nodejs.org/), il est donc nécessaire d’installer une version récente de nodeJs. Dans le terminal nous utiliserons les commandes de **npm** ou **yarn** pour lancer les scripts.
Le **DSFR** est basé sur une architecture [NodeJS](https://nodejs.org/), il est donc nécessaire d’installer une version récente de nodeJs. Dans le terminal nous utiliserons les commandes de **npm** ou **yarn** (v1.22.19) pour lancer les scripts.

Le dépôt est disponible à cette adresse: https://github.com/GouvernementFR/dsfr

Expand Down
52 changes: 43 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,27 @@
# Système de design de l’État
# 🇫🇷 Système de Design de l’État

Le Système de design de l’État (ci-après, le **DSFR**) est un ensemble de composants html / css / js ayant pour but de faciliter la vie des développeurs et intégrateurs pour bâtir leurs interfaces.
[![GitHub release](https://img.shields.io/github/v/release/gouvernementFR/dsfr.svg)](https://github.com/gouvernementFR/dsfr/releases/) [![Generic badge](https://img.shields.io/badge/npm-yellow.svg)](https://www.npmjs.com/package/@gouvfr/dsfr) [![Generic badge](https://img.shields.io/badge/license-grey.svg)](https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md) [![Npm package monthly downloads](https://badgen.net/npm/dm/@gouvfr/dsfr)](https://npmjs.com/package/@gouvfr/dsfr)


Le Système de Design de l’État (ci-après, le **DSFR**) est un ensemble de composants web HTML, CSS et Javascript pour faciliter le travail des équipes projets des sites Internet publics, et créer des interfaces numériques de qualité et accessibles.


L'outil est développé, maintenu et géré par le [Service d'Information du Gouvernement (SIG)](https://www.gouvernement.fr/service-d-information-du-gouvernement-sig).

Son utilisation par les administrations est soumise à une demande d'agrément (voir partie 5 des Conditions Générales d'Utilisation).

[Voir la documentation officielle](https://www.systeme-de-design.gouv.fr)

## Licence et droit d'utilisation
Le contenu de ce projet est placé sous licence MIT License, à l'exception de la fonte Marianne. Voir [LICENSE.md](https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md)

#### ⚠️ Utilisation interdite en dehors des sites Internet de l'État
>Il est formellement interdit à tout autre acteur d’utiliser le Système de Design de l’État (les administrations territoriales ou tout autre acteur privé). Le Système de Design de l’État représente l’identité numérique de l’État. En cas d’usage à des fins trompeuses ou frauduleuses, l'État se réserve le droit d’entreprendre les actions nécessaires pour y mettre un terme.
Voir les [conditions générales d'utilisation](doc/legal/cgu.md).


#### ⚠️ Prohibited Use Outside Government Websites
>This Design System is only meant to be used by official French public services' websites and apps. Its main purpose is to make it easy to identify governmental websites for citizens. See terms.
## Installation

Expand Down Expand Up @@ -63,7 +84,7 @@ Les polices de caractères utilisées sur le DS, à savoir la Marianne et la Spe
### Le HTML
Le point de départ de l’utilisation du DSFR est la création de fichiers HTML, afin de pouvoir utiliser les différents composants. Ces fichiers sont à mettre à la racine de votre projet. L’exemple ci dessous est le code minimal afin de pouvoir utiliser le DSFR.

L’ajout de l’attribut **data-fr-scheme** sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont system, light, dark.La valeur “system” permet d’utiliser la configuration définie sur le système d’exploitation de l’utilisateur.
L’ajout de l’attribut **data-fr-scheme** sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont `system`, `light`, `dark`. La valeur “system” permet d’utiliser la configuration définie sur le système d’exploitation de l’utilisateur.
Consulter la [documentation des paramètres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage) afin d’en savoir plus.

```html
Expand Down Expand Up @@ -100,21 +121,31 @@ Consulter la [documentation des paramètres d’affichage](https://www.systeme-d

**Les CSS**

Afin d’inclure la totalité des composants et des styles du DS, il est nécessaire d’inclure la feuille de style `dist/dsfr.min.css`. Les classes utilitaires, notamment les icônes, sont disponibles dans un fichier à part dans `dist/utility/utility.scss`.

Afin d’inclure la totalité des composants et des styles du système de design, il est nécessaire d’inclure la feuille de style `dist/dsfr.min.css`.
Les classes utilitaires, notamment les icônes, sont disponibles dans un fichier à part dans `dist/utility/utility.scss`.
```html
<html>
<head>
<link rel="stylesheet" href="dsfr.min.css">
<link rel="stylesheet" href="utility/utility.min.css">
```
Il est aussi possible d’importer uniquement ce que l’on souhaite utiliser. En effet, pour ajouter un composant seul il suffit d’importer son CSS ainsi que celui de chacune des dépendances de ce composant. Ces dépendances sont listés dans le `README.md` de chaque package.

```html
<html>
<head>
<link rel="stylesheet" href="core.min.css">
<link rel="stylesheet" href="link.min.css">
<link rel="stylesheet" href="button.min.css">
```


**Le Javascript**

L’ensemble du code javascript nécessaire au bon fonctionnement du DS se trouve dans deux fichiers `dist/dsfr.module.min.js` et `dist/dsfr.nomodule.min.js`.

De la même façon que le CSS il est possible d’importer uniquement le JS des composants utilisés (et leurs dépendances).


Le fichier dsfr.module.min.js utilise les modules javascript natifs - sa balise script d’appel doit avoir l’attribut **type=”module”**.
Le fichier dsfr.nomodule.min.js est utilisé par les anciens navigateurs ne supportant pas les modules javascript - sa balise script doit contenir l’attribut **nomodule**.
Le fichier dsfr.nomodule.min.js est utilisé par les anciens navigateurs ne supportant pas les modules javascript (es6) - sa balise script doit contenir l’attribut **nomodule**.
Il est **impératif** d’appeler les **deux fichiers** javascript afin que le code s’exécute correctement sur l’ensemble des navigateurs supportés :

```html
Expand All @@ -124,6 +155,9 @@ Il est **impératif** d’appeler les **deux fichiers** javascript afin que le c
</html>
```

> NB : Le package analytics est géré indépendament et doit être ajouté après le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/doc/Analytics-1.9.0.pdf)
De la même façon que le CSS il est possible d’importer uniquement le JS des composants utilisés (et leurs dépendances).
### Icônes
Les icônes sont stockées dans `dist/icons` et classées par catégories.
Le design système utilise principalement des icônes de la librairie remixIcon. Il existe aussi des icônes personnalisées, celles-ci sont préfixée par “fr--”.
Expand Down
Binary file removed doc/Analytics-1.9.0.pdf
Binary file not shown.
Binary file added doc/Analytics-1.9.1.pdf
Binary file not shown.
2 changes: 1 addition & 1 deletion module/string/_index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@forward 'sass:string';
@forward 'function/split';
@forward 'function/split' as split*;
@forward 'function/join';
@forward 'function/replace';
@forward 'function/num';
Expand Down
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gouvfr/dsfr",
"version": "1.9.0",
"version": "1.9.1",
"description": "Système de Design de l'Etat - DSFR",
"repository": "git@github.com:GouvernementFR/dsfr.git",
"author": "Service d'Information du Gouvernement <jean-charles.hourdeaux@pm.gouv.fr>",
Expand Down Expand Up @@ -40,12 +40,12 @@
"@rollup/plugin-virtual": "^2.1.0",
"browser-sync": "^2.27.10",
"browserslist": "^4.21.5",
"cssnano": "^5.1.14",
"cssnano": "^5.1.15",
"del": "^6.0.0",
"ejs": "^3.1.8",
"eslint": "^8.27.0",
"ejs": "^3.1.9",
"eslint": "^8.36.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-standard": "^5.0.0",
Expand All @@ -57,26 +57,26 @@
"mqpacker": "^7.0.0",
"pa11y": "^6.2.3",
"path": "^0.12.7",
"postcss": "^8.4.19",
"postcss": "^8.4.21",
"postcss-banner": "^4.0.1",
"postcss-combine-duplicated-selectors": "^10.0.3",
"postcss-discard-duplicates": "^5.1.0",
"prettier": "^2.7.1",
"prettier": "^2.8.4",
"rollup": "^2.68.0",
"rollup-plugin-banner2": "^1.2.2",
"rollup-plugin-modify": "^3.0.0",
"rollup-plugin-prettier": "^2.2.2",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.56.1",
"sass": "^1.59.2",
"sass-true": "^6.1.0",
"standard": "^16.0.4",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^4.3.0",
"stylelint-scss": "^4.4.0",
"subset-font": "^1.6.1",
"svgo": "^2.8.0",
"yargs": "^17.6.2"
"yargs": "^17.7.1"
},
"husky": {
"hooks": {
Expand Down
27 changes: 26 additions & 1 deletion src/analytics/example/attribute/index.ejs
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
<div class="<%= prefix %>-container" >
<a href="#" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-1" >libellé du lien</a>
<div>
<h4>button</h4>
<div class="<%= prefix %>-mb-6v">
<a href="javascript:alert('click')" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-click" >libellé du lien</a>
</div>
</div>
<div>
<h4>lien interne</h4>
<div class="<%= prefix %>-mb-6v">
<a href="../" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-internal" >libellé du lien</a>
</div>
</div>
<div>
<h4>lien externe</h4>
<div class="<%= prefix %>-mb-6v">
<a href="https://systeme-de-design.gouv.fr" data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-external" target="_blank" >libellé du lien</a>
</div>
</div>
<div>
<h4>lien download</h4>
<div class="<%= prefix %>-mb-6v">
<a href="" download data-<%= prefix %>-analytics-click="libellé envoyé à l'analytics" id="attr-download" >libellé du lien</a>
</div>
</div>


</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<% const sample = getSample(include); %>
<%
const accordionImbricated = {
label: 'Intitulé accordéon',
content: include('../../../../../component/accordion/example/sample/accordion'),
id: uniqueId('accordion-imbricated'),
}
%>

<div class="<%= prefix %>-container" >
<div class="<%= prefix %>-mb-6v">
<%- section('Accordéon dans un accordéon', null, 0) %>
<%- include('../../../../../component/accordion/template/ejs/accordion', {accordion: accordionImbricated}); %>
</div>
</div>
11 changes: 0 additions & 11 deletions src/analytics/example/component/accordion/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
content: randomContent(),
id: uniqueId('accordion'),
}
const accordionImbricated = {
label: 'Intitulé accordéon',
content: include('../../../../component/accordion/example/sample/accordion'),
id: uniqueId('accordion-imbricated'),
}
%>

<div class="<%= prefix %>-container" >
Expand All @@ -19,9 +13,4 @@
<%- section('Accordéon', null, 0) %>
<%- include('../../../../component/accordion/template/ejs/accordion', {accordion: accordion}); %>
</div>

<div class="<%= prefix %>-mb-6v">
<%- section('Accordéon dans un accordéon', null, 0) %>
<%- include('../../../../component/accordion/template/ejs/accordion', {accordion: accordionImbricated}); %>
</div>
</div>
5 changes: 5 additions & 0 deletions src/analytics/example/component/alert/alert-close/index.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container">
<%- sample('Alerte avec bouton fermer', '../../../../../component/alert/example/sample/alert-dismissable', {alert: {type: "info", title: "Information Covid"}}); %>
</div>
5 changes: 5 additions & 0 deletions src/analytics/example/component/alert/alert-dynamic/index.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container">
<%- sample('Alerte ajoutée dynamiquement (type)', '../../../../../component/alert/example/sample/alert-dismissable', {alert: {alert: true, type: "error", title: "Erreur détectée dans le formulaire"}}, null, '../../../../../component/alert/example/layout-dynamic.ejs'); %>
</div>
5 changes: 5 additions & 0 deletions src/analytics/example/component/alert/index.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container">
<%- sample('Alert', '../../../../component/alert/example/sample/alert-default', {alert: {type: "success", title: "Succès de l'envoi"}}); %>
</div>
5 changes: 5 additions & 0 deletions src/analytics/example/component/badge/index.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container">
<%- sample('Badge', '../../../../component/badge/example/sample/badge-default', {badge: {id: uniqueId('badge')}}); %>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<% const sample = getSample(include); %>

<% const getData = (data = {}) => {
return {
id: uniqueId('breadcrumb'),
segments: [
{ label: 'Accueil', id: uniqueId('breadcrumb') },
{ label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
{ label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
{ label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
{ label: 'Page Actuelle' }
],
...data
}
};
%>

<div class="<%= prefix %>-container" >

<%- section('Étiquette d’élément BUTTON' , null, 0) %>
<%- include('../../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData({ markup: 'button' }) }); %>

</div>
14 changes: 5 additions & 9 deletions src/analytics/example/component/breadcrumb/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,20 @@
return {
id: uniqueId('breadcrumb'),
segments: [
{ href: '#', label: 'Accueil', id: uniqueId('breadcrumb') },
{ href: '[url - à modifier]', label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
{ href: '[url - à modifier]', label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
{ href: '[url - à modifier]', label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
{ path: '', label: 'Accueil', id: uniqueId('breadcrumb') },
{ path: 'segment-1', label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
{ path: 'segment-2', label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
{ path: 'segment-3', label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
{ label: 'Page Actuelle' }
],
...data
}
};
%>
<div id="[url - à modifier]"></div>

<div class="<%= prefix %>-container" >

<%- section('Étiquette d’élément A' , null, 0) %>
<%- include('../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData() }); %>

<%- section('Étiquette d’élément BUTTON' , null, 0) %>
<%- include('../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData({ markup: 'button' }) }); %>

</div>

Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<% const sample = getSample(include); %>

<div class="<%= prefix %>-container" >

<%- section('Étiquette d’élément A', null, 0) %>

<%- sample('lien download', '../../../../../component/button/template/ejs/button.ejs', { button: { label: 'label a download', id: uniqueId('button'), markup:'a', href:'../../../../../example/img/image.jpg', attributes: { download: '' } } }); %>
</div>
Loading

0 comments on commit d14c877

Please sign in to comment.