codegouvfr / react-dsfr Goto Github PK
View Code? Open in Web Editor NEW🇫🇷 The Frech Government Design system React toolkit
Home Page: https://react-dsfr.codegouv.studio
License: MIT License
🇫🇷 The Frech Government Design system React toolkit
Home Page: https://react-dsfr.codegouv.studio
License: MIT License
I suggest having README.fr.md
on top of the default README.md
, providing at the least the basic information on what this library does and how to use it.
Maintaining translations is hard, so I would not make it mandatory to have the same content in both README.fr.md
and README.md
: if each file is useful, that's good enough.
@bzg Salut :)
Vu que je te vois réveiller, si tu vois ça, est-ce que tu pourrais regarder tes mails, tu dois avoir une demande d'autorisation de versel d'accéder à l'organisation codegouvfr.
Je ne suis pas owner donc je ne peux pas le faire moi-même.
C'est pour mettre en ligne l'app de démo Next.js.
Je ne peux pas utiliser page parce que ce n'est pas un site statique.
À plus tard :)
Bonjour,
Mon équipe travaille sur l'intégration de react-dsfr et on aimerait savoir la différence entre les deux projets codegouvfr/react-dsfr vs dataesr/react-dsfr. Sur le deuxième projet c'est marqué "Non-official React components of the official french Système de Design de l'État." mais on remarque qu'il y a plus de contributeurs et de releases.
En vous remerciant,
Cordialement,
Hamza
See https://publiccode-editor.etalab.studio - also cc @hjonin.
In particular, keep track of repositories and/or projects using @codegouvfr/react-dsfr is important to justify spending more energy in it.
PS: The way repos with publiccode.yml
are promoting on code.gouv.fr is buggy right now, but I'll fix it.
Code exemple: https://github.com/SocialGouv/mda/blob/main/apps/web/src/design-system/base/client/ConsentBanner.tsx
@garronej in my personnal component, I actually saved the "consent state" in localStorage with zustand persist. How do you prefer this state to be persisted?
The Card component title is always a h3 :
Lines 149 to 160 in 39140e5
In order not to mess with the actual document hierarchy, we should be able to choose the title level we want.
This has already been done in the Accordion component with a titleAs
property. A similar behaviour would be appropriate.
(I can work on the PR later)
Should be linked to PR #79.
3
(hardcoded)sticky
, sticky full height
, aligned right
)Hi, I tried to use the Upload component and the onChange
was never getting called. So I looked into the code and it seems that the nativeInputProps
aren't passed to the underlying input. I tried a dirty fix and passed the nativeInputProps
to the inner input and it worked. If you'd like I can provide a PR.
I'm using component to display feedback on action like this:
As you can see, I'm using a unordered list to display errors (in that case). I have several cases like this where I want to provide feedback via an Alert component as separate items. That's not how the DSFR Alert component has been designed, as its description should simply be included in <p>
tag (as per documentation : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte/).
The issue is that including <ul>
in a <p>
is not valid HTML (and produces warning in the console...).
Should we stick to the DSFR markup? Switch to a generic <div>
instead of a <p>
? Maybe the DSFR team is ok with using an other tag than the <p>
?
Hello,
For the project (TPE) I am working on, I need to implements the password block, described here : https://www.systeme-de-design.gouv.fr/elements-d-interface/modeles-et-blocs-fonctionnels/blocs-fonctionnels-formulaires
I see two things to do:
Do you think this password block should be done in this repository or should we use the Input component on our repository and customize it ?
If it should be done on this repository, I can do it if you want
PS: Sorry for my english, not the best. Hope it's clear enough but don't hesitate to ask me more precision if it is not
Standard preview of badge component shows like this:
But when I apply isSmall
property
The preview renders with a text size issue:
After looking in navigator inspector, I noticed that .fr-badge--sm
has been overriden
fr-badge--sm {
font-size: 0.75rem; /* overriden */
line-height: 1.25rem; /* overriden */
min-height: 1.125rem;
padding: 0 0.375rem;
overflow: initial;
max-width: 100%;
max-height: none;
}
It appears that p:not([class^="Mui"])
is responsible of this behaviour:
p:not([class^="Mui"]) {
font-size: 1rem;
line-height: 1.5rem;
margin: var(--text-spacing);
}
Preview is OK after disabling font-size
and line-height
styles:
After looking in project files, p:not([class^="Mui"])
selector is present in dsfr/dsfr(.min).css
files which are generated while running yarn build
command.
This code in patchCssForMui.ts
is probably the root of the problem:
const selectorNotMui = `${selector}:not([class^="Mui"])`;
if (media === "root") {
if (selector === "[href]") {
return selectorNotMui;
}
if (selector === "p") {
return selectorNotMui;
}
}
Only exposing the ThemeProvider is pretty constraining.
If we are using a custom theme provider, are want to create a theme switcher, the DSFR Provider limits the functionality.
Could you please split up in more parts the theme creation in order to allow other to implement the theme in more controlled environments.
The default createTheme function allow overriding. See: https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme
Hello,
I am confused, why don't you use React.forwardRef for some components like <Button>
, what is the explanation of this decision ?
Given a next appDir app, as Header
does not accept children, we sometimes have to make a "use-client" Header to handle authentification state.
For example with next-auth
, we could use the "getServerSession()" function instead, and make everything "server-only", this this will opt-out everything to SSR and not static as "getServerSession()" use Next's headers()
and cookies()
functions internally.
The solution to avoid that is to use useSession()
client hook, and leaf out the Header
component into a client wrapper component.
The goal is to provide and DSFR compliant, and as much static as possible header avec quickAccessItems
that include reactive items depending on a hook state.
Beside that, on the product marketing point of view, we need to have "onClick" and/or "href" from linkProps to have their own function (e.g. onClick() { trackHeaderClick(); }
With zz_internal/brandTopAndHomeLinkProps.ts
the coupling makes that we cannot have a client Header
on one side, and a server/static Footer
on the other.
I don't really see where resolving the pain of setting twos brand image or links was worth the drawback.
Also, it prevent us from having separated linkProps (e.g. adding different utm_source
in the url), and DSFR doc doesn't precise if links and brands have to be the same.
On a side note, I know that this lib is not in v1 yet, but it could be really great if no API breaking changes like this one either be introduced, or by default, left undocumented on release notes.
zz_internal/brandTopAndHomeLinkProps.ts
setBrandTopAndHomeLinkProps()
to be used in an isomorphic setupquickAccessItems
to accept "ReactNode" like navigation
propsThe Input component shouldn't add the type
attribute when the Input is a <textarea>
.
The <textarea>
HTML element has no type.
The current behaviour outputs type="text"
, which makes the HTML document invalid and can lead to accessibility issues.
Should be linked to PR #84.
Hi Joseph!
There is a bad spelling for "Acceuil". It should be "Accueil" in https://github.com/codegouvfr/react-dsfr/blob/main/src/Breadcrumb.tsx
Can you correct this please?
Thanks a lot!
Je ne suis pas sûr du meilleur nom.
Hello team, a small addition to the Tab component in order to activate keyboard navigation to fit accessibility requirements.
I applied a similar logic from this file : https://github.com/GouvernementFR/dsfr/blob/main/src/component/tab/script/tab/tabs-group.js
Hope this will meet the standards
I'm currently looking at implementing dsfr on my app.
Upon following the docs, since including DsfrHead
I've had my favicons replaced by the dsfr favicon.
Looking at the source code below, I don't see a way to overwrite this.
export function DsfrHead(props) {
const { defaultColorScheme, preloadFonts = [] } = props;
return (React.createElement(React.Fragment, null,
...
React.createElement("link", { rel: "icon", href: getAssetUrl(FaviconSvg), type: "image/svg+xml" }),
React.createElement("link", { rel: "shortcut icon", href: getAssetUrl(FaviconIco), type: "image/x-icon" }),
));
}
Is this intentional, or can I open a PR to pass a prop to toggle these favicons on/off?
As described here, footer component might have a partners
section.
I just migrated 2 libs in my project :
Then I discovered these regression
Here is the code
<Header
brandTop={brandTop}
serviceTitle={title}
homeLinkProps={homeLinkProps}
quickAccessItems={[
{
iconId: "fr-icon-account-circle-line",
linkProps: {
href: "#",
className: classes.disabled,
},
text: "Me connecter",
},
{
iconId: "ri-chat-3-line",
linkProps: {
href: feedbackLink || "#",
target: "_self",
},
text: "Soumettre mes retours",
},
{
iconId: "ri-mail-line",
linkProps: {
href: `mailto:${contactMail}`,
},
text: "Nous contacter",
},
]}
serviceTagline="Prototype - Version1 - 2023"
/>
I replaced Remix icons by dsfr icons, and it works backs.
With this code
{
iconId: "fr-icon-account-circle-line",
linkProps: {
href: feedbackLink || "#",
target: "_self",
}
The structure seems to have changed quite a bit since the component was created:
https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile/
Hi,
I'm new using the package and i want to know how to use the operator Logo.image
with Next JS & next/image features.
Do you made it already ?
Thanks
Hello,
I used RadioButtons and the doc in Storybook doesn't reflect what is expected:
In the doc :
there is a prop label.
But in the v0.56.0, only legend seems accepted:
On MainNavigation component, a navigation item is rendered as a <Link>
element if linkProps
has been set, otherwise, it's rendered as a <button>
.
The use case is that we use id attribute (tracking, e2e testing, etc.). It's possible on items using linkProps, but not if linkProps is not used.
{
text: "Nav item as <button>",
isActive: isNavItemActive,
//id: "not-working-id",
menuLinks: [
{
text: "Sub nav item",
linkProps: {
...routes.myRoute().link,
id: "my-working-link-id",
}
},
Should we add a buttonProps
in MainNavigationProps.Item
that satisfies React.HTMLProps<HTMLButtonElement>
?
This issue has been raised by an accessibility audit on an app using react-dsfr.
The 4 hardcoded links in the footer to "legifrance.gouv.fr", "gouvernement.fr", "service-public.fr" and "data.gouv.fr" open in a new tab (taget="_blank"
).
They should bear titles like : "legifrance.gouv.fr - ouvre une nouvelle fenêtre"
This is not the case on our app and on the Footer component documentation
Should the Footer component be modified or should it be added by another script ?
In mono repose the only-includes-used-icon
script is broken because the node_modues
directory where @codegouvfr/react-dsfr
and other potential plugin are stored in an upper dir.
Implementation of "password functional block"
Context:
When using npm workspaces
, i.e nested subprojects (see below) postinstall
, predev
and prebuild
are not working as expected.
- project
- sub-project-1 (React App)
- sub-project-2 (NodeJs App)
- sub-project-...
With npm workspaces
, node_modules
directories are created in root and sub projects and all dependencies are stored in node_modules
root directory.
Therefore, postinstall
, predev
and prebuild
need to know what is the targeted project directory (here sub-project-1
and / or what node_modules
directory to use (i.e node_modules
root directory).
Current behavior:
adding postinstall
, predev
and prebuild
in sub-project-1 package.json
return the following error:
npm ERR! command failed
npm ERR! command sh -c copy-dsfr-to-public
npm ERR! node:fs:1593
npm ERR! handleErrorFromBinding(ctx);
npm ERR! ^
npm ERR!
npm ERR! Error: ENOENT: no such file or directory, lstat '/Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber/mon-aide-cyber-ui/node_modules/@codegouvfr/react-dsfr/dsfr'
npm ERR! at lstatSync (node:fs:1593:3)
npm ERR! at statFunc (node:internal/fs/cp/cp-sync:122:15)
npm ERR! at getStatsSync (node:internal/fs/cp/cp-sync:123:19)
npm ERR! at checkPathsSync (node:internal/fs/cp/cp-sync:72:33)
npm ERR! at cpSyncFn (node:internal/fs/cp/cp-sync:58:42)
npm ERR! at Object.cpSync (node:fs:2932:3)
npm ERR! at /Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber/node_modules/@codegouvfr/react-dsfr/bin/copy-dsfr-to-public.js:213:20
npm ERR! at step (/Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber/node_modules/@codegouvfr/react-dsfr/bin/copy-dsfr-to-public.js:58:23)
npm ERR! at Object.next (/Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber/node_modules/@codegouvfr/react-dsfr/bin/copy-dsfr-to-public.js:39:53)
npm ERR! at fulfilled (/Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber/node_modules/@codegouvfr/react-dsfr/bin/copy-dsfr-to-public.js:30:58) {
npm ERR! errno: -2,
npm ERR! syscall: 'lstat',
npm ERR! code: 'ENOENT',
npm ERR! path: '/Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber/mon-aide-cyber-ui/node_modules/@codegouvfr/react-dsfr/dsfr'
npm ERR! }
npm ERR!
npm ERR! Node.js v18.16.1
adding postinstall
, predev
and prebuild
in root directory package.json
return the following error:
> copy-dsfr-to-public
There is no public/ directory in the current working directory, we don't know your framework you are not calling this script
at the right location or we don't know your React framework please submit an issue about it here
https:://github.com/codegouvfr/react-dsfr/issues
npm ERR! code 255
npm ERR! path /Users/bertrandbougon/Projets/beta-gouv/mon-aide-cyber/mon-aide-cyber
npm ERR! command failed
npm ERR! command sh -c copy-dsfr-to-public
Expected behavior:
postinstall
, predev
and prebuild
in sub-project-1 package.json
root_directory/node_modules/@codegoufr/...
to sub-project-1/public
import { Alert } from "@codegouvfr/react-dsfr/Alert";
...
const [snackbarOpen, setSnackbarOpen] = useState(false);
const handleClose = useCallback(() => setSnackbarOpen(false), []);
...
<Alert
onClose={handleClose}
severity="success"
description="L'URL a bien été copié !"
closable
small
/>
Hi,
I just installed this repo in an empty Vite + React + TS template.
I noticed that the wrong path was added to my .gitignore
: /public\dsfr/
instead of /public/dsfr/
Therefore, the folder doesn't get ignored. I added the correct path on my own.
I'm on Windows so maybe that's why I got a wrong slash ?
Version : "@codegouvfr/react-dsfr": "^0.22.1"
Following the discussion here: #64
I ran an empty project with the Select component and encountered an error:
When we want a lik that look like a link but that is actually a button currently, the only option we offer is to use <a href="#" onClick={} />...
.
This ain't goot for accesibility.
We have to look if the dsfr provide a classe for making button look like or else create a component or something like this.
Bonjour,
j'ai rencontré un problème d'accessibilité au niveau de la nouvelle version du modal. en fait meme si je définis un boutton et un onClick pour ouvrir manuellemnt le modal. la fonction creatModal() semble créer un boutton invisible sans lui donner de text. ce qui est confirmé par les essais que j'ai fait. voici quelques photos du problème.
Merci
Hi
We need a translation dropdown in header for https://refugies.info/fr (we use this tool from dataesr implementation).
How can we implement this with codegouvfr/react-dsfr ?
Thanks
Error messages in components that use a fieldset (i.e. checkbox/radio/rich radio) are surrounded by <div class="fr-messages-group">
, and the p
child element has the fr-message
and fr-message--error
classes (see https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/case-a-cocher).
Without these classes the border on the left of the component doesn't render correctly.
I was wondering if it was necessary to add button native properties in the button inside search bar component.
I am using the Select component in 2 projects and I have an issue with the error state : the error message is showing as a valid message (green with the check icon)
When I inspect the error message, the paragraph has 2 classes (fr-valid-text fr-error-text).
I am using the code from the story : https://react-dsfr-components.etalab.studio/iframe.html?viewMode=docs&id=components-select--error-state&args=#error-state
Hi,
I'm currently working for the DINUM's Rizomo project, where we currently use MUI. We are considering using the DSFR as soon as possible, and therefore are interested to know more about it and where it stands in your current Roadmap ?
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.