import { Meta, Story} from "@storybook/blocks";
import '../../../stories/styles/shared.css';
import * as HeaderBarStories from "../HeaderBar.stories.ts";
import * as UsagesStories from "./Usages.stories.ts";

<Meta of={HeaderBarStories} />

<div className="header">
  <h1>Usages</h1>
  
</div><Story of={UsagesStories.UsagePage} />

<br />

<br />

<img alt="HeaderBar1" src={'/HeaderBar1.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

<img alt="HeaderBar2" src={'/HeaderBar2.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

Pour les produits avec un faible nombre d’entrées dans le menu (inférieur à 6) la barre de navigation prend la forme d’une liste d’onglet. Cet affichage permet un aperçu direct des différentes fonctionnalités de la plateforme ainsi qu’un accès plus rapide à ces dernières.

<br />

<img alt="HeaderBar3" src={'/HeaderBar3.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

Pour les produits possédant (ou allant posséder) plus de 6 entrées, nous utilisons le menu burger issu de la refonte d’Ameli.fr. Anticipez dès la phase de conception le nombre de fonctionnalités prévues en version cible afin de choisir la version adaptée.

<br />

<img alt="HeaderBar4" src={'/HeaderBar4.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

<img alt="HeaderBar5" src={'/HeaderBar5.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

<img alt="HeaderBar6" src={'/HeaderBar6.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

<img alt="HeaderBar7" src={'/HeaderBar7.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

En mobile, quel que soit le nombre d’entrées nous utilisons toujours le burger menu.

<br />

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start' }}>
    <img alt="HeaderBar8" src={'/HeaderBar8.jpg'} style={{ maxWidth: '30%', marginRight: '20px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
    <img alt="HeaderBar9" src={'/HeaderBar9.jpg'} style={{ maxWidth: '30%', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
</div>

<br /><br />

Lorsque la toolbar est nécessaire, elle se trouve systématiquement en tant que premier élément du header. Il est possible de l’utiliser sans la partie permettant de sélectionner un public.

<br />

<img alt="HeaderBar10" src={'/HeaderBar10.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

<img alt="HeaderBar11" src={'/HeaderBar11.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

<br /><br />

Le slot de droite est à la main de chaque équipe produit.<br />
Il contiendra généralement un bouton de connexion devenant l’identifiant de connexion le cas échéant.<br />
Il est également possible d’y ajouter d’autres fonctionnalités selon les besoins, comme une recherche, un accès aux notifications...

<br />

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start', marginBottom: '10px' }}>
    <figcaption style={{ width: '30%', marginRight: '20px' }}>Exemple non-connecté</figcaption>
    <figcaption style={{ width: '30%', marginRight: '20px' }}>Exemple connecté</figcaption>
    <figcaption style={{ width: '30%' }}>Exemple connecté - active</figcaption>
</div>

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start' }}>
    <img alt="HeaderBar12" src={'/HeaderBar12.jpg'} style={{ maxWidth: '30%', marginRight: '20px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
    <img alt="HeaderBar13" src={'/HeaderBar13.jpg'} style={{ maxWidth: '30%', marginRight: '20px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
    <img alt="HeaderBar14" src={'/HeaderBar14.jpg'} style={{ maxWidth: '30%', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
</div>