@rte-ds/core 1.2.1

package/components/select/docs/Behaviors.tsx

@@ -0,0 +1,155 @@
+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";
+import "./Options.scss";
+
+const Behaviors = () => {
+  return (
+    <div className="select 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 interactions">
+            <Heading id="interactions" level={3}>
+              Interactions
+            </Heading>
+            <Table options={interactionsOptions} />
+          </div>
+
+          <div className="option-table keyboard-interactions">
+            <Heading id="keyboard-interactions" level={3}>
+              Keyboard interactions
+            </Heading>
+            <Table options={keyboardInteractionsOptions} />
+          </div>
+
+          <div className="option-table placement">
+            <Heading id="placement" level={3}>
+              Placement
+            </Heading>
+            <Table options={placementOptions} />
+          </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", "Focus ring autour du champ, à 4px d'écart."],
+    ["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",
+      "64 pixels (2 fois la hauteur du champ). Garantit que les petits sélécteurs soient lisibles et faciles à cibler sur les appareils tactiles.",
+    ],
+    [
+      "Text overflow",
+      "Lorsque le label du champ et le texte du menu sont trop longs pour l'espace horizontal disponible, wrapping pour former une autre ligne. Le texte du champ lui-même est tronqué à la fin, mais le texte peut être affiché en entier dans le menu.",
+    ],
+    [
+      "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"],
+  ],
+};
+
+const animationsOptions = {
+  headers: ["Fonction attendue", "Spécification", "Durée", "Modifiable"],
+  lines: [
+    ["Ouverture menu", "Fade ou slide", "150 ms", "Oui"],
+    ["Fermeture menu", "Fade ou slide", "150 ms", "Oui"],
+    ["Focus ring (anneau de focus)", "Animation d'apparition en fondu", "120 ms", "Oui"],
+    ["Apparition message erreur", "Fade-in", "200 ms", "Oui"],
+  ],
+};
+
+const keyboardInteractionsOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["Tab navigation", "Navigue vers le champ."],
+    ["Enter / Space", "Ouvre ou ferme la liste."],
+    ["Flèches", "Parcourt les options."],
+    ["Escape", "Ferme la liste."],
+  ],
+};
+
+const placementOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["Liste déroulante", "S'affiche sous le champ."],
+    ["Position dynamique", "En haut si pas de place en bas."],
+  ],
+};
+
+const interactionsOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["Zone cliquable", "Toute la surface du champ."],
+    ["Clic sur champ", "Ouvre la liste."],
+    ["Sélection d'option", "Met à jour la valeur sélectionnée."],
+    ["ESC", "Ferme la liste"],
+    ["Clic hors du champ", "Ferme la liste"],
+  ],
+};
+
+const autreContextuelOptions = {
+  headers: ["Fonction attendue", "Spécification"],
+  lines: [
+    ["HTML natif recommandé", "<select> natif ou ARIA-compliant"],
+    ["aria-controls / aria-expanded", "Implémentés sur champ principal"],
+  ],
+};
+
+export default Behaviors;

package/components/select/docs/Options.scss

@@ -0,0 +1,26 @@
+@use '@design-system-rte/core/design-tokens/main-internal.scss' as *;
+
+.sbdocs {
+
+  .select.option-wrapper {
+    display: flex;
+    gap: $positive-spacing_200;
+    padding: $positive-spacing_200 0;
+    width: 100%;
+
+    .option-header {
+      border-radius: $radius-s;
+      background: var(--background-disabled);
+      padding: $positive-spacing_200;
+
+      p {
+        margin: 0;
+        @include typography-text-l;
+      }
+    }
+
+    .option-table {
+      padding: 0 $positive-spacing_200;
+    }
+  }
+}

package/components/select/docs/Options.tsx

@@ -0,0 +1,148 @@
+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";
+import "./Options.scss";
+
+const Options = () => {
+  return (
+    <div className="select 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 label-position">
+            <Heading id="label-position" level={3}>
+              Label Position
+            </Heading>
+            <Table options={labelPositionOptions} />
+          </div>
+
+          <div className="option-table required-indicator">
+            <Heading id="required-indicator" level={3}>
+              Required Indicator
+            </Heading>
+            <Table options={requiredIndicatorOptions} />
+          </div>
+
+          <div className="option-table boolean-options">
+            <Heading id="boolean-options" level={3}>
+              Boolean Options
+            </Heading>
+            <Table options={booleanOptions} />
+          </div>
+
+          <div className="option-table text-options">
+            <Heading id="text-options" level={3}>
+              Text Options
+            </Heading>
+            <Table options={textOptions} />
+          </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 lorsque la dropdown est ouverte)"],
+    ["Error", "Apparence du champ en erreur"],
+    ["Disabled", "Champ grisé et inactif, non éditable"],
+    ["Read Only", "Apparence comprenant du texte non modifiable et suffisamment contrasté"],
+  ],
+};
+
+const sizesOptions = {
+  headers: ["", "Size"],
+  lines: [
+    [
+      "Default",
+      "Le Select n'existe qu'en une seule taille. Le Select n'a qu'une seule hauteur (largeur variable) : 32 pixels de haut.",
+    ],
+  ],
+};
+
+const labelPositionOptions = {
+  headers: ["Label Position", "Purpose"],
+  lines: [
+    ["Top", "Le label est positionné au-dessus du champ (option par défaut)."],
+    ["Side", "Le label est aligné à gauche du champ, sur la même ligne (cas de formulaires denses)."],
+  ],
+};
+
+const requiredIndicatorOptions = {
+  headers: ["Apparence", "Purpose"],
+  lines: [
+    ["required", 'La mention "obligatoire" apparaît en rouge.'],
+    ["required icon only", "Une icône (astérisque) permet d'indiquer que le champ est obligatoire."],
+    ["optional", 'La mention "factulatif" apparaît en text italique.'],
+  ],
+};
+
+const textOptions = {
+  headers: ["Option", "Description", "Règles et comportements"],
+  lines: [
+    [
+      "Label",
+      "Texte associé au Select, décrivant la valeur devant être choisie par l'utilisateur.",
+      "Son contenu peut être modifié.",
+    ],
+    [
+      "Value",
+      "Text situé dans le corps du champ de sélection.",
+      "Ne s'affiche que sur une seule ligne et est cropé si le contenu dépasse la taille du champs (fortement déconseillé dans les guidelines)",
+    ],
+    [
+      "Assistive Text",
+      "Texte associé au Select, sous le champ, explicitant plus en détail la valeur demandée à l'utilisateur (contraintes, format, instructions, etc.)",
+      "Son contenu peut être modifié. Sa forme dépend de l'assistive text sélectionné. Dans le cas de l'erreur, il est toujours rouge et remplace les autres formes de descriptions.",
+    ],
+  ],
+};
+
+const booleanOptions = {
+  headers: ["Option", "Purpose"],
+  lines: [
+    ["Show Label", "Permet d'afficher ou masquer le label textuel autour du sélecteur."],
+    [
+      "Required / Optional",
+      "Permet d'indiquer que le champ est obligatoire. L'interface doit par ailleurs le signaler visuellement (texte : (obligatoire) / icon : astérisque / autre).",
+    ],
+    [
+      "Show Assistive Text",
+      "Permet d'afficher ou masquer un texte optionnel affiché sous le champ. Ce champ possède des options complémentaires : appearance (default, error) : permet de modifier la nature et les caractéristiques du message d'assistance ; showIcon (true ou false) : permet d'intégrer ou non une icône au début de son Assistive Text ; label : cf text option.",
+    ],
+  ],
+};
+
+export default Options;

package/components/select/docs/OverviewOptions.scss

@@ -0,0 +1,14 @@
+@use '@design-system-rte/core/design-tokens/main-internal.scss' as *;
+
+.rte-overview-options-subsections {
+  display: flex;
+  flex-direction: column;
+  gap: $positive-spacing_200;
+  margin-top: $positive-spacing_200;
+}
+
+.rte-overview-options-subsection {
+  display: flex;
+  flex-direction: column;
+  gap: $positive-spacing_100;
+}

package/components/select/docs/OverviewOptions.tsx

@@ -0,0 +1,67 @@
+import Heading from "../../../../design-docs/src/components/Heading/Heading";
+import Table from "../../../../design-docs/src/components/Table/Table";
+
+import "./OverviewOptions.scss";
+
+const OverviewOptions = () => {
+  return (
+    <div className="rte-overview-options-subsections">
+      <div className="rte-overview-options-subsection">
+        <Heading id="required-optional" level={3}>
+          Required / optionnal
+        </Heading>
+        <Table
+          options={{
+            headers: ["Property", "Value", "Default value", "Dependance"],
+            lines: [
+              [
+                "appearance",
+                "required / required icon only / optional",
+                "required icon only",
+                "required / optional = true",
+              ],
+            ],
+          }}
+        />
+      </div>
+
+      <div className="rte-overview-options-subsection">
+        <Heading id="assistive-text" level={3}>
+          Assistive text
+        </Heading>
+        <Table
+          options={{
+            headers: ["Property", "Value", "Default value", "Dependance"],
+            lines: [
+              ["appearance", "description / error / success / link", "description", "showAssistiveText = true"],
+              ["showIcon", "true / false", "true", "showAssistiveText = true"],
+              ["label", "text", "Description", "showAssistiveText = true"],
+            ],
+          }}
+        />
+      </div>
+
+      <div className="rte-overview-options-subsection">
+        <Heading id="select-content" level={3}>
+          selectContent
+        </Heading>
+        <Table
+          options={{
+            headers: ["Property", "Value", "Default value", "Dependance"],
+            lines: [
+              [
+                "selectType",
+                "singleSelect / multipleSelect",
+                "singleSelect",
+                "interactionState = active / completed (Figma Only) / error",
+              ],
+              ["showResetIcon", "true / false", "false", "interactionState = active / completed (Figma Only) / error"],
+            ],
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default OverviewOptions;

package/components/select/docs/Select.mdx

@@ -0,0 +1,132 @@
+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";
+import OverviewOptions from "./OverviewOptions";
+
+<Meta title="Composants/Select" />
+
+<ComponentDocs
+  title="Select"
+  description={
+    <Paragraph>
+      Le <b>Select</b> permet à l'utilisateur de <b>sélectionner une option unique</b> ou des <b>options multiples</b> parmi une liste d'options <b>ouvertes ou fermées</b>. Il affiche une étiquette (label) et le nom de l'option choisie. Il peut également contenir un texte d'aide et un message d'erreur.
+    </Paragraph>
+  }
+  linkFigma="https://www.figma.com/design/Oe33roVZDpZNXWlEn25Z7x/02.0-Storybook?node-id=691-30165&p=f&m=dev"
+  linkGithub={{
+    react: "https://github.com/rte-france/design-system-rte/tree/main/packages/react/src/components/select",
+    angular: "https://github.com/rte-france/design-system-rte/tree/main/packages/angular/projects/ds-rte-lib/src/lib/components/select"
+  }}
+  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 / error / disabled / readOnly",
+      defaultValue: "enabled",
+      dependance: "-",
+    },
+    {
+      property: "labelPosition",
+      value: "top / side",
+      defaultValue: "top",
+      dependance: "showLabel = true",
+    },
+    {
+      property: "showLabel",
+      value: "true / false",
+      defaultValue: "true",
+      dependance: "-",
+    },
+    {
+      property: "label",
+      value: "text",
+      defaultValue: "Label",
+      dependance: "showLabel = true",
+    },
+    {
+      property: "required / optional",
+      value: "true / false",
+      defaultValue: "false",
+      dependance: "-",
+    },
+    {
+      property: "showAssistiveText",
+      value: "true / false",
+      defaultValue: "false",
+      dependance: "-",
+    },
+    {
+      property: "value",
+      value: "text",
+      defaultValue: "Value",
+      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: "-",
+    },
+  ]}
+  optionsContent={<OverviewOptions />}
+  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>remplissant un formulaire</b>,
+            </li>
+            <li>
+              Je souhaite <b>pouvoir choisir une option prédéfinie dans une liste déroulante</b>,
+            </li>
+            <li>
+              Afin <b>de transmettre une donnée normée et restreinte (ex : pays, civilité…).</b>
+            </li>
+          </ul>
+        </Gerkin>
+      </DocsSection>
+      <DocsSection>
+        <Usage />
+      </DocsSection>
+      <DocsSection>
+        <Options />
+      </DocsSection>
+      <DocsSection>
+        <Behaviors />
+      </DocsSection>
+    </>
+  }
+  accessibility={
+    <Accordion title="Accessibility Testing Status">
+      <AccessibilityTable />
+    </Accordion>
+  }
+/>

package/components/select/docs/Usage.scss

@@ -0,0 +1,7 @@
+@use '@design-system-rte/core/design-tokens/main-internal.scss' as *;
+
+.sbdocs {
+  .subtitle {
+    @include typography-text-l-bold;
+  }
+}

package/components/select/docs/Usage.tsx

@@ -0,0 +1,39 @@
+import Table from "../../../../design-docs/src/components/Table/Table";
+import UsageTemplate from "../../../../design-docs/src/components/Usage/Usage";
+
+import doNotSvg from "./assets/doNot.svg";
+import "./Usage.scss";
+
+const Usage = () => {
+  const contentStandards = (
+    <>
+      <p className="title">
+        Content Standards <span>(UX Writing)</span>
+      </p>
+      <Table options={contentStandardsTable} />
+    </>
+  );
+
+  return (
+    <div className="select">
+      <UsageTemplate image={doNotSvg} contentStandards={contentStandards} />
+    </div>
+  );
+};
+
+const contentStandardsTable = {
+  headers: ["", "Description textuelle"],
+  lines: [
+    ["Label", 'Concis, descriptif (ex : "Pays", "Catégorie"). Majuscule en début de label et pas de ponctuation.'],
+    [
+      "Texte d'aide (description)",
+      "Situé sous le champ afin de fournir un contexte supplémentaire ou des instructions sur les informations à saisir.",
+    ],
+    [
+      "Erreur",
+      "Le texte d'erreur doit être rédigé en une ou deux phrases courtes et complètes, de manière claire et directe, avec un langage clair, tourné vers l'action. Les phrases doivent être terminées par un point et jamais par un point d'exclamation.",
+    ],
+  ],
+};
+
+export default Usage;