SFC perf testing

.changeset/two-bugs-send.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+SFC but also placeholder changelog

packages/components/.template-lintrc.cjs

@@ -15,4 +15,14 @@ module.exports = {
     'no-builtin-form-components': false,
     'no-bare-strings': true,
   },
+  overrides: [
+    // temporary fix until the prettier plugin works with `.gts/gjs` files
+    // https://github.com/ember-template-lint/ember-template-lint-plugin-prettier/issues/268
+    {
+      files: ['**/*.{gjs,gts}'],
+      rules: {
+        prettier: false,
+      },
+    },
+  ],
 };

packages/components/eslint.config.mjs

@@ -83,6 +83,9 @@ export default ts.config(
       parserOptions: parserOptions.esm.ts,
     },
     extends: [...ts.configs.recommendedTypeChecked, ember.configs.gts],
+    rules: {
+      'ember/no-at-ember-render-modifiers': 'off',
+    },
   },
   {
     files: ['src/**/*'],

packages/components/src/components/hds/accordion/index.ts → packages/components/src/components/hds/accordion/index.gts

@@ -3,19 +3,25 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { hash } from '@ember/helper';
+import Component from '@glimmer/component';
 
-import { SIZES, DEFAULT_SIZE, TYPES, DEFAULT_TYPE } from './item/index.ts';
+import HdsAccordionItem, {
+  DEFAULT_SIZE,
+  DEFAULT_TYPE,
+  SIZES,
+  TYPES,
+} from './item/index.gts';
+import { HdsAccordionItemTitleTagValues } from './types.ts';
 
 import type { ComponentLike } from '@glint/template';
-import { HdsAccordionItemTitleTagValues } from './types.ts';
-import type { HdsAccordionItemSignature } from './item/index.ts';
+import type { HdsAccordionItemSignature } from './item/index.gts';
 import type {
   HdsAccordionForceStates,
+  HdsAccordionItemTitleTags,
   HdsAccordionSizes,
   HdsAccordionTypes,
-  HdsAccordionItemTitleTags,
 } from './types.ts';
 
 export interface HdsAccordionSignature {
@@ -96,4 +102,20 @@ export default class HdsAccordion extends Component<HdsAccordionSignature> {
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{yield
+        (hash
+          Item=(component
+            HdsAccordionItem
+            titleTag=this.titleTag
+            size=this.size
+            type=this.type
+            forceState=@forceState
+          )
+        )
+      }}
+    </div>
+  </template>
 }

packages/components/src/components/hds/accordion/item/button.ts → packages/components/src/components/hds/accordion/item/button.gts

@@ -5,7 +5,10 @@
 
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { eq } from 'ember-truth-helpers';
 
+import HdsIcon from '../../icon/index.gts';
 import type { HdsAccordionSizes } from '../types.ts';
 
 export interface HdsAccordionItemButtonSignature {
@@ -58,4 +61,19 @@ export default class HdsAccordionItemButton extends Component<HdsAccordionItemBu
     }
     return classes.join(' ');
   }
+
+  <template>
+    <button
+      class={{this.classNames}}
+      type="button"
+      {{on "click" this.onClick}}
+      aria-controls={{@contentId}}
+      aria-expanded={{if @isOpen "true" "false"}}
+      aria-label={{@ariaLabel}}
+      aria-labelledby={{@ariaLabelledBy}}
+      ...attributes
+    >
+      <HdsIcon @name="chevron-down" @size={{if (eq @size "large") "24" "16"}} />
+    </button>
+  </template>
 }

packages/components/src/components/hds/accordion/item/index.ts → packages/components/src/components/hds/accordion/item/index.gts

@@ -3,21 +3,26 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { hash } from '@ember/helper';
 import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+import { eq, or } from 'ember-truth-helpers';
 
-import {
-  HdsAccordionSizeValues,
-  HdsAccordionTypeValues,
-  HdsAccordionItemTitleTagValues,
-} from '../types.ts';
+import HdsDisclosurePrimitive from '../../disclosure-primitive/index.gts';
+import HdsTextBody from '../../text/body.gts';
 import type {
   HdsAccordionForceStates,
+  HdsAccordionItemTitleTags,
   HdsAccordionSizes,
   HdsAccordionTypes,
-  HdsAccordionItemTitleTags,
 } from '../types.ts';
+import {
+  HdsAccordionItemTitleTagValues,
+  HdsAccordionSizeValues,
+  HdsAccordionTypeValues,
+} from '../types.ts';
+import HdsAccordionItemButton from './button.gts';
 
 export const SIZES: HdsAccordionSizes[] = Object.values(HdsAccordionSizeValues);
 export const DEFAULT_SIZE = HdsAccordionSizeValues.Medium;
@@ -163,4 +168,50 @@ export default class HdsAccordionItem extends Component<HdsAccordionItemSignatur
 
     return classes.join(' ');
   }
+
+  <template>
+    <HdsDisclosurePrimitive
+      class={{this.classNames}}
+      @isOpen={{(or @isOpen (eq @forceState "open"))}}
+      @onClickToggle={{@onClickToggle}}
+      ...attributes
+    >
+      <:toggle as |t|>
+        <div class="hds-accordion-item__toggle">
+          <HdsAccordionItemButton
+            @isOpen={{t.isOpen}}
+            @onClickToggle={{t.onClickToggle}}
+            @contentId={{t.contentId}}
+            @ariaLabel={{@ariaLabel}}
+            @ariaLabelledBy={{this.ariaLabelledBy}}
+            @size={{this.size}}
+            @parentContainsInteractive={{this.containsInteractive}}
+          />
+
+          <HdsTextBody
+            @tag={{this.titleTag}}
+            @size={{this.toggleTextSize}}
+            @weight="semibold"
+            @color="strong"
+            id={{this._titleId}}
+            class="hds-accordion-item__toggle-content"
+          >
+            {{yield to="toggle"}}
+          </HdsTextBody>
+        </div>
+      </:toggle>
+
+      <:content as |c|>
+        <HdsTextBody
+          class="hds-accordion-item__content"
+          @tag="div"
+          @size="200"
+          @weight="regular"
+          @color="primary"
+        >
+          {{yield (hash close=c.close) to="content"}}
+        </HdsTextBody>
+      </:content>
+    </HdsDisclosurePrimitive>
+  </template>
 }

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

@@ -10,6 +10,7 @@ import type {
   HdsAdvancedTableHorizontalAlignment,
 } from './types.ts';
 import type HdsAdvancedTableRow from './models/row.ts';
+import { hash } from '@ember/helper';
 export interface HdsAdvancedTableExpandableTrGroupSignature {
   Args: {
     align?: HdsAdvancedTableHorizontalAlignment;
@@ -60,4 +61,47 @@ export default class HdsAdvancedTableExpandableTrGroup extends Component<HdsAdva
 
     return this.args.record.hasChildren && this.args.record.isOpen;
   }
+
+  <template>
+    {{yield
+      (hash
+        data=@record
+        isExpandable=@record.hasChildren
+        id=this._id
+        depth=this.depth
+        isExpanded=@record.isOpen
+        parentId=@parentId
+        rowIndex=this.rowIndex
+        shouldDisplayChildRows=@shouldDisplayChildRows
+        onClickToggle=@onClickToggle
+      )
+    }}
+    {{#if @record.hasChildren}}
+      {{#each @record.children as |childRecord|}}
+        <HdsAdvancedTableExpandableTrGroup
+          @record={{childRecord}}
+          @depth={{this.childrenDepth}}
+          @align={{@align}}
+          @parentId={{this._id}}
+          @rowIndex="{{this.rowIndex}}.{{this.childrenDepth}}"
+          @shouldDisplayChildRows={{this.shouldDisplayChildRows}}
+          @onClickToggle={{childRecord.onClickToggle}}
+          as |T|
+        >
+          {{yield
+            (hash
+              data=T.data
+              isExpandable=T.isExpandable
+              depth=T.depth
+              isExpanded=T.isExpanded
+              parentId=T.parentId
+              id=T.id
+              shouldDisplayChildRows=T.shouldDisplayChildRows
+              onClickToggle=T.onClickToggle
+            )
+          }}
+        </HdsAdvancedTableExpandableTrGroup>
+      {{/each}}
+    {{/if}}
+  </template>
 }