fix(Table): allow scope prop only for table header

kiwicom · Feb 27, 2025 · 6910869 · 6910869
1 parent 2cfdf1e
commit 6910869
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 46 deletions.
diff --git a/packages/orbit-components/src/Table/README.md b/packages/orbit-components/src/Table/README.md
@@ -40,10 +40,10 @@ Table below contains all types of the props available in the Table component.
 
 | Name         | Type            | Default     | Description                                                                                |
 | :----------- | :-------------- | :---------- | :----------------------------------------------------------------------------------------- |
-| **children** | `React.Node`    |             | The content of the Table, normally [`TableHead`](#tablehead) or [`TableHead`](#TableHead). |
+| **children** | `React.Node`    |             | The content of the Table, normally [`TableHead`](#tablehead) or [`TableBody`](#tablebody). |
 | compact      | `boolean`       | `false`     | If `true`, the Table will have more compact styles.                                        |
 | dataTest     | `string`        |             | Optional prop for testing purposes.                                                        |
-| id           | `string`        |             | Set `id` for `Table`                                                                       |
+| id           | `string`        |             | Set `id` for Table.                                                                        |
 | striped      | `boolean`       | `true`      | Functionality of table where every second line is grey                                     |
 | type         | [`enum`](#enum) | `"primary"` | The type of Table.                                                                         |
 
@@ -113,15 +113,15 @@ import TableCell from "@kiwicom/orbit-components/lib/Table/TableCell";
 
 Table below contains all types of the props in TableCell component.
 
-| Name          | Type            | Default  | Description                                                                                                                                                         |
-| :------------ | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| align         | [`enum`](#enum) | `"left"` | The align of text in the TableCell.                                                                                                                                 |
-| as            | [`enum`](#enum) | `"td"`   | possibility to render TableCell in different HTML                                                                                                                   |
-| children      | `React.Node`    |          | The content of the TableCell.                                                                                                                                       |
-| dataTest      | `string`        |          | Optional prop for testing purposes.                                                                                                                                 |
-| scope         | [`enum`](#enum) |          | The scope attribute identifies whether a table header is a column header or a row header. More about a11y reasons [here](https://webaim.org/techniques/tables/data) |
-| verticalAlign | [`enum`](#enum) |          | The vertical align of the content in the TableCell.                                                                                                                 |
-| whiteSpace    | [`enum`](#enum) |          | The white-space setting of text in the TableCell.                                                                                                                   |
+| Name          | Type            | Default  | Description                                                                                                                      |
+| :------------ | :-------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------- |
+| align         | [`enum`](#enum) | `"left"` | The align of text in the TableCell.                                                                                              |
+| as            | [`enum`](#enum) | `"td"`   | Possibility to render TableCell in different HTML.                                                                               |
+| children      | `React.Node`    |          | The content of the TableCell.                                                                                                    |
+| dataTest      | `string`        |          | Optional prop for testing purposes.                                                                                              |
+| scope         | [`enum`](#enum) |          | Can be set only when `as="th"`. Identifies whether a table header is a column header or a row header. See the Accessibility tab. |
+| verticalAlign | [`enum`](#enum) |          | The vertical align of the content in the TableCell.                                                                              |
+| whiteSpace    | [`enum`](#enum) |          | The white-space setting of text in the TableCell.                                                                                |
 
 #### enum
 

diff --git a/packages/orbit-components/src/Table/Table.stories.tsx b/packages/orbit-components/src/Table/Table.stories.tsx
@@ -2,8 +2,9 @@ import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ALIGN_OPTIONS, WHITE_SPACE } from "./TableCell/consts";
-import { TYPE_OPTIONS, TYPE_AS } from "./consts";
+import { TYPE_OPTIONS } from "./consts";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
+import type { Props } from "./TableCell/types";
 
 import Table, { TableFooter, TableHead, TableBody, TableRow, TableCell } from ".";
 
@@ -15,8 +16,7 @@ const tableRow = (
   </TableRow>
 );
 
-type TablePropsAndCustomArgs = React.ComponentProps<typeof Table> &
-  React.ComponentProps<typeof TableCell>;
+type TablePropsAndCustomArgs = React.ComponentProps<typeof Table> & Omit<Props, "as" | "scope">;
 
 const meta: Meta<TablePropsAndCustomArgs> = {
   title: "Table",
@@ -50,7 +50,7 @@ export const Playground: Story = {
         <TableHead>
           <TableRow>
             {Array.from({ length: 4 }, (_, idx) => (
-              <TableCell key={idx} {...args}>
+              <TableCell as="th" scope="col" key={idx} {...args}>
                 {children}
               </TableCell>
             ))}
@@ -93,8 +93,6 @@ export const Playground: Story = {
     verticalAlign: "middle",
     whiteSpace: WHITE_SPACE.NOWRAP,
     children: "Lorem ipsum dolor sit amet",
-    as: TYPE_AS.TD,
-    scope: "col",
   },
 
   argTypes: {
@@ -111,13 +109,6 @@ export const Playground: Story = {
     },
     // TableCell category
     children: { table: { category: "TableCell" } },
-    scope: {
-      options: ["col", "row", "colgroup", "rowgroup"],
-      control: {
-        type: "select",
-      },
-      table: { category: "TableCell" },
-    },
     align: {
       options: Object.values(ALIGN_OPTIONS),
       control: {
@@ -139,13 +130,6 @@ export const Playground: Story = {
       },
       table: { category: "TableCell" },
     },
-    as: {
-      options: Object.values(TYPE_AS),
-      control: {
-        type: "select",
-      },
-      table: { category: "TableCell" },
-    },
   },
 };
 

diff --git a/packages/orbit-components/src/Table/TableCell/index.tsx b/packages/orbit-components/src/Table/TableCell/index.tsx
@@ -20,15 +20,16 @@ const whitespaceStyles: Record<WhiteSpace, string> = {
   "pre-wrap": "whitespace-pre-wrap",
 };
 
-const TableCell = ({
-  align = ALIGN_OPTIONS.LEFT,
-  scope,
-  as: Component = TYPE_AS.TD,
-  verticalAlign,
-  whiteSpace,
-  dataTest,
-  children,
-}: Props) => {
+const TableCell = (props: Props) => {
+  const {
+    align = ALIGN_OPTIONS.LEFT,
+    as: Component = TYPE_AS.TD,
+    verticalAlign,
+    whiteSpace,
+    dataTest,
+    children,
+  } = props;
+
   return (
     <Component
       className={cx(
@@ -40,7 +41,7 @@ const TableCell = ({
         (align === ALIGN_OPTIONS.END || align === ALIGN_OPTIONS.RIGHT) && "text-end",
       )}
       data-test={dataTest}
-      scope={scope}
+      scope={props.as === TYPE_AS.TH ? props.scope : undefined}
     >
       {children}
     </Component>

diff --git a/packages/orbit-components/src/Table/TableCell/types.d.ts b/packages/orbit-components/src/Table/TableCell/types.d.ts
@@ -3,15 +3,20 @@
 import type { SharedProps } from "../types";
 
 export type Align = "start" | "end" | "left" | "center" | "right";
-export type As = "th" | "td";
 export type Scope = "col" | "row" | "colgroup" | "rowgroup";
 export type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
 export type VerticalAlign = "baseline" | "middle" | "top" | "bottom";
 
-export interface Props extends SharedProps {
-  readonly as?: As;
-  readonly scope?: Scope;
+export type Props = SharedProps & {
   readonly align?: Align;
   readonly whiteSpace?: WhiteSpace;
   readonly verticalAlign?: VerticalAlign;
-}
+} & (
+    | {
+        readonly as?: "th";
+        readonly scope?: Scope;
+      }
+    | {
+        readonly as?: "td";
+      }
+  );