feat: legg til støtte for å midtstille tekst i celle og header

fremtind · Jan 23, 2024 · 9e82d87 · 9e82d87
1 parent 7369e4d
commit 9e82d87
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/packages/table-react/src/TableCell.tsx b/packages/table-react/src/TableCell.tsx
@@ -9,7 +9,7 @@ export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
      * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.
      * @default "left"
      */
-    align?: "left" | "right";
+    align?: "left" | "center" | "right";
     /**
      * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.
      * @default "top"
@@ -24,7 +24,8 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
             <td
                 className={cx("jkl-table-cell", className, {
                     ["jkl-table-cell--align-right"]: align === "right",
-                    ["jkl-table-cell--align-center"]: verticalAlign === "center",
+                    ["jkl-table-cell--align-center"]: align === "center",
+                    ["jkl-table-cell--vertical-align-center"]: verticalAlign === "center",
                 })}
                 {...rest}
                 data-density={density || contextDensity}

diff --git a/packages/table-react/src/TableHeader.tsx b/packages/table-react/src/TableHeader.tsx
@@ -14,7 +14,7 @@ export interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement>
      * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.
      * @default "left"
      */
-    align?: "left" | "right";
+    align?: "left" | "center" | "right";
     /**
      * Si om headeren gjelder for en kolonne eller en rad
      * @default "col"
@@ -49,6 +49,7 @@ const TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>((props, r
             className={cn("jkl-table-header", className, {
                 ["jkl-table-header--bold"]: bold,
                 ["jkl-table-header--align-right"]: align === "right",
+                ["jkl-table-header--align-center"]: align === "center",
                 ["jkl-table-header--sr-only"]: srOnly,
                 ["jkl-table-header--sortable"]: typeof sortable !== "undefined",
             })}

diff --git a/packages/table/_table-cell.scss b/packages/table/_table-cell.scss
@@ -25,10 +25,14 @@
     text-align: left;
     vertical-align: top;
 
-    &--align-center {
+    &--vertical-align-center {
         vertical-align: baseline;
     }
 
+    &--align-center {
+        text-align: center;
+    }
+
     &--align-right {
         text-align: right;
     }

diff --git a/packages/table/_table-header.scss b/packages/table/_table-header.scss
@@ -19,6 +19,10 @@
     text-align: left;
     white-space: nowrap;
 
+    &--align-center {
+        text-align: center;
+    }
+
     &--align-right {
         text-align: right;
     }