Skip to content

Commit

Permalink
fix: Multiple switch theme (#302)
Browse files Browse the repository at this point in the history
  • Loading branch information
@desoindx
desoindx authored Nov 25, 2022
1 parent 6a582aa commit 2766515
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 124 deletions.
254 changes: 138 additions & 116 deletions example/src/components/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { Link as RouterLink } from 'react-router-dom';

import {
Expand All @@ -17,123 +17,145 @@ import {
FooterBottom,
FooterCopy,
Link,
SwitchTheme,
} from '@dataesr/react-dsfr';

const FooterExample = () => (
<Footer>
<FooterTop>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink
asLink={<RouterLink to="/myFooterLink" />}
const FooterExample = () => {
const [isOpen, setIsOpen] = useState(false);

return (
<>
<Footer>
<FooterTop>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink
asLink={<RouterLink to="/myFooterLink" />}
>
Footer Link Router
</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
</FooterTop>
<FooterBody
description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Uenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
>
Footer Link Router
</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
<FooterTopCategory title="Nom de la catégorie">
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
</FooterTopCategory>
</FooterTop>
<FooterBody
description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Uenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
>
<Logo>Ministère de l‘enseignement supérieur de la rechercher et de l‘innovation</Logo>
<FooterOperator>
<img src="https://fakeimg.pl/145x81/" alt="texte alternatif" />
</FooterOperator>
<FooterBodyItem>
<Link href="https://legifrance.gouv.fr" target="_blank">
legifrance.gouv.fr
</Link>
</FooterBodyItem>
<FooterBodyItem>
<Link href="https://gouvernement.fr" target="_blank">
gouvernement.fr
</Link>
</FooterBodyItem>
<FooterBodyItem>
<Link href="https://service-public.fr" target="_blank">
service-public.fr
</Link>
</FooterBodyItem>
<FooterBodyItem>
<Link href="https://data.gouv.fr" target="_blank">
data.gouv.fr
</Link>
</FooterBodyItem>
</FooterBody>
<FooterPartners>
<FooterPartnersTitle>Nos partenaires</FooterPartnersTitle>
<FooterPartnersSecondaryTitle>et autres</FooterPartnersSecondaryTitle>
<FooterPartnersLogo
isMain
href="/"
imageSrc="https://dummyimage.com/140x80/000/fff.png&text=main-logo"
imageAlt="Logo 1"
/>
<FooterPartnersLogo
href="/"
imageSrc="https://dummyimage.com/100x80/000/fff.png&text=logo+2"
imageAlt="Logo 2"
/>
<FooterPartnersLogo
href="/"
imageSrc="https://dummyimage.com/100x80/000/fff.png&text=logo+3"
imageAlt="Logo 3"
/>
<FooterPartnersLogo
href="/"
imageSrc="https://dummyimage.com/100x80/000/fff.png&text=logo+4"
imageAlt="Logo 4"
/>
</FooterPartners>
<FooterBottom>
<FooterLink href="/">Accessibilité : totalement conforme</FooterLink>
<FooterLink href="/">Mentions légales</FooterLink>
<FooterLink href="/">Données personnelles</FooterLink>
<FooterLink href="/">Gestion des cookies</FooterLink>
<FooterLink href="/" target="_blank">Footer Link</FooterLink>
<FooterCopy>
<p>
Sauf mention contraire, tous les contenus de ce site sont sous
{' '}
<a
href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
target="_blank"
rel="noreferrer"
>
licence etalab-2.0
</a>
</p>
</FooterCopy>
</FooterBottom>
</Footer>
);
<Logo>Ministère de l‘enseignement supérieur de la rechercher et de l‘innovation</Logo>
<FooterOperator>
<img src="https://fakeimg.pl/145x81/" alt="texte alternatif" />
</FooterOperator>
<FooterBodyItem>
<Link href="https://legifrance.gouv.fr" target="_blank">
legifrance.gouv.fr
</Link>
</FooterBodyItem>
<FooterBodyItem>
<Link href="https://gouvernement.fr" target="_blank">
gouvernement.fr
</Link>
</FooterBodyItem>
<FooterBodyItem>
<Link href="https://service-public.fr" target="_blank">
service-public.fr
</Link>
</FooterBodyItem>
<FooterBodyItem>
<Link href="https://data.gouv.fr" target="_blank">
data.gouv.fr
</Link>
</FooterBodyItem>
</FooterBody>
<FooterPartners>
<FooterPartnersTitle>Nos partenaires</FooterPartnersTitle>
<FooterPartnersSecondaryTitle>et autres</FooterPartnersSecondaryTitle>
<FooterPartnersLogo
isMain
href="/"
imageSrc="https://dummyimage.com/140x80/000/fff.png&text=main-logo"
imageAlt="Logo 1"
/>
<FooterPartnersLogo
href="/"
imageSrc="https://dummyimage.com/100x80/000/fff.png&text=logo+2"
imageAlt="Logo 2"
/>
<FooterPartnersLogo
href="/"
imageSrc="https://dummyimage.com/100x80/000/fff.png&text=logo+3"
imageAlt="Logo 3"
/>
<FooterPartnersLogo
href="/"
imageSrc="https://dummyimage.com/100x80/000/fff.png&text=logo+4"
imageAlt="Logo 4"
/>
</FooterPartners>
<FooterBottom>
<FooterLink
onClick={() => setIsOpen(true)}
asLink={(
<button type="button">
<span
className="fr-fi-theme-fill fr-link--icon-left"
aria-controls="fr-theme-modal"
data-fr-opened={isOpen}
>
Paramètres d’affichage
</span>
</button>
)}
/>
<FooterLink href="/">Accessibilité : totalement conforme</FooterLink>
<FooterLink href="/">Mentions légales</FooterLink>
<FooterLink href="/">Données personnelles</FooterLink>
<FooterLink href="/">Gestion des cookies</FooterLink>
<FooterLink href="/" target="_blank">Footer Link</FooterLink>
<FooterCopy>
<p>
Sauf mention contraire, tous les contenus de ce site sont sous
{' '}
<a
href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
target="_blank"
rel="noreferrer"
>
licence etalab-2.0
</a>
</p>
</FooterCopy>
</FooterBottom>
</Footer>
<SwitchTheme isOpen={isOpen} setIsOpen={setIsOpen} />
</>
);
};

export default FooterExample;
12 changes: 12 additions & 0 deletions src/components/interface/Footer/Footer.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,18 @@ SimpleCheckbox.args = {
/>
</FooterPartners>,
<FooterBottom>
<FooterLink
asLink={(
<button type="button">
<span
className="fr-fi-theme-fill fr-link--icon-left"
aria-controls="fr-theme-modal"
>
Paramètres d’affichage
</span>
</button>
)}
/>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
<FooterLink href="/">Footer Link</FooterLink>
Expand Down
2 changes: 1 addition & 1 deletion src/components/interface/Footer/FooterLink.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export type FooterLinkSection = 'bottom' | 'top';

export interface FooterLinkProps {
__TYPE?: any;
children: FooterLinkChildren;
children?: FooterLinkChildren;
href?: string;
onClick?: (...args: any[])=>any;
section?: FooterLinkSection;
Expand Down
3 changes: 2 additions & 1 deletion src/components/interface/Footer/FooterLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ FooterLink.defaultProps = {
href: '',
onClick: undefined,
target: '_self',
children: null,
};

FooterLink.propTypes = {
// eslint-disable-next-line react/no-unused-prop-types
__TYPE: typeValidation('FooterLink'),
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
href: PropTypes.string,
onClick: PropTypes.func,
section: PropTypes.oneOf(['bottom', 'top']),
Expand Down
7 changes: 1 addition & 6 deletions src/components/interface/SwitchTheme/SwitchTheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const SwitchTheme = ({
systemLabel,
systemHint,
}) => {
const [storedValue, setStoredValue] = useState('');
const [storedValue, setStoredValue] = useState(window.localStorage.getItem('prefers-color-scheme') || SYSTEM);

const themes = [
{ label: lightLabel, value: LIGHT, svg: <Light /> },
Expand All @@ -32,11 +32,6 @@ const SwitchTheme = ({
},
];

useEffect(() => {
const initialTheme = window.localStorage.getItem('prefers-color-scheme');
setStoredValue(initialTheme || SYSTEM);
}, [isOpen]);

useEffect(() => {
let tempTheme = storedValue;
if (!storedValue || storedValue === SYSTEM) {
Expand Down

0 comments on commit 2766515

Please sign in to comment.