@sproutsocial/seeds-react-table 1.0.0

package/src/TableCell/__tests__/TabelCell.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { TableCell } from "../TableCell";
+
+describe("TableCell", () => {
+  it("should render properly", () => {
+    render(<TableCell id="stuff" content="more stuff here" />);
+    expect(
+      screen.getByDataQaLabel({
+        "table-cell": "",
+      })
+    ).toBeTruthy();
+    expect(screen.getByText("more stuff here")).toBeInTheDocument();
+  });
+
+  it("renders the children if present", () => {
+    render(<TableCell id="test">Child</TableCell>);
+    expect(screen.getByText("Child")).toBeInTheDocument();
+  });
+
+  it("renders as td when scope is not present", () => {
+    render(<TableCell id="scope-test" content="this is a td" />);
+    const tdElement = screen.getByRole("cell");
+    expect(tdElement).toBeInTheDocument();
+    expect(tdElement.tagName).toBe("TD");
+    expect(tdElement).not.toHaveAttribute("scope");
+  });
+
+  it("renders as th when scope is present", () => {
+    render(<TableCell id="scope-test" scope="row" content="this is a td" />);
+    const thElement = screen.getByRole("rowheader");
+    expect(thElement).toBeInTheDocument();
+    expect(thElement.tagName).toBe("TH");
+    expect(thElement).toHaveAttribute("scope", "row");
+  });
+});

package/src/TableCell/__tests__/TableCell.typetest.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { TableCell } from "../TableCell";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TableCellTypes() {
+  return (
+    <>
+      <TableCell
+        id="bacon_smokehouse"
+        content="🍔 Bacon Smokehouse Burger"
+        color="text.body"
+      />
+      <TableCell
+        id="bacon_smokehouse"
+        content="🍔 Bacon Smokehouse Burger"
+        color="text.body"
+        width={300}
+        colSpan={2}
+        align="center"
+      />
+      <TableCell
+        id="bacon_smokehouse"
+        content="🍔 Bacon Smokehouse Burger"
+        color="text.body"
+        width={300}
+        colSpan={2}
+        align="center"
+        scope="row"
+      />
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <TableCell />
+    </>
+  );
+}

package/src/TableCell/index.ts

@@ -0,0 +1,5 @@
+import TableCell from "./TableCell";
+
+export default TableCell;
+export { TableCell };
+export * from "./TableCellTypes";

package/src/TableCell/styles.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import type { TypeTableCellProps } from "./TableCellTypes";
+
+const Container = styled.td<{
+  alignment: TypeTableCellProps["align"];
+}>`
+  ${(props) => props.theme.typography[200]}
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: ${(props) => props.alignment};
+
+  ${COMMON}
+`;
+
+export default Container;

package/src/TableHeaderCell/TableHeaderCell.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TableHeaderCell } from "./TableHeaderCell";
+
+const meta: Meta<typeof TableHeaderCell> = {
+  title: "Components/Table/TableHeaderCell",
+  component: TableHeaderCell,
+  argTypes: {
+    isSortable: {
+      control: "boolean",
+    },
+  },
+  args: {
+    content: "Food Item",
+    id: "1",
+    isSortable: undefined,
+    align: undefined,
+    width: undefined,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof TableHeaderCell>;
+
+export const Default: Story = {
+  args: {
+    color: "text.headline",
+  },
+};
+
+export const Sortable: Story = {
+  args: {
+    ...Default.args,
+    isSortable: true,
+  },
+};
+
+export const AdditionalProps: Story = {
+  args: {
+    ...Sortable.args,
+    content: "Calories",
+    id: "2",
+    align: "center",
+    width: 100,
+  },
+};

package/src/TableHeaderCell/TableHeaderCell.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import Icon, { type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import Container, { SortIcon, UnstyledButton } from "./styles";
+import { SORT_DIRECTIONS } from "./constants";
+import type { TypeTableHeaderCellProps } from "./TableHeaderCellTypes";
+
+export class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {
+  static displayName: string;
+
+  getSortIcon = (
+    isSorted: boolean,
+    ariaSortDirection: "ascending" | "descending" | undefined
+  ) => {
+    const { sortDirection } = this.props;
+    let iconName: TypeIconName = "caret-up-down-outline";
+
+    if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
+      iconName = "caret-up-solid";
+    } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
+      iconName = "caret-down-solid";
+    }
+
+    return (
+      <SortIcon>
+        <Icon size="mini" name={iconName} aria-label={ariaSortDirection} />
+      </SortIcon>
+    );
+  };
+
+  // @ts-note: If this is set to an HTMLButtonElement event, then the `Container` freaks out
+  handleClick = (
+    e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>
+  ) => {
+    const { onClick, onSort, isSortable, id } = this.props;
+
+    if (onClick || isSortable) {
+      e.preventDefault();
+    }
+
+    if (onClick) {
+      // @ts-note: Right now the `onClick` is incorrectly set to consume an HTMLButtonElement event
+      onClick(e as unknown as React.MouseEvent<HTMLButtonElement>);
+      return;
+    }
+
+    if (!isSortable || !onSort) return;
+    onSort(id);
+  };
+
+  override render() {
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      isSortable,
+      sortId,
+      sortDirection,
+      children,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      shouldTruncate,
+      onSort,
+      onClick,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      color,
+      ...rest
+    } = this.props;
+
+    const isSorted = sortId === id;
+    const ariaSort = isSorted
+      ? sortDirection === SORT_DIRECTIONS.ASC
+        ? "ascending"
+        : "descending"
+      : undefined;
+
+    const buttonProps = isSortable
+      ? {
+          role: "button",
+          onClick: this.handleClick,
+        }
+      : {};
+
+    const scope = colSpan ? "colgroup" : "col";
+
+    return (
+      <Container
+        {...rest}
+        key={id}
+        alignment={align || "left"}
+        sortable={isSortable}
+        colSpan={colSpan}
+        scope={scope}
+        width={width}
+        onClick={this.handleClick}
+        data-tableheadercell-sortable={isSortable}
+        data-qa-table-header-cell=""
+        data-qa-table-header-cell-sortdirection={sortDirection}
+        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        color={color}
+        aria-sort={ariaSort}
+      >
+        {isSortable ? (
+          <UnstyledButton {...buttonProps}>
+            <div aria-live="polite" role="status">
+              {children || content}
+              {!children && this.getSortIcon(id === sortId, ariaSort)}
+            </div>
+          </UnstyledButton>
+        ) : (
+          children || content
+        )}
+      </Container>
+    );
+  }
+}
+
+export default TableHeaderCell;

package/src/TableHeaderCell/TableHeaderCellTypes.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { TypeTableCellProps } from "../TableCell/TableCellTypes";
+import { SORT_DIRECTIONS } from "./constants";
+
+export type TypeEnumSortDirections = keyof typeof SORT_DIRECTIONS;
+
+export interface TypeTableHeaderCellProps
+  extends Omit<TypeTableCellProps, "onClick"> {
+  /** Legacy Deteremines if a table column is sortable (optional) */
+  isSortable?: boolean;
+
+  /** Truncates text into a singular line with ellipsis (optional) */
+  shouldTruncate?: boolean;
+
+  /** Legacy: Callback for Sorting Table Columns (optional) */
+  onSort?: (id: string) => void;
+
+  /** Legacy: Controls which column is being sorted (optional) */
+  sortId?: string;
+
+  /** Legacy: Controls the current sort direction (optional) */
+  sortDirection?: TypeEnumSortDirections;
+
+  /** Callback for Click Events. If Included will override onSort prop */
+  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+}

package/src/TableHeaderCell/__tests__/TableHeaderCell.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { TableHeaderCell } from "../TableHeaderCell";
+describe("TableHeaderCell", () => {
+  it("should render properly", () => {
+    render(
+      <table>
+        <TableHeaderCell id="test" content="more stuff here" />
+      </table>
+    );
+    expect(
+      screen.getByDataQaLabel({
+        "table-header-cell": "",
+      })
+    ).toBeTruthy();
+    expect(screen.getByText("more stuff here")).toBeInTheDocument();
+  });
+  it("renders the children if present", () => {
+    render(
+      <table>
+        <TableHeaderCell id="test" content="content">
+          Child
+        </TableHeaderCell>
+      </table>
+    );
+    expect(screen.getByText("Child")).toBeInTheDocument();
+  });
+});

package/src/TableHeaderCell/__tests__/TableHeaderCell.typetest.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { TableHeaderCell } from "../TableHeaderCell";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TableHeaderCellTypes() {
+  const defaultProps = {
+    content: "Food Item",
+    id: "1",
+    color: "text.headline",
+    isSortable: undefined,
+    align: undefined,
+    width: undefined,
+  };
+
+  return (
+    <>
+      <TableHeaderCell {...defaultProps} />
+      <TableHeaderCell {...defaultProps} isSortable />
+      <TableHeaderCell
+        {...defaultProps}
+        isSortable
+        content="Calories"
+        id="2"
+        align="center"
+        width={100}
+      />
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <TableHeaderCell />
+    </>
+  );
+}

package/src/TableHeaderCell/constants.ts

@@ -0,0 +1,4 @@
+export const SORT_DIRECTIONS = {
+  ASC: "ASC",
+  DESC: "DESC",
+} as const;

package/src/TableHeaderCell/index.ts

@@ -0,0 +1,6 @@
+import TableHeaderCell from "./TableHeaderCell";
+
+export default TableHeaderCell;
+export { TableHeaderCell };
+export * from "./TableHeaderCellTypes";
+export * from "./constants";

package/src/TableHeaderCell/styles.ts

@@ -0,0 +1,46 @@
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import type { TypeTableHeaderCellProps } from "./TableHeaderCellTypes";
+
+const Container = styled.th<{
+  sortable?: boolean;
+  alignment: TypeTableHeaderCellProps["align"];
+  width: TypeTableHeaderCellProps["width"];
+}>`
+  ${(props) => props.theme.typography[100]}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: ${(props) => props.alignment};
+
+  ${(props) =>
+    props.sortable &&
+    css`
+      position: relative;
+      cursor: pointer;
+    `}
+
+  ${COMMON}
+`;
+
+export const SortIcon = styled.span`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0;
+  padding: 0 ${(props) => props.theme.space[200]};
+`;
+
+export const UnstyledButton = styled.button`
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+`;
+
+export default Container;

package/src/TableRowAccordion/TableRowAccordion.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import TableRowAccordion from "./TableRowAccordion";
+
+const meta: Meta<typeof TableRowAccordion> = {
+  title: "Components/Table/TableRowAccordion",
+  component: TableRowAccordion,
+};
+export default meta;
+
+type Story = StoryObj<typeof TableRowAccordion>;
+
+export const Collapsed: Story = {
+  args: {
+    id: "1",
+    cells: [
+      {
+        id: "1",
+        content: "🍔 Bacon Smokehouse Burger",
+      },
+      {
+        id: "2",
+        content: "840",
+      },
+      {
+        id: "3",
+        content: "45g",
+      },
+      {
+        id: "4",
+        content: "62g",
+      },
+      {
+        id: "5",
+        content: "46g",
+      },
+    ],
+    isExpanded: false,
+    onToggle: () => {},
+    detail: (
+      <img
+        src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
+        alt="doge"
+      />
+    ),
+  },
+};
+
+export const Expanded: Story = {
+  args: {
+    ...Collapsed.args,
+    isExpanded: true,
+  },
+};
+
+export const WithToggleFunction: Story = {
+  args: {
+    ...Collapsed.args,
+    onToggle: (id) => {
+      alert(`clicked with id ${id}`);
+    },
+  },
+};

package/src/TableRowAccordion/TableRowAccordion.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import TableCell from "../TableCell";
+import Container, { Detail, Trigger } from "./styles";
+import type { TypeTableRowAccordionProps } from "./TableRowAccordionTypes";
+
+/**
+ * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.
+ */
+export default class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {
+  handleToggle: React.MouseEventHandler<HTMLTableRowElement> = (e) => {
+    const { onToggle, id } = this.props;
+    e.stopPropagation();
+
+    if (onToggle) {
+      onToggle(id);
+    }
+  };
+
+  override render() {
+    const {
+      id,
+      cells,
+      detail,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onToggle,
+      isExpanded,
+      color,
+      ...rest
+    } = this.props;
+
+    return (
+      <Container
+        {...rest}
+        data-qa-table-row-accordion={isExpanded}
+        key={id}
+        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        color={color}
+      >
+        <tr data-tablerowaccordion-summary onClick={this.handleToggle}>
+          {cells.map((td) => {
+            return <TableCell {...td} key={td.id} />;
+          })}
+          <TableCell
+            id="tableRowAccordion_trigger"
+            content={
+              // TODO: This trigger needs an accessible label passed in via props
+              <Trigger
+                data-tablerowaccordion-trigger
+                onClick={this.handleToggle}
+                role="button"
+              >
+                <Icon
+                  name={
+                    isExpanded ? "chevron-up-outline" : "chevron-down-outline"
+                  }
+                  aria-hidden
+                />
+              </Trigger>
+            }
+          />
+        </tr>
+        <Detail isExpanded={isExpanded} data-tablerowaccordion-detail>
+          <TableCell
+            id="tableRowAccordion_detail"
+            colSpan={100}
+            content={detail}
+          />
+        </Detail>
+      </Container>
+    );
+  }
+}

package/src/TableRowAccordion/TableRowAccordionTypes.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { TypeSystemCommonProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeTableRow } from "../TableTypes";
+
+export interface TypeTableRowAccordionProps
+  extends TypeTableRow,
+    TypeSystemCommonProps,
+    Omit<
+      React.ComponentPropsWithoutRef<"tbody">,
+      keyof TypeTableRow | keyof TypeSystemCommonProps
+    > {
+  /** Content to be rendered in accordion drawer */
+  detail: React.ReactNode;
+
+  /** Controls the display state of the accordion drawer */
+  isExpanded: boolean;
+
+  /** Callback for toggling the accordion drawer state */
+  onToggle: (id: string) => void;
+}

package/src/TableRowAccordion/__tests__/TableRowAccordion.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import TableRowAccordion from "../TableRowAccordion";
+
+describe("TableRowAccordion", () => {
+  const props = {
+    id: "bacon_smokehouse_burger_row",
+    cells: [
+      {
+        id: "cell_1",
+        content: "🍔 Bacon Smokehouse Burger",
+      },
+      {
+        id: "cell_2",
+        content: "840",
+      },
+      {
+        id: "cell_3",
+        content: "45g",
+      },
+      {
+        id: "cell_4",
+        content: "62g",
+      },
+      {
+        id: "cell_5",
+        content: "46g",
+      },
+    ],
+    detail: (
+      <img
+        src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
+        alt="doge"
+      />
+    ),
+    isExpanded: false,
+    onToggle: jest.fn(),
+  };
+
+  it("should render the table cells RTL", () => {
+    render(
+      <table>
+        <TableRowAccordion {...props} />
+      </table>
+    );
+
+    // we should get back a length that is one greater than length of cells we pass due to the addition of the trigger cell and detail cell
+    expect(
+      screen.getAllByDataQaLabel({
+        "table-cell": "",
+      })
+    ).toBeTruthy();
+
+    expect(
+      screen.getAllByDataQaLabel({
+        "table-cell": "",
+      }).length
+    ).toEqual(props.cells.length + 2);
+  });
+
+  it("should render the detail section closed by default", () => {
+    render(
+      <table>
+        <TableRowAccordion {...props} />
+      </table>
+    );
+
+    expect(
+      screen.getAllByDataQaLabel({
+        "table-row-accordion": "false",
+      })
+    ).toBeTruthy();
+  });
+
+  it("should render the detail section open when the isExpanded prop is set to true", () => {
+    render(
+      <table>
+        <TableRowAccordion {...props} isExpanded={true} />
+      </table>
+    );
+
+    expect(
+      screen.getAllByDataQaLabel({
+        "table-row-accordion": "true",
+      })
+    ).toBeTruthy();
+  });
+
+  it("the onToggle method should return the rows id when clicked", () => {
+    const callback = jest.fn();
+    render(
+      <table>
+        <TableRowAccordion {...props} onToggle={callback} />
+      </table>
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+    expect(callback).toBeCalledWith(props.id);
+  });
+});