Skip to content

Commit 090eee1

Browse files
garronejgarronej
committed
Improve Header documentation
1 parent 976a32f commit 090eee1

File tree

1 file changed

+209
-128
lines changed

1 file changed

+209
-128
lines changed

‎stories/Header.stories.tsx‎

Lines changed: 209 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const { meta, getStory } = getStoryFactory({
1111
"wrappedComponent": { Header },
1212
"description": `
1313
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete)
14-
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Header/Header.tsx)
14+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Header.tsx)
1515
1616
See also [\\<MainNavigation \\/\\>](https://react-dsfr-components.etalab.studio/?path=/docs/components-mainnavigation)`,
1717
"argTypes": {
@@ -20,6 +20,14 @@ See also [\\<MainNavigation \\/\\>](https://react-dsfr-components.etalab.studio/
2020
},
2121
"homeLinkProps": {
2222
"control": { "type": null }
23+
},
24+
"navigation": {
25+
"description":
26+
"Note that navigation can be an array or a custom react node, see [navigation-as-custom-node](#navigation-as-custom-node)."
27+
},
28+
"quickAccessItems": {
29+
"description":
30+
"To integrate the Dark mode switch head over to the documentation of the [Display component](https://react-dsfr-components.etalab.studio/?path=/docs/components-display)"
2331
}
2432
},
2533
"disabledProps": ["lang"]
@@ -146,148 +154,221 @@ export const HeaderWithSearchEngine = getStory({
146154
)
147155
});
148156

149-
export const HeaderWithQuickAccessItemsNavItemsAndSearchEngine = getStory({
150-
"brandTop": (
151-
<>
152-
INTITULE
153-
<br />
154-
OFFICIEL
155-
</>
156-
),
157-
"homeLinkProps": {
158-
"href": "/",
159-
"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
160-
},
161-
"serviceTitle": "Nom du site / service",
162-
"serviceTagline": "baseline - précisions sur l'organisation",
163-
"quickAccessItems": [
164-
{
165-
"iconId": "fr-icon-add-circle-line",
166-
"text": "Créer un espace",
167-
"linkProps": {
168-
"href": "#"
169-
}
170-
},
171-
{
172-
"iconId": "fr-icon-lock-line",
173-
"text": "Se connecter",
174-
"linkProps": {
175-
"href": "#"
176-
}
177-
},
178-
{
179-
"iconId": "fr-icon-account-line",
180-
"text": "S’enregistrer",
181-
"linkProps": {
182-
"href": "#"
183-
}
184-
}
185-
],
186-
"navigation": [
187-
{
188-
"text": "accès direct",
189-
"linkProps": {
190-
"href": "#",
191-
"target": "_self"
192-
}
157+
export const HeaderWithQuickAccessItemsNavItemsAndSearchEngine = getStory(
158+
{
159+
"brandTop": (
160+
<>
161+
INTITULE
162+
<br />
163+
OFFICIEL
164+
</>
165+
),
166+
"homeLinkProps": {
167+
"href": "/",
168+
"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
193169
},
194-
{
195-
"text": "accès direct",
196-
"linkProps": {
197-
"href": "#",
198-
"target": "_self"
170+
"serviceTitle": "Nom du site / service",
171+
"serviceTagline": "baseline - précisions sur l'organisation",
172+
"quickAccessItems": [
173+
{
174+
"iconId": "fr-icon-add-circle-line",
175+
"text": "Créer un espace",
176+
"linkProps": {
177+
"href": "#"
178+
}
199179
},
200-
"isActive": true
201-
},
202-
{
203-
"text": "accès direct",
204-
"linkProps": {
205-
"href": "#",
206-
"target": "_self"
180+
{
181+
"iconId": "fr-icon-lock-line",
182+
"text": "Se connecter",
183+
"linkProps": {
184+
"href": "#"
185+
}
186+
},
187+
{
188+
"iconId": "fr-icon-account-line",
189+
"text": "S’enregistrer",
190+
"linkProps": {
191+
"href": "#"
192+
}
207193
}
208-
},
209-
{
210-
"text": "accès direct",
211-
"linkProps": {
212-
"href": "#",
213-
"target": "_self"
194+
],
195+
"navigation": [
196+
{
197+
"text": "accès direct",
198+
"linkProps": {
199+
"href": "#",
200+
"target": "_self"
201+
}
202+
},
203+
{
204+
"text": "accès direct",
205+
"linkProps": {
206+
"href": "#",
207+
"target": "_self"
208+
},
209+
"isActive": true
210+
},
211+
{
212+
"text": "accès direct",
213+
"linkProps": {
214+
"href": "#",
215+
"target": "_self"
216+
}
217+
},
218+
{
219+
"text": "accès direct",
220+
"linkProps": {
221+
"href": "#",
222+
"target": "_self"
223+
}
214224
}
215-
}
216-
],
217-
"renderSearchInput": ({ className, id, name, placeholder, type }) => (
225+
],
226+
"renderSearchInput": ({ className, id, name, placeholder, type }) => (
227+
<input
228+
className={className}
229+
id={id}
230+
name={name}
231+
placeholder={placeholder}
232+
type={type}
233+
/>
234+
)
235+
},
236+
{
237+
"description": `
238+
239+
\`\`\`tsx
240+
241+
<Header
242+
//...
243+
renderSearchInput={({ className, id, name, placeholder, type }) =>
218244
<input className={className} id={id} name={name} placeholder={placeholder} type={type} />
219-
)
220-
});
245+
}
246+
/>
247+
248+
\`\`\`
249+
250+
`
251+
}
252+
);
221253

222-
export const HeaderWithVerticalOperatorLogo = getStory({
223-
"brandTop": (
224-
<>
225-
INTITULE
226-
<br />
227-
OFFICIEL
228-
</>
229-
),
230-
"homeLinkProps": {
231-
"href": "/",
232-
"title":
233-
"Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française"
254+
export const HeaderWithVerticalOperatorLogo = getStory(
255+
{
256+
"brandTop": (
257+
<>
258+
INTITULE
259+
<br />
260+
OFFICIEL
261+
</>
262+
),
263+
"homeLinkProps": {
264+
"href": "/",
265+
"title":
266+
"Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française"
267+
},
268+
"renderSearchInput": ({ className, id, name, placeholder, type }) => (
269+
<input
270+
className={className}
271+
id={id}
272+
name={name}
273+
placeholder={placeholder}
274+
type={type}
275+
/>
276+
),
277+
"operatorLogo": {
278+
"orientation": "vertical",
279+
"imgUrl": placeholder_9x16ImgUrl,
280+
"alt": "[À MODIFIER - texte alternatif de l’image]"
281+
}
234282
},
235-
"renderSearchInput": ({ className, id, name, placeholder, type }) => (
283+
284+
{
285+
"description": `
286+
287+
\`\`\`tsx
288+
289+
<Header
290+
//...
291+
renderSearchInput={({ className, id, name, placeholder, type }) =>
236292
<input className={className} id={id} name={name} placeholder={placeholder} type={type} />
237-
),
238-
"operatorLogo": {
239-
"orientation": "vertical",
240-
"imgUrl": placeholder_9x16ImgUrl,
241-
"alt": "[À MODIFIER - texte alternatif de l’image]"
242293
}
243-
});
294+
/>
295+
296+
\`\`\`
297+
298+
`
299+
}
300+
);
244301

245-
export const WithHorizontalOperatorLogo = getStory({
246-
"brandTop": (
247-
<>
248-
INTITULE
249-
<br />
250-
OFFICIEL
251-
</>
252-
),
253-
"homeLinkProps": {
254-
"href": "/",
255-
"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
256-
},
257-
"serviceTitle": "Nom du site / service",
258-
"serviceTagline": "baseline - précisions sur l'organisation",
259-
"quickAccessItems": [
260-
{
261-
"iconId": "fr-icon-add-circle-line",
262-
"text": "Créer un espace",
263-
"linkProps": {
264-
"href": "#"
265-
}
266-
},
267-
{
268-
"iconId": "fr-icon-lock-line",
269-
"text": "Se connecter",
270-
"linkProps": {
271-
"href": "#"
272-
}
302+
export const WithHorizontalOperatorLogo = getStory(
303+
{
304+
"brandTop": (
305+
<>
306+
INTITULE
307+
<br />
308+
OFFICIEL
309+
</>
310+
),
311+
"homeLinkProps": {
312+
"href": "/",
313+
"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
273314
},
274-
{
275-
"iconId": "fr-icon-account-line",
276-
"text": "S’enregistrer",
277-
"linkProps": {
278-
"href": "#"
315+
"serviceTitle": "Nom du site / service",
316+
"serviceTagline": "baseline - précisions sur l'organisation",
317+
"quickAccessItems": [
318+
{
319+
"iconId": "fr-icon-add-circle-line",
320+
"text": "Créer un espace",
321+
"linkProps": {
322+
"href": "#"
323+
}
324+
},
325+
{
326+
"iconId": "fr-icon-lock-line",
327+
"text": "Se connecter",
328+
"linkProps": {
329+
"href": "#"
330+
}
331+
},
332+
{
333+
"iconId": "fr-icon-account-line",
334+
"text": "S’enregistrer",
335+
"linkProps": {
336+
"href": "#"
337+
}
279338
}
339+
],
340+
"renderSearchInput": ({ className, id, name, placeholder, type }) => (
341+
<input
342+
className={className}
343+
id={id}
344+
name={name}
345+
placeholder={placeholder}
346+
type={type}
347+
/>
348+
),
349+
"operatorLogo": {
350+
"orientation": "horizontal",
351+
"imgUrl": placeholder_16x9ImgUrl,
352+
"alt": "[À MODIFIER - texte alternatif de l’image]"
280353
}
281-
],
282-
"renderSearchInput": ({ className, id, name, placeholder, type }) => (
354+
},
355+
{
356+
"description": `
357+
358+
\`\`\`tsx
359+
360+
<Header
361+
//...
362+
renderSearchInput={({ className, id, name, placeholder, type }) =>
283363
<input className={className} id={id} name={name} placeholder={placeholder} type={type} />
284-
),
285-
"operatorLogo": {
286-
"orientation": "horizontal",
287-
"imgUrl": placeholder_16x9ImgUrl,
288-
"alt": "[À MODIFIER - texte alternatif de l’image]"
289364
}
290-
});
365+
/>
366+
367+
\`\`\`
368+
369+
`
370+
}
371+
);
291372

292373
export const NavigationAsCustomNode = getStory(
293374
{

0 commit comments

Comments
 (0)