Non-official React components of the official french Système de Design de l'État.
Current version is using a degraded version of @gouvfr/[email protected] (new components are not yet available)
- node >= 14.18.x
- npm >= 8.15.x
- React >= 18.2.x
npm i @dataesr/react-dsfrGenerate and watch dist folder containing bundles:
npm install --legacy-peer-deps
npm startA 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 startWe 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/[email protected]/fonts/remixicon.css" rel="stylesheet">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']
Storybook of the project is under construction.
To run it locally
npm run storybooknpm run test:devnpm run test:nowatchnpm test -- --updateSnapshotnpm run test:debugAccess about:inspect
See doc debugging-tests
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.
git commit -m "fix: This is my fix"git commit -m "feat: This is my feature"git commit -m "[subject]" -m "BREAKING CHANGE: [body]"See Commit message formats for more details.
Components can be tested in Example's page App.js with @axe-core/react
npm instal --save-dev @axe-core/reactAnother solution to test accessibility is CLI module https://pa11y.org/
Check configuration file .pa11y-ci
npm install -g pa11y-ci
pa11y-ci- santepsy.etudiant.gouv.fr
- DashLord
- Baromètre de la Science Ouverte
- Enfants du spectacle
- Mon Psy
- Transitions collectives
- Immersion facile
- Bilans climat simplifiés
- Zero logement vacant
Thanks to the internet world.
- Limit usage of colors to colorFamilies
- Upgrade to latest version of the DSFR (v1.9)
- Full review ot the Typescript integration
- Tree Shaking (instead of the whole bundle)