User button (Bouton utilisateur)

Le bouton utilisateur permet d’accéder à la page de connexion ou aux informations de son compte.

Usage

• Il existe en 2 états : État par défaut / État connecté
• L’état par défaut permet de se connecter.
• Si l’utilisateur est déjà connecté, ce bouton permet d’accéder à son compte (paramètres de comptes, services, abonnements, déconnexion…).

Style & code

La structure est composée ici d’un <div> contenant un lien <a> pour activer la connexion et d’un <label> + case à cocher pour activer l’ouverture ou la fermeture du menu. La case à cocher est à placer où bon vous semble dans le DOM, le but étant qu’elle puisse influencer l’ouverture d’un menu. Cette construction, avec ces balises, répond aux besoins particuliers des sites de la Plateforme Ouest-France, mais si vous avez d’autres besoins techniques, vous pouvez changer ces éléments, tant que vous respectez la structure et les classes.

Non connecté

Pour construire ce composant, il faut donc un <div> avec la classe su-user, contenant 2 enfants (le lien et le label) portant chacun une classe : su-connection et su-show-menu, ainsi que le texte dans un <span>. Afin de ne pas doublonner inutilement du CSS, on utilisera aussi la classe su-button sur chacun des 2 « boutons » pour appliquer le style de base des boutons.

Par défaut, le composant affiche le bouton de connexion.

Au code du composant, a été ajouté la case à cocher et un bloc « menu », mais dans ce contexte, il ne se passe rien au clic.

<div class="su-user">
    <a href="javascript:;" class="su-button su-connection">
        <span>Se connecter</span>
    </a>
    <label for="open-my-space" class="su-button su-show-menu">
        <span>Mon espace</span>
    </label>
</div>
<input type="checkbox" id="open-my-space" class="su-hidden">
<div id="menu" class="su-hidden">Menu</div>

Connecté

Pour afficher le bouton utilisateur, ajoutez la classe su-connected à côté de su-user ou sur un parent.

Ici, cliquer sur le composant affiche le bloc menu…

<style>
    #open-my-space-2:checked ~ #menu2 {
        display: block !important;
        visibility: visible !important;
        border: 1px dashed gray;
    }
</style>

<div class="su-user su-connected">
    <a href="javascript:;" class="su-button su-connection">
        <span>Se connecter</span>
    </a>
    <label for="open-my-space-2" class="su-button su-show-menu">
        <span>Mon espace</span>
    </label>
</div>
<input type="checkbox" id="open-my-space-2" class="su-hidden">
<div id="menu2" class="su-hidden">Menu</div>

Inactif

Il suffit d’ajouter la classe su-disabled à côté du su-user pour lui donner l’aspect d’un bouton inactif. Pour qu’il soit réellement inactif, il faut bien sûr modifier le <a> (en le transformant en <span> par exemple) et ajouter disabled à l’input…

<div class="su-user su-disabled ">
    <span class="su-button su-connection surcharge-storybook">
        <span>Se connecter</span>
    </span>
    <label for="open-my-space-3" class="su-button su-show-menu">
        <span>Mon espace</span>
    </label>
</div>
<input type="checkbox" id="open-my-space-3" class="su-hidden" disabled>