@rte-ds/core 1.2.1

package/components/searchbar/docs/AccessibilityTable.tsx

@@ -0,0 +1,119 @@
+import AccessibilityTable from "../../../../design-docs/src/components/ComponentDocs/Overview/AccessibilityTable/AccessibilityTable";
+import type { AccessibilityCategory } from "../../../../design-docs/src/components/ComponentDocs/Overview/AccessibilityTable/AccessibilityTable";
+
+const searchbarAccessibilityData: AccessibilityCategory[] = [
+  {
+    category: "Navigation clavier 🖥️",
+    criteria: [
+      {
+        criterion: "Le champ est atteignable au clavier",
+        expectedResult:
+          "L'utilisateur peut accéder au champ avec TAB, en sortir avec TAB ou SHIFT+TAB, et éditer son contenu",
+        testMethod: "Navigation clavier avec TAB / SHIFT+TAB",
+      },
+      {
+        criterion: "Les éléments interactifs sont distincts",
+        expectedResult:
+          "Les boutons intégrés (ex : clear...) peuvent être atteints avec TAB et présentent un focus visible",
+        testMethod: "Navigation et tabulation dans le champ",
+      },
+    ],
+  },
+  {
+    category: "Focus visible 👀",
+    criteria: [
+      {
+        criterion: "Le focus est visible à l'interaction",
+        expectedResult:
+          "Un contour est visible lors du focus clavier et est perceptible dans tous les états (similaire à l'état active)",
+        testMethod: "Navigation clavier avec TAB / SHIFT+TAB",
+      },
+    ],
+  },
+  {
+    category: "Lecture par un lecteur d’écran 🔊",
+    criteria: [
+      {
+        criterion: "Le champ est correctement annoncé",
+        expectedResult: 'Le lecteur d\'écran annonce "champ de recherche" ou "search" avec le label associé',
+        testMethod: "Test avec NVDA, VoiceOver ou JAWS",
+      },
+      {
+        criterion: "Le label est lu, même s'il est caché",
+        expectedResult: "Le champ est associé à un aria-label ou aria-labelledby selon le contexte",
+        testMethod: "Inspection du DOM ou test vocal",
+      },
+      {
+        criterion: "Les relations entre éléments sont explicites",
+        expectedResult: "En cas de suggestions : aria-controls, aria-owns et aria-expanded sont utilisés correctement",
+        testMethod: "Inspecteur a11y / ARIA Live Regions",
+      },
+      {
+        criterion: 'Le bouton "effacer" (croix) est accessible et vocalisé',
+        expectedResult: 'L\'icône a un aria-label explicite ("Effacer la recherche")',
+        testMethod: "Test vocal en navigation clavier",
+      },
+    ],
+  },
+  {
+    category: "Contraste des couleurs 🎨",
+    criteria: [
+      {
+        criterion: "Le texte et les éléments visuels sont lisibles",
+        expectedResult: "Contraste entre fond et texte ≥ 4.5:1 (texte, icônes)",
+        testMethod: "Outils de contraste",
+      },
+      {
+        criterion: "Le contraste reste bon dans tous les états",
+        expectedResult: "Aucun état ne diminue la lisibilité (disabled, error...)",
+        testMethod: "Outils de contraste",
+      },
+    ],
+  },
+  {
+    category: "Taille et espace tactile 📱",
+    criteria: [
+      {
+        criterion: "Les éléments sont accessibles au doigt",
+        expectedResult: "Hauteur ≥ 24px (AA) et padding suffisant pour boutons tactiles",
+        testMethod: "Vérification manuelle ou test mobile ou simulateur tactile",
+      },
+    ],
+  },
+  {
+    category: "Alternatives textuelles 📝",
+    criteria: [
+      {
+        criterion: "Présence d'un label ou aria-label",
+        expectedResult: "L'information du champ est toujours disponible à l'assistance",
+        testMethod: "Inspection du code",
+      },
+      {
+        criterion: "Icônes décoratives masquées",
+        expectedResult: 'aria-hidden="true" sur la loupe décorative',
+        testMethod: "Lecture du DOM ou test vocal",
+      },
+    ],
+  },
+  {
+    category: "État et feedback visuel 🔄",
+    criteria: [
+      {
+        criterion: "L'état du champ est visible (focus, erreur, rempli...)",
+        expectedResult: "L'utilisateur voit en temps réel les changements d'état",
+        testMethod: "Vérification visuelle",
+      },
+      {
+        criterion: "Les transitions sont perceptibles mais non bloquantes",
+        expectedResult: "L'utilisateur ne rate pas d'info à cause d'un effet",
+        testMethod: "Vérification visuelle",
+      },
+    ],
+  },
+];
+
+const SearchbarAccessibilityTable = () => {
+  return <AccessibilityTable data={searchbarAccessibilityData} />;
+};
+
+export default SearchbarAccessibilityTable;

package/components/searchbar/docs/Behaviors.tsx

@@ -0,0 +1,130 @@
+import Accordion from "../../../../design-docs/src/components/Accordion/Accordion";
+import Heading from "../../../../design-docs/src/components/Heading/Heading";
+import Table from "../../../../design-docs/src/components/Table/Table";
+
+const Behaviors = () => {
+  return (
+    <div className="searchbar option-wrapper">
+      <Accordion title="Behaviors">
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          <div className="option-table focus">
+            <Heading id="focus" level={3}>
+              Focus
+            </Heading>
+            <Table options={focusOptions} />
+          </div>
+
+          <div className="option-table layout">
+            <Heading id="layout" level={3}>
+              Layout
+            </Heading>
+            <Table options={layoutOptions} />
+          </div>
+
+          <div className="option-table animations">
+            <Heading id="animations" level={3}>
+              Animations
+            </Heading>
+            <ul className="sb-unstyled">
+              <li>
+                Toutes les animations doivent respecter les préférences utilisateur <em>(prefers-reduced-motion)</em> et
+                être désactivables si nécessaire.
+              </li>
+              <li>
+                Les transitions doivent rester <strong>non-intrusives</strong> et ne jamais bloquer l'interaction ou la
+                lisibilité.
+              </li>
+            </ul>
+            <Table options={animationsOptions} />
+          </div>
+
+          <div className="option-table keyboard-interactions">
+            <Heading id="keyboard-interactions" level={3}>
+              Keyboard interactions
+            </Heading>
+            <Table options={keyboardInteractionsOptions} />
+          </div>
+
+          <div className="option-table autre-contextuel">
+            <Heading id="autre-contextuel" level={3}>
+              Autre/contextuel
+            </Heading>
+            <Table options={autreContextuelOptions} />
+          </div>
+        </div>
+      </Accordion>
+    </div>
+  );
+};
+
+const focusOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["Style de focus visible", "Passage au statut active quand focusé."],
+    ["Focus clavier", "Navigation naturelle avec Tab et Shift+Tab"],
+    [
+      "Pas de focus forcé au chargement ou à la navigation au clic",
+      "Le focus n'est pas imposé à l'ouverture d'une page ou lorsque la navigation se fait au clic",
+    ],
+  ],
+};
+
+const layoutOptions = {
+  headers: ["Nom", "Descriptif"],
+  lines: [
+    ["Flexible width{}", "La largeur est fixe mais adaptable lorsque définie par le designer"],
+    [
+      "Minimum width",
+      "96 pixels (3 fois la hauteur du champ). Garantit que les petits champs de recherche soient lisibles et faciles à cibler sur les appareils tactiles. Le min est de 72 pixels pour le variant compact spacing.",
+    ],
+    [
+      "Text overflow",
+      "Lorsque le texte saisi est trop long pour l'espace horizontal disponible dans le champ, le texte est tronqué.",
+    ],
+    [
+      "Assistive text overflow",
+      "Lorsque le texte d'aide est trop long pour l'espace horizontal disponible, wrapping pour former une autre ligne.",
+    ],
+    ["Flexible height", "Pas flexible, le texte reste sur une seule ligne."],
+    ["Max height", "Fixed height : 32px ou 24px pour le variant compacted"],
+  ],
+};
+
+const animationsOptions = {
+  headers: ["Fonction attendue", "Spécification", "Durée", "Modifiable"],
+  lines: [
+    [
+      'Apparition du bouton "clear"',
+      "La croix de suppression apparaît en fondu quand du texte est présent",
+      "150 ms",
+      "Oui (via token de durée d'animation standard - token à venir)",
+    ],
+    [
+      'Disparition du bouton "clear"',
+      "La croix disparaît lorsqu'on vide le champ",
+      "150 ms",
+      "Oui (via token de durée d'animation standard - token à venir)",
+    ],
+    ["Focus ring (anneau de focus)", "Animation d'apparition en fondu", "120 ms", "Cell Text"],
+  ],
+};
+
+const keyboardInteractionsOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["Tab navigation", "Accès logique : champ > bouton reset (si présent)"],
+    ["Entrée", "Déclenche l'événement de recherche ou soumet le formulaire"],
+    ["Escape", "Vide le champ de recherche"],
+  ],
+};
+
+const autreContextuelOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["HTML natif recommandé", '<input type="search"> est recommandé pour la sémantique et les comportements attendus'],
+    ["Effacement natif", "Permet aux navigateurs de proposer un clear button natif si supporté"],
+    ["Escape", "Vide le champ de recherche"],
+  ],
+};
+
+export default Behaviors;

package/components/searchbar/docs/Options.tsx

@@ -0,0 +1,127 @@
+import Accordion from "../../../../design-docs/src/components/Accordion/Accordion";
+import Heading from "../../../../design-docs/src/components/Heading/Heading";
+import Table from "../../../../design-docs/src/components/Table/Table";
+
+const Options = () => {
+  return (
+    <div className="searchbar option-wrapper">
+      <Accordion title="Options">
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          <div style={{ padding: "16px" }}>
+            <div className="option-header">
+              <p>
+                Les <b>options comprennent</b> les <b>états</b> et{" "}
+                <b>différentes formes que peut prendre le composant</b>
+                .
+                <br />
+                Elles incluent : Les états, les variants, les tailles, les éléments modifiables qui composent le
+                composant, etc.
+                <br />
+                Elles <b>n'incluent pas</b> les "Behaviors" qui correspondent à <b>comment le composant réagit</b>.
+              </p>
+            </div>
+          </div>
+
+          <div className="option-table interaction-state">
+            <Heading id="interaction-state" level={3}>
+              Interaction State
+            </Heading>
+            <Table options={interactionStateOptions} />
+          </div>
+
+          <div className="option-table sizes">
+            <Heading id="sizes" level={3}>
+              Sizes
+            </Heading>
+            <Table options={sizesOptions} />
+          </div>
+
+          <div className="option-table text-options">
+            <Heading id="text-options" level={3}>
+              Text Options
+            </Heading>
+            <Table options={textOptions} />
+          </div>
+
+          <div className="option-table other-components">
+            <Heading id="other-components" level={3}>
+              Other Components
+            </Heading>
+            <Table options={otherComponentsOptions} />
+          </div>
+
+          <div className="option-table boolean-options">
+            <Heading id="boolean-options" level={3}>
+              Boolean Options
+            </Heading>
+            <Table options={booleanOptions} />
+          </div>
+        </div>
+      </Accordion>
+    </div>
+  );
+};
+
+const interactionStateOptions = {
+  headers: ["Interaction State", "Purpose"],
+  lines: [
+    ["Enabled", "Etat par défaut : champ actif et éditable"],
+    ["Hover", "Apparence du champ au survol de la souris"],
+    ["Active", "Apparence du champ lorsqu'il est actif (clic puis remplissage)"],
+    ["Completed", "Uniquement sur figma."],
+    ["Disabled", "Champ grisé et inactif, non éditable"],
+  ],
+};
+
+const sizesOptions = {
+  headers: ["", "Size"],
+  lines: [
+    ["Default", "Le champ de recherche a une seule hauteur (largeur variable). 32 pixels de haut"],
+    [
+      "Compact Spacing",
+      "Le champ de recherche a une hauteur de 24 px (largeur variable). Ce variant est utilisé dans un contexte de composant : dans le dropdown ou en filtre d'un tableau. 24 pixels de haut",
+    ],
+  ],
+};
+
+const textOptions = {
+  headers: ["Option", "Description", "Règles et comportements"],
+  lines: [
+    [
+      "Label",
+      "Texte situé dans le champ de recherche, par défaut « Rechercher »",
+      "Le label par défaut est « Rechercher », mais il peut être personnalisé pour être plus spécifique dans des cas d'utilisation tels que la recherche ciblée ou pour donner du contexte, et encourager l'utilisateur à effectuer une recherche plus spécifique (par exemple \"Rechercher un template\"). Par défaut, le libellé est en style de texte normal avant la saisie d'un terme de recherche, afin de respecter les ratios de contraste et de montrer qu'il s'agit d'un libellé de champ, et non d'un texte d'insertion.",
+    ],
+    [
+      "Assistive Text",
+      "Texte associé au champ de recherche, sous le champ de remplissage, explicitant plus en détail la valeur demandée à l'utilisateur (contraintes, format, instructions, etc.)",
+      "Son contenu peut être modifié. Uniquement un texte de description est autorisé (pas d'état Error pour le champ de recherche)",
+    ],
+  ],
+};
+
+const otherComponentsOptions = {
+  headers: ["Composant", "Description", "Règles et comportements"],
+  lines: [
+    [
+      "Icône loupe",
+      "Icône à gauche du champ",
+      "Toujours positionnée à gauche, dans le champ de saisie et toujours visible. Non interactif.",
+    ],
+    [
+      "Icône croix",
+      "Icône à droite du champ",
+      "A droite dans le champ de saisie. Apparaît dès que l'utilisateur rentre au moins un caractère dans le champ. Interactif : bouton qui clear le champ. Si les résultats de la recherche sont affichés dans un menu ou une fenêtre contextuelle, la sélection de ce bouton fermera le menu et effacera le champ. Si un terme de recherche a été saisi et que les résultats sont apparus, la sélection de ce bouton effacera uniquement le champ et n'affectera pas la liste des résultats.",
+    ],
+  ],
+};
+
+const booleanOptions = {
+  headers: ["Propriété", "Description"],
+  lines: [
+    ["Show Reset Button", "Affiche ou masque l'icône croix qui se situe à droite dans le champ de saisie."],
+    ["Show Assistive Text", "Permet d'afficher ou masquer un texte descriptif optionnel affiché sous le champ."],
+  ],
+};
+
+export default Options;

package/components/searchbar/docs/Searchbar.mdx

@@ -0,0 +1,124 @@
+import { Meta } from "@storybook/blocks";
+
+import ComponentDocs from "../../../../design-docs/src/components/ComponentDocs/ComponentDocs";
+import DocsSection from "../../../../design-docs/src/components/DocsSection/DocsSection";
+import Accordion from "../../../../design-docs/src/components/Accordion/Accordion";
+import Gerkin from "../../../../design-docs/src/components/Guideline/Gerkin/Gerkin";
+import Paragraph from "../../../../design-docs/src/components/Paragraph/Paragraph";
+import Usage from "./Usage";
+import Options from "./Options";
+import Behaviors from "./Behaviors";
+import AccessibilityTable from "./AccessibilityTable";
+
+<Meta title="Composants/Searchbar" />
+
+<ComponentDocs
+  title="Searchbar"
+  description={
+    <Paragraph>
+      La <b>Searchbar</b> permet à un utilisateur de <b>rechercher du contenu textuel dans une interface</b>. Elle se compose d'un champ de saisie avec un label (visible ou masqué), souvent accompagné d'une icône de loupe. Elle peut proposer un bouton de suppression du contenu saisi ou un affichage de suggestions/autocomplétion. Elle est distincte d'un simple Text Input par son objectif spécifique de recherche et sa forme souvent compacte.
+    </Paragraph>
+  }
+  linkFigma="https://www.figma.com/design/Oe33roVZDpZNXWlEn25Z7x/02.0-Storybook?node-id=1454-10468&m=dev"
+  linkGithub={{
+    react: "https://github.com/rte-france/design-system-rte/tree/main/packages/react/src/components/searchbar",
+    angular: "https://github.com/rte-france/design-system-rte/tree/main/packages/angular/projects/ds-rte-lib/src/lib/components/searchbar"
+  }}
+  disponibility={{
+    design: {
+      figma: true,
+      guidelines: true,
+    },
+    code: {
+      react: true,
+      angular: true,
+    },
+  }}
+  changelog={[
+    {
+      version: "1.0.0",
+      date: "04 Décembre 2025",
+      changes: ["Livraison du composant"],
+    },
+  ]}
+  options={[
+    {
+      property: "interactionState",
+      value: "enabled / hover / active / completed / disabled",
+      defaultValue: "enabled",
+      dependance: "-",
+    },
+    {
+      property: "appearance",
+      value: "primary / secondary",
+      defaultValue: "primary",
+      dependance: "-",
+    },
+    {
+      property: "compactSpacing",
+      value: "true / false",
+      defaultValue: "false",
+      dependance: "-",
+    },
+    {
+      property: "label",
+      value: "text",
+      defaultValue: "Rechercher",
+      dependance: "-",
+    },
+    {
+      property: "showResetButton",
+      value: "true / false",
+      defaultValue: "false",
+      dependance: "interactionState = active / completed",
+    },
+    {
+      property: "showAssistiveText",
+      value: "true / false",
+      defaultValue: "false",
+      dependance: "-",
+    },
+    {
+      property: "mode",
+      value: "bleu-iceberg_light / bleu-iceberg_dark / violet_light / violet_dark / vert-foret_light / vert-foret_dark",
+      defaultValue: "bleu-iceberg_light",
+      dependance: "-",
+    },
+  ]}
+  guidelines={
+    <>
+      <DocsSection>
+        <p>
+          <i>Composant générique pouvant être utilisé par toutes les équipes de la DSIT.</i>
+        </p>
+        <Gerkin>
+          <ul>
+            <li>
+              En tant qu'utilisateur <b>recherchant une information</b>,
+            </li>
+            <li>
+              Je souhaite <b>pouvoir saisir du texte dans un champ de recherche dédié</b>,
+            </li>
+            <li>
+              Afin <b>d’afficher un résultat ou obtenir des suggestions pertinentes.</b>
+            </li>
+          </ul>
+        </Gerkin>
+      </DocsSection>
+      <DocsSection>
+        <Usage />
+      </DocsSection>
+      <DocsSection>
+        <Options />
+      </DocsSection>
+      <DocsSection>
+        <Behaviors />
+      </DocsSection>
+    </>
+  }
+  accessibility={
+    <Accordion title="Accessibility Testing Status">
+      <AccessibilityTable />
+    </Accordion>
+  }
+/>

package/components/searchbar/docs/Usage.tsx

@@ -0,0 +1,37 @@
+import Table from "../../../../design-docs/src/components/Table/Table";
+import UsageTemplate from "../../../../design-docs/src/components/Usage/Usage";
+
+import doNotSvg from "./assets/doNot.svg";
+
+const Usage = () => {
+  const contentStandards = (
+    <>
+      <p className="title">
+        Content Standards <span>(UX Writing)</span>
+      </p>
+      <Table options={contentStandardsTable} />
+    </>
+  );
+
+  return (
+    <div className="searchbar">
+      <UsageTemplate image={doNotSvg} contentStandards={contentStandards} />
+    </div>
+  );
+};
+
+const contentStandardsTable = {
+  headers: ["Critère", "Description détaillée"],
+  lines: [
+    [
+      "Label",
+      "Par défaut : \"Rechercher\"\n. Le label et le texte sont les éléments à afficher.\nPar défaut, Le Label est un style simple quand possible.\nLe texte de description s'affiche uniquement lorsque l'utilisateur interagit avec le champ.",
+    ],
+    [
+      "Texte d'aide (description)",
+      "Situé sous le champ afin de fournir un contexte supplémentaire ou des instructions sur les informations à saisir. La description fournit des informations utiles, telles que l'étendue de la recherche.",
+    ],
+  ],
+};
+
+export default Usage;