@design-system-rte/core 1.2.1 → 1.2.2-rc1

package/components/badge/docs/Behaviors.tsx

@@ -1,110 +0,0 @@
-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 "./Behaviors.scss";
-
-const Behaviors = () => {
-  return (
-    <div className="badge 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>
-            <p>❌ Le badge ne reçoit jamais le focus</p>
-          </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>
-            <Heading id="apparition" level={4}>
-              Apparition
-            </Heading>
-            <ul className="sb-unstyled">
-              <li>
-                <strong>Spécification :</strong> Badge fade-in ou scale-up
-              </li>
-              <li>
-                <strong>Délai :</strong> 150ms
-              </li>
-              <li>
-                <strong>Modifiable :</strong> Oui
-              </li>
-            </ul>
-            <br />
-            <Heading id="disparition" level={4}>
-              Disparition
-            </Heading>
-            <ul className="sb-unstyled">
-              <li>
-                <strong>Spécification :</strong> Fade-out ou scale-down
-              </li>
-              <li>
-                <strong>Délai :</strong> 150ms
-              </li>
-              <li>
-                <strong>Modifiable :</strong> Oui
-              </li>
-            </ul>
-            <br />
-            <Heading id="mise-a-jour" level={4}>
-              Mise à jour
-            </Heading>
-            <ul className="sb-unstyled">
-              <li>
-                <strong>Spécification :</strong> Changement de valeur sans décalage visuel fort.
-              </li>
-              <li>
-                <strong>Délai :</strong> 150ms
-              </li>
-              <li>
-                <strong>Modifiable :</strong> Oui
-              </li>
-            </ul>
-          </div>
-
-          <div className="option-table keyboard-interactions">
-            <Heading id="keyboard-interactions" level={3}>
-              Keyboard interactions
-            </Heading>
-            <p>❌ Aucun comportement clavier requis</p>
-          </div>
-
-          <div className="option-table safezone">
-            <Heading id="safezone" level={3}>
-              Safezone
-            </Heading>
-            <ul className="sb-unstyled">
-              <li>Espacement recommandé : Espacement mouvementé entre badge et bord du parent : 2-4px</li>
-              <li>La safezone est définie par rapport au contenu du badge.</li>
-            </ul>
-          </div>
-        </div>
-      </Accordion>
-    </div>
-  );
-};
-
-const layoutOptions = {
-  headers: ["Nom", "Description"],
-  lines: [
-    ["Text position", "Texte centré verticalement et horizontalement."],
-    ["Truncation", "Pas de troncation."],
-    ["Wrapping", "Pas de text wrapping, texte en une seule ligne."],
-    ["Characters", "Un nombre maximal de caractère est fixé à 3 - Seulement des caractères numériques"],
-    ["Flexible width", "Le badge s'allonge jusqu'à atteindre la largeur max."],
-    ["Max width", "La largeur max est variable, le contenu étant fixé à 3 caractères."],
-    ["Flexible height", "Pas flexible, le texte reste sur une seule ligne."],
-  ],
-};
-
-export default Behaviors;

package/components/badge/docs/Options.tsx

@@ -1,90 +0,0 @@
-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="badge 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 badge-types">
-            <Heading id="badge-types" level={3}>
-              Badge Types
-            </Heading>
-            <Table options={badgeTypes} />
-          </div>
-
-          <div className="option-table taille">
-            <Heading id="taille" level={3}>
-              Taille
-            </Heading>
-            <Table options={tailleOptions} />
-          </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={otherComponents} />
-          </div>
-        </div>
-      </Accordion>
-    </div>
-  );
-};
-
-const badgeTypes = {
-  headers: ["Types", "Purpose", "Details"],
-  lines: [
-    ["Brand", "Couleur de la brand de l'interface.", "Possibilité d'activer une icône ou du texte."],
-    ["Neutral", "Badge en tons de gris.", "Possibilité d'activer une icône ou du texte."],
-    [
-      "Indicator",
-      "Notifie d'une nouveauté, de la disponibilité d'un élément, etc.",
-      "Possibilité d'activer une icône ou du texte.",
-    ],
-  ],
-};
-
-const tailleOptions = {
-  headers: ["Size", "Valeurs", "Contraintes"],
-  lines: [
-    ["Extra small", "6x6 px", "Pas d'icône ou de quantité possible."],
-    ["Small", "12x12 px", "Pas d'icône ou de quantité possible."],
-    ["Medium", "16x16 px", "hauteur fixe, largeur adaptable au contenu."],
-  ],
-};
-
-const textOptions = {
-  headers: ["Elément", "Description", "Règles et comportements"],
-  lines: [["Count", "Nombre affiché dans le badge", "1-3 chiffres max"]],
-};
-
-const otherComponents = {
-  headers: ["Composant", "Description", "Règle et comportements"],
-  lines: [["Icon", "Elément graphique optionnel pouvant remplacer le label", "Ne peut coexister avec le texte."]],
-};
-
-export default Options;

package/components/badge/docs/Usage.tsx

@@ -1,30 +0,0 @@
-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>
-      <div style={{ display: "flex", gap: "4px", flexDirection: "column" }}>
-        <p className="subtitle">Contenu numérique</p>
-        <p className="description">1 à 3 chiffres (ou caractères) max (ex : 1, 9, 32, 99+)</p>
-        <p className="subtitle">Contenu symbolique</p>
-        <p className="description">
-          Un point ou une puce colorée peut être utilisée pour signaler une nouveauté ou une présence. Pas de texte en
-          toutes lettres (ex : éviter "Nouveau", "Beaucoup").
-        </p>
-      </div>
-    </>
-  );
-
-  return (
-    <div className="badge">
-      <UsageTemplate image={doNotSvg} contentStandards={contentStandards} />
-    </div>
-  );
-};
-
-export default Usage;