feat(table): remove color variant and add cell alignment

codegouvfr · Nov 7, 2024 · 2b213f6 · 2b213f6
1 parent ae92dc8
commit 2b213f6
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 71 deletions.
diff --git a/src/Table.tsx b/src/Table.tsx
@@ -23,22 +23,20 @@ export type TableProps = {
     noCaption?: boolean;
     /** Default: false */
     bottomCaption?: boolean;
+    cellsAlignment?: (TableProps.Alignment | undefined)[][] | (TableProps.Alignment | undefined)[];
     size?: TableProps.Size;
     style?: CSSProperties;
-    colorVariant?: TableProps.ColorVariant;
 };
 
 export namespace TableProps {
     export type Size = "sm" | "md" | "lg";
 
-    type ExtractColorVariant<FrClassName> = FrClassName extends `fr-table--${infer AccentColor}`
-        ? Exclude<
-              AccentColor,
-              "no-scroll" | "no-caption" | "caption-bottom" | "layout-fixed" | "bordered" | Size
-          >
+    type ExtractCellClasses<FrClassName> = FrClassName extends `fr-cell--${infer Alignment}`
+        ? Alignment
         : never;
 
-    export type ColorVariant = ExtractColorVariant<FrClassName>;
+    export type Alignment = ExtractCellClasses<FrClassName> &
+        ("center" | "top" | "bottom" | "right");
 }
 
 /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/tableau>  */
@@ -55,7 +53,7 @@ export const Table = memo(
             noCaption = false,
             bottomCaption = false,
             size = "md",
-            colorVariant,
+            cellsAlignment = undefined,
             className,
             style,
             ...rest
@@ -68,24 +66,35 @@ export const Table = memo(
             "explicitlyProvidedId": id_props
         });
 
+        const getCellAlignment = (i: number, j: number): undefined | string => {
+            if (Array.isArray(cellsAlignment)) {
+                const rowCellsAlignement = cellsAlignment[i];
+                if (Array.isArray(rowCellsAlignement)) {
+                    const cellAlignement = rowCellsAlignement[j];
+                    return cellAlignement === undefined ? undefined : `fr-cell--${cellAlignement}`;
+                }
+
+                const cellAlignement = cellsAlignment[j];
+                return cellAlignement === undefined || Array.isArray(cellAlignement)
+                    ? undefined
+                    : `fr-cell--${cellAlignement}`;
+            }
+            return undefined;
+        };
+
         return (
             <div
                 id={id}
                 ref={ref}
                 style={style}
                 className={cx(
-                    fr.cx(
-                        size !== "md" && `fr-table--${size}`,
-                        "fr-table",
-                        {
-                            "fr-table--bordered": bordered,
-                            "fr-table--no-scroll": noScroll,
-                            "fr-table--layout-fixed": fixed,
-                            "fr-table--no-caption": noCaption,
-                            "fr-table--caption-bottom": bottomCaption
-                        },
-                        colorVariant !== undefined && `fr-table--${colorVariant}`
-                    ),
+                    fr.cx(size !== "md" && `fr-table--${size}`, "fr-table", {
+                        "fr-table--bordered": bordered,
+                        "fr-table--no-scroll": noScroll,
+                        "fr-table--layout-fixed": fixed,
+                        "fr-table--no-caption": noCaption,
+                        "fr-table--caption-bottom": bottomCaption
+                    }),
                     className
                 )}
             >
@@ -109,7 +118,9 @@ export const Table = memo(
                                     {data.map((row, i) => (
                                         <tr key={i}>
                                             {row.map((col, j) => (
-                                                <td key={j}>{col}</td>
+                                                <td key={j} className={cx(getCellAlignment(i, j))}>
+                                                    {col}
+                                                </td>
                                             ))}
                                         </tr>
                                     ))}

diff --git a/stories/Table.stories.tsx b/stories/Table.stories.tsx
@@ -1,8 +1,7 @@
-import { Table, type TableProps } from "../dist/Table";
+import { Table } from "../dist/Table";
 import { getStoryFactory } from "./getStory";
 import { sectionName } from "./sectionName";
-import { assert } from "tsafe/assert";
-import type { Equals } from "tsafe";
+import React from "react";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -36,35 +35,6 @@ const { meta, getStory } = getStoryFactory({
         "bottomCaption": {
             "description": "Move caption to bottom",
             "type": { "name": "boolean" }
-        },
-        "colorVariant": {
-            "options": (() => {
-                const options = [
-                    "green-tilleul-verveine",
-                    "green-bourgeon",
-                    "green-emeraude",
-                    "green-menthe",
-                    "green-archipel",
-                    "blue-ecume",
-                    "blue-cumulus",
-                    "purple-glycine",
-                    "pink-macaron",
-                    "pink-tuile",
-                    "brown-cafe-creme",
-                    "brown-caramel",
-                    "brown-opera",
-                    "orange-terre-battue",
-                    "yellow-moutarde",
-                    "yellow-tournesol",
-                    "beige-gris-galet",
-                    undefined
-                ] as const;
-
-                assert<Equals<typeof options[number], TableProps["colorVariant"]>>();
-
-                return options;
-            })(),
-            "control": { "type": "select", "labels": { "null": "no color variant" } }
         }
     }
 });
@@ -158,24 +128,6 @@ export const TableWithBottomCaption = getStory({
     ]
 });
 
-export const TableWithColorVariant = getStory({
-    "colorVariant": "green-emeraude",
-    "caption": "Titre du tableau",
-    "headers": ["td", "titre"],
-    "data": [
-        [
-            "Lorem ipsum dolor sit amet consectetur adipisicin",
-            "Lorem ipsum dolor sit amet consectetur"
-        ],
-        ["Lorem ipsum d", "Lorem ipsu"],
-        [
-            "Lorem ipsum dolor sit amet consectetur adipisicin",
-            "Lorem ipsum dolor sit amet consectetur"
-        ],
-        ["Lorem ipsum d", "Lorem ipsu"]
-    ]
-});
-
 export const SmallTable = getStory({
     "caption": "Titre du tableau",
     "headers": ["td", "titre"],
@@ -211,3 +163,42 @@ export const LargeTable = getStory({
     ],
     "size": "lg"
 });
+
+const CellWithBr = (
+    <span>
+        Lorem <br />
+        ipsu
+        <br />d
+    </span>
+);
+
+export const TableWithSomeColumnAlignement = getStory({
+    "caption": "Titre du tableau",
+    "headers": ["aligné à droite", "aligné au centre", "aligné en haut", "aligné en bas"],
+    "data": [
+        [CellWithBr, "Lorem ipsum d", "Lorem ipsum d", "Lorem ipsum d"],
+        ["Lorem ipsum d", CellWithBr, "Lorem ipsu", "Lorem ipsum d"],
+        ["Lorem ipsum d", "Lorem ipsum d", CellWithBr, "Lorem ipsum d"],
+        ["Lorem ipsum d", "Lorem ipsu", "Lorem ipsum d", CellWithBr]
+    ],
+    "size": "lg",
+    "cellsAlignment": ["right", "center", "top", "bottom"]
+});
+
+export const TableWithSomeCellAlignement = getStory({
+    "caption": "Titre du tableau",
+    "headers": ["colonne 1", "colonne 2", "colonne 3", "colonne 4"],
+    "data": [
+        ["aligné à droite", "Lorem ipsum d", "Lorem ipsum d", CellWithBr],
+        ["Lorem ipsum d", "aligné au centre", "Lorem ipsum d", CellWithBr],
+        ["Lorem ipsum d", "Lorem ipsum d", "aligné en haut", CellWithBr],
+        ["Lorem ipsum d", "Lorem ipsu", CellWithBr, "aligné en bas"]
+    ],
+    "size": "lg",
+    "cellsAlignment": [
+        ["right", undefined, undefined, undefined],
+        [undefined, "center", undefined, undefined],
+        [undefined, undefined, "top", undefined],
+        [undefined, undefined, undefined, "bottom"]
+    ]
+});