Non-official React components of the official french Système de Design de l'État.
Current version is using @gouvfr/[email protected]
- node >= 14.1x
- npm >= 6.1x
- React >= 17.0.x
yarn add @dataesr/react-dsfror
npm install @dataesr/react-dsfrStyleguide 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 guideVisit http://localhost:6060.
The complete styleguide is available online https://dataesr.github.io/react-dsfr/.
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 startWe are using remixicon.
<Icon
name="ri-bubble-chart-line"
size="lg"
color="#f88"
iconPosition="right"
>
<p>I have an icon</p>
</Icon>
<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']
npm run test:devThe @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 install --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-cinpm run test:debugAccess about:inspect
See doc debugging-tests
- 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
- Add StoryBook