feat: Design System de l'Etat, commit initial

Design System de l'Etat v0.1.0

Fondamentaux
-Couleur
-Espacement
-Grille
-Icônes
-Médias
-Typographie.

Composants
-Barre de recherche
-Boutons
-Boutons radios
-Case à cocher
-Carte
-Champ de saisie
-En-tête (Header)
-Fil d’ariane
-Liens
-Lien d'évitement
-Liste déroulante
-Médias
-Mise en avant
-Mise en exergue
-Navigation principale
-Pagination
-Pied de page (Footer)
-Tuiles

.commitlintrc.yml

@@ -0,0 +1,2 @@
+extends:
+  - '@commitlint/config-conventional'

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": "standard",
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "semi": [2, "always"],
+    "no-template-curly-in-string": "off"
+  }
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.DS_Store
+lerna-debug.log
+test/
+/fonts/

.stylelintrc.yml

@@ -0,0 +1,22 @@
+{
+  "extends": "stylelint-config-standard",
+  "ignoreFiles": "./packages/icons/generated/_icons.scss",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "no-descending-specificity": null,
+    "unit-case": null,
+    "unit-no-unknown": [true, { "ignoreFunctions": ["space", "calc"], "ignoreUnits": ["N", "/x[0-9]+/"] }],
+    "at-rule-empty-line-before": null,
+    "declaration-empty-line-before": null,
+     "font-family-no-missing-generic-family-keyword": [
+        true,
+        {
+          "ignoreFontFamilies": ["icons"]
+        }
+    ]
+  }
+}

.svgo.yml

@@ -0,0 +1,57 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+    - removeDoctype
+    - removeXMLProcInst
+    - removeComments
+    - removeMetadata
+    - removeXMLNS
+    - removeEditorsNSData
+    - cleanupAttrs
+    - inlineStyles
+    - minifyStyles
+    - convertStyleToAttrs
+    - cleanupIDs
+    - prefixIds
+    - removeRasterImages
+    - removeUselessDefs
+    - cleanupNumericValues
+    - cleanupListOfValues
+    - convertColors
+    - removeUnknownsAndDefaults
+    - removeNonInheritableGroupAttrs
+    - removeUselessStrokeAndFill
+    - removeViewBox
+    - cleanupEnableBackground
+    - removeHiddenElems
+    - removeEmptyText
+    - convertShapeToPath
+    - convertEllipseToCircle
+    - moveElemsAttrsToGroup
+    - moveGroupAttrsToElems
+    - collapseGroups
+    - convertPathData:
+        noSpaceAfterFlags: false
+    - convertTransform
+    - removeEmptyAttrs
+    - removeEmptyContainers
+    - mergePaths:
+        noSpaceAfterFlags: false
+    - removeUnusedNS
+    - sortAttrs
+    - sortDefsChildren
+    - removeTitle
+    - removeDesc
+    - removeDimensions
+    - removeAttrs
+    - removeAttributesBySelector
+    - removeElementsByAttr
+    - addClassesToSVGElement
+    - removeStyleElement
+    - removeScriptElement
+    - addAttributesToSVGElement
+    - removeOffCanvasPaths
+    - reusePaths

CONTRIBUTING.md

@@ -0,0 +1,143 @@
+
+# Contributing
+## Installation
+### Installation locale
+Le Design System est construit sous NodeJS, et utilise principalement Yarn et Webpack. Afin de l'installer de manière locale, il suffit de cloner ce repository et d'installer les dépendances NPM avec la commande `yarn`.  Pour lancer le serveur local et travailler sur le Design System, il est ensuite nécessaire de sélectionner le package sur lequel travailler, et lancer la commande `yarn start` :
+
+```
+cd packages/buttons
+yarn start
+```
+
+### Packages
+
+Le Design System est un monorepo proposant différents composants, listés dans le dossier `packages`. Certains de ces packages sont dépendants les uns des autres. Chacun de ces packages possède donc son propre fichier `package.json`, listant l'ensemble de ses dépendances à d'autres composants du Design System. Afin d'ajouter une dépendance à un package, il est nécessaire d'utiliser la commande `lerna add`. Ainsi, pour ajouter par exemple le package `core` en tant que dépendance du package `buttons`, il faut utiliser la commande suivante :
+
+```
+lerna add @frds/core --scope=@frds/buttons
+```
+
+Un composant doit avoir une arborescence de type :
+```
+/
+└── src
+    ├── scripts
+    ├── styles
+└── tests
+    ├── samples
+    ├── scripts
+    ├── templates
+└── _main.scss
+└── package.json
+└── README.md
+```
+
+Le dossier **src** comprend les fichiers de style .scss, ainsi que des fichiers .js au besoin.
+Le dossier **tests** comprend les fichiers .ejs permettant la génération des pages de test.
+
+## Utilisation
+### Sass
+Le Design System utilise Sass pour la génération automatique des styles liés à chaque composant. Chacun d'entre eux possède une structure identique à ce niveau, par exemple le composant `core` :
+
+```
+/packages/core
+└── src
+    ├── styles
+    │   ├── _generic.scss
+    │   ├── _module.scss
+    │   ├── _settings.scss
+    │   ├── _tools.scss
+└── _main.scss
+```
+
+Il peut donc y avoir plusieurs fichier .scss, mais seuls _main.scss à la racine du composant, et _module.scss sont obligatoires, et chacun à son propre rôle :
+
+ - _main.scss : Fichier principal du composant servant d'entrée, et composé uniquement d'`@import` des autres fichiers .scss du composant *(obligatoire)*
+ - _generic.scss : Contient un reset des principales balise, ce fichier n'est présent que pour le composant `core`. (optionnel)
+ - _module.scss : Comprend l'ensemble des styles du module *(obligatoire)*
+ - _settings.scss : Contient les variables sass utilisées par le composant, par exemple l'ensemble des tailles de polices pour le composant `core` *(optionnel)*
+ - _tools.scss : Contient les `functions` et `mixins` pouvant être utilisés par le composant, par exemple la gestion des espacements *(optionnel)*
+
+### Javascript
+
+### EJS
+
+### Git
+
+Nous utilisons des [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) afin d'automatiser la génération automatique de Changelog au sein des différents packages du design system via [Lerna.js](https://lerna.js.org/), ainsi que des numéros de version des différents packages via le schéma [SemVer](https://semver.org/#summary) (Semantic Versionning).
+Les commits doivent donc s'écrire sous la forme suivante :
+
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+La Changelog de chaque package sera donc mis à jour automatiquement en fonction du `type` de commit :
+* **fix**: Un commit de type `fix` permet de patcher un bug ([\[PATCH\]](https://semver.org/#summary))
+* **feat**: Un commit de type `feat` permet d'introduire une nouvelle fonctionnalité ([\[MINOR\]](https://semver.org/#summary))
+* **BREAKING CHANGE**: Un commit avec un footer `BREAKING CHANGE:` introduit un changement important dans le code ([\[MAJOR\]](https://semver.org/#summary))
+* D'autres types que `feat` et `fix` peuvent être utilisés, nous utilisons [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional), qui recommande l'utilisation des principaux types suivants : `build`, `chore`, `ci`, `docs`, `style`, `refactor`, `perf`, `test`
+
+Lors d'une release, Lerna va automatiquement créer un commit de type `chore(packages): release` avec comme description l'ensemble des packages qui ont été créés mis à jour, avec leurs bons numéros de version
+
+#### Exemples
+Commit simple :
+
+```
+docs: add sassdoc info
+```
+
+Commit avec `scope`, description et `BREAKING CHANGE` footer
+```
+fix(core): change mixin name my-mixin to my-new-mixin
+
+BREAKING CHANGE: new name for the mixin my-mixin
+```
+
+#### Tests automatiques
+
+Un hook de pre-commit est utilisé pour lancer les tests automatisés avant de valider un commit. Il permet de s'assurer que le code ajouté respecte bien l'ensemble des tests. Pour passer la vérification de ces tests (Lors par exemple de modifications uniquement sur le process de build), il est possible de passer un paramètre --no-verify lors du commit. Exemple :
+
+```
+git commit -m "build: add webpack" --no-verify
+```
+
+## Autres commandes
+### Sassdoc
+Des commentaires spéciaux sont utilisés sur l'ensemble des fichier `scss`, afin de permettre la génération d'une [Sassdoc](http://sassdoc.com/) automatiquement, documentant l'ensemble des `mixins` et `functions` utilisés sur le Design System :
+
+```
+yarn run styleguide
+```
+Cette commande permet la génération de la doc dans le dossier `sassdoc`, à la racine du projet.
+
+### Tests
+Afin de s'assurer de la qualité du code, nous utilisons des tests automatisés qu'il est nécessaire d'exécuter régulièrement pour vérifier que le code du Design System reste valide et cohérent.
+
+#### Sass
+Afin de tester les différentes `functions` et `mixins`, nous utilisons jest et sass-true, afin d'effectuer une batterie de tests, présents dans un fichier `tests/_sass-tests.scss` au sein de certains packages.
+
+Pour vérifier l'ensemble de ces tests, il faut utiliser la commande suivante :
+
+```
+yarn run test:sass
+```
+
+#### Accessibilité
+Pour tester de manière automatisée l'accessibilité des composants du Design System, nous utilisons [Pa11y](https://pa11y.org/) sur les pages de tests des différents packages :
+
+```
+yarn run test:pa11y
+```
+
+Afin d'exclure un élément de ces tests, il est possible de lui attribuer une class spécifique `.is-pa11y-hidden`
+
+### Icônes
+La gestion des icônes se fait à l'aide d'une webfont, chargée directement via CSS. Celle-ci est générée automatiquement à partir de fichiers `.svg` se trouvant dans le dossier `/icons` à la racine du Design System. Il est donc possible d'ajouter des icônes, en ajoutant des fichiers `.svg` à ce dossier, et en lançant la commande suivante :
+
+```
+yarn run icon-font
+```

PUBLISHING.md

@@ -0,0 +1,19 @@
+# Publishing
+
+## Publication globale
+La version du Design System est à préciser dans le fichier `package.json`, et la publication de l'ensemble du repo se fait via la commande :
+
+```
+npm publish -timeout=9999999 --access public
+```
+
+## Publication des packages
+La publication du Design System sur NPM sous forme de packages se fait via l'outil [Lerna.js](https://lerna.js.org/), qui va s'occuper automatiquement du versionning de ceux-ci en fonction des différents commits effectués depuis la dernière publication (cf [Git](#git))
+
+La commande utilisée pour publier une nouvelle version des packages impactés est la suivante :
+
+```
+yarn run publish
+```
+
+Cette commande permet de lancer des tests automatisés (Sur les fichiers scss et l'accessibilité), et de publier les nouvelles versions des packages si les précédents tests sont passés.

README.md

@@ -0,0 +1,88 @@
+
+# Design System
+
+## Table des matières
+- [Installation](#installation)
+- [Fonctionnement](#fonctionnement)
+- [Utilisation](#utilisation)
+- [Contribuer](#contribuer)
+
+## Installation
+L'installation du Design System de l'Etat (ci-après, le **DS**) peut se faire de deux manières différentes. En téléchargeant l'ensemble des fichiers nécessaires à son utilisation, ou en utilisant le gestionnaire de paquets **NPM**.
+
+### Fichiers statiques
+Il est possible de télécharger l'ensemble du Design System de l'Etat au format zip à [cette adresse](#). Le zip contient un ensemble de fichiers CSS et Javascript, ainsi que les différentes polices web utilisées, à savoir la Marianne et la Spectral.
+
+### NPM
+Un package complet du Design System de l'Etat est disponible sur NPM, permettant de télécharger l'ensemble des fichiers nécessaires.
+Il est de ce fait nécessaire d'installer [NodeJS](https://nodejs.org/en/), et d'avoir un fichier `package.json` à la racine de votre projet. (Il est possible d'en créer un directement via la commande `npm init`).
+
+Une fois en place, il suffit d'installer le package du Design System de l'Etat via la commande suivante :
+
+```
+npm install @gouvfr/design-system
+```
+
+Il est également possible d'installer les composants avec [Yarn](https://yarnpkg.com/) :
+
+```
+yarn add @gouvfr/design-system
+```
+
+### Arborescence du projet
+
+Lors de la création de votre projet, il est nécessaire d’adopter l’arborescence prévue par le Design System de l'Etat, à savoir les fichiers HTML à la racine du projet, et les différentes sources dans des dossiers spécifiques :
+
+```text
+/ Racine du projet
+└── css
+└── fonts
+└── js
+index.html
+```
+
+En cas d'installation via NPM, il est important de récupérer les polices webs dans le dossier node_modules/@ds-fr/dist/fonts, ou de les [télécharger directement ici](#).
+
+### Template HTML de base
+Le point de départ de l’utilisation du DS est la création de fichiers HTML afin de pouvoir utiliser les différents composants. Ces fichiers sont à mettre à la racine de votre projet. Voici un exemple de code HTML minimal pour utiliser le DS, chargeant les polices et styles précisés dans la précédente section :
+
+```html
+<!doctype html>
+<html lang="fr">
+   <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1,
+         shrink-to-fit=no">
+      <link rel="stylesheet" href="css/dsfr.min.css">
+      <title>Design System de l'Etat</title>
+   </head>
+   <body>
+      <div class="rf-container"></div>
+      <script src="js/dsfr.min.js"></script>
+   </body>
+</html>
+```
+## Fonctionnement
+
+### BEM
+Le **DS** utilise la méthodologie [**BEM**]([https://css-tricks.com/bem-101/]([http://getbem.com/naming/](http://getbem.com/naming/))) (Block - Element - Modifier) comme convention de nommage des classes CSS. Elle permet aux développeurs une meilleure compréhension de la relation entre HTML et CSS dans un projet donné.
+
+Selon cette méthodologie, un block représente le plus haut niveau d'abstraction d'un nouveau composant, par exemple `.parent`.
+Des éléments (ou enfants), peuvent être placés à l'intérieur de ces blocks, et sont désignés par deux underscore précédés du nom du block : `.parent__element`.
+Les modifiers quant à eux, servent à manipuler les blocs, de manière à les styliser de manière indépendante en s'assurant de ne pas induire de changement à des blocks sans aucun rapport avec celui-ci. Ils sont notés à l'aide de deux tirets précédés du nom du block comme suit : `.parent--modifier`.
+
+### Icônes
+Le Design System de l'Etat utilise une webfont d'icônes, directement chargées en CSS. Il est de ce fait possible d'ajouter directement à votre projet, les icônes mises à disposition par le **DS**, à l'aide de classes spécifiques pouvant se trouver directement sur des composants, ou de manière autonome, à l'aide de balises `<span>`. Exemple :
+
+
+```html
+<span class="rf-fi-alert-fill"></span>
+```
+## Utilisation
+
+L'ensemble du **DS** est divisé en différents composants qu'il vous est possible d'utiliser dans votre projet. [La documentation en ligne](#) vous permettra de connaître l'ensemble des composants disponibles, ainsi que le code nécessaire à l'implémentation de ceux-ci au sein de votre projet.
+
+## Contribution
+Pour des instructions complètes afin de contribuer au code source du **DS**, vous pouvez vous référer
+au fichier  [CONTRIBUTING.md](CONTRIBUTING.md).
+Ces instructions vous permettrons également d'installer une copie locale du Design System de l'Etat pour le développement d'un nouveau composant.