@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.7.0 (new components are not yet available)
npm i @dataesr/react-dsfr
Generate and watch dist folder containing bundles:
npm install --legacy-peer-deps
npm start
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.
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>
: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']
Storybook of the project is under construction.
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 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
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 101 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
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.