AdvancedTable: Website documentation

.changeset/strange-wolves-press.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`AdvancedTable` - Added `AdvancedTable` component and related sub-components

packages/components/package.json

@@ -59,6 +59,7 @@
     "luxon": "^2.3.2 || ^3.4.2",
     "prismjs": "^1.29.0",
     "sass": "^1.69.5",
+    "tabbable": "^6.2.0",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
@@ -124,6 +125,17 @@
       "./components/hds/accordion/index.js": "./dist/_app_/components/hds/accordion/index.js",
       "./components/hds/accordion/item/button.js": "./dist/_app_/components/hds/accordion/item/button.js",
       "./components/hds/accordion/item/index.js": "./dist/_app_/components/hds/accordion/item/index.js",
+      "./components/hds/advanced-table/expandable-tr-group.js": "./dist/_app_/components/hds/advanced-table/expandable-tr-group.js",
+      "./components/hds/advanced-table/helpers.js": "./dist/_app_/components/hds/advanced-table/helpers.js",
+      "./components/hds/advanced-table/index.js": "./dist/_app_/components/hds/advanced-table/index.js",
+      "./components/hds/advanced-table/td.js": "./dist/_app_/components/hds/advanced-table/td.js",
+      "./components/hds/advanced-table/th-button-expand.js": "./dist/_app_/components/hds/advanced-table/th-button-expand.js",
+      "./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
+      "./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
+      "./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
+      "./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
+      "./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
+      "./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
       "./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
       "./components/hds/alert/index.js": "./dist/_app_/components/hds/alert/index.js",
       "./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",

packages/components/src/components.ts

@@ -14,6 +14,19 @@ export { default as HdsAccordion } from './components/hds/accordion/index.ts';
 export { default as HdsAccordionItem } from './components/hds/accordion/item/index.ts';
 export * from './components/hds/accordion/types.ts';
 
+// Advanced Table
+export { default as HdsAdvancedTable } from './components/hds/advanced-table/index.ts';
+export { default as HdsAdvancedTableTd } from './components/hds/advanced-table/td.ts';
+export { default as HdsAdvancedTableTh } from './components/hds/advanced-table/th.ts';
+export { default as HdsAdvancedTableThButtonSort } from './components/hds/advanced-table/th-button-sort.ts';
+export { default as HdsAdvancedTableThButtonTooltip } from './components/hds/advanced-table/th-button-tooltip.ts';
+export { default as HdsAdvancedTableThSelectable } from './components/hds/advanced-table/th-selectable.ts';
+export { default as HdsAdvancedTableThSort } from './components/hds/advanced-table/th-sort.ts';
+export { default as HdsAdvancedTableTr } from './components/hds/advanced-table/tr.ts';
+export { default as HdsAdvancedTableThButtonExpand } from './components/hds/advanced-table/th-button-expand.ts';
+export { default as HdsAdvancedTableExpandableTrGroup } from './components/hds/advanced-table/expandable-tr-group.ts';
+export * from './components/hds/advanced-table/types.ts';
+
 // Alert
 export { default as HdsAlert } from './components/hds/alert/index.ts';
 export { default as HdsAlertDescription } from './components/hds/alert/description.ts';

packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs

@@ -0,0 +1,43 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{yield
+  (hash
+    data=@record
+    isExpandable=this.hasChildren
+    id=this._id
+    depth=this.depth
+    onClickToggle=this.onClickToggle
+    isExpanded=this._isExpanded
+    parentId=@parentId
+    rowIndex=this.rowIndex
+  )
+}}
+{{#if (and this.hasChildren this._isExpanded)}}
+  <div class="hds-advanced-table__expandable-tr-group">
+    {{#each this.children as |childRecord|}}
+      <Hds::AdvancedTable::ExpandableTrGroup
+        @record={{childRecord}}
+        @depth={{this.childrenDepth}}
+        @align={{@align}}
+        @parentId={{this._id}}
+        @childrenKey={{this.childrenKey}}
+        @rowIndex="{{this.rowIndex}}.{{this.childrenDepth}}"
+        as |T|
+      >
+        {{yield
+          (hash
+            data=T.data
+            isExpandable=T.isExpandable
+            depth=T.depth
+            onClickToggle=T.onClickToggle
+            isExpanded=T.isExpanded
+            parentId=T.parentId
+            id=T.id
+          )
+        }}
+      </Hds::AdvancedTable::ExpandableTrGroup>
+    {{/each}}
+  </div>
+{{/if}}

packages/components/src/components/hds/advanced-table/expandable-tr-group.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+import type { HdsAdvancedTableHorizontalAlignment } from './types';
+export interface HdsAdvancedTableExpandableTrGroupSignature {
+  Args: {
+    align?: HdsAdvancedTableHorizontalAlignment;
+    depth?: number;
+    record: Record<string, unknown>;
+    parentId?: string;
+    childrenKey?: string;
+    rowIndex: number | string;
+  };
+  Blocks: {
+    default?: [
+      {
+        data: Record<string, unknown>;
+        isExpandable: boolean;
+        id?: string;
+        parentId?: string;
+        depth: number;
+        onClickToggle?: () => void;
+        isExpanded?: boolean;
+        rowIndex?: string;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsAdvancedTableExpandableTrGroup extends Component<HdsAdvancedTableExpandableTrGroupSignature> {
+  @tracked private _isExpanded = false;
+
+  private _id = guidFor(this);
+
+  constructor(
+    owner: unknown,
+    args: HdsAdvancedTableExpandableTrGroupSignature['Args']
+  ) {
+    super(owner, args);
+
+    this._isExpanded =
+      this.args.record['isExpanded'] &&
+      typeof this.args.record['isExpanded'] === 'boolean'
+        ? this.args.record['isExpanded']
+        : false;
+  }
+
+  get childrenKey(): string {
+    const { childrenKey = 'children' } = this.args;
+
+    return childrenKey;
+  }
+
+  get children(): Array<Record<string, unknown>> | undefined {
+    const { record } = this.args;
+
+    if (record[this.childrenKey]) {
+      const children = record[this.childrenKey];
+
+      if (Array.isArray(children)) {
+        return children;
+      }
+    }
+    return undefined;
+  }
+
+  get hasChildren(): boolean {
+    if (!this.children) return false;
+    return true;
+  }
+
+  get depth(): number {
+    const { depth = 0 } = this.args;
+
+    return depth;
+  }
+
+  get rowIndex(): string {
+    const { rowIndex } = this.args;
+    return `${rowIndex}`;
+  }
+
+  get childrenDepth(): number {
+    return this.depth + 1;
+  }
+
+  @action onClickToggle() {
+    this._isExpanded = !this._isExpanded;
+  }
+}