Add Table, FilterChips components

src/components/Avatar/Avatar.tsx

@@ -21,6 +21,8 @@ import { SuspenseImg } from "../../utils/SuspenseImg";
 import styles from "./Avatar.module.css";
 import { useIdColorHash } from "./useIdColorHash";
 
+export type OnAvatarErrorHandler = React.ComponentProps<typeof SuspenseImg>["onError"];
+
 type AvatarProps = (
   | JSX.IntrinsicElements["button"]
   | JSX.IntrinsicElements["span"]
@@ -62,7 +64,7 @@ type AvatarProps = (
   /**
    * Callback when the image has failed to load.
    */
-  onError?: React.ComponentProps<typeof SuspenseImg>["onError"];
+  onError?: OnAvatarErrorHandler;
 };
 
 /**

src/components/FilterChips/FilterChip.module.css

@@ -0,0 +1,17 @@
+.filterChip {
+    /* disable padding here and move to the button inside */
+    padding: 0;
+}
+
+.filterChip:hover {
+    background-color: var(--cpd-color-gray-500);
+}
+
+.filterChipButton {
+    align-items: center;
+    display: flex;
+    gap: var(--cpd-space-1x);
+    /* apply compound badge padding here */
+    padding: var(--cpd-space-1x) var(--cpd-space-3x);
+    white-space: nowrap;
+}

src/components/FilterChips/FilterChip.stories.tsx

@@ -0,0 +1,45 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { FilterChip } from "./FilterChip";
+import { FilterChipsContainer } from "./FilterChipsContainer";
+
+export default {
+  title: "FilterChip",
+  component: FilterChip,
+  tags: ["autodocs"],
+  argTypes: {
+    label: String,
+  },
+  args: {
+    label: "hello",
+  },
+} as Meta<typeof FilterChip>;
+
+const Template: StoryFn<typeof FilterChip> = (args) => (
+  <FilterChipsContainer>
+    <FilterChip {...args}  />
+    <FilterChip
+      label="Second item with a name that's quite long"
+    />
+  </FilterChipsContainer>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {};

src/components/FilterChips/FilterChip.tsx

@@ -0,0 +1,20 @@
+import { Badge } from '../Badge/Badge';
+import Close20 from '@vector-im/compound-design-tokens/icons/close.svg'
+import React from 'react';
+import styles from './FilterChip.module.css';
+
+interface FilterChipProps {
+    label: string;
+    onClick?: () => void;
+}
+
+export const FilterChip: React.FC<FilterChipProps> = ({ label, onClick }) => {
+    return (
+        <Badge className={styles.filterChip}>
+            <div className={styles.filterChipButton} onClick={onClick} role="button">
+                {label}
+                <Close20 />
+            </div>
+        </Badge>
+    );
+};

src/components/FilterChips/FilterChipsContainer.module.css

@@ -0,0 +1,5 @@
+.filterChipsContainer {
+    display: flex;
+    flex-flow: wrap;
+    gap: var(--cpd-space-2x);
+}

src/components/FilterChips/FilterChipsContainer.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './FilterChipsContainer.module.css';
+
+interface FilterChipsContainerProps {
+    children: React.ReactNode;
+}
+
+export const FilterChipsContainer: React.FC<FilterChipsContainerProps> = ({ children }) => {
+    return <div className={styles.filterChipsContainer}>{children}</div>;
+};

src/components/Table/Table.module.css

@@ -0,0 +1,22 @@
+.table {
+    border-collapse: collapse;
+    margin-bottom: var(--cpd-space-13x);
+    width: 100%;
+}
+
+.tableHeader {
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+    color: var(--cpd-color-text-secondary);
+    font-size: var(--cpd-font-size-body-xs);
+    font-weight: var(--cpd-font-weight-regular);
+    padding: var(--cpd-space-4x);
+    text-transform: uppercase;
+}
+
+.tableHeaderCentred {
+    text-align: center;
+}
+
+.tableHeaderCheckbox {
+    width: 24px;
+}

src/components/Table/Table.stories.tsx

@@ -0,0 +1,136 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Table, TableSpec } from "./Table";
+import { TableCell } from "./TableCell";
+import { TableFilter, TableHeadline } from ".";
+
+export default {
+  title: "Table",
+  component: Table,
+  tags: ["autodocs"],
+  argTypes: {
+  },
+  args: {
+  },
+} as Meta<typeof Table>;
+
+interface SimpleTableItem {
+  name: string,
+  flavor: string,
+  [value: string]: string;
+}
+
+const Template: StoryFn<typeof Table> = (args) => {
+  const tableSpec: TableSpec<SimpleTableItem> = {
+      columns: [
+          {
+              id: 'name',
+              cell: ({ item }) => (
+                <TableCell> { item.name } </TableCell>
+              ),
+              title: 'Name',
+          },
+          {
+              id: 'flavor',
+              cell: ({ item }) => <TableCell>{item.flavor}</TableCell>,
+              title: 'Flavor',
+          },
+      ],
+      getItemId: (i) => i.name,
+  };
+
+  const items = [{
+    name: 'Chili 🌶️',
+    flavor: 'Spicy',
+  }];
+
+  return <Table spec={tableSpec} items={items} />
+};
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+export const WithHeader: StoryFn<typeof Table> = (args) => {
+  const tableSpec: TableSpec<SimpleTableItem> = {
+      columns: [
+          {
+              id: 'name',
+              cell: ({ item }) => (
+                <TableCell> { item.name } </TableCell>
+              ),
+              title: 'Name',
+          },
+          {
+              id: 'flavor',
+              cell: ({ item }) => <TableCell>{item.flavor}</TableCell>,
+              title: 'Flavor',
+          },
+      ],
+      getItemId: (i) => i.name,
+  };
+
+  const items = [{
+    name: 'Chili 🌶️',
+    flavor: 'Spicy',
+  }];
+  return <>
+    <TableHeadline fromItem={0} toItem={0} totalItems={50} title="My Title" />
+    <Table spec={tableSpec} items={items} />
+  </>;
+};
+
+export const WithHeaderAndFilter: StoryFn<typeof Table> = (args) => {
+  const tableSpec: TableSpec<SimpleTableItem> = {
+      columns: [
+          {
+              id: 'name',
+              cell: ({ item }) => (
+                <TableCell> { item.name } </TableCell>
+              ),
+              title: 'Name',
+          },
+          {
+              id: 'flavor',
+              cell: ({ item }) => <TableCell>{item.flavor}</TableCell>,
+              title: 'Flavor',
+          },
+      ],
+      getItemId: (i) => i.name,
+  };
+
+  const items = [{
+    name: 'Chili 🌶️',
+    flavor: 'Spicy',
+  }];
+
+  const [filterForSauces, setFilterForSauces] = useState(false);
+
+  const filters: TableFilter[] = [{
+    id: 'sauces',
+    disabled: false,
+    label: 'Only Sauces',
+    value: filterForSauces,
+    setValue: () => setFilterForSauces(!filterForSauces),
+  }];
+  return <>
+    <TableHeadline fromItem={0} toItem={0} totalItems={50} title="My Title" filters={filters} />
+    <Table spec={tableSpec} items={items} />
+  </>;
+};