Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the Tile component #150

Open
garronej opened this issue Jul 25, 2023 · 2 comments
Open

Update the Tile component #150

garronej opened this issue Jul 25, 2023 · 2 comments

Comments

@garronej
Copy link
Collaborator

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/

@sbourdon13
Copy link
Contributor

Hi,
I needed to use a tile with svg pictogram in my project, so I made a custom component (not really DSFR compliant 🙈).
https://github.com/DNUM-SocialGouv/champollion-front/blob/dev/app/src/components/AppPictoTile.tsx

For the svg, I copied the code from the Display component, to use the 3 pictogram colors. So in the parent component, I just need to import the svg and pass it as a prop. It’s pretty convenient that the tile component handles the svg to display the pictogram with correct DSFR colors (and correct colors for dark theme too).

import artworkCommunity from "@codegouvfr/react-dsfr/dsfr/artwork/pictograms/leisure/community.svg"

//...

<AppPictoTile
  title={title}
  //...
  pictogramUrl={artworkCommunity}
/>

It’s a very helpful piece of code to integrate the pictograms by the way, it could also be a helper function or a component maybe?

sbourdon13 pushed a commit to sbourdon13/react-dsfr that referenced this issue Aug 11, 2023
@slafayIGN
Copy link
Contributor

We are facing the same issue inserting pictograms with the right colors and reaction to light and dark themes.

image

Thanks @sbourdon13 for the code example: https://github.com/DNUM-SocialGouv/champollion-front/blob/dev/app/src/components/PictoTile.tsx#L42-L60

A change of the Tile component would be great with an additional property pictogramUrl in addition to imageUrl.

We're giving a try with @ocruze and hopefully make a pull request if successful.

ddecrulle pushed a commit that referenced this issue Jul 15, 2024
* feat: update Tile component #150

* docs: update stories of Tile component

* feat: update Tile component #150

* style: changes requested in code review

* style: changes requested in code review
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants