@rte-ds/core 1.2.1

package/components/breadcrumbs/docs/Breadcrumbs.mdx

@@ -0,0 +1,104 @@
+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/Breadcrumbs" />
+
+<ComponentDocs
+  title="Breadcrumbs"
+  description={
+    <Paragraph>Le composant <b>Breadcrumb</b> (ou fil d'Ariane) permet d'indiquer visuellement le chemin de navigation jusqu'à la page en cours. Il facilite la compréhension de la hiérarchie de l'interface et offre un accès rapide aux pages parentes. Il se base sur le composant Link pour tous les comportements de navigation, de focus et d'accessibilité.</Paragraph>
+  }
+  linkFigma="https://www.figma.com/design/Wiy8uWsWjoagf95lOmPXNU/01.0-Design-System-RTE---WEB?node-id=2620-7306&p=f&m=dev"
+  linkGithub={{
+    react: "https://github.com/rte-france/design-system-rte/tree/main/packages/react/src/components/breadcrumbs",
+    angular: "https://github.com/rte-france/design-system-rte/tree/main/packages/angular/projects/ds-rte-lib/src/lib/components/breadcrumbs"
+  }}
+  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: "numberOfPages",
+      value: "1 / 2 / 3 / 3+",
+      defaultValue: "2",
+      dependance: "-",
+    },
+    {
+      property: "activePageLabel",
+      value: "Text",
+      defaultValue: "Active page",
+      dependance: "-",
+    },
+    {
+      property: "showBadge",
+      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>naviguant sur une interface</b>,
+            </li>
+            <li>
+              Je souhaite <b>visualiser clairement ma position dans l'arborescence du site ou de l'application</b>,
+            </li>
+            <li>
+              Afin de <b>comprendre le contexte de la page actuelle et revenir facilement à un niveau supérieur si besoin</b>.
+            </li>
+          </ul>
+        </Gerkin>
+      </DocsSection>
+      <DocsSection>
+        <Usage />
+      </DocsSection>
+      <DocsSection>
+        <Options />
+      </DocsSection>
+      <DocsSection>
+        <Behaviors />
+      </DocsSection>
+    </>
+  }
+  accessibility={
+    <Accordion title="Accessibility Testing Status">
+      <AccessibilityTable />
+    </Accordion>
+  }
+/>

package/components/breadcrumbs/docs/Options.scss

@@ -0,0 +1,26 @@
+@use '@design-system-rte/core/design-tokens/main-internal.scss' as *;
+
+.sbdocs {
+
+  .breadcrumb.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/breadcrumbs/docs/Options.tsx

@@ -0,0 +1,59 @@
+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="breadcrumb 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 number-of-pages">
+            <Heading id="number-of-pages" level={3}>
+              Number of Pages
+            </Heading>
+            <Table options={numberOfPages} />
+          </div>
+          <div className="option-table boolean-option">
+            <Heading id="boolean-options" level={3}>
+              Boolean options
+            </Heading>
+            <Table options={booleanOptions} />
+          </div>
+        </div>
+      </Accordion>
+    </div>
+  );
+};
+
+const numberOfPages = {
+  headers: ["Valeur", "Purpose"],
+  lines: [
+    ["1", "Page source"],
+    ["2", "2 pages visibles"],
+    ["3", "3 pages visibles"],
+    ["3+", 'Plus de 3 pages visibles. Structure : page source / "…" / avant-dernier / courant'],
+  ],
+};
+
+const booleanOptions = {
+  headers: ["Valeur", "Purpose"],
+  lines: [["showBadge", "Affiche un badge à côté de la page qui nécessite une notification"]],
+};
+
+export default Options;

package/components/breadcrumbs/docs/TabOfOptions.tsx

@@ -0,0 +1,19 @@
+import { TabOfOptions as CoreTabOfOptions } from "../../../../design-docs/src/components/TabOfOptions/TabOfOptions";
+
+const options = [
+  { property: "numberOfPages", value: "1 / 2 / 3 / 3+", defaultValue: "2", dependance: "-" },
+  { property: "activePageLabel", value: "Text", defaultValue: "Active page", dependance: "-" },
+  { property: "showBadge", 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: "-",
+  },
+];
+
+const TabOfOptions = () => {
+  return <CoreTabOfOptions options={options} />;
+};
+
+export default TabOfOptions;

package/components/breadcrumbs/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/breadcrumbs/docs/Usage.tsx

@@ -0,0 +1,28 @@
+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>
+      <div style={{ display: "flex", gap: "4px", flexDirection: "column" }}>
+        <p className="subtitle">Description textuelle</p>
+        <p className="description">
+          <b>Texte des liens</b> simples, compréhensibles, sans ponctuation finale.
+        </p>
+      </div>
+    </>
+  );
+
+  return (
+    <div className="breadcrumb">
+      <UsageTemplate image={doNotSvg} contentStandards={contentStandards} />
+    </div>
+  );
+};
+
+export default Usage;