@dataesr/react-dsfr

Non-official React components of the official french Système de Design de l'État.

Current version is using @gouvfr/[email protected]

Requirements

node >= 14.1x
npm >= 6.1x
React >= 17.0.x

Installation

yarn add @dataesr/react-dsfr

npm install @dataesr/react-dsfr

Library usage

Styleguide

Styleguide gives you access to the list of props needed and a working example for each component available in the library. To launch it on your local machine:

npm run guide

Visit http://localhost:6060.

The complete styleguide is available online https://dataesr.github.io/react-dsfr/.

Npm package

Generate /dist folder containing bundles

Rollupjs is used to bundle files. cf config in rollup.config.js

npm run build

Generate and watch /dist folder containing bundles

npm install
npm start

⚠️ Header component is mandatory to use @dataesr/react-dsfr

Example page

A playground to test components

An example page is available containing all components. To launch it on your local machine, first launch watcher of the project and then:

cd example
npm install 
npm start

Use Icons

⚠️ CDN link of css must be added to the <head> of your website.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

We are using remixicon.

Use Colors

Color variables are available in style/color.css. To make a new component dark theme compatible it's recommended to use variables from scheme.css in @gouvfr/dsfr project

Some components can be colored with variables (see colorFamily props) listed below:

['green-tilleul-verveine', 'green-bourgeon', 'green-emeraude', 'green-menthe', 'green-archipel', 'blue-ecume', 'blue-cumulus', 'purple-glycine', 'pink-macaron', 'pink-tuile', 'yellow-tournesol', 'yellow-moutarde', 'orange-terre-battue', 'brown-cafe-creme', 'brown-caramel', 'brown-opera', 'beige-gris-galet']

Publish it on npm registry

First update the version number in package.json

npm i --package-lock-only
npm login
npm publish --tag latest --access public

Visit http://localhost:3000.

Test your node module before you publish

npm link @dataesr/react-dsfr

Help from outside

Thanks to the internet world.

Unit tests

Run all tests using react-scripts with watcher option

npm run test:dev

Accessibility

Components can be tested in Example's page App.js with @axe-core/react

npm install --save-dev @axe-core/react

Another solution to test accessibility is CLI module https://pa11y.org/

Check configuration file .pa11y-ci

npm install -g pa11y-ci
pa11y-ci

In Chrome

npm run test:debug

Access about:inspect

See doc debugging-tests

They use react-dsfr and we like it!

TODO

To limit usage of colors to colorFamilies
Add StoryBook

tchak / react-dsfr Goto Github PK

react-dsfr's Introduction