@dataesr/react-dsfr

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

Current version is using a degraded version of @gouvfr/dsfr@1.7.0 (new components are not yet available)

Requirements

node >= 14.18.x
npm >= 8.15.x
React >= 18.2.x

Installation

npm i @dataesr/react-dsfr

Generate and watch

Generate and watch dist folder containing bundles:

npm install --legacy-peer-deps
npm start

Library usage

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

We are using remixicon.

import { Icon } from '@dataesr/react-dsfr';

<Icon
    name="ri-bubble-chart-line"
    size="lg"
    color="#f88"
    iconPosition="right"
>
    <p>I have an icon</p>
</Icon>

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

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

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']

Documentation - Storybook

Storybook of the project is under construction.

Unit tests

Run all tests using react-scripts WHITH watcher option

npm run test:dev

Run all tests using react-scripts WITHOUT watcher option

npm run test:nowatch

Update snapshots

npm test -- --updateSnapshot

In Chrome

npm run test:debug

Access about:inspect

See doc debugging-tests

Release policy and package publishing

The @dataesr/react-dsfr package is published with semantic-release.

Merging code on the master branch will automatically bump the version, create a tag, produce a changelog and trigger the tests.

If new semantic commits are found (see below how to format commit) a new version of npm package is published and github pages is updated.

new patch version

git commit -m "fix: This is my fix"

new minor version

git commit -m "feat: This is my feature"

new major version

git commit -m "[subject]" -m "BREAKING CHANGE: [body]"

See Commit message formats for more details.

Accessibility

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

npm instal --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