ilandols-demo-badge

Badge flottant (bas-droite) qui affiche, au clic, une bulle avec les identifiants de démo d'un projet. Basé sur un Web Component (<ilandols-demo-badge>), utilisable dans n'importe quel projet — React aujourd'hui, autre chose demain.

Installation

npm install ilandols-demo-badge

Usage vanilla / HTML

<script type="module">
  import "ilandols-demo-badge";
</script>

<ilandols-demo-badge id="badge" heading="Compte de démo"></ilandols-demo-badge>

<script type="module">
  document.getElementById("badge").credentials = [
    { label: "Email", value: "[email protected]" },
    { label: "Mot de passe", value: "demo1234" },
  ];
</script>

Usage React

import { IlandolsDemoBadge } from "ilandols-demo-badge/react";

function App() {
  return (
    <IlandolsDemoBadge
      heading="Compte de démo"
      description="Accès sans inscription."
      credentials={[
        { label: "Email", value: "[email protected]" },
        { label: "Mot de passe", value: "demo1234" },
      ]}
    />
  );
}

Props / attributs

| Nom | Type | Description | | ------------- | -------------------- | ------------------------------------------------- | | icon | string | URL de l'icône du badge (défaut : icône générique) | | heading | string | Titre de la bulle | | description | string | Texte optionnel sous le titre | | credentials | {label, value}[]ou {label, credentials}[] | Champs affichés, copiables au clic sur "Copier" (voir Plusieurs comptes) | | hidden | boolean | Masque le badge | | lang | "fr" \| "en" | Langue du texte "J'ai compris" (défaut "en") |

En HTML pur, credentials peut aussi être passé en attribut JSON : credentials='[{"label":"Email","value":"[email protected]"}]'.

Plusieurs comptes

Pour proposer plusieurs profils de démo, passe à credentials une liste de comptes ({ label, credentials }) au lieu d'une liste de champs. Chaque compte est affiché dans sa propre section titrée :

<IlandolsDemoBadge
  heading="Comptes de démo"
  credentials={[
    {
      label: "Admin",
      credentials: [
        { label: "Email", value: "[email protected]" },
        { label: "Mot de passe", value: "demo1234" },
      ],
    },
    {
      label: "Client",
      credentials: [
        { label: "Email", value: "[email protected]" },
        { label: "Mot de passe", value: "demo1234" },
      ],
    },
  ]}
/>

L'équivalent en attribut JSON :

<ilandols-demo-badge
  credentials='[{"label":"Admin","credentials":[{"label":"Email","value":"[email protected]"}]},
                {"label":"Client","credentials":[{"label":"Email","value":"[email protected]"}]}]'
></ilandols-demo-badge>

S'il n'y a qu'un seul compte, son titre n'est pas affiché : le rendu est identique à celui d'une simple liste de champs.

Masquage

Le badge est cachable de deux façons :

• Par le développeur : <ilandols-demo-badge hidden> ou, en React, <IlandolsDemoBadge hidden />.
• Par le visiteur : un lien "J'ai compris" en bas de la bulle. Ce choix est mémorisé via sessionStorage — le badge reste caché tant que l'onglet reste ouvert (y compris après un rechargement), mais réapparaît dans un nouvel onglet/une nouvelle session.

Si plusieurs badges sont présents sur la même page, donne-leur un id distinct pour que leur masquage par le visiteur ne se mélange pas.

Développement

npm install
npm run dev       # playground de test dans le navigateur
npm run build     # build de la lib (dist/)
npm run typecheck