feat(table): allow more complex data in table

.storybook/initComponents.js

@@ -38,6 +38,9 @@ import {
   PharosTabs,
   PharosTab,
   PharosTable,
+  PharosTableBody,
+  PharosTableRow,
+  PharosTableCell,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,
@@ -90,6 +93,9 @@ registerComponents('storybook', [
   PharosTabs,
   PharosTab,
   PharosTable,
+  PharosTableBody,
+  PharosTableRow,
+  PharosTableCell,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,

packages/pharos/src/components/table-body/pharos-table-body.scss

@@ -0,0 +1,3 @@
+:host {
+  display: table-row-group;
+}

packages/pharos/src/components/table-body/pharos-table-body.ts

@@ -0,0 +1,25 @@
+import { html, type CSSResultArray, type TemplateResult } from 'lit';
+import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
+import { PharosElement } from '../base/pharos-element';
+import { tableBodyStyles } from './pharos-table-body.css';
+
+/**
+ * Pharos table body component.
+ *
+ * @tag pharos-table
+ *
+ *
+ */
+export class PharosTableBody extends ScopedRegistryMixin(PharosElement) {
+  public static override get styles(): CSSResultArray {
+    return [tableBodyStyles];
+  }
+
+  protected override firstUpdated(): void {
+    this.setAttribute('role', 'rowgroup');
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}

packages/pharos/src/components/table-cell/pharos-table-cell.scss

@@ -0,0 +1,9 @@
+:host {
+  border: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+  padding: var(--pharos-spacing-1-x);
+  border-collapse: collapse;
+  display: table-cell;
+  vertical-align: top;
+  z-index: 100;
+  position: relative;
+}

packages/pharos/src/components/table-cell/pharos-table-cell.ts

@@ -0,0 +1,26 @@
+import { html, type CSSResultArray, type TemplateResult } from 'lit';
+import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
+import { PharosElement } from '../base/pharos-element';
+import { tableCellStyles } from './pharos-table-cell.css';
+
+/**
+ * Pharos table cell component.
+ *
+ * @tag pharos-table
+ *
+ *
+ */
+
+export class PharosTableCell extends ScopedRegistryMixin(PharosElement) {
+  public static override get styles(): CSSResultArray {
+    return [tableCellStyles];
+  }
+
+  protected override firstUpdated(): void {
+    this.setAttribute('role', 'cell');
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}

packages/pharos/src/components/table-row/pharos-table-row.scss

@@ -0,0 +1,3 @@
+:host {
+  display: table-row;
+}

packages/pharos/src/components/table-row/pharos-table-row.ts

@@ -0,0 +1,25 @@
+import { html, type CSSResultArray, type TemplateResult } from 'lit';
+import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
+import { PharosElement } from '../base/pharos-element';
+import { tableRowStyles } from './pharos-table-row.css';
+
+/**
+ * Pharos table row component.
+ *
+ * @tag pharos-table
+ *
+ *
+ */
+export class PharosTableRow extends ScopedRegistryMixin(PharosElement) {
+  public static override get styles(): CSSResultArray {
+    return [tableRowStyles];
+  }
+
+  protected override firstUpdated(): void {
+    this.setAttribute('role', 'row');
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}

packages/pharos/src/components/table/PharosTable.react.stories.jsx

@@ -1,4 +1,13 @@
-import { PharosTable } from '../../react-components';
+import {
+  PharosTable,
+  PharosTableBody,
+  PharosTableRow,
+  PharosTableCell,
+  PharosLink,
+  PharosCheckbox,
+  PharosToggleButton,
+  PharosToggleButtonGroup,
+} from '../../react-components';
 import { configureDocsPage } from '@config/docsPageConfig';
 import { PharosContext } from '../../utils/PharosContext';
 import { defaultArgs } from './storyArgs';
@@ -19,68 +28,229 @@ export default {
   },
 };
 
+const getSampleTextRow = (rowId) => (
+  <PharosTableRow key={rowId}>
+    <PharosTableCell>{rowId}</PharosTableCell>
+    <PharosTableCell>123456.jpg</PharosTableCell>
+    <PharosTableCell>2020-1-1</PharosTableCell>
+    <PharosTableCell>2010-1-1</PharosTableCell>
+    <PharosTableCell>University of Michigan</PharosTableCell>
+  </PharosTableRow>
+);
+
+const sampleNonTextRow = (
+  <PharosTableRow>
+    <PharosTableCell>JSTOR</PharosTableCell>
+    <PharosTableCell>
+      <img
+        src="https://pharos.jstor.org/static/home-get-started-d81656133e781b09087ec08d63f0fe18.svg"
+        alt="JSTOR LOGO"
+      />
+    </PharosTableCell>
+    <PharosTableCell style={{ maxWidth: '20rem' }}>
+      <span>
+        <span>
+          JSTOR provides access to more than 12 million
+          <PharosLink href="https://about.jstor.org/librarians/journals/">
+            journal articles
+          </PharosLink>
+          ,<PharosLink href="https://about.jstor.org/librarians/books/">books</PharosLink>,
+          <PharosLink href="https://about.jstor.org/librarians/artstor/">images</PharosLink>, and
+          <PharosLink href="https://about.jstor.org/librarians/primary-sources/">
+            primary sources
+          </PharosLink>
+          in 75 disciplines.
+        </span>
+        <span>Established: 1994</span>
+      </span>
+    </PharosTableCell>
+    <PharosTableCell>
+      <PharosCheckbox name="item_archived">
+        <span slot="label">This item is archived</span>
+      </PharosCheckbox>
+    </PharosTableCell>
+    <PharosTableCell>
+      <PharosToggleButtonGroup>
+        <PharosToggleButton icon="view-list" a11yLabel="view list" id="view-list-button" />
+        <PharosToggleButton icon="view-gallery" a11yLabel="view gallery" id="view-gallery-button" />
+        <PharosToggleButton
+          icon="image"
+          a11yLabel="view presentation"
+          id="view-presentation-button"
+        />
+      </PharosToggleButtonGroup>
+    </PharosTableCell>
+  </PharosTableRow>
+);
 export const Base = {
-  render: (args) => (
+  render: ({ columns, showPagination }) => (
+    <PharosTable columns={columns} showPagination={showPagination} caption="An example table">
+      <PharosTableBody>
+        {Array.from({ length: 5 }, (_, index) => getSampleTextRow(index + 1))}
+      </PharosTableBody>
+    </PharosTable>
+  ),
+  args: {
+    ...defaultArgs,
+    showPagination: false,
+  },
+};
+
+export const HTMLContent = {
+  render: ({ showPagination }) => (
     <PharosTable
-      columns={args.columns}
-      rowData={args.rowData}
-      showPagination={args.showPagination}
-      caption={'An example table'}
-    ></PharosTable>
+      columns={[
+        { name: 'Title', field: 'title' },
+        { name: 'Thumbnail', field: 'thumbnail' },
+        { name: 'Description', field: 'description' },
+        { name: 'Archived', field: 'archived' },
+        { name: 'Actions', field: 'actions' },
+      ]}
+      showPagination={showPagination}
+      caption="An example table"
+    >
+      <PharosTableBody>{Array.from({ length: 10 }, () => sampleNonTextRow)}</PharosTableBody>
+    </PharosTable>
   ),
   args: {
     ...defaultArgs,
     showPagination: false,
   },
 };
 
-export const WithPagination = {
-  render: (args) => (
+export const HiddenCaption = {
+  render: ({ columns, showPagination }) => (
     <PharosTable
-      columns={args.columns}
-      rowData={args.rowData}
-      showPagination={args.showPagination}
-      totalResults={5}
-      pageSizeOptions={[2, 4]}
-      caption={'An example table'}
-    ></PharosTable>
+      columns={columns}
+      showPagination={showPagination}
+      caption="An example table"
+      hideCaption
+    >
+      <PharosTableBody>
+        {Array.from({ length: 10 }, (_, index) => getSampleTextRow(index + 1))}
+      </PharosTableBody>
+    </PharosTable>
+  ),
+  args: {
+    ...defaultArgs,
+    showPagination: false,
+  },
+};
+
+export const StickyHeader = {
+  render: ({ columns }) => (
+    <PharosTable columns={columns} hasStickyHeader caption="A sticky header example">
+      <PharosTableBody>
+        {Array.from({ length: 20 }, (_, index) => getSampleTextRow(index + 1))}
+      </PharosTableBody>
+    </PharosTable>
   ),
   args: {
     ...defaultArgs,
     showPagination: true,
   },
 };
 
-export const WithHiddenCaption = {
-  render: (args) => (
+export const RowData = {
+  render: ({ columns, rowData, showPagination }) => (
     <PharosTable
-      columns={args.columns}
-      rowData={args.rowData}
-      showPagination={args.showPagination}
-      totalResults={5}
-      pageSizeOptions={[2, 4]}
-      caption={'An example table'}
-      hideCaption={args.hideCaption}
-    ></PharosTable>
+      columns={columns}
+      rowData={[
+        {
+          item: 1,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 2,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 3,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 4,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 5,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+      ]}
+      showPagination={showPagination}
+      caption="An example table using a data array"
+    />
   ),
   args: {
     ...defaultArgs,
-    hideCaption: true,
+    showPagination: false,
   },
 };
 
-export const WithStickyHeader = {
-  render: (args) => (
+export const RowDataWithPagination = {
+  render: ({ columns, showPagination }) => (
     <PharosTable
-      columns={args.columns}
-      rowData={[...args.rowData, ...args.rowData, ...args.rowData, ...args.rowData]}
-      showPagination={args.showPagination}
-      caption={'An example sticky header table'}
-      hasStickyHeader={args.hasStickyHeader}
-    ></PharosTable>
+      columns={columns}
+      rowData={[
+        {
+          item: 1,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 2,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 3,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 4,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+        {
+          item: 5,
+          filename: '123456.jpg',
+          expired_date: '2020-1-1',
+          created_on: '2010-1-1',
+          university: 'University of Michigan',
+        },
+      ]}
+      showPagination={showPagination}
+      totalResults={10}
+      pageSizeOptions={[2, 4]}
+      caption="An example table using a data array with pagination"
+    />
   ),
   args: {
     ...defaultArgs,
-    hasStickyHeader: true,
+    showPagination: true,
   },
 };