feat(table): allow complex items in table

ithaka · Jan 2, 2025 · af1849a · af1849a
1 parent 91870ce
commit af1849a
Show file tree

Hide file tree

Showing 17 changed files with 522 additions and 176 deletions.
diff --git a/.storybook/initComponents.js b/.storybook/initComponents.js
@@ -38,6 +38,11 @@ import {
   PharosTabs,
   PharosTab,
   PharosTable,
+  PharosTableBody,
+  PharosTableHeader,
+  PharosTableRow,
+  PharosTableCell,
+  PharosTableHeaderCell,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,
@@ -90,6 +95,11 @@ registerComponents('storybook', [
   PharosTabs,
   PharosTab,
   PharosTable,
+  PharosTableBody,
+  PharosTableHeader,
+  PharosTableRow,
+  PharosTableCell,
+  PharosTableHeaderCell,
   PharosTabPanel,
   PharosTextInput,
   PharosTextarea,

diff --git a/packages/pharos-site/src/components/statics/component-status/initComponents.js b/packages/pharos-site/src/components/statics/component-status/initComponents.js
@@ -0,0 +1,114 @@
+import {
+  PharosAlert,
+  PharosBreadcrumb,
+  PharosBreadcrumbItem,
+  PharosButton,
+  PharosCheckbox,
+  PharosCheckboxGroup,
+  PharosCoachMark,
+  PharosCombobox,
+  PharosDropdownMenu,
+  PharosDropdownMenuItem,
+  PharosDropdownMenuNav,
+  PharosDropdownMenuNavLink,
+  PharosDropdownMenuNavCategory,
+  PharosFooter,
+  PharosHeader,
+  PharosHeading,
+  PharosIcon,
+  PharosImageCard,
+  PharosInputGroup,
+  PharosInputGroupSelect,
+  PharosLayout,
+  PharosLink,
+  PharosLoadingSpinner,
+  PharosModal,
+  PharosPagination,
+  PharosPopover,
+  PharosProgressBar,
+  PharosRadioButton,
+  PharosRadioGroup,
+  PharosSelect,
+  PharosSheet,
+  PharosSidenav,
+  PharosSidenavLink,
+  PharosSidenavMenu,
+  PharosSidenavSection,
+  PharosSwitch,
+  PharosTabs,
+  PharosTab,
+  PharosTable,
+  PharosTableBody,
+  PharosTableHeader,
+  PharosTableRow,
+  Pharos,
+  PharosTableCell,
+  PharosTableHeaderCell,
+  PharosTabPanel,
+  PharosTextInput,
+  PharosTextarea,
+  PharosToast,
+  PharosToaster,
+  PharosToastButton,
+  PharosToggleButton,
+  PharosToggleButtonGroup,
+  PharosTooltip,
+} from '../packages/pharos/lib/index';
+import registerComponents from '../packages/pharos/lib/utils/registerComponents';
+
+registerComponents('storybook', [
+  PharosAlert,
+  PharosBreadcrumb,
+  PharosBreadcrumbItem,
+  PharosButton,
+  PharosCheckbox,
+  PharosCheckboxGroup,
+  PharosCoachMark,
+  PharosCombobox,
+  PharosDropdownMenu,
+  PharosDropdownMenuItem,
+  PharosDropdownMenuNav,
+  PharosDropdownMenuNavLink,
+  PharosDropdownMenuNavCategory,
+  PharosFooter,
+  PharosHeader,
+  PharosHeading,
+  PharosIcon,
+  PharosImageCard,
+  PharosInputGroup,
+  PharosInputGroupSelect,
+  PharosLayout,
+  PharosLink,
+  PharosLoadingSpinner,
+  PharosModal,
+  PharosPagination,
+  PharosPopover,
+  PharosProgressBar,
+  PharosRadioButton,
+  PharosRadioGroup,
+  PharosSelect,
+  PharosSheet,
+  PharosSidenav,
+  PharosSidenavLink,
+  PharosSidenavMenu,
+  PharosSidenavSection,
+  PharosSwitch,
+  PharosTabs,
+  PharosTab,
+  PharosTable,
+  PharosTableBody,
+  PharosTableHeader,
+  PharosTableHeaderCell,
+  PharosTableCell,
+  PharosTableRow,
+  Pharos,
+  PharosTabPanel,
+  PharosTextInput,
+  PharosTextarea,
+  PharosToast,
+  PharosToaster,
+  PharosToastButton,
+  PharosToggleButton,
+  PharosToggleButtonGroup,
+  PharosTooltip,
+]);
diff --git a/packages/pharos/src/components/table/pharos-table-body.scss b/packages/pharos/src/components/table/pharos-table-body.scss
@@ -0,0 +1,3 @@
+:host {
+  display: table-row-group;
+}
diff --git a/packages/pharos/src/components/table/pharos-table-body.ts b/packages/pharos/src/components/table/pharos-table-body.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 { tableBodyStyles } from './pharos-table-body.css';
+
+/**
+ * Pharos table Body component.
+ *
+ * @tag pharos-table
+ *
+ *
+ */
+export class PharosTableBody extends ScopedRegistryMixin(PharosElement) {
+  constructor() {
+    super();
+    this.role = 'rowgroup';
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [tableBodyStyles];
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table-cell.scss b/packages/pharos/src/components/table/pharos-table-cell.scss
@@ -0,0 +1,5 @@
+:host {
+  display: table-cell;
+  border: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+  padding: var(--pharos-spacing-1-x);
+}
diff --git a/packages/pharos/src/components/table/pharos-table-cell.ts b/packages/pharos/src/components/table/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) {
+  constructor() {
+    super();
+    this.role = 'cell';
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [tableCellStyles];
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table-header-cell.scss b/packages/pharos/src/components/table/pharos-table-header-cell.scss
@@ -0,0 +1,6 @@
+:host {
+  display: table-cell;
+  font-weight: bold;
+  border: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+  padding: var(--pharos-spacing-1-x);
+}
diff --git a/packages/pharos/src/components/table/pharos-table-header-cell.ts b/packages/pharos/src/components/table/pharos-table-header-cell.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 { tableHeaderCellStyles } from './pharos-table-header-cell.css';
+
+/**
+ * Pharos table Cell Row component.
+ *
+ * @tag pharos-table
+ *
+ *
+ */
+export class PharosTableHeaderCell extends ScopedRegistryMixin(PharosElement) {
+  constructor() {
+    super();
+    this.role = 'columnheader';
+  }
+  public static override get styles(): CSSResultArray {
+    return [tableHeaderCellStyles];
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table-header.scss b/packages/pharos/src/components/table/pharos-table-header.scss
@@ -0,0 +1,4 @@
+:host {
+  display: table-header-group;
+  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
+}
diff --git a/packages/pharos/src/components/table/pharos-table-header.ts b/packages/pharos/src/components/table/pharos-table-header.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 { tableHeaderStyles } from './pharos-table-header.css';
+
+/**
+ * Pharos table Head component.
+ *
+ * @tag pharos-table
+ *
+ *
+ */
+export class PharosTableHeader extends ScopedRegistryMixin(PharosElement) {
+  constructor() {
+    super();
+    this.role = 'rowgroup';
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [tableHeaderStyles];
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table-row.scss b/packages/pharos/src/components/table/pharos-table-row.scss
@@ -0,0 +1,3 @@
+:host {
+  display: table-row;
+}
diff --git a/packages/pharos/src/components/table/pharos-table-row.ts b/packages/pharos/src/components/table/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) {
+  constructor() {
+    super();
+    this.role = 'row';
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [tableRowStyles];
+  }
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
@@ -1,27 +1,34 @@
 @use '../../utils/scss/mixins';
 
-:host {
-  display: inline-flex;
-  flex-direction: column;
-}
+// :host {
+//   display: inline-flex;
+//   flex-direction: column;
+// }
+
+// :host {
+//   display: table;
+//   border: solid 2px magenta;
+// }
 
 .table {
   border-collapse: collapse;
+  display: table;
 }
 
-.table-header {
-  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
-}
+// .table-header {
+//   display: table-header-group;
+//   background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
+// }
 
-.table-header__cell {
-  border: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
-  padding: var(--pharos-spacing-1-x);
-}
+// .table-header__cell {
+//   border: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+//   padding: var(--pharos-spacing-1-x);
+// }
 
-.table-body__cell {
-  border: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
-  padding: var(--pharos-spacing-1-x);
-}
+// .table-body__cell {
+//   border: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+//   padding: var(--pharos-spacing-1-x);
+// }
 
 .table-sticky-header {
   position: sticky;

diff --git a/...src/components/table/pharos-table.test.ts → ...components/table/pharos-table.test_old.ts b/...src/components/table/pharos-table.test.ts → ...components/table/pharos-table.test_old.ts