@kaizen/components 0.0.0-canary-stable-bundler-20240515032425 → 0.0.0-canary-package-bundler-20240516051048

package/dist/types/Well/Well.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { WellBorderStyleType, WellVariantType } from "./types";
 export type WellProps = {
     children?: React.ReactNode;

package/dist/types/Workflow/Workflow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { FooterProps, HeaderProps } from "./subcomponents";
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & HeaderProps;
 /**

package/dist/types/Workflow/subcomponents/Footer/Footer.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { ProgressStepperProps } from "./components";
 export type FooterProps = {
     /** An action to return to a previous step */

package/dist/types/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type FooterActionsProps = {
     actionType?: "Previous" | "Next";
     action?: JSX.Element;

package/dist/types/Workflow/subcomponents/Footer/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type FooterRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const FooterRoot: {
     ({ children, classNameOverride, ...restProps }: FooterRootProps): JSX.Element;

package/dist/types/Workflow/subcomponents/Header/components/Actions/Actions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowActionsProps = {
     /**
      * Header actions will render in order of the array.

package/dist/types/Workflow/subcomponents/Header/components/Branding/Branding.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { BrandProps } from "../../../../../Brand";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { BrandProps } from "~components/Brand";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorflowBrandingProps = {
     variant?: BrandProps["variant"];
     alt: string;

package/dist/types/Workflow/subcomponents/Header/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type HeaderRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const HeaderRoot: {
     ({ children, classNameOverride, ...restProps }: HeaderRootProps): JSX.Element;

package/dist/types/Workflow/subcomponents/Header/components/Titles/Titles.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { DefaultTagProps } from "../../../../../Tag";
-import { OverrideClassName } from "../../../../../types/OverrideClassName";
+import { DefaultTagProps } from "~components/Tag";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowStatus = {
     /** @default: "statusDraft" */
     variant?: DefaultTagProps["variant"];

package/dist/types/Workflow/subcomponents/Main/Main.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/Workflow/subcomponents/Wrapper/Wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/__future__/Select/Select.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { UseFloatingReturn } from "@floating-ui/react-dom";
 import { SelectProps as AriaSelectProps } from "@react-stately/select";
 import { Key } from "@react-types/shared";
-import { OverrideClassName } from "../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { SelectPopoverContentsProps, SelectToggleProps } from "./subcomponents";
 import { SelectItem, SelectOption } from "./types";
 type OmittedAriaSelectProps = "children" | "items";

package/dist/types/__future__/Select/subcomponents/ListBox/ListBox.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { AriaListBoxOptions } from "@react-aria/listbox";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { SelectOption, SelectItem } from "../../types";
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<HTMLAttributes<HTMLUListElement>> & {
     children: React.ReactNode;

package/dist/types/__future__/Select/subcomponents/Option/Option.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { SelectOption, SelectOptionNode } from "../../types";
 export type OptionProps<Option extends SelectOption = SelectOption> = {
     item: SelectOptionNode<Option>;

package/dist/types/__future__/Select/subcomponents/Overlay/Overlay.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { SelectOption } from "../../types";
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;

package/dist/types/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type SelectToggleProps = {
     label: React.ReactNode;
     labelProps: DOMAttributes<FocusableElement>;

package/dist/types/__future__/Tag/RemovableTag/subcomponents/RemoveButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type RemoveButtonBaseProps = {
     ariaLabel: string;
     onClick: () => void;

package/dist/types/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.d.ts

@@ -1,2 +1,2 @@
-import type { IconProps } from "../../../../Icon/types";
+import type { IconProps } from "~components/Icon/types";
 export declare const RemoveTagIcon: (props: IconProps) => JSX.Element;

package/dist/types/__future__/Tag/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { TagColors } from "./types";
 export type TagProps = {
     children: ReactNode;

package/dist/types/__future__/Workflow/Workflow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { FooterProps, HeaderProps } from "./subcomponents";
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & Pick<HeaderProps, "workflowName" | "status" | "headerActions">;
 export declare const Workflow: {

package/dist/types/__future__/Workflow/subcomponents/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 import { ProgressStepperProps, FooterRootProps } from "./components";
 export type FooterProps = {
     /** An action to return to a previous step */

package/dist/types/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type FooterActionsProps = {
     actionType?: "Previous" | "Next";
     action?: JSX.Element;

package/dist/types/__future__/Workflow/subcomponents/Footer/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type FooterRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const FooterRoot: {
     ({ children, classNameOverride, ...restProps }: FooterRootProps): JSX.Element;

package/dist/types/__future__/Workflow/subcomponents/Header/components/Actions/Actions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowActionsProps = {
     /**
      * Header actions will render in order of the array.

package/dist/types/__future__/Workflow/subcomponents/Header/components/Branding/Branding.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { BrandProps } from "../../../../../../Brand";
-import { OverrideClassName } from "../../../../../../types/OverrideClassName";
+import { BrandProps } from "~components/Brand";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorflowBrandingProps = {
     variant?: BrandProps["variant"];
     alt: string;

package/dist/types/__future__/Workflow/subcomponents/Header/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type HeaderRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const HeaderRoot: {
     ({ children, classNameOverride, ...restProps }: HeaderRootProps): JSX.Element;

package/dist/types/__future__/Workflow/subcomponents/Header/components/Titles/Titles.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { DefaultTagProps } from "../../../../../../Tag";
-import { OverrideClassName } from "../../../../../../types/OverrideClassName";
+import { DefaultTagProps } from "~components/Tag";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowStatus = {
     /** @default: "statusDraft" */
     variant?: DefaultTagProps["variant"];

package/dist/types/__future__/Workflow/subcomponents/Main/Main.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/__future__/Workflow/subcomponents/Wrapper/Wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "../../../../types/OverrideClassName";
+import { OverrideClassName } from "~types/OverrideClassName";
 export type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/utils/isRefObject.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const isRefObject: (ref: React.ForwardedRef<any>) => ref is import("react").MutableRefObject<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-stable-bundler-20240515032425",
+  "version": "0.0.0-canary-package-bundler-20240516051048",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -23,8 +23,7 @@
   "module": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
   "sideEffects": [
-    "styles.css",
-    "tailwind.css.*"
+    "styles.css"
   ],
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.8",
@@ -72,10 +71,8 @@
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "style-inject": "^0.3.0",
-    "tslib": "^2.6.2",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
-    "@kaizen/package-bundler": "0.0.0-canary-stable-bundler-20240515032425",
     "@kaizen/hosted-assets": "2.0.3"
   },
   "dependenciesComments": {
@@ -97,12 +94,16 @@
     "sass": "^1.76.0",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
-    "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
-    "@kaizen/design-tokens": "10.3.20",
-    "@kaizen/package-bundler": "0.0.0-canary-stable-bundler-20240515032425",
-    "@kaizen/tailwind": "1.2.6"
+    "tslib": "^2.6.2",
+    "tsx": "^4.10.2",
+    "@kaizen/design-tokens": "0.0.0-canary-package-bundler-20240516051048",
+    "@kaizen/package-bundler": "0.0.0-canary-package-bundler-20240516051048"
+  },
+  "devDependenciesComments": {
+    "postcss": "Installed in root",
+    "postcss-cli": "Installed in root",
+    "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.6",
@@ -110,9 +111,8 @@
     "react-intl": "^6.6.6"
   },
   "scripts": {
-    "build": "pnpm package-bundler build-ui-library && pnpm styles:global",
-    "styles:global": "postcss ./styles/global.css --output dist/styles.css",
-    "help": "pnpm package-bundler help",
+    "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
+    "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "test:treeshake": "agadoo ./dist/esm/index.mjs",

package/src/Label/Label.tsx

@@ -33,8 +33,7 @@ export const Label = ({
       styles[labelType],
       reversed && styles.reversed,
       variant === "prominent" && styles.prominent,
-      disabled && styles.disabled,
-      "!kz-text-blue-400 kz-bg-yellow-400"
+      disabled && styles.disabled
     )}
     {...restProps}
   >

package/src/Table/Table.module.scss

@@ -20,10 +20,6 @@ $row-height-data-variant: 48px;
   &:focus {
     text-decoration: none;
   }
-
-  &.headerRowCellButtonReversed {
-    color: $color-white;
-  }
 }
 
 // Special Table-only button reset
@@ -35,6 +31,7 @@ $row-height-data-variant: 48px;
   margin: 0;
   padding: 0;
   transition: none; // override Murmur global styles :(
+  outline: none;
 }
 
 .container {
@@ -80,19 +77,55 @@ $row-height-data-variant: 48px;
 .headerRowCell .headerRowCellTooltip {
   display: flex;
   align-items: stretch;
+  max-width: 100%;
 }
 
-// overflow has to be set at this level as well as on the heading for some reason ¯\_(ツ)_/¯
-.headerRowCell.headerRowCellNoWrap .headerRowCellTooltip {
-  overflow: hidden;
+.headerRowCell.headerRowCellNoWrap .headerRowCellContent {
+  max-width: 100%;
 }
 
 .headerRowCellButton {
   @include button-reset;
   @include anchor-reset;
+
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      // This offset provide enough gap on reverse for contrast ratios
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(100% + #{$focus-ring-offset});
+      height: calc(100% + #{$focus-ring-offset});
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-500;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-radius: $border-focus-ring-border-radius;
+    }
+  }
+}
+
+.headerRowCellButtonReversed {
+  color: $color-white;
+
+  &:focus-visible::after {
+    border-color: $color-blue-100;
+  }
 }
 
-.headerRowCellButton,
 .headerRowCellNoButton {
   display: flex;
   align-items: stretch;
@@ -120,6 +153,10 @@ $row-height-data-variant: 48px;
   .headerRowCellActive & {
     color: $color-purple-800;
   }
+
+  .headerRowCellButtonReversed & {
+    color: $color-white;
+  }
 }
 
 .card {
@@ -154,6 +191,29 @@ $row-height-data-variant: 48px;
     will-change: box-shadow, border-color, margin, padding, width;
   }
 
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      // This offset provide enough gap on on reverse for contrast ratios
+      $focus-ring-offset: calc(#{$border-focus-ring-border-width} + 2px);
+
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(100% + #{$focus-ring-offset});
+      height: calc(100% + #{$focus-ring-offset});
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-500;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-radius: inherit;
+    }
+  }
+
   &.well {
     margin-top: $spacing-sm;
   }

package/src/Table/Table.tsx

@@ -13,6 +13,7 @@ import styles from "./Table.module.scss"
 
 export type TableContainerProps = {
   children?: React.ReactNode
+  /** @default "compact" */
   variant?: "compact" | "default" | "data"
 }
 /**
@@ -56,6 +57,14 @@ export type TableHeaderRowProps = {
 const ratioToPercent = (width?: number): string | number | undefined =>
   width != null ? `${width * 100}%` : width
 
+export type TableHeaderRowCellCheckboxProps = {
+  checkable?: boolean
+  checkedStatus?: CheckedStatus
+  /** This will be passed into the aria-label for the checkbox to provide context to the user */
+  checkboxLabel?: string
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any
+}
+
 /**
  * @param width value between 1 and 0, to be calculated as a percentage
  * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,
@@ -71,9 +80,6 @@ export type TableHeaderRowCellProps = {
   flex?: string
   href?: string
   icon?: ReactElement
-  checkable?: boolean
-  checkedStatus?: CheckedStatus
-  onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any
   reversed?: boolean
   /**
    * Shows an up or down arrow, to show that the column is sorted.
@@ -82,13 +88,19 @@ export type TableHeaderRowCellProps = {
   wrapping?: "nowrap" | "wrap"
   align?: "start" | "center" | "end"
   tooltipInfo?: string
+  /** If set, this will hide the tooltip exclamation icon. Useful in situations where
+   the table header does not have enough space. This should be done with caution as tooltips
+   should have a visual indicator to users */
   isTooltipIconHidden?: boolean
   /**
    * Specify where the tooltip should be rendered.
    */
   tooltipPortalSelector?: string | undefined
+  /** If set, this will show the arrow in the direction provided
+  when the header cell is hovered over. */
   sortingArrowsOnHover?: "ascending" | "descending" | undefined
-} & OverrideClassName<HTMLAttributes<HTMLElement>>
+} & TableHeaderRowCellCheckboxProps &
+  OverrideClassName<HTMLAttributes<HTMLElement>>
 
 export const TableHeaderRowCell = ({
   labelText,
@@ -99,6 +111,7 @@ export const TableHeaderRowCell = ({
   icon,
   checkable,
   checkedStatus,
+  checkboxLabel,
   onCheck,
   reversed,
   sorting: sortingRaw,
@@ -111,13 +124,8 @@ export const TableHeaderRowCell = ({
   wrapping = "nowrap",
   align = "start",
   tooltipInfo,
-  // If set, this will hide the tooltip exclamation icon. Useful in situations where
-  // the table header does not have enough space. However, we should always show a
-  // tooltip icon as the default based on design system tooltip guidelines.
   isTooltipIconHidden = false,
   tooltipPortalSelector,
-  // If set, this will show the arrow in the direction provided
-  // when the header cell is hovered over.
   sortingArrowsOnHover,
   classNameOverride,
   // There aren't any other props in the type definition, so I'm unsure why we
@@ -143,12 +151,20 @@ export const TableHeaderRowCell = ({
     <div className={styles.headerRowCellLabelAndIcons}>
       {icon && (
         <span className={styles.headerRowCellIcon}>
-          {cloneElement(icon, { title: labelText, role: "img" })}
+          {cloneElement(icon, {
+            title: labelText,
+            ["aria-label"]: labelText, // title is unreliable so this is a sensible fallback for tables with icons as headers without aria-labels
+            role: "img",
+          })}
         </span>
       )}
       {checkable && (
         <div className={styles.headerRowCellCheckbox}>
-          <Checkbox checkedStatus={checkedStatus} onCheck={onCheck} />
+          <Checkbox
+            checkedStatus={checkedStatus}
+            onCheck={onCheck}
+            aria-label={checkboxLabel}
+          />
         </div>
       )}
       {tooltipInfo != null && !isTooltipIconHidden ? (

package/src/Table/_docs/Table.mdx

@@ -23,31 +23,61 @@ A table displays rows of data, including all data in a set, making it efficient
 
 <Canvas of={TableStories.Playground} />
 
-## API
+## TableContainer API
 
-### Data
+### Variant
+
+Controls the spacing in each cell within the table. Options available are `compact`, `default` and `data`.
+
+#### Compact
 <Canvas of={TableStories.Data} />
 
-### Compact
-<Canvas of={TableStories.Compact} />
+#### Default
+<Canvas of={TableStories.Default} />
 
-### LinkVariant
-<Canvas of={TableStories.LinkVariant} />
+#### Data
+<Canvas of={TableStories.Data} />
+
+## TableHeaderRowCell API
+
+### Sorting
+<Canvas of={TableStories.Sorting} />
+
+### Checkbox
+
+To ensure there appropriate context for users of assistive technologies, when using a `checkable` `TableHeaderRowCell`, we advise in the `checkboxLabel`. This will be passed to the a checkbox aria-label and be announce to screen reader users when focused.
 
-### CheckboxVariant
 <Canvas of={TableStories.CheckboxVariant} />
 
-### IconVariant
-<Canvas of={TableStories.IconVariant} />
+### Icon
 
-### Expandable
-<Canvas of={TableStories.Expandable} />
+When using providing `icon` to `TableHeaderRowCell` the `labelText` will be passed to the `aria-label` of the SVG.
+
+<Canvas of={TableStories.IconVariant} />
 
-### HeaderAlignmentAndWrapping
+### Align and wrapping
 <Canvas of={TableStories.HeaderAlignmentAndWrapping} />
 
-### Tooltip
+### Tooltips
+
+While Tooltip content can be passed to any table header via the `tooltipInfo` prop, it is strong advised to avoid this if the header is not an interactive element as the tooltip content will be unreadable to keyboard users or those that use assistive technologies.
+
 <Canvas of={TableStories.Tooltip} />
 
+You can read more about the Tooltip component and accessibility limitation [here](https://cultureamp.design/?path=/docs/components-tooltip--docs#screen-reader-accessibility).
+
 ### Reversed
 <Canvas of={TableStories.Reversed} />
+
+## TableCard API
+
+### Link
+<Canvas of={TableStories.LinkVariant} />
+
+### Expandable
+
+The `expandable` prop introduces known accessibility issues with nesting interactive elements as children of a `button` or `anchor` tag. We recommend avoiding this pattern if possible, or creating a tier 3 component that adheres to correct WCAG hierarchy.
+
+<Canvas of={TableStories.Expandable} />
+
+