Skip to content

Commit 4c264aa

Browse files
garronejgarronej
committed
Update test apps
1 parent a0f8e74 commit 4c264aa

File tree

2 files changed

+15
-431
lines changed

2 files changed

+15
-431
lines changed

‎test/integration/cra/src/App.tsx

Lines changed: 13 additions & 266 deletions
Original file line numberDiff line numberDiff line change
@@ -1,289 +1,36 @@
1-
import artworkLightSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/light.svg";
2-
import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";
3-
import artworkSystemSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/system.svg";
1+
import { Alert } from "@codegouvfr/react-dsfr/Alert";
42
import { useIsDark, fr } from "@codegouvfr/react-dsfr";
3+
import { SwitchColorTheme } from "@codegouvfr/react-dsfr/SwitchColorTheme";
54

65
export function App() {
76
const { isDark, setIsDark } = useIsDark();
87

98
return (
109
<>
10+
<Alert
11+
isClosable={true}
12+
severity="success"
13+
title="Success: This is the title"
14+
description="This is the description"
15+
/>
1116

1217
<button className={fr.cx("fr-btn", "fr-icon-checkbox-circle-line", "fr-btn--icon-left")}>
13-
Label bouton MD
18+
Label bouton MD
1419
</button>
1520
<span className="fr-icon-ancient-gate-fill" aria-hidden="true"></span>
16-
<i className="fr-icon-ancient-gate-fill" aria-hidden="true"/>
21+
<i className="fr-icon-ancient-gate-fill" aria-hidden="true" />
1722

1823
<button className={fr.cx("fr-btn", "ri-24-hours-fill", "fr-btn--icon-left")}>
19-
Download
24+
Download
2025
</button>
2126

2227
<h1>Color Scheme: {isDark ? "dark" : "light"}</h1>
2328
<button onClick={() => setIsDark(true)}>Set color scheme to dark</button>
2429
<button onClick={() => setIsDark(false)}>Set color scheme to light</button>
2530
<button onClick={() => setIsDark("system")}>Set color scheme to system</button>
26-
<header role="banner" className="fr-header">
27-
<div className="fr-header__body">
28-
<div className="fr-container">
29-
<div className="fr-header__body-row">
30-
<div className="fr-header__brand fr-enlarge-link">
31-
<div className="fr-header__brand-top">
32-
<div className="fr-header__logo">
33-
<a
34-
href="https://example.fr"
35-
title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
36-
>
37-
<p className="fr-logo">
38-
Intitulé
39-
<br />
40-
officiel
41-
</p>
42-
</a>
43-
</div>
44-
<div className="fr-header__navbar">
45-
<button
46-
className="fr-btn--menu fr-btn"
47-
data-fr-opened="false"
48-
aria-controls="modal-491"
49-
aria-haspopup="menu"
50-
id="button-492"
51-
title="Menu"
52-
>
53-
Menu
54-
</button>
55-
</div>
56-
</div>
57-
</div>
58-
</div>
59-
</div>
60-
</div>
61-
<div
62-
className="fr-header__menu fr-modal"
63-
id="modal-491"
64-
aria-labelledby="button-492"
65-
>
66-
<div className="fr-container">
67-
<button
68-
className="fr-btn--close fr-btn"
69-
aria-controls="modal-491"
70-
title="Fermer"
71-
>
72-
Fermer
73-
</button>
74-
<div className="fr-header__menu-links"></div>
75-
<nav
76-
className="fr-nav"
77-
id="navigation-494"
78-
role="navigation"
79-
aria-label="Menu principal"
80-
>
81-
<ul className="fr-nav__list">
82-
<li className="fr-nav__item">
83-
<a
84-
className="fr-nav__link"
85-
href="https://example.com"
86-
target="_self"
87-
>
88-
accès direct
89-
</a>
90-
</li>
91-
<li className="fr-nav__item">
92-
<a
93-
className="fr-nav__link"
94-
href="https://example.com"
95-
target="_self"
96-
>
97-
accès direct
98-
</a>
99-
</li>
100-
<li className="fr-nav__item">
101-
<a
102-
className="fr-nav__link"
103-
href="https://example.com"
104-
target="_self"
105-
>
106-
accès direct
107-
</a>
108-
</li>
109-
<li className="fr-nav__item">
110-
<a
111-
className="fr-nav__link"
112-
href="https://example.com"
113-
target="_self"
114-
>
115-
accès direct
116-
</a>
117-
</li>
118-
</ul>
119-
</nav>
120-
</div>
121-
</div>
122-
<div className="fr-header__tools-links">
123-
<ul className="fr-links-group">
124-
<li>
125-
<button
126-
className={fr.cx("fr-link", "fr-icon-theme-fill", "fr-link--icon-left")}
127-
aria-controls="fr-theme-modal"
128-
data-fr-opened="false"
129-
>
130-
Paramètres d{"'"}affichage
131-
</button>
132-
</li>
133-
</ul>
134-
</div>
135-
</header>
13631

137-
<dialog id="fr-theme-modal" className="fr-modal" aria-labelledby="fr-theme-modal-title">
138-
<div className="fr-container fr-container--fluid fr-container-md">
139-
<div className="fr-grid-row fr-grid-row--center">
140-
<div className="fr-col-12 fr-col-md-6 fr-col-lg-4">
141-
<div className="fr-modal__body">
142-
<div className="fr-modal__header">
143-
<button
144-
className="fr-btn--close fr-btn"
145-
aria-controls="fr-theme-modal"
146-
title="Fermer"
147-
>
148-
Fermer
149-
</button>
150-
</div>
151-
<div className="fr-modal__content">
152-
<h1 id="fr-theme-modal-title" className="fr-modal__title">
153-
Paramètres d{"'"}affichage
154-
</h1>
155-
<div id="fr-display" className="fr-display">
156-
<div className="fr-form-group">
157-
<fieldset className="fr-fieldset">
158-
<legend
159-
className="fr-fieldset__legend fr-text--regular"
160-
id="-legend"
161-
>
162-
Choisissez un thème pour personnaliser
163-
l’apparence du site.
164-
</legend>
165-
<div className="fr-fieldset__content">
166-
<div className="fr-radio-group fr-radio-rich">
167-
<input
168-
value="light"
169-
type="radio"
170-
id="fr-radios-theme-light"
171-
name="fr-radios-theme"
172-
/>
173-
<label
174-
className="fr-label"
175-
htmlFor="fr-radios-theme-light"
176-
>
177-
Thème clair
178-
</label>
179-
<div className="fr-radio-rich__img">
180-
<svg
181-
xmlns="http://www.w3.org/2000/svg"
182-
className="fr-artwork"
183-
width="80px"
184-
height="80px"
185-
viewBox="0 0 80 80"
186-
>
187-
<use
188-
className="fr-artwork-decorative"
189-
xlinkHref={`${artworkLightSvgUrl}#artwork-decorative`}
190-
></use>
191-
<use
192-
className="fr-artwork-minor"
193-
xlinkHref={`${artworkLightSvgUrl}#artwork-minor`}
194-
></use>
195-
<use
196-
className="fr-artwork-major"
197-
xlinkHref={`${artworkLightSvgUrl}#artwork-major`}
198-
></use>
199-
</svg>
200-
</div>
201-
</div>
202-
<div className="fr-radio-group fr-radio-rich">
203-
<input
204-
value="dark"
205-
type="radio"
206-
id="fr-radios-theme-dark"
207-
name="fr-radios-theme"
208-
/>
209-
<label
210-
className="fr-label"
211-
htmlFor="fr-radios-theme-dark"
212-
>
213-
Thème sombre
214-
</label>
215-
<div className="fr-radio-rich__img">
216-
<svg
217-
xmlns="http://www.w3.org/2000/svg"
218-
className="fr-artwork"
219-
width="80px"
220-
height="80px"
221-
viewBox="0 0 80 80"
222-
>
223-
<use
224-
className="fr-artwork-decorative"
225-
xlinkHref={`${artworkDarkSvgUrl}#artwork-decorative`}
226-
></use>
227-
<use
228-
className="fr-artwork-minor"
229-
xlinkHref={`${artworkDarkSvgUrl}#artwork-minor`}
230-
></use>
231-
<use
232-
className="fr-artwork-major"
233-
xlinkHref={`${artworkDarkSvgUrl}#artwork-major`}
234-
></use>
235-
</svg>
236-
</div>
237-
</div>
238-
<div className="fr-radio-group fr-radio-rich">
239-
<input
240-
value="system"
241-
type="radio"
242-
id="fr-radios-theme-system"
243-
name="fr-radios-theme"
244-
/>
245-
<label
246-
className="fr-label"
247-
htmlFor="fr-radios-theme-system"
248-
>
249-
Système
250-
<span className="fr-hint-text">
251-
Utilise les paramètres système.
252-
</span>
253-
</label>
254-
<div className="fr-radio-rich__img">
255-
<svg
256-
xmlns="http://www.w3.org/2000/svg"
257-
className="fr-artwork"
258-
width="80px"
259-
height="80px"
260-
viewBox="0 0 80 80"
261-
>
262-
<use
263-
className="fr-artwork-decorative"
264-
xlinkHref={`${artworkSystemSvgUrl}#artwork-decorative`}
265-
></use>
266-
<use
267-
className="fr-artwork-minor"
268-
xlinkHref={`${artworkSystemSvgUrl}#artwork-minor`}
269-
></use>
270-
<use
271-
className="fr-artwork-major"
272-
xlinkHref={`${artworkSystemSvgUrl}#artwork-major`}
273-
></use>
274-
</svg>
275-
</div>
276-
</div>
277-
</div>
278-
</fieldset>
279-
</div>
280-
</div>
281-
</div>
282-
</div>
283-
</div>
284-
</div>
285-
</div>
286-
</dialog>
32+
<SwitchColorTheme />
33+
28734
</>
28835
);
28936
}

0 commit comments

Comments
 (0)