@dataesr/react-dsfr
Advanced tools
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.6.0 (new componants are not yet available)
yarn add @dataesr/react-dsfr
or
npm install @dataesr/react-dsfr
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/.
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
We are using remixicon.
<Icon
name="ri-bubble-chart-line"
size="lg"
color="#f88"
iconPosition="right"
>
<p>I have an icon</p>
</Icon>
:warning: 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">
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:dev
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 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
npm run test:debug
Access about:inspect
See doc debugging-tests
Thanks to the internet world.
FAQs
A React implementation of the french government design system.
The npm package @dataesr/react-dsfr receives a total of 305 weekly downloads. As such, @dataesr/react-dsfr popularity was classified as not popular.
We found that @dataesr/react-dsfr demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.