codegouvfr/react-dsfr

🇫🇷 The Frech Government Design system React toolkit

react-dsfr's Issues

Choose Hx level for Card title

The Card component title is always a h3 :

react-dsfr/src/Card.tsx

Lines 149 to 160 in 39140e5

	<h3 className={cx(fr.cx("fr-card__title"), classes.title)}>
	{linkProps !== undefined ? (
	<Link
	{...linkProps}
	className={cx(linkProps.className, classes.link)}
	>
	{title}
	</Link>
	) : (
	title
	)}
	</h3>

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)

MUI portability

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

Description in Alert component

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>?

Select component throwing error at runtime

Following the discussion here: #64

I ran an empty project with the Select component and encountered an error:

Add a french version of the README

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.

Working on ButtonsGroup

The select error state is not displaying the error message correctly

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

Add partners to footer component

As described here, footer component might have a partners section.

Provide a solution for jsx-a11y/anchor-is-valid

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.

Working on Password functional block

Implementation of "password functional block"

• Create password Block component
• Add "show/hide" toggle
• Add capslock icon

Button native properties in SearchBar component

I was wondering if it was necessary to add button native properties in the button inside search bar component.

Question : Why did you not use React.forwardRef() ?

Hello,

I am confused, why don't you use React.forwardRef for some components like <Button>, what is the explanation of this decision ?

[bug] style of error message in components that use a fieldset doesn't comply with dsfr

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.

Working on footer

https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pied-de-page

problème d'accessibilité sur les modals de la nouvelle version 0.6x.x

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

Keyboard navigation in Tabs component

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

Footer operatorLogo & next/image

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

Working on ConsentBanner

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?

Working on Header

Question: Support of the password block

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:

1. Add the toggle to display/hide the password text
2. Add the detection of the capslock

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

Add a publiccode.yml

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.

[BUG] Consent banner does not work as expected

• The "Personnaliser" modal appears behind the banner
• It appears that only the last item of the consents is stored in the store

[Help] Conflict with MUI in Storybook

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;
    }
}

Alert closable raises an error when clicking on close icon

1. I implement an Alert

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
 />

2. I try to click on close icon
3. It crashed
   

Working on MainNav

https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/navigation-principale/

Desync between storybook and code for RadioButtons

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:

Wrong path added to .gitignore

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"

Working on SkipLinks

Header and Footer should stay uncoupled

Context

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(); }

Pain

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.

Proposed Solutions

1. Undo what was done with zz_internal/brandTopAndHomeLinkProps.ts
2. Make this coupling login less strict with a warning instead to allow both mechanics
3. Expose setBrandTopAndHomeLinkProps() to be used in an isomorphic setup
4. Allow Header's quickAccessItems to accept "ReactNode" like navigation props

Bad spelling for "Acceuil" (Breadcrumb)

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!

nativeInputProps aren't passed to the underlying input in Upload component

Hi, I tried to use the Upload component and the onChangewas 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.

Support of button attributes on MainNavigation

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> ?

How to use custom favicon in next-appdir

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?

Working on Button

Translation in Header

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

Update the Tile component

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/

Working on Table component

Should be linked to PR #84.

Options

• With borders
• Without scroll
• With fixed layout
• With hidden caption
• With bottom caption
• With colour variants
• Examples :
  • CRA
  • Next appdir
  • Next pagesdir
  • Vite

Export 'createMuiDsfrTheme' function and allow theme options overriding

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

codegouvfr/react-dsfr vs dataesr/react-dsfr

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

Make `postinstall`, `predev` and `prebuild` work with npm workspaces

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:

• add postinstall, predev and prebuild in sub-project-1 package.json
• files are copied from root_directory/node_modules/@codegoufr/... to sub-project-1/public

No type on textarea

The 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.

only-includes-used-icons broken with mono repos.

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.

See: https://github.com/DISIC/monfranceconnect

ASSETS

Working on Tag component

Add title for footer links that open in a new tab

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 ?

Working on SideMenu component

Should be linked to PR #79.

Options

• Multilevel menu
• Max levels set to 3 (hardcoded)
• Positioning (sticky, sticky full height, aligned right)
• Responsive
• Examples :
  • Next appdir
  • Next pagesdir
  • CRA
  • Vite

Accept to enable Versel app.

@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 :)

Remix Icon is breaking QuickAccessItems into Header

Context

I just migrated 2 libs in my project :

• react-dsfr : 0.54.0 => 0.57.4
• tss-react : 4.5.2 => 4.7.4

Then I discovered these regression

Before

After

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"
      />

Solution path ?

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",
}

Notice component

Add Notice component from DSFR

See in DSFR documentation

Plutôt react-dsfr (que react_dsfr) ?

Je ne suis pas sûr du meilleur nom.