feat(table): allow custom content in table cells - WIP

ithaka · Jan 17, 2025 · ae1ddc5 · ae1ddc5
1 parent 9a5672b
commit ae1ddc5
Show file tree

Hide file tree

Showing 12 changed files with 564 additions and 19 deletions.
diff --git a/.storybook/initComponents.js b/.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,

diff --git a/packages/pharos/src/components/table-body/pharos-table-body.scss b/packages/pharos/src/components/table-body/pharos-table-body.scss
@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}
diff --git a/packages/pharos/src/components/table-body/pharos-table-body.ts b/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>`;
+  }
+}
diff --git a/packages/pharos/src/components/table-cell/pharos-table-cell.scss b/packages/pharos/src/components/table-cell/pharos-table-cell.scss
@@ -0,0 +1,5 @@
+:host {
+  outline: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+  padding: var(--pharos-spacing-1-x);
+  border-collapse: collapse;
+}
diff --git a/packages/pharos/src/components/table-cell/pharos-table-cell.ts b/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 Row 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', 'rowgroup');
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table-row/pharos-table-row.scss b/packages/pharos/src/components/table-row/pharos-table-row.scss
@@ -0,0 +1,5 @@
+:host {
+  display: contents;
+  gap: 10px;
+  align-items: center;
+}
diff --git a/packages/pharos/src/components/table-row/pharos-table-row.ts b/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', 'rowgroup');
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table/PharosTable.react.stories.jsx b/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';
@@ -34,6 +43,124 @@ export const Base = {
   },
 };
 
+export const CSSGrid = {
+  render: (args) => (
+    <PharosTable
+      columns={args.columns}
+      showPagination={args.showPagination}
+      caption={'An example table'}
+    >
+      <PharosTableBody>
+        <PharosTableRow>
+          <PharosTableCell>1</PharosTableCell>
+          <PharosTableCell>12345.jpg</PharosTableCell>
+          <PharosTableCell>2020-1-1</PharosTableCell>
+          <PharosTableCell>2010-1-1</PharosTableCell>
+          <PharosTableCell>University of Michigan</PharosTableCell>
+        </PharosTableRow>
+        <PharosTableRow>
+          <PharosTableCell>2</PharosTableCell>
+          <PharosTableCell>123456.jpg</PharosTableCell>
+          <PharosTableCell>2020-1-1</PharosTableCell>
+          <PharosTableCell>2010-1-1</PharosTableCell>
+          <PharosTableCell>University of Michigan</PharosTableCell>
+        </PharosTableRow>
+        <PharosTableRow>
+          <PharosTableCell>3</PharosTableCell>
+          <PharosTableCell>123456.jpg</PharosTableCell>
+          <PharosTableCell>2020-1-1</PharosTableCell>
+          <PharosTableCell>2010-1-1</PharosTableCell>
+          <PharosTableCell>University of Michigan</PharosTableCell>
+        </PharosTableRow>
+        <PharosTableRow>
+          <PharosTableCell>4</PharosTableCell>
+          <PharosTableCell>123456.jpg</PharosTableCell>
+          <PharosTableCell>2020-1-1</PharosTableCell>
+          <PharosTableCell>2010-1-1</PharosTableCell>
+          <PharosTableCell>University of Michigan</PharosTableCell>
+        </PharosTableRow>
+        <PharosTableRow>
+          <PharosTableCell>5</PharosTableCell>
+          <PharosTableCell>123456.jpg</PharosTableCell>
+          <PharosTableCell>2020-1-1</PharosTableCell>
+          <PharosTableCell>2010-1-1</PharosTableCell>
+          <PharosTableCell>University of Michigan</PharosTableCell>
+        </PharosTableRow>
+      </PharosTableBody>
+    </PharosTable>
+  ),
+  args: {
+    ...defaultArgs,
+    showPagination: false,
+  },
+};
+
+export const withNonTextContent = {
+  render: (args) => (
+    <PharosTable
+      columns={args.columns}
+      showPagination={args.showPagination}
+      caption={'An example table'}
+    >
+      <PharosTableBody>
+        {[...Array(4)].map((_, index) => (
+          <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>
+        ))}
+      </PharosTableBody>
+    </PharosTable>
+  ),
+  args: {
+    ...defaultArgs,
+    showPagination: false,
+  },
+};
+
 export const WithPagination = {
   render: (args) => (
     <PharosTable

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
@@ -1,5 +1,40 @@
 @use '../../utils/scss/mixins';
 
+////////////////////////
+.table-grid {
+  display: grid;
+
+  // The grid-template-columns is set in each instance of the component
+  border-collapse: collapse;
+  gap: 1px;
+}
+
+.table-caption {
+  grid-column: 1 / -1; // span all columns
+  text-align: center;
+}
+
+.table-grid-header {
+  display: contents; /* Allow the header to align with the table structure */
+  font-weight: bold;
+  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
+}
+
+.table-grid-header-cell {
+  text-align: center;
+  padding: var(--pharos-spacing-1-x);
+  outline: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
+}
+
+.table-grid-row {
+  display: contents;
+  gap: 10px;
+  align-items: center;
+}
+
+/////////////////////
+
 :host {
   display: inline-flex;
   flex-direction: column;

diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
@@ -254,29 +254,60 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   }
 
   protected override render(): TemplateResult {
+    if (this?.rowData?.length > 0) {
+      //To: mark deprecated
+      return html`
+        <table class="table">
+          <caption
+            class=${classMap({
+              ['visually-hidden']: this.hideCaption,
+            })}
+          >
+            ${this.caption}
+          </caption>
+          <thead
+            class=${classMap({
+              'table-header': true,
+              ['table-sticky-header']: this.hasStickyHeader,
+            })}
+          >
+            <tr>
+              ${this._renderTableHeader()}
+            </tr>
+          </thead>
+          <tbody>
+            ${this._renderTableRows()}
+          </tbody>
+        </table>
+        ${this._renderPagination()}
+      `;
+    }
+    //TODO: Add header aria roles
     return html`
-      <table class="table">
-        <caption
+      <style>
+        .table-grid {
+          grid-template-columns: repeat(${this.columns.length}, max-content);
+        }
+      </style>
+      <div class="table-grid" role="table" aria-describedby="table-caption">
+        <div
+          id="table-caption"
           class=${classMap({
+            'table-caption': true,
             ['visually-hidden']: this.hideCaption,
           })}
         >
-          ${this.caption}
-        </caption>
-        <thead
-          class=${classMap({
-            'table-header': true,
-            ['table-sticky-header']: this.hasStickyHeader,
-          })}
-        >
-          <tr>
-            ${this._renderTableHeader()}
-          </tr>
-        </thead>
-        <tbody>
-          ${this._renderTableRows()}
-        </tbody>
-      </table>
+          An example table
+        </div>
+        <div class="table-grid-header" role="rowgroup">
+          <div class="table-grid-row" role="row">
+            ${this.columns.map(
+              (column) => html`<div class="table-grid-header-cell" role="cell">${column.name}</div>`
+            )}
+          </div>
+        </div>
+        <slot></slot>
+      </div>
       ${this._renderPagination()}
     `;
   }