From d38fc43a87c29b1155583e00eaf81927bd4a3317 Mon Sep 17 00:00:00 2001 From: Alexey Kulakov Date: Sat, 19 Apr 2025 01:28:20 -0700 Subject: [PATCH 1/6] fix(components): `LinkToExtrnal` fix(components): `LinkToExtrnal` --- packages/components/.template-lintrc.cjs | 10 ++ packages/components/package.json | 1 + packages/components/src/components.ts | 6 +- .../src/components/hds/app-footer/link.ts | 2 +- .../components/hds/app-footer/status-link.ts | 2 +- .../components/hds/app-header/home-link.ts | 2 +- .../hds/app-side-nav/list/back-link.ts | 2 +- .../components/hds/app-side-nav/list/link.ts | 2 +- .../src/components/hds/breadcrumb/item.gts | 130 ++++++++++++++ .../src/components/hds/button/index.ts | 2 +- .../hds/dropdown/list-item/checkmark.ts | 2 +- .../hds/dropdown/list-item/interactive.ts | 2 +- .../hds/icon/{index.ts => index.gts} | 31 ++++ .../src/components/hds/icon/index.hbs | 28 --- .../src/components/hds/interactive/index.gts | 107 +++++++++++ .../src/components/hds/link/inline.ts | 2 +- .../src/components/hds/link/standalone.ts | 2 +- .../hds/pagination/compact/index.ts | 2 +- .../components/hds/pagination/nav/arrow.ts | 2 +- .../components/hds/pagination/nav/number.ts | 2 +- .../hds/pagination/numbered/index.ts | 2 +- .../src/components/hds/pagination/types.ts | 2 +- .../hds/side-nav/header/home-link.ts | 2 +- .../hds/side-nav/header/icon-button.ts | 2 +- .../components/hds/side-nav/list/back-link.ts | 2 +- .../src/components/hds/side-nav/list/link.ts | 2 +- .../src/components/hds/tag/index.ts | 2 +- packages/components/src/template-registry.ts | 2 +- pnpm-lock.yaml | 169 +++++++++++++++++- website/app/components/dynamic-template.js | 2 +- 30 files changed, 469 insertions(+), 57 deletions(-) create mode 100644 packages/components/src/components/hds/breadcrumb/item.gts rename packages/components/src/components/hds/icon/{index.ts => index.gts} (79%) delete mode 100644 packages/components/src/components/hds/icon/index.hbs create mode 100644 packages/components/src/components/hds/interactive/index.gts diff --git a/packages/components/.template-lintrc.cjs b/packages/components/.template-lintrc.cjs index 1516aab7fb6..a832ae3b4b9 100644 --- a/packages/components/.template-lintrc.cjs +++ b/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, + }, + }, + ], }; diff --git a/packages/components/package.json b/packages/components/package.json index 0f37fe4bcb2..ab6ea6c4076 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -62,6 +62,7 @@ "ember-cli-sass": "^11.0.1", "ember-concurrency": "^4.0.4", "ember-element-helper": "^0.8.6", + "ember-engines": "^0.12.0", "ember-focus-trap": "^1.1.1", "ember-get-config": "^2.1.1", "ember-modifier": "^4.2.2", diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts index 400dc061324..124d2930b7c 100644 --- a/packages/components/src/components.ts +++ b/packages/components/src/components.ts @@ -76,7 +76,7 @@ export * from './components/hds/badge-count/types.ts'; // Breadcrumb export { default as HdsBreadcrumb } from './components/hds/breadcrumb/index.ts'; -export { default as HdsBreadcrumbItem } from './components/hds/breadcrumb/item.ts'; +export { default as HdsBreadcrumbItem } from './components/hds/breadcrumb/item.gts'; export { default as HdsBreadcrumbTruncation } from './components/hds/breadcrumb/truncation.ts'; // Button @@ -223,7 +223,7 @@ export { default as HdsFormToggleField } from './components/hds/form/toggle/fiel export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.ts'; // Icon -export { default as HdsIcon } from './components/hds/icon/index.ts'; +export { default as HdsIcon } from './components/hds/icon/index.gts'; export * from './components/hds/icon/types.ts'; // IconTile @@ -388,7 +388,7 @@ export { default as HdsDisclosurePrimitive } from './components/hds/disclosure-p export { default as HdsDismissButton } from './components/hds/dismiss-button/index.ts'; // Interactive -export { default as HdsInteractive } from './components/hds/interactive/index.ts'; +export { default as HdsInteractive } from './components/hds/interactive/index.gts'; // MenuPrimitive export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.ts'; diff --git a/packages/components/src/components/hds/app-footer/link.ts b/packages/components/src/components/hds/app-footer/link.ts index b650035a10c..eccc6b45639 100644 --- a/packages/components/src/components/hds/app-footer/link.ts +++ b/packages/components/src/components/hds/app-footer/link.ts @@ -5,7 +5,7 @@ import TemplateOnlyComponent from '@ember/component/template-only'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; import type { HdsLinkColors, HdsLinkIconPositions } from '../link/types.ts'; import type { HdsLinkInlineSignature } from '../link/inline.ts'; import type { HdsIconSignature } from '../icon'; diff --git a/packages/components/src/components/hds/app-footer/status-link.ts b/packages/components/src/components/hds/app-footer/status-link.ts index 266d7c76a7b..33d7ce5e416 100644 --- a/packages/components/src/components/hds/app-footer/status-link.ts +++ b/packages/components/src/components/hds/app-footer/status-link.ts @@ -8,7 +8,7 @@ import { htmlSafe } from '@ember/template'; import { assert } from '@ember/debug'; import type { SafeString } from '@ember/template'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; import { HdsAppFooterStatusLinkStatusValues } from './types.ts'; import type { HdsAppFooterStatusTypes } from './types.ts'; import type { HdsAppFooterLinkSignature } from './link.ts'; diff --git a/packages/components/src/components/hds/app-header/home-link.ts b/packages/components/src/components/hds/app-header/home-link.ts index bb53d175014..82c6c44eb6f 100644 --- a/packages/components/src/components/hds/app-header/home-link.ts +++ b/packages/components/src/components/hds/app-header/home-link.ts @@ -7,7 +7,7 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import type { HdsIconSignature } from '../icon'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; export interface HdsAppHeaderHomeLinkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/app-side-nav/list/back-link.ts b/packages/components/src/components/hds/app-side-nav/list/back-link.ts index 4cd0e21d8e2..b5338fde907 100644 --- a/packages/components/src/components/hds/app-side-nav/list/back-link.ts +++ b/packages/components/src/components/hds/app-side-nav/list/back-link.ts @@ -5,7 +5,7 @@ import TemplateOnlyComponent from '@ember/component/template-only'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; export interface HdsAppSideNavListBackLinkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/app-side-nav/list/link.ts b/packages/components/src/components/hds/app-side-nav/list/link.ts index 6d22928fe1e..c733b9e40f3 100644 --- a/packages/components/src/components/hds/app-side-nav/list/link.ts +++ b/packages/components/src/components/hds/app-side-nav/list/link.ts @@ -6,7 +6,7 @@ import TemplateOnlyComponent from '@ember/component/template-only'; import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; export interface HdsAppSideNavListLinkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/breadcrumb/item.gts b/packages/components/src/components/hds/breadcrumb/item.gts new file mode 100644 index 00000000000..ff4c1dbccca --- /dev/null +++ b/packages/components/src/components/hds/breadcrumb/item.gts @@ -0,0 +1,130 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { htmlSafe } from '@ember/template'; +import { assert } from '@ember/debug'; +import { LinkTo } from '@ember/routing'; +// @ts-expect-error: no types +import LinkToExternal from 'ember-engines/components/link-to-external-component.js'; +import HdsIcon from '../icon/index.gts'; +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; + +import type { SafeString } from '@ember/template'; +import type { HdsIconSignature } from '../icon'; + +export interface HdsBreadcrumbItemSignature { + Args: { + current?: boolean; + maxWidth?: string; + text: string; + isRouteExternal?: boolean; + icon?: HdsIconSignature['Args']['name']; + route?: string; + models?: Array; + model?: string | number; + query?: Record; + 'current-when'?: string; + replace?: boolean; + }; + Element: HTMLLIElement; +} + +export default class HdsBreadcrumbItem extends Component { + /** + * @param maxWidth + * @type {string} + * @default undefined + * @description A parameter that can be applied to an "item" to limit its max-width + */ + get maxWidth(): string | undefined { + const { maxWidth } = this.args; + + if (maxWidth) { + assert( + `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`, + maxWidth.match(/^\d+(px|em)$/) + ); + + return maxWidth; + } else { + return undefined; + } + } + + /** + * Get the inline style to apply to the item. + * @method BreadcrumbItem#itemStyle + * @return {string} The "style" attribute to apply to the item. + */ + get itemStyle(): SafeString | undefined { + if (this.maxWidth) { + return htmlSafe(`max-width: ${this.maxWidth}`); + } else { + return undefined; + } + } + + /** + * Get the class names to apply to the component. + * @method BreadcrumbItem#classNames + * @return {string} The "class" attribute to apply to the component. + */ + get classNames(): string { + const classes = ['hds-breadcrumb__item']; + + return classes.join(' '); + } + + +} diff --git a/packages/components/src/components/hds/button/index.ts b/packages/components/src/components/hds/button/index.ts index cb162bde628..99aaae2597e 100644 --- a/packages/components/src/components/hds/button/index.ts +++ b/packages/components/src/components/hds/button/index.ts @@ -17,7 +17,7 @@ import type { HdsButtonColors, HdsButtonIconPositions, } from './types.ts'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; import type { HdsIconSignature } from '../icon'; export const SIZES: HdsButtonSizes[] = Object.values(HdsButtonSizeValues); diff --git a/packages/components/src/components/hds/dropdown/list-item/checkmark.ts b/packages/components/src/components/hds/dropdown/list-item/checkmark.ts index d3a405a6611..b50923013a2 100644 --- a/packages/components/src/components/hds/dropdown/list-item/checkmark.ts +++ b/packages/components/src/components/hds/dropdown/list-item/checkmark.ts @@ -5,7 +5,7 @@ import Component from '@glimmer/component'; import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; export interface HdsDropdownListItemCheckmarkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.ts b/packages/components/src/components/hds/dropdown/list-item/interactive.ts index 323942938b0..c9ab5cba1a2 100644 --- a/packages/components/src/components/hds/dropdown/list-item/interactive.ts +++ b/packages/components/src/components/hds/dropdown/list-item/interactive.ts @@ -9,7 +9,7 @@ import { assert, deprecate } from '@ember/debug'; import { HdsDropdownListItemInteractiveColorValues } from './types.ts'; import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; import type { HdsDropdownListItemInteractiveColors } from './types.ts'; import type { ComponentLike } from '@glint/template'; import type { HdsBadgeSignature } from '../../badge/index.ts'; diff --git a/packages/components/src/components/hds/icon/index.ts b/packages/components/src/components/hds/icon/index.gts similarity index 79% rename from packages/components/src/components/hds/icon/index.ts rename to packages/components/src/components/hds/icon/index.gts index 6cc7b58444e..798643cdc96 100644 --- a/packages/components/src/components/hds/icon/index.ts +++ b/packages/components/src/components/hds/icon/index.gts @@ -112,4 +112,35 @@ export default class HdsIcon extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/icon/index.hbs b/packages/components/src/components/hds/icon/index.hbs deleted file mode 100644 index 2173fb69bfd..00000000000 --- a/packages/components/src/components/hds/icon/index.hbs +++ /dev/null @@ -1,28 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - {{#if @title}} - {{@title}} - - - - {{else}} - - {{/if}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/interactive/index.gts b/packages/components/src/components/hds/interactive/index.gts new file mode 100644 index 00000000000..9c9f27419e6 --- /dev/null +++ b/packages/components/src/components/hds/interactive/index.gts @@ -0,0 +1,107 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { LinkTo } from '@ember/routing'; +import { on } from '@ember/modifier'; +// @ts-expect-error: no types +import LinkToExternal from 'ember-engines/components/link-to-external-component.js'; +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; + +export interface HdsInteractiveSignature { + Args: { + href?: string; + isHrefExternal?: boolean; + isRouteExternal?: boolean; + // the arguments and types below are mirroring the ones in LinkTo https://github.com/typed-ember/glint/blob/main/packages/environment-ember-loose/-private/intrinsics/link-to.d.ts#L9 + // because they're not exported we're unable to import them directly from glint + route?: string; + models?: unknown[]; + model?: unknown; + query?: Record; + 'current-when'?: string | boolean; + replace?: boolean; + }; + Blocks: { + default: []; + }; + Element: HTMLAnchorElement | HTMLButtonElement; +} + +export default class HdsInteractive extends Component { + /** + * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer") + * + * @param isHrefExternal + * @type boolean + * @default true + */ + get isHrefExternal(): boolean { + return this.args.isHrefExternal ?? true; + } + + /** + * Determines if a @route value is "external" (uses the LinkToExternal component instead of LinkTo) + * + * @param isRouteExternal + * @type boolean + * @default false + */ + get isRouteExternal(): boolean { + return this.args.isRouteExternal ?? false; + } + + onKeyUp = (event: KeyboardEvent): void => { + if (event.key === ' ' || event.code === 'Space') { + (event.target as HTMLElement).click(); + } + }; + + +} diff --git a/packages/components/src/components/hds/link/inline.ts b/packages/components/src/components/hds/link/inline.ts index a2eb5849e3a..e60e9bcae1f 100644 --- a/packages/components/src/components/hds/link/inline.ts +++ b/packages/components/src/components/hds/link/inline.ts @@ -7,7 +7,7 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { HdsLinkColorValues, HdsLinkIconPositionValues } from './types.ts'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; import type { HdsLinkColors, HdsLinkIconPositions } from './types.ts'; import type { HdsIconSignature } from '../icon'; import type Owner from '@ember/owner'; diff --git a/packages/components/src/components/hds/link/standalone.ts b/packages/components/src/components/hds/link/standalone.ts index 2652dbd164a..9bcb1d10399 100644 --- a/packages/components/src/components/hds/link/standalone.ts +++ b/packages/components/src/components/hds/link/standalone.ts @@ -11,7 +11,7 @@ import { HdsLinkStandaloneSizeValues, } from './types.ts'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; import type { HdsLinkColors, HdsLinkIconPositions, diff --git a/packages/components/src/components/hds/pagination/compact/index.ts b/packages/components/src/components/hds/pagination/compact/index.ts index 06fa771a11b..a9300445855 100644 --- a/packages/components/src/components/hds/pagination/compact/index.ts +++ b/packages/components/src/components/hds/pagination/compact/index.ts @@ -13,7 +13,7 @@ import type { HdsPaginationRoutingProps, HdsPaginationDirections, } from '../types'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; import type Owner from '@ember/owner'; type HdsInteractiveQuery = HdsInteractiveSignature['Args']['query']; diff --git a/packages/components/src/components/hds/pagination/nav/arrow.ts b/packages/components/src/components/hds/pagination/nav/arrow.ts index 8f6ba527732..7f67e18c1f6 100644 --- a/packages/components/src/components/hds/pagination/nav/arrow.ts +++ b/packages/components/src/components/hds/pagination/nav/arrow.ts @@ -12,7 +12,7 @@ import { } from '../types.ts'; import type { HdsIconSignature } from '../../icon/index.ts'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; import type { HdsPaginationDirections, HdsPaginationDirectionAriaLabels, diff --git a/packages/components/src/components/hds/pagination/nav/number.ts b/packages/components/src/components/hds/pagination/nav/number.ts index e78c1a49038..17c26fdc34e 100644 --- a/packages/components/src/components/hds/pagination/nav/number.ts +++ b/packages/components/src/components/hds/pagination/nav/number.ts @@ -6,7 +6,7 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; import { assert } from '@ember/debug'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; interface HdsPaginationNavNumberArgs { page: number; diff --git a/packages/components/src/components/hds/pagination/numbered/index.ts b/packages/components/src/components/hds/pagination/numbered/index.ts index bd71c1aa055..8c33322e2a0 100644 --- a/packages/components/src/components/hds/pagination/numbered/index.ts +++ b/packages/components/src/components/hds/pagination/numbered/index.ts @@ -14,7 +14,7 @@ import type { HdsPaginationElliptizedPageArray, HdsPaginationElliptizedPageArrayItem, } from '../types'; -import type { HdsInteractiveSignature } from '../../interactive/index.ts'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; import type Owner from '@ember/owner'; interface ElliptizeProps { pages: number[]; diff --git a/packages/components/src/components/hds/pagination/types.ts b/packages/components/src/components/hds/pagination/types.ts index ca7fc341ac2..b21fc851468 100644 --- a/packages/components/src/components/hds/pagination/types.ts +++ b/packages/components/src/components/hds/pagination/types.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import type { HdsInteractiveSignature } from '../interactive'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; export enum HdsPaginationDirectionValues { Next = 'next', diff --git a/packages/components/src/components/hds/side-nav/header/home-link.ts b/packages/components/src/components/hds/side-nav/header/home-link.ts index ed502a1985f..530ee7d7085 100644 --- a/packages/components/src/components/hds/side-nav/header/home-link.ts +++ b/packages/components/src/components/hds/side-nav/header/home-link.ts @@ -7,7 +7,7 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive/'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; export interface HdsSideNavHeaderHomeLinkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/side-nav/header/icon-button.ts b/packages/components/src/components/hds/side-nav/header/icon-button.ts index 7645e31be45..b78eee7dbca 100644 --- a/packages/components/src/components/hds/side-nav/header/icon-button.ts +++ b/packages/components/src/components/hds/side-nav/header/icon-button.ts @@ -7,7 +7,7 @@ import Component from '@glimmer/component'; import { assert, deprecate } from '@ember/debug'; import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive/'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; import type Owner from '@ember/owner'; export interface HdsSideNavHeaderIconButtonSignature { diff --git a/packages/components/src/components/hds/side-nav/list/back-link.ts b/packages/components/src/components/hds/side-nav/list/back-link.ts index 3b460d93bbc..cad954afb33 100644 --- a/packages/components/src/components/hds/side-nav/list/back-link.ts +++ b/packages/components/src/components/hds/side-nav/list/back-link.ts @@ -5,7 +5,7 @@ import TemplateOnlyComponent from '@ember/component/template-only'; -import type { HdsInteractiveSignature } from '../../interactive/'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; export interface HdsSideNavListBackLinkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/side-nav/list/link.ts b/packages/components/src/components/hds/side-nav/list/link.ts index 4c6d04f1e6a..f2f8dfa2789 100644 --- a/packages/components/src/components/hds/side-nav/list/link.ts +++ b/packages/components/src/components/hds/side-nav/list/link.ts @@ -6,7 +6,7 @@ import TemplateOnlyComponent from '@ember/component/template-only'; import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; export interface HdsSideNavListLinkSignature { Args: HdsInteractiveSignature['Args'] & { diff --git a/packages/components/src/components/hds/tag/index.ts b/packages/components/src/components/hds/tag/index.ts index 4003cd1a483..0e575d25700 100644 --- a/packages/components/src/components/hds/tag/index.ts +++ b/packages/components/src/components/hds/tag/index.ts @@ -13,7 +13,7 @@ import { HdsTagColorValues } from './types.ts'; import type { HdsTagColors } from './types.ts'; import { HdsTagTooltipPlacementValues } from './types.ts'; import type { HdsTagTooltipPlacements } from './types.ts'; -import type { HdsInteractiveSignature } from '../interactive/'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; export const COLORS: HdsTagColors[] = Object.values(HdsTagColorValues); export const DEFAULT_COLOR = HdsTagColorValues.Primary; diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts index 66b79a5e3d1..d7dccd4e4eb 100644 --- a/packages/components/src/template-registry.ts +++ b/packages/components/src/template-registry.ts @@ -159,7 +159,7 @@ import type HdsFormVisibilityToggleComponent from './components/hds/form/visibil import type HdsIconComponent from './components/hds/icon'; import type HdsIconTileComponent from './components/hds/icon-tile'; -import type HdsInteractiveComponent from './components/hds/interactive'; +import type HdsInteractiveComponent from './components/hds/interactive/index.gts'; import type HdsLayoutFlexComponent from './components/hds/layout/flex'; import type HdsLayoutFlexItemComponent from './components/hds/layout/flex/item'; import type HdsLayoutGridComponent from './components/hds/layout/grid'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 141c7b2cafe..7b52860993f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -150,6 +150,9 @@ importers: ember-element-helper: specifier: ^0.8.6 version: 0.8.8 + ember-engines: + specifier: ^0.12.0 + version: 0.12.0(@glint/template@1.5.2)(ember-source@6.6.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-focus-trap: specifier: ^1.1.1 version: 1.1.1(ember-source@6.6.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) @@ -2809,11 +2812,8 @@ packages: engines: {node: '>= 18'} peerDependencies: '@ember/string': ^3.1.1 || ^4.0.0 - ember-engines: '>= 0.11.0' ember-intl: ^7.3.0 peerDependenciesMeta: - ember-engines: - optional: true ember-intl: optional: true @@ -4008,6 +4008,9 @@ packages: algoliasearch@4.25.2: resolution: {integrity: sha512-lYx98L6kb1VvXypbPI7Z54C4BJB2VT5QvOYthvPq6/POufZj+YdyeZSKjoLBKHJgGmYWQTHOKtcCTdKf98WOCA==} + amd-name-resolver@0.0.6: + resolution: {integrity: sha512-W2trar3LgeKV/yB6ZRD3Iw7MlhrKjLMVSNAatWNNYsn4w+iSfbmA66VB+jQjVIfvzHPZicnHObAvflMkoVtjAQ==} + amd-name-resolver@1.2.0: resolution: {integrity: sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==} @@ -4351,6 +4354,9 @@ packages: babel-plugin-check-es2015-constants@6.22.0: resolution: {integrity: sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==} + babel-plugin-compact-reexports@1.1.0: + resolution: {integrity: sha512-+KgjNJ5yMeZzJxYZdLEy9m82m92aL7FLvNJcK6dYJbW06t+UTpFJ2FVSs35zMfURcPnrQELYhLG4VC+kt/4gvw==} + babel-plugin-debug-macros@0.2.0: resolution: {integrity: sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==} engines: {node: '>=4'} @@ -4678,6 +4684,10 @@ packages: broccoli-debug@0.6.5: resolution: {integrity: sha512-RIVjHvNar9EMCLDW/FggxFRXqpjhncM/3qq87bn/y+/zR9tqEkHvTqbyOc4QnB97NO2m6342w4wGkemkaeOuWg==} + broccoli-dependency-funnel@2.1.2: + resolution: {integrity: sha512-k6b0OnNuRcUnJ9TXA0o6RvqXOkTQ6APKoLsZeMJHAe/YjLjE1uTlfw4Z88GfGmi8gwtLHdnkrhBoJ7YdIkcVZA==} + engines: {node: '>= 6.0.0'} + broccoli-file-creator@1.2.0: resolution: {integrity: sha512-l9zthHg6bAtnOfRr/ieZ1srRQEsufMZID7xGYRW3aBDv3u/3Eux+Iawl10tAGYE5pL9YB4n5X4vxkp6iNOoZ9g==} @@ -6028,6 +6038,10 @@ packages: resolution: {integrity: sha512-hWpUz0eiNkWzi3FgHW5QU6LyCDyUlTWwuIROHluEKZoa9m6LJVXbb/EVFgIG3FkAib6a5Ie00WvkXEZFXxh3+A==} engines: {node: 14.* || >= 16} + ember-asset-loader@1.0.0: + resolution: {integrity: sha512-JXr9bEkkzXiamW2kMk36U2VugLzo4MeoTQGRxvpNFqU1oldUMzm/yFPVvtjsVOjishH4pVwQuOK9Sjrx9E2xZg==} + engines: {node: 14.* || 16.* || >= 17} + ember-assign-helper@0.5.0: resolution: {integrity: sha512-swH7FqmqB5iSeoKlU6X41iqw5HQ+EdBDyFDXmwytTyUd5GRvfGfZUn2SMUUGdyvo5FxXJWqMJ0rBT//EcGC0+Q==} peerDependencies: @@ -6233,6 +6247,16 @@ packages: resolution: {integrity: sha512-3slTltQV5ke53t3YVP2GYoswsQ6y+lhuVzKmt09tbEx91DapG8I/xa8W5OA0StvcQlavL3/vHrz/vCQEFs8bBA==} engines: {node: 14.* || 16.* || >= 18} + ember-engines@0.12.0: + resolution: {integrity: sha512-AsABgJpkrCoC2y/F1cNmcQI5Ia2VhlW2jyw5pAU1g3/XpeIJGV/4xRMbqNGwvs1KRxu78tW/ll20zVNl58N2jg==} + engines: {node: 16.* || 18.* || >= 20} + peerDependencies: + ember-engines-router-service: '>=0.5.0' + ember-source: ^3.28 || >= 4.0.0 + peerDependenciesMeta: + ember-engines-router-service: + optional: true + ember-eslint-parser@0.5.9: resolution: {integrity: sha512-IW4/3cEiFp49M2LiKyzi7VcT1egogOe8UxQ9eUKTooenC7Q4qNhzTD6rOZ8j51m8iJC+8hCzjbNCa3K4CN0Hhg==} engines: {node: '>=16.0.0'} @@ -7218,6 +7242,9 @@ packages: resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==} engines: {node: '>=14.14'} + fs-extra@3.0.1: + resolution: {integrity: sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==} + fs-extra@4.0.3: resolution: {integrity: sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==} @@ -8473,6 +8500,9 @@ packages: jsonfile@2.4.0: resolution: {integrity: sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==} + jsonfile@3.0.1: + resolution: {integrity: sha512-oBko6ZHlubVB5mRFkur5vgYR1UyqX+S6Y/oCfLhqNdcc2fYFlDpIoNc7AfKS1KOGcnNAkvsr0grLck9ANM815w==} + jsonfile@4.0.0: resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} @@ -9106,6 +9136,9 @@ packages: resolution: {integrity: sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==} engines: {node: '>= 0.8.0'} + mr-dep-walk@1.4.0: + resolution: {integrity: sha512-UaDUqkLsd0ep3jAx2+A7BIpfw8wKxhthDj3yPNLBnevipK1CUFJJiz24jRVLw18q7R2aEiRq13WwUBlnwfbQqQ==} + mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -9950,7 +9983,6 @@ packages: engines: {node: '>=0.6.0', teleport: '>=0.2.0'} deprecated: |- You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other. - (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) qs@6.13.0: @@ -14330,6 +14362,7 @@ snapshots: ember-cli-sass: 11.0.1 ember-concurrency: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2) ember-element-helper: 0.8.8 + ember-engines: 0.12.0(@glint/template@1.5.2)(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-focus-trap: 1.1.1(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-get-config: 2.1.1(@glint/template@1.5.2) ember-modifier: 4.2.2(@babel/core@7.28.0) @@ -14353,6 +14386,7 @@ snapshots: - '@glint/environment-ember-loose' - '@glint/template' - ember-basic-dropdown + - ember-engines-router-service - ember-source - supports-color @@ -14388,6 +14422,7 @@ snapshots: ember-cli-sass: 11.0.1 ember-concurrency: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2) ember-element-helper: 0.8.8 + ember-engines: 0.12.0(@glint/template@1.5.2)(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-focus-trap: 1.1.1(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-get-config: 2.1.1(@glint/template@1.5.2) ember-modifier: 4.2.2(@babel/core@7.28.0) @@ -14411,6 +14446,7 @@ snapshots: - '@glint/environment-ember-loose' - '@glint/template' - ember-basic-dropdown + - ember-engines-router-service - ember-source - supports-color @@ -15964,6 +16000,10 @@ snapshots: '@algolia/requester-node-http': 4.25.2 '@algolia/transporter': 4.25.2 + amd-name-resolver@0.0.6: + dependencies: + ensure-posix-path: 1.1.1 + amd-name-resolver@1.2.0: dependencies: ensure-posix-path: 1.1.1 @@ -16423,6 +16463,8 @@ snapshots: dependencies: babel-runtime: 6.26.0 + babel-plugin-compact-reexports@1.1.0: {} + babel-plugin-debug-macros@0.2.0(@babel/core@7.28.0): dependencies: '@babel/core': 7.28.0 @@ -17073,6 +17115,20 @@ snapshots: transitivePeerDependencies: - supports-color + broccoli-dependency-funnel@2.1.2: + dependencies: + broccoli-plugin: 1.3.1 + fs-tree-diff: 0.5.9 + heimdalljs: 0.2.6 + heimdalljs-logger: 0.1.10 + mkdirp: 0.5.6 + mr-dep-walk: 1.4.0 + path-posix: 1.0.0 + rimraf: 2.7.1 + symlink-or-copy: 1.3.1 + transitivePeerDependencies: + - supports-color + broccoli-file-creator@1.2.0: dependencies: broccoli-plugin: 1.3.1 @@ -18610,6 +18666,17 @@ snapshots: - supports-color - webpack + ember-asset-loader@1.0.0: + dependencies: + broccoli-caching-writer: 3.0.3 + broccoli-funnel: 3.0.8 + broccoli-merge-trees: 4.2.0 + ember-cli-babel: 7.26.11 + fs-extra: 10.1.0 + walk-sync: 3.0.0 + transitivePeerDependencies: + - supports-color + ember-assign-helper@0.5.0(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): dependencies: '@embroider/addon-shim': 1.10.0 @@ -19495,6 +19562,84 @@ snapshots: transitivePeerDependencies: - supports-color + ember-engines@0.12.0(@glint/template@1.5.2)(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): + dependencies: + '@babel/core': 7.28.0 + '@embroider/macros': 1.18.1(@glint/template@1.5.2) + amd-name-resolver: 1.3.1 + babel-plugin-compact-reexports: 1.1.0 + broccoli-babel-transpiler: 7.8.1 + broccoli-concat: 4.2.5 + broccoli-debug: 0.6.5 + broccoli-dependency-funnel: 2.1.2 + broccoli-file-creator: 2.1.1 + broccoli-funnel: 3.0.8 + broccoli-merge-trees: 4.2.0 + calculate-cache-key-for-tree: 2.0.0 + ember-asset-loader: 1.0.0 + ember-cli-babel: 7.26.11 + ember-cli-htmlbars: 6.3.0 + ember-cli-preprocess-registry: 5.0.1 + ember-cli-string-utils: 1.1.0 + ember-cli-version-checker: 5.1.2 + ember-source: 6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5) + lodash: 4.17.21 + transitivePeerDependencies: + - '@glint/template' + - supports-color + + ember-engines@0.12.0(@glint/template@1.5.2)(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): + dependencies: + '@babel/core': 7.28.0 + '@embroider/macros': 1.18.1(@glint/template@1.5.2) + amd-name-resolver: 1.3.1 + babel-plugin-compact-reexports: 1.1.0 + broccoli-babel-transpiler: 7.8.1 + broccoli-concat: 4.2.5 + broccoli-debug: 0.6.5 + broccoli-dependency-funnel: 2.1.2 + broccoli-file-creator: 2.1.1 + broccoli-funnel: 3.0.8 + broccoli-merge-trees: 4.2.0 + calculate-cache-key-for-tree: 2.0.0 + ember-asset-loader: 1.0.0 + ember-cli-babel: 7.26.11 + ember-cli-htmlbars: 6.3.0 + ember-cli-preprocess-registry: 5.0.1 + ember-cli-string-utils: 1.1.0 + ember-cli-version-checker: 5.1.2 + ember-source: 6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5) + lodash: 4.17.21 + transitivePeerDependencies: + - '@glint/template' + - supports-color + + ember-engines@0.12.0(@glint/template@1.5.2)(ember-source@6.6.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): + dependencies: + '@babel/core': 7.28.0 + '@embroider/macros': 1.18.1(@glint/template@1.5.2) + amd-name-resolver: 1.3.1 + babel-plugin-compact-reexports: 1.1.0 + broccoli-babel-transpiler: 7.8.1 + broccoli-concat: 4.2.5 + broccoli-debug: 0.6.5 + broccoli-dependency-funnel: 2.1.2 + broccoli-file-creator: 2.1.1 + broccoli-funnel: 3.0.8 + broccoli-merge-trees: 4.2.0 + calculate-cache-key-for-tree: 2.0.0 + ember-asset-loader: 1.0.0 + ember-cli-babel: 7.26.11 + ember-cli-htmlbars: 6.3.0 + ember-cli-preprocess-registry: 5.0.1 + ember-cli-string-utils: 1.1.0 + ember-cli-version-checker: 5.1.2 + ember-source: 6.6.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5) + lodash: 4.17.21 + transitivePeerDependencies: + - '@glint/template' + - supports-color + ember-eslint-parser@0.5.9(@babel/core@7.28.0)(@typescript-eslint/parser@8.38.0(eslint@9.32.0)(typescript@5.9.2))(eslint@9.32.0): dependencies: '@babel/core': 7.28.0 @@ -21366,6 +21511,12 @@ snapshots: jsonfile: 6.1.0 universalify: 2.0.1 + fs-extra@3.0.1: + dependencies: + graceful-fs: 4.2.11 + jsonfile: 3.0.1 + universalify: 0.1.2 + fs-extra@4.0.3: dependencies: graceful-fs: 4.2.11 @@ -23015,6 +23166,10 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 + jsonfile@3.0.1: + optionalDependencies: + graceful-fs: 4.2.11 + jsonfile@4.0.0: optionalDependencies: graceful-fs: 4.2.11 @@ -23833,6 +23988,12 @@ snapshots: transitivePeerDependencies: - supports-color + mr-dep-walk@1.4.0: + dependencies: + acorn: 5.7.4 + amd-name-resolver: 0.0.6 + fs-extra: 3.0.1 + mri@1.2.0: {} ms@2.0.0: {} diff --git a/website/app/components/dynamic-template.js b/website/app/components/dynamic-template.js index a31cffeac4b..5b24572535a 100644 --- a/website/app/components/dynamic-template.js +++ b/website/app/components/dynamic-template.js @@ -1,5 +1,5 @@ -import { setComponentTemplate } from '@ember/component'; import { getOwner } from '@ember/application'; +import { setComponentTemplate } from '@ember/component'; import { compileTemplate } from '@ember/template-compilation'; import { importSync } from '@embroider/macros'; import Component from '@glimmer/component'; From 6c8f37d0072dc96054f06a31e6a3b7f2f2dcd612 Mon Sep 17 00:00:00 2001 From: Alexey Kulakov Date: Sat, 19 Apr 2025 01:46:56 -0700 Subject: [PATCH 2/6] fix(components): make `ember-engines` optional --- packages/components/package.json | 1 - .../src/components/hds/breadcrumb/item.gts | 76 ++++---- .../src/components/hds/interactive/index.gts | 57 +++--- .../unpublished-development-types/global.d.ts | 6 +- pnpm-lock.yaml | 168 +----------------- 5 files changed, 83 insertions(+), 225 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index ab6ea6c4076..0f37fe4bcb2 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -62,7 +62,6 @@ "ember-cli-sass": "^11.0.1", "ember-concurrency": "^4.0.4", "ember-element-helper": "^0.8.6", - "ember-engines": "^0.12.0", "ember-focus-trap": "^1.1.1", "ember-get-config": "^2.1.1", "ember-modifier": "^4.2.2", diff --git a/packages/components/src/components/hds/breadcrumb/item.gts b/packages/components/src/components/hds/breadcrumb/item.gts index ff4c1dbccca..656274ffc33 100644 --- a/packages/components/src/components/hds/breadcrumb/item.gts +++ b/packages/components/src/components/hds/breadcrumb/item.gts @@ -7,14 +7,18 @@ import Component from '@glimmer/component'; import { htmlSafe } from '@ember/template'; import { assert } from '@ember/debug'; import { LinkTo } from '@ember/routing'; -// @ts-expect-error: no types -import LinkToExternal from 'ember-engines/components/link-to-external-component.js'; +import { + dependencySatisfies, + importSync, + macroCondition, +} from '@embroider/macros'; import HdsIcon from '../icon/index.gts'; import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; import type { SafeString } from '@ember/template'; import type { HdsIconSignature } from '../icon'; +import type Owner from '@ember/owner'; export interface HdsBreadcrumbItemSignature { Args: { @@ -34,6 +38,26 @@ export interface HdsBreadcrumbItemSignature { } export default class HdsBreadcrumbItem extends Component { + linkToComponent = LinkTo; + + constructor(owner: Owner, args: HdsBreadcrumbItemSignature['Args']) { + super(owner, args); + + if (this.args.isRouteExternal) { + if (macroCondition(dependencySatisfies('ember-engines', '*'))) { + // @ts-expect-error: shape is unknown + this.linkToComponent = importSync( + 'ember-engines/components/link-to-external-component.js' + ).default as LinkTo; + } else { + assert( + `@isRouteExternal is only available when using the "ember-engines" addon. Please install it to use this feature.`, + false + ); + } + } + } + /** * @param maxWidth * @type {string} @@ -91,39 +115,21 @@ export default class HdsBreadcrumbItem extends Component{{@text}} {{else}} - {{#if @isRouteExternal}} - - {{#if @icon}} -
- -
- {{/if}} - {{@text}} - - {{else}} - - {{#if @icon}} -
- -
- {{/if}} - {{@text}} - - {{/if}} + + {{#if @icon}} +
+ +
+ {{/if}} + {{@text}} + {{/if}} diff --git a/packages/components/src/components/hds/interactive/index.gts b/packages/components/src/components/hds/interactive/index.gts index 9c9f27419e6..4c3bf18a993 100644 --- a/packages/components/src/components/hds/interactive/index.gts +++ b/packages/components/src/components/hds/interactive/index.gts @@ -6,11 +6,17 @@ import Component from '@glimmer/component'; import { LinkTo } from '@ember/routing'; import { on } from '@ember/modifier'; -// @ts-expect-error: no types -import LinkToExternal from 'ember-engines/components/link-to-external-component.js'; +import { assert } from '@ember/debug'; +import { + dependencySatisfies, + importSync, + macroCondition, +} from '@embroider/macros'; import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; +import type Owner from '@ember/owner'; + export interface HdsInteractiveSignature { Args: { href?: string; @@ -32,6 +38,26 @@ export interface HdsInteractiveSignature { } export default class HdsInteractive extends Component { + linkToComponent = LinkTo; + + constructor(owner: Owner, args: HdsInteractiveSignature['Args']) { + super(owner, args); + + if (this.args.isRouteExternal) { + if (macroCondition(dependencySatisfies('ember-engines', '*'))) { + // @ts-expect-error: shape is unknown + this.linkToComponent = importSync( + 'ember-engines/components/link-to-external-component.js' + ).default as LinkTo; + } else { + assert( + `@isRouteExternal is only available when using the "ember-engines" addon. Please install it to use this feature.`, + false + ); + } + } + } + /** * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer") * @@ -65,25 +91,14 @@ export default class HdsInteractive extends Component { {{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }} {{! NOTICE: we can't support the direct use of the "href" HTML attribute via ...attributes in the elements, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }} {{~#if @route~}} - {{~#if this.isRouteExternal~}} - {{yield}} - {{~else~}} - {{yield}} - {{~/if~}} + {{yield}} {{~else if @href~}} {{~#if this.isHrefExternal~}} = 18'} peerDependencies: '@ember/string': ^3.1.1 || ^4.0.0 + ember-engines: '>= 0.11.0' ember-intl: ^7.3.0 peerDependenciesMeta: + ember-engines: + optional: true ember-intl: optional: true @@ -4008,9 +4008,6 @@ packages: algoliasearch@4.25.2: resolution: {integrity: sha512-lYx98L6kb1VvXypbPI7Z54C4BJB2VT5QvOYthvPq6/POufZj+YdyeZSKjoLBKHJgGmYWQTHOKtcCTdKf98WOCA==} - amd-name-resolver@0.0.6: - resolution: {integrity: sha512-W2trar3LgeKV/yB6ZRD3Iw7MlhrKjLMVSNAatWNNYsn4w+iSfbmA66VB+jQjVIfvzHPZicnHObAvflMkoVtjAQ==} - amd-name-resolver@1.2.0: resolution: {integrity: sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==} @@ -4354,9 +4351,6 @@ packages: babel-plugin-check-es2015-constants@6.22.0: resolution: {integrity: sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==} - babel-plugin-compact-reexports@1.1.0: - resolution: {integrity: sha512-+KgjNJ5yMeZzJxYZdLEy9m82m92aL7FLvNJcK6dYJbW06t+UTpFJ2FVSs35zMfURcPnrQELYhLG4VC+kt/4gvw==} - babel-plugin-debug-macros@0.2.0: resolution: {integrity: sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==} engines: {node: '>=4'} @@ -4684,10 +4678,6 @@ packages: broccoli-debug@0.6.5: resolution: {integrity: sha512-RIVjHvNar9EMCLDW/FggxFRXqpjhncM/3qq87bn/y+/zR9tqEkHvTqbyOc4QnB97NO2m6342w4wGkemkaeOuWg==} - broccoli-dependency-funnel@2.1.2: - resolution: {integrity: sha512-k6b0OnNuRcUnJ9TXA0o6RvqXOkTQ6APKoLsZeMJHAe/YjLjE1uTlfw4Z88GfGmi8gwtLHdnkrhBoJ7YdIkcVZA==} - engines: {node: '>= 6.0.0'} - broccoli-file-creator@1.2.0: resolution: {integrity: sha512-l9zthHg6bAtnOfRr/ieZ1srRQEsufMZID7xGYRW3aBDv3u/3Eux+Iawl10tAGYE5pL9YB4n5X4vxkp6iNOoZ9g==} @@ -6038,10 +6028,6 @@ packages: resolution: {integrity: sha512-hWpUz0eiNkWzi3FgHW5QU6LyCDyUlTWwuIROHluEKZoa9m6LJVXbb/EVFgIG3FkAib6a5Ie00WvkXEZFXxh3+A==} engines: {node: 14.* || >= 16} - ember-asset-loader@1.0.0: - resolution: {integrity: sha512-JXr9bEkkzXiamW2kMk36U2VugLzo4MeoTQGRxvpNFqU1oldUMzm/yFPVvtjsVOjishH4pVwQuOK9Sjrx9E2xZg==} - engines: {node: 14.* || 16.* || >= 17} - ember-assign-helper@0.5.0: resolution: {integrity: sha512-swH7FqmqB5iSeoKlU6X41iqw5HQ+EdBDyFDXmwytTyUd5GRvfGfZUn2SMUUGdyvo5FxXJWqMJ0rBT//EcGC0+Q==} peerDependencies: @@ -6247,16 +6233,6 @@ packages: resolution: {integrity: sha512-3slTltQV5ke53t3YVP2GYoswsQ6y+lhuVzKmt09tbEx91DapG8I/xa8W5OA0StvcQlavL3/vHrz/vCQEFs8bBA==} engines: {node: 14.* || 16.* || >= 18} - ember-engines@0.12.0: - resolution: {integrity: sha512-AsABgJpkrCoC2y/F1cNmcQI5Ia2VhlW2jyw5pAU1g3/XpeIJGV/4xRMbqNGwvs1KRxu78tW/ll20zVNl58N2jg==} - engines: {node: 16.* || 18.* || >= 20} - peerDependencies: - ember-engines-router-service: '>=0.5.0' - ember-source: ^3.28 || >= 4.0.0 - peerDependenciesMeta: - ember-engines-router-service: - optional: true - ember-eslint-parser@0.5.9: resolution: {integrity: sha512-IW4/3cEiFp49M2LiKyzi7VcT1egogOe8UxQ9eUKTooenC7Q4qNhzTD6rOZ8j51m8iJC+8hCzjbNCa3K4CN0Hhg==} engines: {node: '>=16.0.0'} @@ -7242,9 +7218,6 @@ packages: resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==} engines: {node: '>=14.14'} - fs-extra@3.0.1: - resolution: {integrity: sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==} - fs-extra@4.0.3: resolution: {integrity: sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==} @@ -8500,9 +8473,6 @@ packages: jsonfile@2.4.0: resolution: {integrity: sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==} - jsonfile@3.0.1: - resolution: {integrity: sha512-oBko6ZHlubVB5mRFkur5vgYR1UyqX+S6Y/oCfLhqNdcc2fYFlDpIoNc7AfKS1KOGcnNAkvsr0grLck9ANM815w==} - jsonfile@4.0.0: resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} @@ -9136,9 +9106,6 @@ packages: resolution: {integrity: sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==} engines: {node: '>= 0.8.0'} - mr-dep-walk@1.4.0: - resolution: {integrity: sha512-UaDUqkLsd0ep3jAx2+A7BIpfw8wKxhthDj3yPNLBnevipK1CUFJJiz24jRVLw18q7R2aEiRq13WwUBlnwfbQqQ==} - mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -14362,7 +14329,6 @@ snapshots: ember-cli-sass: 11.0.1 ember-concurrency: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2) ember-element-helper: 0.8.8 - ember-engines: 0.12.0(@glint/template@1.5.2)(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-focus-trap: 1.1.1(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-get-config: 2.1.1(@glint/template@1.5.2) ember-modifier: 4.2.2(@babel/core@7.28.0) @@ -14386,7 +14352,6 @@ snapshots: - '@glint/environment-ember-loose' - '@glint/template' - ember-basic-dropdown - - ember-engines-router-service - ember-source - supports-color @@ -14422,7 +14387,6 @@ snapshots: ember-cli-sass: 11.0.1 ember-concurrency: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2) ember-element-helper: 0.8.8 - ember-engines: 0.12.0(@glint/template@1.5.2)(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-focus-trap: 1.1.1(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) ember-get-config: 2.1.1(@glint/template@1.5.2) ember-modifier: 4.2.2(@babel/core@7.28.0) @@ -14446,7 +14410,6 @@ snapshots: - '@glint/environment-ember-loose' - '@glint/template' - ember-basic-dropdown - - ember-engines-router-service - ember-source - supports-color @@ -16000,10 +15963,6 @@ snapshots: '@algolia/requester-node-http': 4.25.2 '@algolia/transporter': 4.25.2 - amd-name-resolver@0.0.6: - dependencies: - ensure-posix-path: 1.1.1 - amd-name-resolver@1.2.0: dependencies: ensure-posix-path: 1.1.1 @@ -16463,8 +16422,6 @@ snapshots: dependencies: babel-runtime: 6.26.0 - babel-plugin-compact-reexports@1.1.0: {} - babel-plugin-debug-macros@0.2.0(@babel/core@7.28.0): dependencies: '@babel/core': 7.28.0 @@ -17115,20 +17072,6 @@ snapshots: transitivePeerDependencies: - supports-color - broccoli-dependency-funnel@2.1.2: - dependencies: - broccoli-plugin: 1.3.1 - fs-tree-diff: 0.5.9 - heimdalljs: 0.2.6 - heimdalljs-logger: 0.1.10 - mkdirp: 0.5.6 - mr-dep-walk: 1.4.0 - path-posix: 1.0.0 - rimraf: 2.7.1 - symlink-or-copy: 1.3.1 - transitivePeerDependencies: - - supports-color - broccoli-file-creator@1.2.0: dependencies: broccoli-plugin: 1.3.1 @@ -18666,17 +18609,6 @@ snapshots: - supports-color - webpack - ember-asset-loader@1.0.0: - dependencies: - broccoli-caching-writer: 3.0.3 - broccoli-funnel: 3.0.8 - broccoli-merge-trees: 4.2.0 - ember-cli-babel: 7.26.11 - fs-extra: 10.1.0 - walk-sync: 3.0.0 - transitivePeerDependencies: - - supports-color - ember-assign-helper@0.5.0(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): dependencies: '@embroider/addon-shim': 1.10.0 @@ -19562,84 +19494,6 @@ snapshots: transitivePeerDependencies: - supports-color - ember-engines@0.12.0(@glint/template@1.5.2)(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): - dependencies: - '@babel/core': 7.28.0 - '@embroider/macros': 1.18.1(@glint/template@1.5.2) - amd-name-resolver: 1.3.1 - babel-plugin-compact-reexports: 1.1.0 - broccoli-babel-transpiler: 7.8.1 - broccoli-concat: 4.2.5 - broccoli-debug: 0.6.5 - broccoli-dependency-funnel: 2.1.2 - broccoli-file-creator: 2.1.1 - broccoli-funnel: 3.0.8 - broccoli-merge-trees: 4.2.0 - calculate-cache-key-for-tree: 2.0.0 - ember-asset-loader: 1.0.0 - ember-cli-babel: 7.26.11 - ember-cli-htmlbars: 6.3.0 - ember-cli-preprocess-registry: 5.0.1 - ember-cli-string-utils: 1.1.0 - ember-cli-version-checker: 5.1.2 - ember-source: 6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5) - lodash: 4.17.21 - transitivePeerDependencies: - - '@glint/template' - - supports-color - - ember-engines@0.12.0(@glint/template@1.5.2)(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): - dependencies: - '@babel/core': 7.28.0 - '@embroider/macros': 1.18.1(@glint/template@1.5.2) - amd-name-resolver: 1.3.1 - babel-plugin-compact-reexports: 1.1.0 - broccoli-babel-transpiler: 7.8.1 - broccoli-concat: 4.2.5 - broccoli-debug: 0.6.5 - broccoli-dependency-funnel: 2.1.2 - broccoli-file-creator: 2.1.1 - broccoli-funnel: 3.0.8 - broccoli-merge-trees: 4.2.0 - calculate-cache-key-for-tree: 2.0.0 - ember-asset-loader: 1.0.0 - ember-cli-babel: 7.26.11 - ember-cli-htmlbars: 6.3.0 - ember-cli-preprocess-registry: 5.0.1 - ember-cli-string-utils: 1.1.0 - ember-cli-version-checker: 5.1.2 - ember-source: 6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5) - lodash: 4.17.21 - transitivePeerDependencies: - - '@glint/template' - - supports-color - - ember-engines@0.12.0(@glint/template@1.5.2)(ember-source@6.6.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)): - dependencies: - '@babel/core': 7.28.0 - '@embroider/macros': 1.18.1(@glint/template@1.5.2) - amd-name-resolver: 1.3.1 - babel-plugin-compact-reexports: 1.1.0 - broccoli-babel-transpiler: 7.8.1 - broccoli-concat: 4.2.5 - broccoli-debug: 0.6.5 - broccoli-dependency-funnel: 2.1.2 - broccoli-file-creator: 2.1.1 - broccoli-funnel: 3.0.8 - broccoli-merge-trees: 4.2.0 - calculate-cache-key-for-tree: 2.0.0 - ember-asset-loader: 1.0.0 - ember-cli-babel: 7.26.11 - ember-cli-htmlbars: 6.3.0 - ember-cli-preprocess-registry: 5.0.1 - ember-cli-string-utils: 1.1.0 - ember-cli-version-checker: 5.1.2 - ember-source: 6.6.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5) - lodash: 4.17.21 - transitivePeerDependencies: - - '@glint/template' - - supports-color - ember-eslint-parser@0.5.9(@babel/core@7.28.0)(@typescript-eslint/parser@8.38.0(eslint@9.32.0)(typescript@5.9.2))(eslint@9.32.0): dependencies: '@babel/core': 7.28.0 @@ -21511,12 +21365,6 @@ snapshots: jsonfile: 6.1.0 universalify: 2.0.1 - fs-extra@3.0.1: - dependencies: - graceful-fs: 4.2.11 - jsonfile: 3.0.1 - universalify: 0.1.2 - fs-extra@4.0.3: dependencies: graceful-fs: 4.2.11 @@ -23166,10 +23014,6 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 - jsonfile@3.0.1: - optionalDependencies: - graceful-fs: 4.2.11 - jsonfile@4.0.0: optionalDependencies: graceful-fs: 4.2.11 @@ -23988,12 +23832,6 @@ snapshots: transitivePeerDependencies: - supports-color - mr-dep-walk@1.4.0: - dependencies: - acorn: 5.7.4 - amd-name-resolver: 0.0.6 - fs-extra: 3.0.1 - mri@1.2.0: {} ms@2.0.0: {} From 638089a7ea218814501423ffd1322c964253e89f Mon Sep 17 00:00:00 2001 From: Alexey Kulakov Date: Tue, 22 Apr 2025 01:33:07 -0700 Subject: [PATCH 3/6] feat(components): SFC everything --- packages/components/eslint.config.mjs | 3 + packages/components/src/components.ts | 378 +++++++++--------- .../hds/accordion/{index.ts => index.gts} | 28 +- .../src/components/hds/accordion/index.hbs | 12 - .../accordion/item/{button.ts => button.gts} | 18 + .../components/hds/accordion/item/button.hbs | 17 - .../accordion/item/{index.ts => index.gts} | 52 +++ ...le-tr-group.ts => expandable-tr-group.gts} | 44 ++ .../advanced-table/expandable-tr-group.hbs | 44 -- .../advanced-table/{index.ts => index.gts} | 23 +- .../hds/advanced-table/{td.ts => td.gts} | 34 +- .../src/components/hds/advanced-table/td.hbs | 26 -- ...-button-expand.ts => th-button-expand.gts} | 24 ++ .../{th-button-sort.ts => th-button-sort.gts} | 24 ++ ...utton-tooltip.ts => th-button-tooltip.gts} | 19 + .../{th-selectable.ts => th-selectable.gts} | 39 +- .../{th-sort.ts => th-sort.gts} | 21 +- .../hds/advanced-table/{th.ts => th.gts} | 85 +++- .../hds/advanced-table/{tr.ts => tr.gts} | 35 +- .../src/components/hds/advanced-table/tr.hbs | 25 -- .../components/hds/advanced-table/types.ts | 2 +- .../src/components/hds/alert/description.gts | 22 + .../src/components/hds/alert/description.hbs | 5 - .../src/components/hds/alert/description.ts | 18 - .../hds/alert/{index.ts => index.gts} | 76 +++- .../src/components/hds/alert/index.hbs | 38 -- .../hds/alert/{title.ts => title.gts} | 14 +- .../src/components/hds/alert/title.hbs | 9 - .../{copyright.ts => copyright.gts} | 11 + .../hds/app-footer/{index.ts => index.gts} | 36 +- .../src/components/hds/app-footer/index.hbs | 20 - .../hds/app-footer/{item.ts => item.gts} | 8 +- .../src/components/hds/app-footer/item.hbs | 8 - .../{legal-links.ts => legal-links.gts} | 28 ++ .../src/components/hds/app-footer/link.gts | 53 +++ .../src/components/hds/app-footer/link.hbs | 22 - .../src/components/hds/app-footer/link.ts | 27 -- .../{status-link.ts => status-link.gts} | 30 +- .../components/hds/app-footer/status-link.hbs | 20 - .../hds/app-frame/{index.ts => index.gts} | 42 +- .../src/components/hds/app-frame/index.hbs | 24 -- .../components/hds/app-frame/parts/footer.gts | 21 + .../components/hds/app-frame/parts/footer.hbs | 7 - .../components/hds/app-frame/parts/footer.ts | 17 - .../components/hds/app-frame/parts/header.gts | 21 + .../components/hds/app-frame/parts/header.hbs | 7 - .../components/hds/app-frame/parts/header.ts | 17 - .../components/hds/app-frame/parts/main.gts | 21 + .../components/hds/app-frame/parts/main.hbs | 7 - .../components/hds/app-frame/parts/main.ts | 17 - .../components/hds/app-frame/parts/modals.gts | 20 + .../components/hds/app-frame/parts/modals.hbs | 6 - .../components/hds/app-frame/parts/modals.ts | 17 - .../hds/app-frame/parts/sidebar.gts | 21 + .../hds/app-frame/parts/sidebar.hbs | 7 - .../components/hds/app-frame/parts/sidebar.ts | 17 - .../{home-link.ts => home-link.gts} | 23 ++ .../hds/app-header/{index.ts => index.gts} | 45 +++ .../{menu-button.ts => menu-button.gts} | 18 +- .../hds/app-side-nav/{index.ts => index.gts} | 44 ++ .../hds/app-side-nav/list/back-link.gts | 50 +++ .../hds/app-side-nav/list/back-link.hbs | 24 -- .../hds/app-side-nav/list/back-link.ts | 20 - .../hds/app-side-nav/list/index.gts | 78 ++++ .../components/hds/app-side-nav/list/index.ts | 43 -- .../app-side-nav/list/{item.ts => item.gts} | 9 +- .../components/hds/app-side-nav/list/item.hbs | 8 - .../components/hds/app-side-nav/list/link.gts | 87 ++++ .../components/hds/app-side-nav/list/link.hbs | 51 --- .../components/hds/app-side-nav/list/link.ts | 29 -- .../app-side-nav/list/{title.ts => title.gts} | 16 +- .../hds/app-side-nav/list/title.hbs | 13 - .../hds/app-side-nav/portal/index.gts | 46 +++ .../hds/app-side-nav/portal/index.hbs | 12 - .../portal/{target.ts => target.gts} | 36 +- .../hds/app-side-nav/toggle-button.gts | 26 ++ .../hds/app-side-nav/toggle-button.hbs | 7 - .../hds/app-side-nav/toggle-button.ts | 20 - .../components/hds/application-state/body.gts | 37 ++ .../components/hds/application-state/body.hbs | 13 - .../components/hds/application-state/body.ts | 21 - .../hds/application-state/footer.gts | 43 ++ .../hds/application-state/footer.hbs | 14 - .../hds/application-state/footer.ts | 31 -- .../hds/application-state/header.gts | 66 +++ .../hds/application-state/header.ts | 25 -- .../application-state/{index.ts => index.gts} | 29 +- .../hds/application-state/index.hbs | 14 - .../hds/application-state/media.gts | 22 + .../hds/application-state/media.hbs | 8 - .../components/hds/application-state/media.ts | 18 - .../hds/badge-count/{index.ts => index.gts} | 6 + .../src/components/hds/badge-count/index.hbs | 7 - .../hds/badge/{index.ts => index.gts} | 18 + .../src/components/hds/badge/index.hbs | 18 - .../hds/breadcrumb/{index.ts => index.gts} | 9 + .../src/components/hds/breadcrumb/index.hbs | 9 - .../components/hds/breadcrumb/truncation.gts | 64 +++ .../components/hds/breadcrumb/truncation.hbs | 27 -- .../components/hds/breadcrumb/truncation.ts | 27 -- .../hds/button-set/{index.ts => index.gts} | 9 +- .../src/components/hds/button-set/index.hbs | 7 - .../hds/button/{index.ts => index.gts} | 63 +++ .../src/components/hds/button/index.hbs | 47 --- .../hds/card/{container.ts => container.gts} | 19 +- .../src/components/hds/card/container.hbs | 15 - .../{copy-button.ts => copy-button.gts} | 16 +- .../components/hds/code-block/copy-button.hbs | 14 - .../components/hds/code-block/description.gts | 30 ++ .../hds/code-block/{index.ts => index.gts} | 64 ++- .../hds/code-block/{title.ts => title.gts} | 21 +- .../{description.ts => description.gts} | 18 +- .../hds/code-editor/description.hbs | 15 - ...creen-button.ts => full-screen-button.gts} | 19 +- .../components/hds/code-editor/generic.gts | 21 + .../components/hds/code-editor/generic.hbs | 7 - .../src/components/hds/code-editor/generic.ts | 18 - .../hds/code-editor/{index.ts => index.gts} | 99 ++++- .../hds/code-editor/{title.ts => title.gts} | 19 +- .../src/components/hds/code-editor/title.hbs | 16 - .../hds/copy/button/{index.ts => index.gts} | 25 +- .../src/components/hds/copy/button/index.hbs | 16 - .../hds/copy/snippet/{index.ts => index.gts} | 25 ++ .../src/components/hds/copy/snippet/index.hbs | 16 - .../components/hds/dialog-primitive/body.gts | 28 ++ .../components/hds/dialog-primitive/body.hbs | 7 - .../components/hds/dialog-primitive/body.ts | 21 - .../hds/dialog-primitive/description.gts | 29 ++ .../hds/dialog-primitive/description.hbs | 10 - .../hds/dialog-primitive/description.ts | 21 - .../{footer.ts => footer.gts} | 10 + .../hds/dialog-primitive/footer.hbs | 7 - .../hds/dialog-primitive/header.gts | 120 ++++++ .../hds/dialog-primitive/header.hbs | 42 -- .../components/hds/dialog-primitive/header.ts | 51 --- .../{overlay.ts => overlay.gts} | 8 +- .../hds/dialog-primitive/overlay.hbs | 5 - .../hds/dialog-primitive/wrapper.gts | 32 ++ .../hds/dialog-primitive/wrapper.hbs | 15 - .../hds/dialog-primitive/wrapper.ts | 20 - .../{index.ts => index.gts} | 28 +- .../dismiss-button/{index.ts => index.gts} | 13 + .../components/hds/dismiss-button/index.hbs | 7 - .../src/components/hds/dropdown/footer.gts | 28 ++ .../src/components/hds/dropdown/footer.hbs | 7 - .../src/components/hds/dropdown/footer.ts | 20 - .../src/components/hds/dropdown/header.gts | 28 ++ .../src/components/hds/dropdown/header.hbs | 7 - .../src/components/hds/dropdown/header.ts | 20 - .../hds/dropdown/{index.ts => index.gts} | 109 ++++- .../hds/dropdown/list-item/checkbox.gts | 60 +++ .../hds/dropdown/list-item/checkbox.ts | 29 -- .../hds/dropdown/list-item/checkmark.gts | 101 +++++ .../hds/dropdown/list-item/checkmark.ts | 42 -- .../list-item/{copy-item.ts => copy-item.gts} | 25 +- .../hds/dropdown/list-item/copy-item.hbs | 16 - .../{description.ts => description.gts} | 18 +- .../hds/dropdown/list-item/description.hbs | 14 - .../hds/dropdown/list-item/generic.gts | 25 ++ .../hds/dropdown/list-item/generic.hbs | 7 - .../hds/dropdown/list-item/generic.ts | 18 - .../{interactive.ts => interactive.gts} | 79 +++- .../hds/dropdown/list-item/interactive.hbs | 50 --- .../hds/dropdown/list-item/radio.gts | 67 ++++ .../hds/dropdown/list-item/radio.ts | 29 -- .../hds/dropdown/list-item/separator.gts | 22 + .../hds/dropdown/list-item/separator.hbs | 10 - .../hds/dropdown/list-item/separator.ts | 15 - .../list-item/{title.ts => title.gts} | 18 +- .../hds/dropdown/list-item/title.hbs | 14 - .../dropdown/toggle/{button.ts => button.gts} | 51 ++- .../components/hds/dropdown/toggle/button.hbs | 39 -- .../hds/dropdown/toggle/chevron.gts | 21 + .../hds/dropdown/toggle/chevron.hbs | 7 - .../components/hds/dropdown/toggle/chevron.ts | 15 - .../hds/dropdown/toggle/{icon.ts => icon.gts} | 41 +- .../components/hds/dropdown/toggle/icon.hbs | 28 -- .../hds/flyout/{body.ts => body.gts} | 6 + .../src/components/hds/flyout/body.hbs | 10 - .../{description.ts => description.gts} | 17 +- .../src/components/hds/flyout/description.hbs | 10 - .../hds/flyout/{footer.ts => footer.gts} | 8 + .../src/components/hds/flyout/footer.hbs | 10 - .../hds/flyout/{header.ts => header.gts} | 36 ++ .../src/components/hds/flyout/header.hbs | 21 - .../hds/flyout/{index.ts => index.gts} | 84 +++- .../src/components/hds/flyout/index.hbs | 42 -- .../character-count/{index.ts => index.gts} | 33 +- .../hds/form/character-count/index.hbs | 27 -- .../src/components/hds/form/checkbox/base.gts | 24 ++ .../src/components/hds/form/checkbox/base.hbs | 5 - .../src/components/hds/form/checkbox/base.ts | 18 - .../components/hds/form/checkbox/field.gts | 58 +++ .../components/hds/form/checkbox/field.hbs | 24 -- .../src/components/hds/form/checkbox/field.ts | 33 -- .../components/hds/form/checkbox/group.gts | 62 +++ .../components/hds/form/checkbox/group.hbs | 21 - .../src/components/hds/form/checkbox/group.ts | 34 -- .../hds/form/error/{index.ts => index.gts} | 30 +- .../src/components/hds/form/error/index.hbs | 10 - .../src/components/hds/form/error/message.gts | 30 ++ .../src/components/hds/form/error/message.hbs | 7 - .../src/components/hds/form/error/message.ts | 20 - .../hds/form/field/{index.ts => index.gts} | 71 +++- .../hds/form/fieldset/{index.ts => index.gts} | 54 ++- .../components/hds/form/fieldset/index.hbs | 38 -- .../components/hds/form/file-input/base.gts | 20 + .../components/hds/form/file-input/field.gts | 54 +++ .../components/hds/form/file-input/field.hbs | 23 -- .../components/hds/form/file-input/field.ts | 30 -- .../form/helper-text/{index.ts => index.gts} | 20 +- .../components/hds/form/helper-text/index.hbs | 15 - .../form/indicator/{index.ts => index.gts} | 28 +- .../hds/form/label/{index.ts => index.gts} | 22 +- .../hds/form/legend/{index.ts => index.gts} | 14 +- .../form/masked-input/{base.ts => base.gts} | 54 ++- .../hds/form/masked-input/field.gts | 81 ++++ .../hds/form/masked-input/field.hbs | 35 -- .../components/hds/form/masked-input/field.ts | 37 -- .../hds/form/radio-card/description.gts | 28 ++ .../hds/form/radio-card/description.hbs | 10 - .../hds/form/radio-card/description.ts | 19 - .../components/hds/form/radio-card/group.gts | 70 ++++ .../components/hds/form/radio-card/group.hbs | 28 -- .../components/hds/form/radio-card/group.ts | 40 -- .../form/radio-card/{index.ts => index.gts} | 44 +- .../components/hds/form/radio-card/index.hbs | 24 -- .../components/hds/form/radio-card/label.gts | 28 ++ .../components/hds/form/radio-card/label.hbs | 11 - .../components/hds/form/radio-card/label.ts | 19 - .../hds/form/radio/{base.ts => base.gts} | 6 +- .../src/components/hds/form/radio/base.hbs | 5 - .../src/components/hds/form/radio/field.gts | 58 +++ .../src/components/hds/form/radio/field.hbs | 24 -- .../src/components/hds/form/radio/field.ts | 32 -- .../src/components/hds/form/radio/group.gts | 62 +++ .../src/components/hds/form/radio/group.hbs | 21 - .../src/components/hds/form/radio/group.ts | 33 -- .../hds/form/select/{base.ts => base.gts} | 13 +- .../src/components/hds/form/select/field.gts | 63 +++ .../src/components/hds/form/select/field.hbs | 28 -- .../src/components/hds/form/select/field.ts | 33 -- .../hds/form/super-select/after-options.gts | 80 ++++ .../hds/form/super-select/after-options.ts | 24 -- .../multiple/{base.ts => base.gts} | 93 ++++- .../hds/form/super-select/multiple/field.gts | 126 ++++++ .../hds/form/super-select/multiple/field.hbs | 76 ---- .../hds/form/super-select/multiple/field.ts | 40 -- .../{option-group.ts => option-group.gts} | 21 + .../hds/form/super-select/option-group.hbs | 16 - .../hds/form/super-select/placeholder.gts | 22 + .../hds/form/super-select/placeholder.hbs | 5 - .../hds/form/super-select/placeholder.ts | 17 - .../super-select/single/{base.ts => base.gts} | 87 +++- .../hds/form/super-select/single/field.gts | 128 ++++++ .../hds/form/super-select/single/field.hbs | 77 ---- .../hds/form/super-select/single/field.ts | 40 -- .../hds/form/text-input/{base.ts => base.gts} | 11 + .../form/text-input/{field.ts => field.gts} | 70 +++- .../components/hds/form/text-input/field.hbs | 43 -- .../hds/form/textarea/{base.ts => base.gts} | 12 + .../components/hds/form/textarea/field.gts | 74 ++++ .../components/hds/form/textarea/field.hbs | 30 -- .../src/components/hds/form/textarea/field.ts | 38 -- .../src/components/hds/form/toggle/base.gts | 28 ++ .../src/components/hds/form/toggle/base.hbs | 8 - .../src/components/hds/form/toggle/base.ts | 17 - .../src/components/hds/form/toggle/field.gts | 56 +++ .../src/components/hds/form/toggle/field.hbs | 23 -- .../src/components/hds/form/toggle/field.ts | 31 -- .../src/components/hds/form/toggle/group.gts | 61 +++ .../src/components/hds/form/toggle/group.hbs | 20 - .../src/components/hds/form/toggle/group.ts | 33 -- .../hds/form/visibility-toggle/index.gts | 31 ++ .../hds/form/visibility-toggle/index.hbs | 8 - .../hds/form/visibility-toggle/index.ts | 20 - .../hds/icon-tile/{index.ts => index.gts} | 27 ++ .../src/components/hds/icon-tile/index.hbs | 19 - .../hds/layout/flex/{index.ts => index.gts} | 21 +- .../src/components/hds/layout/flex/index.hbs | 15 - .../hds/layout/flex/{item.ts => item.gts} | 21 + .../src/components/hds/layout/flex/item.hbs | 17 - .../hds/layout/grid/{index.ts => index.gts} | 26 +- .../src/components/hds/layout/grid/index.hbs | 19 - .../hds/layout/grid/{item.ts => item.gts} | 29 ++ .../src/components/hds/layout/grid/item.hbs | 15 - .../hds/link/{inline.ts => inline.gts} | 34 ++ .../src/components/hds/link/inline.hbs | 22 - .../link/{standalone.ts => standalone.gts} | 45 +++ .../src/components/hds/link/standalone.hbs | 28 -- .../menu-primitive/{index.ts => index.gts} | 26 ++ .../components/hds/menu-primitive/index.hbs | 25 -- .../hds/modal/{body.ts => body.gts} | 6 + .../src/components/hds/modal/body.hbs | 10 - .../hds/modal/{footer.ts => footer.gts} | 8 + .../src/components/hds/modal/footer.hbs | 10 - .../hds/modal/{header.ts => header.gts} | 35 ++ .../src/components/hds/modal/header.hbs | 21 - .../hds/modal/{index.ts => index.gts} | 82 +++- .../page-header/{actions.ts => actions.gts} | 7 +- .../components/hds/page-header/actions.hbs | 5 - .../hds/page-header/{badges.ts => badges.gts} | 7 +- .../src/components/hds/page-header/badges.hbs | 5 - .../hds/page-header/description.gts | 30 ++ .../hds/page-header/description.hbs | 11 - .../components/hds/page-header/description.ts | 20 - .../src/components/hds/page-header/index.gts | 71 ++++ .../src/components/hds/page-header/index.hbs | 28 -- .../src/components/hds/page-header/index.ts | 36 -- .../components/hds/page-header/subtitle.gts | 29 ++ .../components/hds/page-header/subtitle.hbs | 11 - .../components/hds/page-header/subtitle.ts | 20 - .../src/components/hds/page-header/title.gts | 29 ++ .../src/components/hds/page-header/title.hbs | 11 - .../src/components/hds/page-header/title.ts | 19 - .../compact/{index.ts => index.gts} | 43 +- .../hds/pagination/compact/index.hbs | 39 -- .../pagination/info/{index.ts => index.gts} | 6 +- .../pagination/nav/{arrow.ts => arrow.gts} | 59 ++- .../components/hds/pagination/nav/arrow.hbs | 44 -- .../hds/pagination/nav/ellipsis.gts | 16 + .../hds/pagination/nav/ellipsis.hbs | 5 - .../components/hds/pagination/nav/ellipsis.ts | 14 - .../pagination/nav/{number.ts => number.gts} | 24 ++ .../numbered/{index.ts => index.gts} | 80 +++- .../hds/pagination/numbered/index.hbs | 70 ---- .../size-selector/{index.ts => index.gts} | 31 +- .../hds/pagination/size-selector/index.hbs | 16 - .../popover-primitive/{index.ts => index.gts} | 17 + .../hds/popover-primitive/index.hbs | 17 - .../hds/reveal/{index.ts => index.gts} | 34 +- .../reveal/toggle/{button.ts => button.gts} | 15 +- .../components/hds/reveal/toggle/button.hbs | 13 - .../rich-tooltip/{bubble.ts => bubble.gts} | 27 +- .../components/hds/rich-tooltip/bubble.hbs | 21 - .../src/components/hds/rich-tooltip/index.gts | 82 ++++ .../src/components/hds/rich-tooltip/index.hbs | 33 -- .../rich-tooltip/{toggle.ts => toggle.gts} | 43 +- .../components/hds/rich-tooltip/toggle.hbs | 31 -- .../components/hds/segmented-group/index.gts | 51 +++ .../components/hds/segmented-group/index.hbs | 15 - .../components/hds/segmented-group/index.ts | 32 -- .../hds/separator/{index.ts => index.gts} | 3 + .../src/components/hds/separator/index.hbs | 5 - .../src/components/hds/side-nav/base.gts | 42 ++ .../src/components/hds/side-nav/base.ts | 24 -- .../header/{home-link.ts => home-link.gts} | 23 ++ .../hds/side-nav/header/home-link.hbs | 20 - .../{icon-button.ts => icon-button.gts} | 23 ++ .../hds/side-nav/header/icon-button.hbs | 22 - .../components/hds/side-nav/header/index.gts | 30 ++ .../components/hds/side-nav/header/index.hbs | 13 - .../components/hds/side-nav/header/index.ts | 18 - .../hds/side-nav/{index.ts => index.gts} | 73 +++- .../hds/side-nav/list/back-link.gts | 49 +++ .../hds/side-nav/list/back-link.hbs | 24 -- .../components/hds/side-nav/list/back-link.ts | 20 - .../components/hds/side-nav/list/index.gts | 78 ++++ .../components/hds/side-nav/list/index.hbs | 19 - .../src/components/hds/side-nav/list/index.ts | 43 -- .../hds/side-nav/list/{item.ts => item.gts} | 8 +- .../src/components/hds/side-nav/list/item.hbs | 8 - .../src/components/hds/side-nav/list/link.gts | 83 ++++ .../src/components/hds/side-nav/list/link.hbs | 50 --- .../src/components/hds/side-nav/list/link.ts | 28 -- .../hds/side-nav/list/{title.ts => title.gts} | 16 +- .../components/hds/side-nav/list/title.hbs | 13 - .../components/hds/side-nav/portal/index.gts | 31 ++ .../components/hds/side-nav/portal/index.hbs | 12 - .../components/hds/side-nav/portal/index.ts | 21 - .../side-nav/portal/{target.ts => target.gts} | 23 +- .../components/hds/side-nav/portal/target.hbs | 14 - .../components/hds/side-nav/toggle-button.gts | 25 ++ .../components/hds/side-nav/toggle-button.hbs | 7 - .../components/hds/side-nav/toggle-button.ts | 20 - .../hds/stepper/list/{index.ts => index.gts} | 23 +- .../src/components/hds/stepper/list/index.hbs | 17 - .../hds/stepper/list/{step.ts => step.gts} | 48 +++ .../src/components/hds/stepper/list/step.hbs | 42 -- .../hds/stepper/nav/{index.ts => index.gts} | 101 ++++- .../src/components/hds/stepper/nav/index.hbs | 71 ---- .../hds/stepper/nav/{panel.ts => panel.gts} | 17 + .../src/components/hds/stepper/nav/panel.hbs | 17 - .../hds/stepper/nav/{step.ts => step.gts} | 104 +++++ .../src/components/hds/stepper/nav/step.hbs | 79 ---- .../step/{indicator.ts => indicator.gts} | 46 +++ .../components/hds/stepper/step/indicator.hbs | 28 -- .../task/{indicator.ts => indicator.gts} | 12 + .../components/hds/stepper/task/indicator.hbs | 7 - .../hds/table/{index.ts => index.gts} | 159 +++++++- .../components/hds/table/{td.ts => td.gts} | 6 + .../src/components/hds/table/td.hbs | 7 - .../{th-button-sort.ts => th-button-sort.gts} | 31 +- ...utton-tooltip.ts => th-button-tooltip.gts} | 19 + .../{th-selectable.ts => th-selectable.gts} | 43 +- .../hds/table/{th-sort.ts => th-sort.gts} | 34 +- .../src/components/hds/table/th-sort.hbs | 19 - .../components/hds/table/{th.ts => th.gts} | 38 +- .../src/components/hds/table/th.hbs | 18 - .../components/hds/table/{tr.ts => tr.gts} | 29 +- .../src/components/hds/table/tr.hbs | 22 - .../src/components/hds/table/types.ts | 2 +- .../hds/tabs/{index.ts => index.gts} | 59 ++- .../src/components/hds/tabs/index.hbs | 48 --- .../hds/tabs/{panel.ts => panel.gts} | 22 +- .../src/components/hds/tabs/panel.hbs | 16 - .../components/hds/tabs/{tab.ts => tab.gts} | 47 +++ .../src/components/hds/tabs/tab.hbs | 32 -- .../hds/tag/{index.ts => index.gts} | 11 +- .../components/hds/text/{body.ts => body.gts} | 14 + .../src/components/hds/text/body.hbs | 13 - .../components/hds/text/{code.ts => code.gts} | 14 + .../src/components/hds/text/code.hbs | 13 - .../hds/text/{display.ts => display.gts} | 14 + .../src/components/hds/text/display.hbs | 13 - .../hds/text/{index.ts => index.gts} | 11 + .../src/components/hds/text/index.hbs | 10 - .../hds/time/{index.ts => index.gts} | 82 +++- .../hds/time/{range.ts => range.gts} | 16 + .../src/components/hds/time/single.gts | 52 +++ .../src/components/hds/time/single.hbs | 27 -- .../src/components/hds/time/single.ts | 22 - .../src/components/hds/toast/index.gts | 41 ++ .../src/components/hds/toast/index.hbs | 19 - .../src/components/hds/toast/index.ts | 15 - .../tooltip-button/{index.ts => index.gts} | 14 +- .../components/hds/tooltip-button/index.hbs | 11 - .../src/components/hds/yield/index.gts | 19 + .../src/components/hds/yield/index.hbs | 6 - .../src/components/hds/yield/index.ts | 16 - .../hds-advanced-table-cell/dom-management.ts | 2 +- packages/components/src/template-registry.ts | 234 +++++------ .../src/utils/hds-aria-described-by.ts | 7 +- .../unpublished-development-types/global.d.ts | 34 -- 434 files changed, 7861 insertions(+), 5330 deletions(-) rename packages/components/src/components/hds/accordion/{index.ts => index.gts} (80%) delete mode 100644 packages/components/src/components/hds/accordion/index.hbs rename packages/components/src/components/hds/accordion/item/{button.ts => button.gts} (76%) delete mode 100644 packages/components/src/components/hds/accordion/item/button.hbs rename packages/components/src/components/hds/accordion/item/{index.ts => index.gts} (71%) rename packages/components/src/components/hds/advanced-table/{expandable-tr-group.ts => expandable-tr-group.gts} (54%) delete mode 100644 packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs rename packages/components/src/components/hds/advanced-table/{index.ts => index.gts} (99%) rename packages/components/src/components/hds/advanced-table/{td.ts => td.gts} (73%) delete mode 100644 packages/components/src/components/hds/advanced-table/td.hbs rename packages/components/src/components/hds/advanced-table/{th-button-expand.ts => th-button-expand.gts} (67%) rename packages/components/src/components/hds/advanced-table/{th-button-sort.ts => th-button-sort.gts} (78%) rename packages/components/src/components/hds/advanced-table/{th-button-tooltip.ts => th-button-tooltip.gts} (65%) rename packages/components/src/components/hds/advanced-table/{th-selectable.ts => th-selectable.gts} (71%) rename packages/components/src/components/hds/advanced-table/{th-sort.ts => th-sort.gts} (99%) rename packages/components/src/components/hds/advanced-table/{th.ts => th.gts} (71%) rename packages/components/src/components/hds/advanced-table/{tr.ts => tr.gts} (74%) delete mode 100644 packages/components/src/components/hds/advanced-table/tr.hbs create mode 100644 packages/components/src/components/hds/alert/description.gts delete mode 100644 packages/components/src/components/hds/alert/description.hbs delete mode 100644 packages/components/src/components/hds/alert/description.ts rename packages/components/src/components/hds/alert/{index.ts => index.gts} (72%) delete mode 100644 packages/components/src/components/hds/alert/index.hbs rename packages/components/src/components/hds/alert/{title.ts => title.gts} (50%) delete mode 100644 packages/components/src/components/hds/alert/title.hbs rename packages/components/src/components/hds/app-footer/{copyright.ts => copyright.gts} (64%) rename packages/components/src/components/hds/app-footer/{index.ts => index.gts} (62%) delete mode 100644 packages/components/src/components/hds/app-footer/index.hbs rename packages/components/src/components/hds/app-footer/{item.ts => item.gts} (50%) delete mode 100644 packages/components/src/components/hds/app-footer/item.hbs rename packages/components/src/components/hds/app-footer/{legal-links.ts => legal-links.gts} (69%) create mode 100644 packages/components/src/components/hds/app-footer/link.gts delete mode 100644 packages/components/src/components/hds/app-footer/link.hbs delete mode 100644 packages/components/src/components/hds/app-footer/link.ts rename packages/components/src/components/hds/app-footer/{status-link.ts => status-link.gts} (80%) delete mode 100644 packages/components/src/components/hds/app-footer/status-link.hbs rename packages/components/src/components/hds/app-frame/{index.ts => index.gts} (59%) delete mode 100644 packages/components/src/components/hds/app-frame/index.hbs create mode 100644 packages/components/src/components/hds/app-frame/parts/footer.gts delete mode 100644 packages/components/src/components/hds/app-frame/parts/footer.hbs delete mode 100644 packages/components/src/components/hds/app-frame/parts/footer.ts create mode 100644 packages/components/src/components/hds/app-frame/parts/header.gts delete mode 100644 packages/components/src/components/hds/app-frame/parts/header.hbs delete mode 100644 packages/components/src/components/hds/app-frame/parts/header.ts create mode 100644 packages/components/src/components/hds/app-frame/parts/main.gts delete mode 100644 packages/components/src/components/hds/app-frame/parts/main.hbs delete mode 100644 packages/components/src/components/hds/app-frame/parts/main.ts create mode 100644 packages/components/src/components/hds/app-frame/parts/modals.gts delete mode 100644 packages/components/src/components/hds/app-frame/parts/modals.hbs delete mode 100644 packages/components/src/components/hds/app-frame/parts/modals.ts create mode 100644 packages/components/src/components/hds/app-frame/parts/sidebar.gts delete mode 100644 packages/components/src/components/hds/app-frame/parts/sidebar.hbs delete mode 100644 packages/components/src/components/hds/app-frame/parts/sidebar.ts rename packages/components/src/components/hds/app-header/{home-link.ts => home-link.gts} (59%) rename packages/components/src/components/hds/app-header/{index.ts => index.gts} (74%) rename packages/components/src/components/hds/app-header/{menu-button.ts => menu-button.gts} (59%) rename packages/components/src/components/hds/app-side-nav/{index.ts => index.gts} (80%) create mode 100644 packages/components/src/components/hds/app-side-nav/list/back-link.gts delete mode 100644 packages/components/src/components/hds/app-side-nav/list/back-link.hbs delete mode 100644 packages/components/src/components/hds/app-side-nav/list/back-link.ts create mode 100644 packages/components/src/components/hds/app-side-nav/list/index.gts delete mode 100644 packages/components/src/components/hds/app-side-nav/list/index.ts rename packages/components/src/components/hds/app-side-nav/list/{item.ts => item.gts} (50%) delete mode 100644 packages/components/src/components/hds/app-side-nav/list/item.hbs create mode 100644 packages/components/src/components/hds/app-side-nav/list/link.gts delete mode 100644 packages/components/src/components/hds/app-side-nav/list/link.hbs delete mode 100644 packages/components/src/components/hds/app-side-nav/list/link.ts rename packages/components/src/components/hds/app-side-nav/list/{title.ts => title.gts} (64%) delete mode 100644 packages/components/src/components/hds/app-side-nav/list/title.hbs create mode 100644 packages/components/src/components/hds/app-side-nav/portal/index.gts delete mode 100644 packages/components/src/components/hds/app-side-nav/portal/index.hbs rename packages/components/src/components/hds/app-side-nav/portal/{target.ts => target.gts} (87%) create mode 100644 packages/components/src/components/hds/app-side-nav/toggle-button.gts delete mode 100644 packages/components/src/components/hds/app-side-nav/toggle-button.hbs delete mode 100644 packages/components/src/components/hds/app-side-nav/toggle-button.ts create mode 100644 packages/components/src/components/hds/application-state/body.gts delete mode 100644 packages/components/src/components/hds/application-state/body.hbs delete mode 100644 packages/components/src/components/hds/application-state/body.ts create mode 100644 packages/components/src/components/hds/application-state/footer.gts delete mode 100644 packages/components/src/components/hds/application-state/footer.hbs delete mode 100644 packages/components/src/components/hds/application-state/footer.ts create mode 100644 packages/components/src/components/hds/application-state/header.gts delete mode 100644 packages/components/src/components/hds/application-state/header.ts rename packages/components/src/components/hds/application-state/{index.ts => index.gts} (69%) delete mode 100644 packages/components/src/components/hds/application-state/index.hbs create mode 100644 packages/components/src/components/hds/application-state/media.gts delete mode 100644 packages/components/src/components/hds/application-state/media.hbs delete mode 100644 packages/components/src/components/hds/application-state/media.ts rename packages/components/src/components/hds/badge-count/{index.ts => index.gts} (96%) delete mode 100644 packages/components/src/components/hds/badge-count/index.hbs rename packages/components/src/components/hds/badge/{index.ts => index.gts} (89%) delete mode 100644 packages/components/src/components/hds/badge/index.hbs rename packages/components/src/components/hds/breadcrumb/{index.ts => index.gts} (83%) delete mode 100644 packages/components/src/components/hds/breadcrumb/index.hbs create mode 100644 packages/components/src/components/hds/breadcrumb/truncation.gts delete mode 100644 packages/components/src/components/hds/breadcrumb/truncation.hbs delete mode 100644 packages/components/src/components/hds/breadcrumb/truncation.ts rename packages/components/src/components/hds/button-set/{index.ts => index.gts} (50%) delete mode 100644 packages/components/src/components/hds/button-set/index.hbs rename packages/components/src/components/hds/button/{index.ts => index.gts} (73%) delete mode 100644 packages/components/src/components/hds/button/index.hbs rename packages/components/src/components/hds/card/{container.ts => container.gts} (85%) delete mode 100644 packages/components/src/components/hds/card/container.hbs rename packages/components/src/components/hds/code-block/{copy-button.ts => copy-button.gts} (63%) delete mode 100644 packages/components/src/components/hds/code-block/copy-button.hbs create mode 100644 packages/components/src/components/hds/code-block/description.gts rename packages/components/src/components/hds/code-block/{index.ts => index.gts} (88%) rename packages/components/src/components/hds/code-block/{title.ts => title.gts} (73%) rename packages/components/src/components/hds/code-editor/{description.ts => description.gts} (58%) delete mode 100644 packages/components/src/components/hds/code-editor/description.hbs rename packages/components/src/components/hds/code-editor/{full-screen-button.ts => full-screen-button.gts} (63%) create mode 100644 packages/components/src/components/hds/code-editor/generic.gts delete mode 100644 packages/components/src/components/hds/code-editor/generic.hbs delete mode 100644 packages/components/src/components/hds/code-editor/generic.ts rename packages/components/src/components/hds/code-editor/{index.ts => index.gts} (57%) rename packages/components/src/components/hds/code-editor/{title.ts => title.gts} (60%) delete mode 100644 packages/components/src/components/hds/code-editor/title.hbs rename packages/components/src/components/hds/copy/button/{index.ts => index.gts} (84%) delete mode 100644 packages/components/src/components/hds/copy/button/index.hbs rename packages/components/src/components/hds/copy/snippet/{index.ts => index.gts} (87%) delete mode 100644 packages/components/src/components/hds/copy/snippet/index.hbs create mode 100644 packages/components/src/components/hds/dialog-primitive/body.gts delete mode 100644 packages/components/src/components/hds/dialog-primitive/body.hbs delete mode 100644 packages/components/src/components/hds/dialog-primitive/body.ts create mode 100644 packages/components/src/components/hds/dialog-primitive/description.gts delete mode 100644 packages/components/src/components/hds/dialog-primitive/description.hbs delete mode 100644 packages/components/src/components/hds/dialog-primitive/description.ts rename packages/components/src/components/hds/dialog-primitive/{footer.ts => footer.gts} (85%) delete mode 100644 packages/components/src/components/hds/dialog-primitive/footer.hbs create mode 100644 packages/components/src/components/hds/dialog-primitive/header.gts delete mode 100644 packages/components/src/components/hds/dialog-primitive/header.hbs delete mode 100644 packages/components/src/components/hds/dialog-primitive/header.ts rename packages/components/src/components/hds/dialog-primitive/{overlay.ts => overlay.gts} (51%) delete mode 100644 packages/components/src/components/hds/dialog-primitive/overlay.hbs create mode 100644 packages/components/src/components/hds/dialog-primitive/wrapper.gts delete mode 100644 packages/components/src/components/hds/dialog-primitive/wrapper.hbs delete mode 100644 packages/components/src/components/hds/dialog-primitive/wrapper.ts rename packages/components/src/components/hds/disclosure-primitive/{index.ts => index.gts} (80%) rename packages/components/src/components/hds/dismiss-button/{index.ts => index.gts} (72%) delete mode 100644 packages/components/src/components/hds/dismiss-button/index.hbs create mode 100644 packages/components/src/components/hds/dropdown/footer.gts delete mode 100644 packages/components/src/components/hds/dropdown/footer.hbs delete mode 100644 packages/components/src/components/hds/dropdown/footer.ts create mode 100644 packages/components/src/components/hds/dropdown/header.gts delete mode 100644 packages/components/src/components/hds/dropdown/header.hbs delete mode 100644 packages/components/src/components/hds/dropdown/header.ts rename packages/components/src/components/hds/dropdown/{index.ts => index.gts} (64%) create mode 100644 packages/components/src/components/hds/dropdown/list-item/checkbox.gts delete mode 100644 packages/components/src/components/hds/dropdown/list-item/checkbox.ts create mode 100644 packages/components/src/components/hds/dropdown/list-item/checkmark.gts delete mode 100644 packages/components/src/components/hds/dropdown/list-item/checkmark.ts rename packages/components/src/components/hds/dropdown/list-item/{copy-item.ts => copy-item.gts} (73%) delete mode 100644 packages/components/src/components/hds/dropdown/list-item/copy-item.hbs rename packages/components/src/components/hds/dropdown/list-item/{description.ts => description.gts} (66%) delete mode 100644 packages/components/src/components/hds/dropdown/list-item/description.hbs create mode 100644 packages/components/src/components/hds/dropdown/list-item/generic.gts delete mode 100644 packages/components/src/components/hds/dropdown/list-item/generic.hbs delete mode 100644 packages/components/src/components/hds/dropdown/list-item/generic.ts rename packages/components/src/components/hds/dropdown/list-item/{interactive.ts => interactive.gts} (54%) delete mode 100644 packages/components/src/components/hds/dropdown/list-item/interactive.hbs create mode 100644 packages/components/src/components/hds/dropdown/list-item/radio.gts delete mode 100644 packages/components/src/components/hds/dropdown/list-item/radio.ts create mode 100644 packages/components/src/components/hds/dropdown/list-item/separator.gts delete mode 100644 packages/components/src/components/hds/dropdown/list-item/separator.hbs delete mode 100644 packages/components/src/components/hds/dropdown/list-item/separator.ts rename packages/components/src/components/hds/dropdown/list-item/{title.ts => title.gts} (65%) delete mode 100644 packages/components/src/components/hds/dropdown/list-item/title.hbs rename packages/components/src/components/hds/dropdown/toggle/{button.ts => button.gts} (76%) delete mode 100644 packages/components/src/components/hds/dropdown/toggle/button.hbs create mode 100644 packages/components/src/components/hds/dropdown/toggle/chevron.gts delete mode 100644 packages/components/src/components/hds/dropdown/toggle/chevron.hbs delete mode 100644 packages/components/src/components/hds/dropdown/toggle/chevron.ts rename packages/components/src/components/hds/dropdown/toggle/{icon.ts => icon.gts} (76%) delete mode 100644 packages/components/src/components/hds/dropdown/toggle/icon.hbs rename packages/components/src/components/hds/flyout/{body.ts => body.gts} (92%) delete mode 100644 packages/components/src/components/hds/flyout/body.hbs rename packages/components/src/components/hds/flyout/{description.ts => description.gts} (78%) delete mode 100644 packages/components/src/components/hds/flyout/description.hbs rename packages/components/src/components/hds/flyout/{footer.ts => footer.gts} (87%) delete mode 100644 packages/components/src/components/hds/flyout/footer.hbs rename packages/components/src/components/hds/flyout/{header.ts => header.gts} (56%) delete mode 100644 packages/components/src/components/hds/flyout/header.hbs rename packages/components/src/components/hds/flyout/{index.ts => index.gts} (73%) delete mode 100644 packages/components/src/components/hds/flyout/index.hbs rename packages/components/src/components/hds/form/character-count/{index.ts => index.gts} (86%) delete mode 100644 packages/components/src/components/hds/form/character-count/index.hbs create mode 100644 packages/components/src/components/hds/form/checkbox/base.gts delete mode 100644 packages/components/src/components/hds/form/checkbox/base.hbs delete mode 100644 packages/components/src/components/hds/form/checkbox/base.ts create mode 100644 packages/components/src/components/hds/form/checkbox/field.gts delete mode 100644 packages/components/src/components/hds/form/checkbox/field.hbs delete mode 100644 packages/components/src/components/hds/form/checkbox/field.ts create mode 100644 packages/components/src/components/hds/form/checkbox/group.gts delete mode 100644 packages/components/src/components/hds/form/checkbox/group.hbs delete mode 100644 packages/components/src/components/hds/form/checkbox/group.ts rename packages/components/src/components/hds/form/error/{index.ts => index.gts} (75%) delete mode 100644 packages/components/src/components/hds/form/error/index.hbs create mode 100644 packages/components/src/components/hds/form/error/message.gts delete mode 100644 packages/components/src/components/hds/form/error/message.hbs delete mode 100644 packages/components/src/components/hds/form/error/message.ts rename packages/components/src/components/hds/form/field/{index.ts => index.gts} (65%) rename packages/components/src/components/hds/form/fieldset/{index.ts => index.gts} (66%) delete mode 100644 packages/components/src/components/hds/form/fieldset/index.hbs create mode 100644 packages/components/src/components/hds/form/file-input/base.gts create mode 100644 packages/components/src/components/hds/form/file-input/field.gts delete mode 100644 packages/components/src/components/hds/form/file-input/field.hbs delete mode 100644 packages/components/src/components/hds/form/file-input/field.ts rename packages/components/src/components/hds/form/helper-text/{index.ts => index.gts} (82%) delete mode 100644 packages/components/src/components/hds/form/helper-text/index.hbs rename packages/components/src/components/hds/form/indicator/{index.ts => index.gts} (55%) rename packages/components/src/components/hds/form/label/{index.ts => index.gts} (79%) rename packages/components/src/components/hds/form/legend/{index.ts => index.gts} (81%) rename packages/components/src/components/hds/form/masked-input/{base.ts => base.gts} (71%) create mode 100644 packages/components/src/components/hds/form/masked-input/field.gts delete mode 100644 packages/components/src/components/hds/form/masked-input/field.hbs delete mode 100644 packages/components/src/components/hds/form/masked-input/field.ts create mode 100644 packages/components/src/components/hds/form/radio-card/description.gts delete mode 100644 packages/components/src/components/hds/form/radio-card/description.hbs delete mode 100644 packages/components/src/components/hds/form/radio-card/description.ts create mode 100644 packages/components/src/components/hds/form/radio-card/group.gts delete mode 100644 packages/components/src/components/hds/form/radio-card/group.hbs delete mode 100644 packages/components/src/components/hds/form/radio-card/group.ts rename packages/components/src/components/hds/form/radio-card/{index.ts => index.gts} (70%) delete mode 100644 packages/components/src/components/hds/form/radio-card/index.hbs create mode 100644 packages/components/src/components/hds/form/radio-card/label.gts delete mode 100644 packages/components/src/components/hds/form/radio-card/label.hbs delete mode 100644 packages/components/src/components/hds/form/radio-card/label.ts rename packages/components/src/components/hds/form/radio/{base.ts => base.gts} (50%) delete mode 100644 packages/components/src/components/hds/form/radio/base.hbs create mode 100644 packages/components/src/components/hds/form/radio/field.gts delete mode 100644 packages/components/src/components/hds/form/radio/field.hbs delete mode 100644 packages/components/src/components/hds/form/radio/field.ts create mode 100644 packages/components/src/components/hds/form/radio/group.gts delete mode 100644 packages/components/src/components/hds/form/radio/group.hbs delete mode 100644 packages/components/src/components/hds/form/radio/group.ts rename packages/components/src/components/hds/form/select/{base.ts => base.gts} (75%) create mode 100644 packages/components/src/components/hds/form/select/field.gts delete mode 100644 packages/components/src/components/hds/form/select/field.hbs delete mode 100644 packages/components/src/components/hds/form/select/field.ts create mode 100644 packages/components/src/components/hds/form/super-select/after-options.gts delete mode 100644 packages/components/src/components/hds/form/super-select/after-options.ts rename packages/components/src/components/hds/form/super-select/multiple/{base.ts => base.gts} (62%) create mode 100644 packages/components/src/components/hds/form/super-select/multiple/field.gts delete mode 100644 packages/components/src/components/hds/form/super-select/multiple/field.hbs delete mode 100644 packages/components/src/components/hds/form/super-select/multiple/field.ts rename packages/components/src/components/hds/form/super-select/{option-group.ts => option-group.gts} (56%) delete mode 100644 packages/components/src/components/hds/form/super-select/option-group.hbs create mode 100644 packages/components/src/components/hds/form/super-select/placeholder.gts delete mode 100644 packages/components/src/components/hds/form/super-select/placeholder.hbs delete mode 100644 packages/components/src/components/hds/form/super-select/placeholder.ts rename packages/components/src/components/hds/form/super-select/single/{base.ts => base.gts} (61%) create mode 100644 packages/components/src/components/hds/form/super-select/single/field.gts delete mode 100644 packages/components/src/components/hds/form/super-select/single/field.hbs delete mode 100644 packages/components/src/components/hds/form/super-select/single/field.ts rename packages/components/src/components/hds/form/text-input/{base.ts => base.gts} (90%) rename packages/components/src/components/hds/form/text-input/{field.ts => field.gts} (51%) delete mode 100644 packages/components/src/components/hds/form/text-input/field.hbs rename packages/components/src/components/hds/form/textarea/{base.ts => base.gts} (77%) create mode 100644 packages/components/src/components/hds/form/textarea/field.gts delete mode 100644 packages/components/src/components/hds/form/textarea/field.hbs delete mode 100644 packages/components/src/components/hds/form/textarea/field.ts create mode 100644 packages/components/src/components/hds/form/toggle/base.gts delete mode 100644 packages/components/src/components/hds/form/toggle/base.hbs delete mode 100644 packages/components/src/components/hds/form/toggle/base.ts create mode 100644 packages/components/src/components/hds/form/toggle/field.gts delete mode 100644 packages/components/src/components/hds/form/toggle/field.hbs delete mode 100644 packages/components/src/components/hds/form/toggle/field.ts create mode 100644 packages/components/src/components/hds/form/toggle/group.gts delete mode 100644 packages/components/src/components/hds/form/toggle/group.hbs delete mode 100644 packages/components/src/components/hds/form/toggle/group.ts create mode 100644 packages/components/src/components/hds/form/visibility-toggle/index.gts delete mode 100644 packages/components/src/components/hds/form/visibility-toggle/index.hbs delete mode 100644 packages/components/src/components/hds/form/visibility-toggle/index.ts rename packages/components/src/components/hds/icon-tile/{index.ts => index.gts} (85%) delete mode 100644 packages/components/src/components/hds/icon-tile/index.hbs rename packages/components/src/components/hds/layout/flex/{index.ts => index.gts} (83%) delete mode 100644 packages/components/src/components/hds/layout/flex/index.hbs rename packages/components/src/components/hds/layout/flex/{item.ts => item.gts} (84%) delete mode 100644 packages/components/src/components/hds/layout/flex/item.hbs rename packages/components/src/components/hds/layout/grid/{index.ts => index.gts} (81%) delete mode 100644 packages/components/src/components/hds/layout/grid/index.hbs rename packages/components/src/components/hds/layout/grid/{item.ts => item.gts} (54%) delete mode 100644 packages/components/src/components/hds/layout/grid/item.hbs rename packages/components/src/components/hds/link/{inline.ts => inline.gts} (66%) delete mode 100644 packages/components/src/components/hds/link/inline.hbs rename packages/components/src/components/hds/link/{standalone.ts => standalone.gts} (78%) delete mode 100644 packages/components/src/components/hds/link/standalone.hbs rename packages/components/src/components/hds/menu-primitive/{index.ts => index.gts} (81%) delete mode 100644 packages/components/src/components/hds/menu-primitive/index.hbs rename packages/components/src/components/hds/modal/{body.ts => body.gts} (92%) delete mode 100644 packages/components/src/components/hds/modal/body.hbs rename packages/components/src/components/hds/modal/{footer.ts => footer.gts} (87%) delete mode 100644 packages/components/src/components/hds/modal/footer.hbs rename packages/components/src/components/hds/modal/{header.ts => header.gts} (57%) delete mode 100644 packages/components/src/components/hds/modal/header.hbs rename packages/components/src/components/hds/modal/{index.ts => index.gts} (74%) rename packages/components/src/components/hds/page-header/{actions.ts => actions.gts} (51%) delete mode 100644 packages/components/src/components/hds/page-header/actions.hbs rename packages/components/src/components/hds/page-header/{badges.ts => badges.gts} (50%) delete mode 100644 packages/components/src/components/hds/page-header/badges.hbs create mode 100644 packages/components/src/components/hds/page-header/description.gts delete mode 100644 packages/components/src/components/hds/page-header/description.hbs delete mode 100644 packages/components/src/components/hds/page-header/description.ts create mode 100644 packages/components/src/components/hds/page-header/index.gts delete mode 100644 packages/components/src/components/hds/page-header/index.hbs delete mode 100644 packages/components/src/components/hds/page-header/index.ts create mode 100644 packages/components/src/components/hds/page-header/subtitle.gts delete mode 100644 packages/components/src/components/hds/page-header/subtitle.hbs delete mode 100644 packages/components/src/components/hds/page-header/subtitle.ts create mode 100644 packages/components/src/components/hds/page-header/title.gts delete mode 100644 packages/components/src/components/hds/page-header/title.hbs delete mode 100644 packages/components/src/components/hds/page-header/title.ts rename packages/components/src/components/hds/pagination/compact/{index.ts => index.gts} (85%) delete mode 100644 packages/components/src/components/hds/pagination/compact/index.hbs rename packages/components/src/components/hds/pagination/info/{index.ts => index.gts} (95%) rename packages/components/src/components/hds/pagination/nav/{arrow.ts => arrow.gts} (61%) delete mode 100644 packages/components/src/components/hds/pagination/nav/arrow.hbs create mode 100644 packages/components/src/components/hds/pagination/nav/ellipsis.gts delete mode 100644 packages/components/src/components/hds/pagination/nav/ellipsis.hbs delete mode 100644 packages/components/src/components/hds/pagination/nav/ellipsis.ts rename packages/components/src/components/hds/pagination/nav/{number.ts => number.gts} (61%) rename packages/components/src/components/hds/pagination/numbered/{index.ts => index.gts} (84%) delete mode 100644 packages/components/src/components/hds/pagination/numbered/index.hbs rename packages/components/src/components/hds/pagination/size-selector/{index.ts => index.gts} (66%) delete mode 100644 packages/components/src/components/hds/pagination/size-selector/index.hbs rename packages/components/src/components/hds/popover-primitive/{index.ts => index.gts} (95%) delete mode 100644 packages/components/src/components/hds/popover-primitive/index.hbs rename packages/components/src/components/hds/reveal/{index.ts => index.gts} (60%) rename packages/components/src/components/hds/reveal/toggle/{button.ts => button.gts} (70%) delete mode 100644 packages/components/src/components/hds/reveal/toggle/button.hbs rename packages/components/src/components/hds/rich-tooltip/{bubble.ts => bubble.gts} (82%) delete mode 100644 packages/components/src/components/hds/rich-tooltip/bubble.hbs create mode 100644 packages/components/src/components/hds/rich-tooltip/index.gts delete mode 100644 packages/components/src/components/hds/rich-tooltip/index.hbs rename packages/components/src/components/hds/rich-tooltip/{toggle.ts => toggle.gts} (71%) delete mode 100644 packages/components/src/components/hds/rich-tooltip/toggle.hbs create mode 100644 packages/components/src/components/hds/segmented-group/index.gts delete mode 100644 packages/components/src/components/hds/segmented-group/index.hbs delete mode 100644 packages/components/src/components/hds/segmented-group/index.ts rename packages/components/src/components/hds/separator/{index.ts => index.gts} (95%) delete mode 100644 packages/components/src/components/hds/separator/index.hbs create mode 100644 packages/components/src/components/hds/side-nav/base.gts delete mode 100644 packages/components/src/components/hds/side-nav/base.ts rename packages/components/src/components/hds/side-nav/header/{home-link.ts => home-link.gts} (55%) delete mode 100644 packages/components/src/components/hds/side-nav/header/home-link.hbs rename packages/components/src/components/hds/side-nav/header/{icon-button.ts => icon-button.gts} (67%) delete mode 100644 packages/components/src/components/hds/side-nav/header/icon-button.hbs create mode 100644 packages/components/src/components/hds/side-nav/header/index.gts delete mode 100644 packages/components/src/components/hds/side-nav/header/index.hbs delete mode 100644 packages/components/src/components/hds/side-nav/header/index.ts rename packages/components/src/components/hds/side-nav/{index.ts => index.gts} (73%) create mode 100644 packages/components/src/components/hds/side-nav/list/back-link.gts delete mode 100644 packages/components/src/components/hds/side-nav/list/back-link.hbs delete mode 100644 packages/components/src/components/hds/side-nav/list/back-link.ts create mode 100644 packages/components/src/components/hds/side-nav/list/index.gts delete mode 100644 packages/components/src/components/hds/side-nav/list/index.hbs delete mode 100644 packages/components/src/components/hds/side-nav/list/index.ts rename packages/components/src/components/hds/side-nav/list/{item.ts => item.gts} (50%) delete mode 100644 packages/components/src/components/hds/side-nav/list/item.hbs create mode 100644 packages/components/src/components/hds/side-nav/list/link.gts delete mode 100644 packages/components/src/components/hds/side-nav/list/link.hbs delete mode 100644 packages/components/src/components/hds/side-nav/list/link.ts rename packages/components/src/components/hds/side-nav/list/{title.ts => title.gts} (64%) delete mode 100644 packages/components/src/components/hds/side-nav/list/title.hbs create mode 100644 packages/components/src/components/hds/side-nav/portal/index.gts delete mode 100644 packages/components/src/components/hds/side-nav/portal/index.hbs delete mode 100644 packages/components/src/components/hds/side-nav/portal/index.ts rename packages/components/src/components/hds/side-nav/portal/{target.ts => target.gts} (90%) delete mode 100644 packages/components/src/components/hds/side-nav/portal/target.hbs create mode 100644 packages/components/src/components/hds/side-nav/toggle-button.gts delete mode 100644 packages/components/src/components/hds/side-nav/toggle-button.hbs delete mode 100644 packages/components/src/components/hds/side-nav/toggle-button.ts rename packages/components/src/components/hds/stepper/list/{index.ts => index.gts} (71%) delete mode 100644 packages/components/src/components/hds/stepper/list/index.hbs rename packages/components/src/components/hds/stepper/list/{step.ts => step.gts} (64%) delete mode 100644 packages/components/src/components/hds/stepper/list/step.hbs rename packages/components/src/components/hds/stepper/nav/{index.ts => index.gts} (72%) delete mode 100644 packages/components/src/components/hds/stepper/nav/index.hbs rename packages/components/src/components/hds/stepper/nav/{panel.ts => panel.gts} (83%) delete mode 100644 packages/components/src/components/hds/stepper/nav/panel.hbs rename packages/components/src/components/hds/stepper/nav/{step.ts => step.gts} (57%) delete mode 100644 packages/components/src/components/hds/stepper/nav/step.hbs rename packages/components/src/components/hds/stepper/step/{indicator.ts => indicator.gts} (54%) delete mode 100644 packages/components/src/components/hds/stepper/step/indicator.hbs rename packages/components/src/components/hds/stepper/task/{indicator.ts => indicator.gts} (88%) delete mode 100644 packages/components/src/components/hds/stepper/task/indicator.hbs rename packages/components/src/components/hds/table/{index.ts => index.gts} (64%) rename packages/components/src/components/hds/table/{td.ts => td.gts} (94%) delete mode 100644 packages/components/src/components/hds/table/td.hbs rename packages/components/src/components/hds/table/{th-button-sort.ts => th-button-sort.gts} (79%) rename packages/components/src/components/hds/table/{th-button-tooltip.ts => th-button-tooltip.gts} (64%) rename packages/components/src/components/hds/table/{th-selectable.ts => th-selectable.gts} (69%) rename packages/components/src/components/hds/table/{th-sort.ts => th-sort.gts} (77%) delete mode 100644 packages/components/src/components/hds/table/th-sort.hbs rename packages/components/src/components/hds/table/{th.ts => th.gts} (63%) delete mode 100644 packages/components/src/components/hds/table/th.hbs rename packages/components/src/components/hds/table/{tr.ts => tr.gts} (72%) delete mode 100644 packages/components/src/components/hds/table/tr.hbs rename packages/components/src/components/hds/tabs/{index.ts => index.gts} (82%) delete mode 100644 packages/components/src/components/hds/tabs/index.hbs rename packages/components/src/components/hds/tabs/{panel.ts => panel.gts} (75%) delete mode 100644 packages/components/src/components/hds/tabs/panel.hbs rename packages/components/src/components/hds/tabs/{tab.ts => tab.gts} (69%) delete mode 100644 packages/components/src/components/hds/tabs/tab.hbs rename packages/components/src/components/hds/tag/{index.ts => index.gts} (95%) rename packages/components/src/components/hds/text/{body.ts => body.gts} (91%) delete mode 100644 packages/components/src/components/hds/text/body.hbs rename packages/components/src/components/hds/text/{code.ts => code.gts} (91%) delete mode 100644 packages/components/src/components/hds/text/code.hbs rename packages/components/src/components/hds/text/{display.ts => display.gts} (92%) delete mode 100644 packages/components/src/components/hds/text/display.hbs rename packages/components/src/components/hds/text/{index.ts => index.gts} (87%) delete mode 100644 packages/components/src/components/hds/text/index.hbs rename packages/components/src/components/hds/time/{index.ts => index.gts} (53%) rename packages/components/src/components/hds/time/{range.ts => range.gts} (74%) create mode 100644 packages/components/src/components/hds/time/single.gts delete mode 100644 packages/components/src/components/hds/time/single.hbs delete mode 100644 packages/components/src/components/hds/time/single.ts create mode 100644 packages/components/src/components/hds/toast/index.gts delete mode 100644 packages/components/src/components/hds/toast/index.hbs delete mode 100644 packages/components/src/components/hds/toast/index.ts rename packages/components/src/components/hds/tooltip-button/{index.ts => index.gts} (90%) delete mode 100644 packages/components/src/components/hds/tooltip-button/index.hbs create mode 100644 packages/components/src/components/hds/yield/index.gts delete mode 100644 packages/components/src/components/hds/yield/index.hbs delete mode 100644 packages/components/src/components/hds/yield/index.ts diff --git a/packages/components/eslint.config.mjs b/packages/components/eslint.config.mjs index b3870b292e6..0dcda7f8206 100644 --- a/packages/components/eslint.config.mjs +++ b/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/**/*'], diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts index 124d2930b7c..6adcc80ec85 100644 --- a/packages/components/src/components.ts +++ b/packages/components/src/components.ts @@ -10,334 +10,334 @@ // ----------------------------------------------------------- // Accordion -export { default as HdsAccordion } from './components/hds/accordion/index.ts'; -export { default as HdsAccordionItem } from './components/hds/accordion/item/index.ts'; +export { default as HdsAccordion } from './components/hds/accordion/index.gts'; +export { default as HdsAccordionItem } from './components/hds/accordion/item/index.gts'; 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 { default as HdsAdvancedTableExpandableTrGroup } from './components/hds/advanced-table/expandable-tr-group.gts'; +export { default as HdsAdvancedTable } from './components/hds/advanced-table/index.gts'; +export { default as HdsAdvancedTableTd } from './components/hds/advanced-table/td.gts'; +export { default as HdsAdvancedTableThButtonExpand } from './components/hds/advanced-table/th-button-expand.gts'; +export { default as HdsAdvancedTableThButtonSort } from './components/hds/advanced-table/th-button-sort.gts'; +export { default as HdsAdvancedTableThButtonTooltip } from './components/hds/advanced-table/th-button-tooltip.gts'; +export { default as HdsAdvancedTableThSelectable } from './components/hds/advanced-table/th-selectable.gts'; +export { default as HdsAdvancedTableThSort } from './components/hds/advanced-table/th-sort.gts'; +export { default as HdsAdvancedTableTh } from './components/hds/advanced-table/th.gts'; +export { default as HdsAdvancedTableTr } from './components/hds/advanced-table/tr.gts'; 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'; -export { default as HdsAlertTitle } from './components/hds/alert/title.ts'; +export { default as HdsAlertDescription } from './components/hds/alert/description.gts'; +export { default as HdsAlert } from './components/hds/alert/index.gts'; +export { default as HdsAlertTitle } from './components/hds/alert/title.gts'; export * from './components/hds/alert/types.ts'; // AppFooter -export { default as HdsAppFooter } from './components/hds/app-footer/index.ts'; -export { default as HdsAppFooterCopyright } from './components/hds/app-footer/copyright.ts'; -export { default as HdsAppFooterItem } from './components/hds/app-footer/item.ts'; -export { default as HdsAppFooterLegalLinks } from './components/hds/app-footer/legal-links.ts'; -export { default as HdsAppFooterLink } from './components/hds/app-footer/link.ts'; -export { default as HdsAppFooterStatusLink } from './components/hds/app-footer/status-link.ts'; +export { default as HdsAppFooterCopyright } from './components/hds/app-footer/copyright.gts'; +export { default as HdsAppFooter } from './components/hds/app-footer/index.gts'; +export { default as HdsAppFooterItem } from './components/hds/app-footer/item.gts'; +export { default as HdsAppFooterLegalLinks } from './components/hds/app-footer/legal-links.gts'; +export { default as HdsAppFooterLink } from './components/hds/app-footer/link.gts'; +export { default as HdsAppFooterStatusLink } from './components/hds/app-footer/status-link.gts'; export * from './components/hds/app-footer/types.ts'; // AppHeader -export { default as HdsAppHeader } from './components/hds/app-header/index.ts'; export { default as HdsAppHeaderHomeLink } from './components/hds/app-header/home-link.ts'; +export { default as HdsAppHeader } from './components/hds/app-header/index.ts'; export { default as HdsAppHeaderMenuButton } from './components/hds/app-header/menu-button.ts'; // AppSideNav export { default as HdsAppSideNav } from './components/hds/app-side-nav/index.ts'; -export { default as HdsAppSideNavToggleButton } from './components/hds/app-side-nav/toggle-button.ts'; -export { default as HdsAppSideNavPortal } from './components/hds/app-side-nav/portal/index.ts'; -export { default as HdsAppSideNavPortalTarget } from './components/hds/app-side-nav/portal/target.ts'; +export { default as HdsAppSideNavListBackLink } from './components/hds/app-side-nav/list/back-link.ts'; export { default as HdsAppSideNavList } from './components/hds/app-side-nav/list/index.ts'; export { default as HdsAppSideNavListItem } from './components/hds/app-side-nav/list/item.ts'; -export { default as HdsAppSideNavListBackLink } from './components/hds/app-side-nav/list/back-link.ts'; -export { default as HdsAppSideNavListTitle } from './components/hds/app-side-nav/list/title.ts'; export { default as HdsAppSideNavListLink } from './components/hds/app-side-nav/list/link.ts'; +export { default as HdsAppSideNavListTitle } from './components/hds/app-side-nav/list/title.ts'; +export { default as HdsAppSideNavPortal } from './components/hds/app-side-nav/portal/index.ts'; +export { default as HdsAppSideNavPortalTarget } from './components/hds/app-side-nav/portal/target.ts'; +export { default as HdsAppSideNavToggleButton } from './components/hds/app-side-nav/toggle-button.ts'; // ApplicationState -export { default as HdsApplicationState } from './components/hds/application-state/index.ts'; -export { default as HdsApplicationStateBody } from './components/hds/application-state/body.ts'; -export { default as HdsApplicationStateFooter } from './components/hds/application-state/footer.ts'; -export { default as HdsApplicationStateHeader } from './components/hds/application-state/header.ts'; -export { default as HdsApplicationStateMedia } from './components/hds/application-state/media.ts'; +export { default as HdsApplicationStateBody } from './components/hds/application-state/body.gts'; +export { default as HdsApplicationStateFooter } from './components/hds/application-state/footer.gts'; +export { default as HdsApplicationStateHeader } from './components/hds/application-state/header.gts'; +export { default as HdsApplicationState } from './components/hds/application-state/index.gts'; +export { default as HdsApplicationStateMedia } from './components/hds/application-state/media.gts'; export * from './components/hds/application-state/types.ts'; // Badge -export { default as HdsBadge } from './components/hds/badge/index.ts'; +export { default as HdsBadge } from './components/hds/badge/index.gts'; export * from './components/hds/badge/types.ts'; // BadgeCount -export { default as HdsBadgeCount } from './components/hds/badge-count/index.ts'; +export { default as HdsBadgeCount } from './components/hds/badge-count/index.gts'; export * from './components/hds/badge-count/types.ts'; // Breadcrumb -export { default as HdsBreadcrumb } from './components/hds/breadcrumb/index.ts'; +export { default as HdsBreadcrumb } from './components/hds/breadcrumb/index.gts'; export { default as HdsBreadcrumbItem } from './components/hds/breadcrumb/item.gts'; -export { default as HdsBreadcrumbTruncation } from './components/hds/breadcrumb/truncation.ts'; +export { default as HdsBreadcrumbTruncation } from './components/hds/breadcrumb/truncation.gts'; // Button -export { default as HdsButton } from './components/hds/button/index.ts'; +export { default as HdsButton } from './components/hds/button/index.gts'; export * from './components/hds/button/types.ts'; // ButtonSet -export { default as HdsButtonSet } from './components/hds/button-set/index.ts'; +export { default as HdsButtonSet } from './components/hds/button-set/index.gts'; // Card -export { default as HdsCardContainer } from './components/hds/card/container.ts'; +export { default as HdsCardContainer } from './components/hds/card/container.gts'; export * from './components/hds/card/types.ts'; // CodeBlock -export { default as HdsCodeBlock } from './components/hds/code-block/index.ts'; -export { default as HdsCodeBlockCopyButton } from './components/hds/code-block/copy-button.ts'; -export { default as HdsCodeBlockDescription } from './components/hds/code-block/description.ts'; -export { default as HdsCodeBlockTitle } from './components/hds/code-block/title.ts'; +export { default as HdsCodeBlockCopyButton } from './components/hds/code-block/copy-button.gts'; +export { default as HdsCodeBlockDescription } from './components/hds/code-block/description.gts'; +export { default as HdsCodeBlock } from './components/hds/code-block/index.gts'; +export { default as HdsCodeBlockTitle } from './components/hds/code-block/title.gts'; export * from './components/hds/code-block/types.ts'; // CodeEditor -export { default as HdsCodeEditor } from './components/hds/code-editor/index.ts'; -export { default as HdsCodeEditorDescription } from './components/hds/code-editor/description.ts'; -export { default as HdsCodeEditorTitle } from './components/hds/code-editor/title.ts'; -export { default as HdsCodeEditorFullScreenButton } from './components/hds/code-editor/full-screen-button.ts'; +export { default as HdsCodeEditorDescription } from './components/hds/code-editor/description.gts'; +export { default as HdsCodeEditorFullScreenButton } from './components/hds/code-editor/full-screen-button.gts'; +export { default as HdsCodeEditor } from './components/hds/code-editor/index.gts'; +export { default as HdsCodeEditorTitle } from './components/hds/code-editor/title.gts'; // CopyButton -export { default as HdsCopyButton } from './components/hds/copy/button/index.ts'; +export { default as HdsCopyButton } from './components/hds/copy/button/index.gts'; export * from './components/hds/copy/button/types.ts'; // CopySnippet -export { default as HdsCopySnippet } from './components/hds/copy/snippet/index.ts'; +export { default as HdsCopySnippet } from './components/hds/copy/snippet/index.gts'; export * from './components/hds/copy/snippet/types.ts'; // Dropdown -export { default as HdsDropdown } from './components/hds/dropdown/index.ts'; -export { default as HdsDropdownFooter } from './components/hds/dropdown/footer.ts'; -export { default as HdsDropdownHeader } from './components/hds/dropdown/header.ts'; -export { default as HdsDropdownListItemCheckbox } from './components/hds/dropdown/list-item/checkbox.ts'; -export { default as HdsDropdownListItemCheckmark } from './components/hds/dropdown/list-item/checkmark.ts'; -export { default as HdsDropdownListItemCopyItem } from './components/hds/dropdown/list-item/copy-item.ts'; -export { default as HdsDropdownListItemDescription } from './components/hds/dropdown/list-item/description.ts'; -export { default as HdsDropdownListItemGeneric } from './components/hds/dropdown/list-item/generic.ts'; -export { default as HdsDropdownListItemInteractive } from './components/hds/dropdown/list-item/interactive.ts'; -export { default as HdsDropdownListItemRadio } from './components/hds/dropdown/list-item/radio.ts'; -export { default as HdsDropdownListItemSeparator } from './components/hds/dropdown/list-item/separator.ts'; -export { default as HdsDropdownListItemTitle } from './components/hds/dropdown/list-item/title.ts'; -export { default as HdsDropdownToggleButton } from './components/hds/dropdown/toggle/button.ts'; -export { default as HdsDropdownToggleIcon } from './components/hds/dropdown/toggle/icon.ts'; +export { default as HdsDropdownFooter } from './components/hds/dropdown/footer.gts'; +export { default as HdsDropdownHeader } from './components/hds/dropdown/header.gts'; +export { default as HdsDropdown } from './components/hds/dropdown/index.gts'; +export { default as HdsDropdownListItemCheckbox } from './components/hds/dropdown/list-item/checkbox.gts'; +export { default as HdsDropdownListItemCheckmark } from './components/hds/dropdown/list-item/checkmark.gts'; +export { default as HdsDropdownListItemCopyItem } from './components/hds/dropdown/list-item/copy-item.gts'; +export { default as HdsDropdownListItemDescription } from './components/hds/dropdown/list-item/description.gts'; +export { default as HdsDropdownListItemGeneric } from './components/hds/dropdown/list-item/generic.gts'; +export { default as HdsDropdownListItemInteractive } from './components/hds/dropdown/list-item/interactive.gts'; +export { default as HdsDropdownListItemRadio } from './components/hds/dropdown/list-item/radio.gts'; +export { default as HdsDropdownListItemSeparator } from './components/hds/dropdown/list-item/separator.gts'; +export { default as HdsDropdownListItemTitle } from './components/hds/dropdown/list-item/title.gts'; export * from './components/hds/dropdown/list-item/types.ts'; +export { default as HdsDropdownToggleButton } from './components/hds/dropdown/toggle/button.gts'; +export { default as HdsDropdownToggleIcon } from './components/hds/dropdown/toggle/icon.gts'; export * from './components/hds/dropdown/toggle/types.ts'; export * from './components/hds/dropdown/types.ts'; // Flyout -export { default as HdsFlyout } from './components/hds/flyout/index.ts'; +export { default as HdsFlyout } from './components/hds/flyout/index.gts'; export * from './components/hds/flyout/types.ts'; // Form > Layout -export { default as HdsForm } from './components/hds/form/index.ts'; export { default as HdsFormFooter } from './components/hds/form/footer/index.ts'; +export { default as HdsFormHeaderDescription } from './components/hds/form/header/description.ts'; export { default as HdsFormHeader } from './components/hds/form/header/index.ts'; export { default as HdsFormHeaderTitle } from './components/hds/form/header/title.ts'; -export { default as HdsFormHeaderDescription } from './components/hds/form/header/description.ts'; -export { default as HdsFormSection } from './components/hds/form/section/index.ts'; +export { default as HdsForm } from './components/hds/form/index.ts'; export { default as HdsFormSectionHeader } from './components/hds/form/section/header.ts'; +export { default as HdsFormSection } from './components/hds/form/section/index.ts'; export { default as HdsFormSectionMultiFieldGroup } from './components/hds/form/section/multi-field-group/index.ts'; export { default as HdsFormSectionMultiFieldGroupItem } from './components/hds/form/section/multi-field-group/item.ts'; export { default as HdsFormSeparator } from './components/hds/form/separator/index.ts'; export * from './components/hds/form/types.ts'; // Form > Base elements -export { default as HdsFormCharacterCount } from './components/hds/form/character-count/index.ts'; -export { default as HdsFormError } from './components/hds/form/error/index.ts'; -export { default as HdsFormErrorMessage } from './components/hds/form/error/message.ts'; -export { default as HdsFormField } from './components/hds/form/field/index.ts'; -export { default as HdsFormFieldset } from './components/hds/form/fieldset/index.ts'; -export { default as HdsFormHelperText } from './components/hds/form/helper-text/index.ts'; -export { default as HdsFormIndicator } from './components/hds/form/indicator/index.ts'; -export { default as HdsFormLabel } from './components/hds/form/label/index.ts'; -export { default as HdsFormLegend } from './components/hds/form/legend/index.ts'; -export { default as HdsFormVisibilityToggle } from './components/hds/form/visibility-toggle/index.ts'; +export { default as HdsFormCharacterCount } from './components/hds/form/character-count/index.gts'; +export { default as HdsFormError } from './components/hds/form/error/index.gts'; +export { default as HdsFormErrorMessage } from './components/hds/form/error/message.gts'; +export { default as HdsFormField } from './components/hds/form/field/index.gts'; export * from './components/hds/form/field/types.ts'; +export { default as HdsFormFieldset } from './components/hds/form/fieldset/index.gts'; export * from './components/hds/form/fieldset/types.ts'; +export { default as HdsFormHelperText } from './components/hds/form/helper-text/index.gts'; +export { default as HdsFormIndicator } from './components/hds/form/indicator/index.gts'; +export { default as HdsFormLabel } from './components/hds/form/label/index.gts'; +export { default as HdsFormLegend } from './components/hds/form/legend/index.gts'; +export { default as HdsFormVisibilityToggle } from './components/hds/form/visibility-toggle/index.gts'; // Form > Checkbox -export { default as HdsFormCheckboxBase } from './components/hds/form/checkbox/base.ts'; -export { default as HdsFormCheckboxField } from './components/hds/form/checkbox/field.ts'; -export { default as HdsFormCheckboxGroup } from './components/hds/form/checkbox/group.ts'; +export { default as HdsFormCheckboxBase } from './components/hds/form/checkbox/base.gts'; +export { default as HdsFormCheckboxField } from './components/hds/form/checkbox/field.gts'; +export { default as HdsFormCheckboxGroup } from './components/hds/form/checkbox/group.gts'; // Form > FileInput -export { default as HdsFormFileInputBase } from './components/hds/form/file-input/base.ts'; -export { default as HdsFormFileInputField } from './components/hds/form/file-input/field.ts'; +export { default as HdsFormFileInputBase } from './components/hds/form/file-input/base.gts'; +export { default as HdsFormFileInputField } from './components/hds/form/file-input/field.gts'; // Form > KeyValueInputs -export { default as HdsFormKeyValueInputs } from './components/hds/form/key-value-inputs/index.ts'; export { default as HdsFormKeyValueInputsAddRowButton } from './components/hds/form/key-value-inputs/add-row-button.ts'; export { default as HdsFormKeyValueInputsDeleteRowButton } from './components/hds/form/key-value-inputs/delete-row-button.ts'; export { default as HdsFormKeyValueInputsField } from './components/hds/form/key-value-inputs/field.ts'; export { default as HdsFormKeyValueInputsGeneric } from './components/hds/form/key-value-inputs/generic.ts'; +export { default as HdsFormKeyValueInputs } from './components/hds/form/key-value-inputs/index.ts'; // Form > MaskedInput -export { default as HdsFormMaskedInputBase } from './components/hds/form/masked-input/base.ts'; -export { default as HdsFormMaskedInputField } from './components/hds/form/masked-input/field.ts'; +export { default as HdsFormMaskedInputBase } from './components/hds/form/masked-input/base.gts'; +export { default as HdsFormMaskedInputField } from './components/hds/form/masked-input/field.gts'; // Form > Radio -export { default as HdsFormRadioBase } from './components/hds/form/radio/base.ts'; -export { default as HdsFormRadioField } from './components/hds/form/radio/field.ts'; -export { default as HdsFormRadioGroup } from './components/hds/form/radio/group.ts'; +export { default as HdsFormRadioBase } from './components/hds/form/radio/base.gts'; +export { default as HdsFormRadioField } from './components/hds/form/radio/field.gts'; +export { default as HdsFormRadioGroup } from './components/hds/form/radio/group.gts'; // Form > RadioCard -export { default as HdsFormRadioCard } from './components/hds/form/radio-card/index.ts'; -export { default as HdsFormRadioCardGroup } from './components/hds/form/radio-card/group.ts'; -export { default as HdsFormRadioCardDescription } from './components/hds/form/radio-card/description.ts'; -export { default as HdsFormRadioCardLabel } from './components/hds/form/radio-card/label.ts'; +export { default as HdsFormRadioCardDescription } from './components/hds/form/radio-card/description.gts'; +export { default as HdsFormRadioCardGroup } from './components/hds/form/radio-card/group.gts'; +export { default as HdsFormRadioCard } from './components/hds/form/radio-card/index.gts'; +export { default as HdsFormRadioCardLabel } from './components/hds/form/radio-card/label.gts'; export * from './components/hds/form/radio-card/types.ts'; // Form > Select -export { default as HdsFormSelectBase } from './components/hds/form/select/base.ts'; -export { default as HdsFormSelectField } from './components/hds/form/select/field.ts'; +export { default as HdsFormSelectBase } from './components/hds/form/select/base.gts'; +export { default as HdsFormSelectField } from './components/hds/form/select/field.gts'; // Form > SuperSelect -export { default as HdsFormSuperSelectSingleBase } from './components/hds/form/super-select/single/base.ts'; -export { default as HdsFormSuperSelectSingleField } from './components/hds/form/super-select/single/field.ts'; -export { default as HdsFormSuperSelectMultipleBase } from './components/hds/form/super-select/multiple/base.ts'; -export { default as HdsFormSuperSelectMultipleField } from './components/hds/form/super-select/multiple/field.ts'; -export { default as HdsFormSuperSelectAfterOptions } from './components/hds/form/super-select/after-options.ts'; -export { default as HdsFormSuperSelectOptionGroup } from './components/hds/form/super-select/option-group.ts'; -export { default as HdsFormSuperSelectPlaceholder } from './components/hds/form/super-select/placeholder.ts'; +export { default as HdsFormSuperSelectAfterOptions } from './components/hds/form/super-select/after-options.gts'; +export { default as HdsFormSuperSelectMultipleBase } from './components/hds/form/super-select/multiple/base.gts'; +export { default as HdsFormSuperSelectMultipleField } from './components/hds/form/super-select/multiple/field.gts'; +export { default as HdsFormSuperSelectOptionGroup } from './components/hds/form/super-select/option-group.gts'; +export { default as HdsFormSuperSelectPlaceholder } from './components/hds/form/super-select/placeholder.gts'; +export { default as HdsFormSuperSelectSingleBase } from './components/hds/form/super-select/single/base.gts'; +export { default as HdsFormSuperSelectSingleField } from './components/hds/form/super-select/single/field.gts'; export * from './components/hds/form/super-select/types.ts'; // Form > Textarea -export { default as HdsFormTextareaBase } from './components/hds/form/textarea/base.ts'; -export { default as HdsFormTextareaField } from './components/hds/form/textarea/field.ts'; +export { default as HdsFormTextareaBase } from './components/hds/form/textarea/base.gts'; +export { default as HdsFormTextareaField } from './components/hds/form/textarea/field.gts'; // Form > TextInput -export { default as HdsFormTextInputBase } from './components/hds/form/text-input/base.ts'; -export { default as HdsFormTextInputField } from './components/hds/form/text-input/field.ts'; +export { default as HdsFormTextInputBase } from './components/hds/form/text-input/base.gts'; +export { default as HdsFormTextInputField } from './components/hds/form/text-input/field.gts'; export * from './components/hds/form/text-input/types.ts'; // Form > Toggle -export { default as HdsFormToggleBase } from './components/hds/form/toggle/base.ts'; -export { default as HdsFormToggleField } from './components/hds/form/toggle/field.ts'; -export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.ts'; +export { default as HdsFormToggleBase } from './components/hds/form/toggle/base.gts'; +export { default as HdsFormToggleField } from './components/hds/form/toggle/field.gts'; +export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.gts'; // Icon export { default as HdsIcon } from './components/hds/icon/index.gts'; export * from './components/hds/icon/types.ts'; // IconTile -export { default as HdsIconTile } from './components/hds/icon-tile/index.ts'; +export { default as HdsIconTile } from './components/hds/icon-tile/index.gts'; export * from './components/hds/icon-tile/types.ts'; // Link -export { default as HdsLinkInline } from './components/hds/link/inline.ts'; -export { default as HdsLinkStandalone } from './components/hds/link/standalone.ts'; +export { default as HdsLinkInline } from './components/hds/link/inline.gts'; +export { default as HdsLinkStandalone } from './components/hds/link/standalone.gts'; export * from './components/hds/link/types.ts'; // Modal -export { default as HdsModal } from './components/hds/modal/index.ts'; +export { default as HdsModal } from './components/hds/modal/index.gts'; export * from './components/hds/modal/types.ts'; // PageHeader -export { default as HdsPageHeader } from './components/hds/page-header/index.ts'; -export { default as HdsPageHeaderActions } from './components/hds/page-header/actions.ts'; -export { default as HdsPageHeaderBadges } from './components/hds/page-header/badges.ts'; -export { default as HdsPageHeaderDescription } from './components/hds/page-header/description.ts'; -export { default as HdsPageHeaderSubtitle } from './components/hds/page-header/subtitle.ts'; -export { default as HdsPageHeaderTitle } from './components/hds/page-header/title.ts'; +export { default as HdsPageHeaderActions } from './components/hds/page-header/actions.gts'; +export { default as HdsPageHeaderBadges } from './components/hds/page-header/badges.gts'; +export { default as HdsPageHeaderDescription } from './components/hds/page-header/description.gts'; +export { default as HdsPageHeader } from './components/hds/page-header/index.gts'; +export { default as HdsPageHeaderSubtitle } from './components/hds/page-header/subtitle.gts'; +export { default as HdsPageHeaderTitle } from './components/hds/page-header/title.gts'; // Pagination -export { default as HdsPaginationCompact } from './components/hds/pagination/compact/index.ts'; -export { default as HdsPaginationInfo } from './components/hds/pagination/info/index.ts'; -export { default as HdsPaginationNavArrow } from './components/hds/pagination/nav/arrow.ts'; -export { default as HdsPaginationNavEllipsis } from './components/hds/pagination/nav/ellipsis.ts'; -export { default as HdsPaginationNavNumber } from './components/hds/pagination/nav/number.ts'; -export { default as HdsPaginationNumbered } from './components/hds/pagination/numbered/index.ts'; -export { default as HdsPaginationSizeSelector } from './components/hds/pagination/size-selector/index.ts'; +export { default as HdsPaginationCompact } from './components/hds/pagination/compact/index.gts'; +export { default as HdsPaginationInfo } from './components/hds/pagination/info/index.gts'; +export { default as HdsPaginationNavArrow } from './components/hds/pagination/nav/arrow.gts'; +export { default as HdsPaginationNavEllipsis } from './components/hds/pagination/nav/ellipsis.gts'; +export { default as HdsPaginationNavNumber } from './components/hds/pagination/nav/number.gts'; +export { default as HdsPaginationNumbered } from './components/hds/pagination/numbered/index.gts'; +export { default as HdsPaginationSizeSelector } from './components/hds/pagination/size-selector/index.gts'; export * from './components/hds/pagination/types.ts'; // Reveal -export { default as HdsReveal } from './components/hds/reveal/index.ts'; -export { default as HdsRevealToggleButton } from './components/hds/reveal/toggle/button.ts'; +export { default as HdsReveal } from './components/hds/reveal/index.gts'; +export { default as HdsRevealToggleButton } from './components/hds/reveal/toggle/button.gts'; // RichTooltip -export { default as HdsRichTooltip } from './components/hds/rich-tooltip/index.ts'; -export { default as HdsRichTooltipBubble } from './components/hds/rich-tooltip/bubble.ts'; -export { default as HdsRichTooltipToggle } from './components/hds/rich-tooltip/toggle.ts'; +export { default as HdsRichTooltipBubble } from './components/hds/rich-tooltip/bubble.gts'; +export { default as HdsRichTooltip } from './components/hds/rich-tooltip/index.gts'; +export { default as HdsRichTooltipToggle } from './components/hds/rich-tooltip/toggle.gts'; export * from './components/hds/rich-tooltip/types.ts'; // SegmentedGroup -export { default as HdsSegmentedGroup } from './components/hds/segmented-group/index.ts'; +export { default as HdsSegmentedGroup } from './components/hds/segmented-group/index.gts'; // Separator -export { default as HdsSeparator } from './components/hds/separator/index.ts'; +export { default as HdsSeparator } from './components/hds/separator/index.gts'; export * from './components/hds/separator/types.ts'; // SideNav -export { default as HdsSideNav } from './components/hds/side-nav/index.ts'; -export { default as HdsSideNavBase } from './components/hds/side-nav/base.ts'; -export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.ts'; -export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.ts'; -export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.ts'; -export { default as HdsSideNavList } from './components/hds/side-nav/list/index.ts'; -export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.ts'; -export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.ts'; -export { default as HdsSideNavListLink } from './components/hds/side-nav/list/link.ts'; -export { default as HdsSideNavListTitle } from './components/hds/side-nav/list/title.ts'; -export { default as HdsSideNavPortal } from './components/hds/side-nav/portal/index.ts'; -export { default as HdsSideNavPortalTarget } from './components/hds/side-nav/portal/target.ts'; -export { default as HdsSideNavToggleButton } from './components/hds/side-nav/toggle-button.ts'; +export { default as HdsSideNavBase } from './components/hds/side-nav/base.gts'; +export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.gts'; +export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.gts'; +export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.gts'; +export { default as HdsSideNav } from './components/hds/side-nav/index.gts'; +export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.gts'; +export { default as HdsSideNavList } from './components/hds/side-nav/list/index.gts'; +export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.gts'; +export { default as HdsSideNavListLink } from './components/hds/side-nav/list/link.gts'; +export { default as HdsSideNavListTitle } from './components/hds/side-nav/list/title.gts'; +export { default as HdsSideNavPortal } from './components/hds/side-nav/portal/index.gts'; +export { default as HdsSideNavPortalTarget } from './components/hds/side-nav/portal/target.gts'; +export { default as HdsSideNavToggleButton } from './components/hds/side-nav/toggle-button.gts'; // Stepper -export { default as HdsStepperList } from './components/hds/stepper/list/index.ts'; -export { default as HdsStepperListStep } from './components/hds/stepper/list/step.ts'; -export { default as HdsStepperNav } from './components/hds/stepper/nav/index.ts'; -export { default as HdsStepperNavPanel } from './components/hds/stepper/nav/panel.ts'; -export { default as HdsStepperNavStep } from './components/hds/stepper/nav/step.ts'; -export { default as HdsStepperStepIndicator } from './components/hds/stepper/step/indicator.ts'; -export { default as HdsStepperTaskIndicator } from './components/hds/stepper/task/indicator.ts'; +export { default as HdsStepperList } from './components/hds/stepper/list/index.gts'; +export { default as HdsStepperListStep } from './components/hds/stepper/list/step.gts'; +export { default as HdsStepperNav } from './components/hds/stepper/nav/index.gts'; +export { default as HdsStepperNavPanel } from './components/hds/stepper/nav/panel.gts'; +export { default as HdsStepperNavStep } from './components/hds/stepper/nav/step.gts'; +export { default as HdsStepperStepIndicator } from './components/hds/stepper/step/indicator.gts'; +export { default as HdsStepperTaskIndicator } from './components/hds/stepper/task/indicator.gts'; export * from './components/hds/stepper/types.ts'; // Table -export { default as HdsTable } from './components/hds/table/index.ts'; -export { default as HdsTableTd } from './components/hds/table/td.ts'; -export { default as HdsTableTh } from './components/hds/table/th.ts'; -export { default as HdsTableThButtonSort } from './components/hds/table/th-button-sort.ts'; -export { default as HdsTableThButtonTooltip } from './components/hds/table/th-button-tooltip.ts'; -export { default as HdsTableThSelectable } from './components/hds/table/th-selectable.ts'; -export { default as HdsTableThSort } from './components/hds/table/th-sort.ts'; -export { default as HdsTableTr } from './components/hds/table/tr.ts'; +export { default as HdsTable } from './components/hds/table/index.gts'; +export { default as HdsTableTd } from './components/hds/table/td.gts'; +export { default as HdsTableThButtonSort } from './components/hds/table/th-button-sort.gts'; +export { default as HdsTableThButtonTooltip } from './components/hds/table/th-button-tooltip.gts'; +export { default as HdsTableThSelectable } from './components/hds/table/th-selectable.gts'; +export { default as HdsTableThSort } from './components/hds/table/th-sort.gts'; +export { default as HdsTableTh } from './components/hds/table/th.gts'; +export { default as HdsTableTr } from './components/hds/table/tr.gts'; export * from './components/hds/table/types.ts'; // Tabs -export { default as HdsTabs } from './components/hds/tabs/index.ts'; -export { default as HdsTabsPanel } from './components/hds/tabs/panel.ts'; -export { default as HdsTabsTab } from './components/hds/tabs/tab.ts'; +export { default as HdsTabs } from './components/hds/tabs/index.gts'; +export { default as HdsTabsPanel } from './components/hds/tabs/panel.gts'; +export { default as HdsTabsTab } from './components/hds/tabs/tab.gts'; export * from './components/hds/tabs/types.ts'; // Tag -export { default as HdsTag } from './components/hds/tag/index.ts'; +export { default as HdsTag } from './components/hds/tag/index.gts'; export * from './components/hds/tag/types.ts'; // Text -export { default as HdsText } from './components/hds/text/index.ts'; -export { default as HdsTextBody } from './components/hds/text/body.ts'; -export { default as HdsTextCode } from './components/hds/text/code.ts'; -export { default as HdsTextDisplay } from './components/hds/text/display.ts'; +export { default as HdsTextBody } from './components/hds/text/body.gts'; +export { default as HdsTextCode } from './components/hds/text/code.gts'; +export { default as HdsTextDisplay } from './components/hds/text/display.gts'; +export { default as HdsText } from './components/hds/text/index.gts'; export * from './components/hds/text/types.ts'; // Time -export { default as HdsTime } from './components/hds/time/index.ts'; -export { default as HdsTimeSingle } from './components/hds/time/single.ts'; -export { default as HdsTimeRange } from './components/hds/time/range.ts'; +export { default as HdsTime } from './components/hds/time/index.gts'; +export { default as HdsTimeRange } from './components/hds/time/range.gts'; +export { default as HdsTimeSingle } from './components/hds/time/single.gts'; export * from './services/hds-time-types.ts'; // Toast -export { default as HdsToast } from './components/hds/toast/index.ts'; +export { default as HdsToast } from './components/hds/toast/index.gts'; // TooltipButton -export { default as HdsTooltipButton } from './components/hds/tooltip-button/index.ts'; +export { default as HdsTooltipButton } from './components/hds/tooltip-button/index.gts'; export * from './components/hds/tooltip-button/types.ts'; // ----------------------------------------------------------- @@ -345,12 +345,12 @@ export * from './components/hds/tooltip-button/types.ts'; // ----------------------------------------------------------- // AppFrame -export { default as HdsAppFrame } from './components/hds/app-frame/index.ts'; -export { default as HdsAppFrameFooter } from './components/hds/app-frame/parts/footer.ts'; -export { default as HdsAppFrameHeader } from './components/hds/app-frame/parts/header.ts'; -export { default as HdsAppFrameMain } from './components/hds/app-frame/parts/main.ts'; -export { default as HdsAppFrameModals } from './components/hds/app-frame/parts/modals.ts'; -export { default as HdsAppFrameSidebar } from './components/hds/app-frame/parts/sidebar.ts'; +export { default as HdsAppFrame } from './components/hds/app-frame/index.gts'; +export { default as HdsAppFrameFooter } from './components/hds/app-frame/parts/footer.gts'; +export { default as HdsAppFrameHeader } from './components/hds/app-frame/parts/header.gts'; +export { default as HdsAppFrameMain } from './components/hds/app-frame/parts/main.gts'; +export { default as HdsAppFrameModals } from './components/hds/app-frame/parts/modals.gts'; +export { default as HdsAppFrameSidebar } from './components/hds/app-frame/parts/sidebar.gts'; // Layout > Flex export { default as HdsLayoutFlex } from './components/hds/layout/flex/index.ts'; @@ -373,25 +373,25 @@ export { // ----------------------------------------------------------- // DialogPrimitive -export { default as HdsDialogPrimitiveBody } from './components/hds/dialog-primitive/body.ts'; -export { default as HdsDialogPrimitiveDescription } from './components/hds/dialog-primitive/description.ts'; -export { default as HdsDialogPrimitiveFooter } from './components/hds/dialog-primitive/footer.ts'; -export { default as HdsDialogPrimitiveHeader } from './components/hds/dialog-primitive/header.ts'; -export { default as HdsDialogPrimitiveOverlay } from './components/hds/dialog-primitive/overlay.ts'; -export { default as HdsDialogPrimitiveWrapper } from './components/hds/dialog-primitive/wrapper.ts'; +export { default as HdsDialogPrimitiveBody } from './components/hds/dialog-primitive/body.gts'; +export { default as HdsDialogPrimitiveDescription } from './components/hds/dialog-primitive/description.gts'; +export { default as HdsDialogPrimitiveFooter } from './components/hds/dialog-primitive/footer.gts'; +export { default as HdsDialogPrimitiveHeader } from './components/hds/dialog-primitive/header.gts'; +export { default as HdsDialogPrimitiveOverlay } from './components/hds/dialog-primitive/overlay.gts'; export * from './components/hds/dialog-primitive/types.ts'; +export { default as HdsDialogPrimitiveWrapper } from './components/hds/dialog-primitive/wrapper.gts'; // DisclosurePrimitive -export { default as HdsDisclosurePrimitive } from './components/hds/disclosure-primitive/index.ts'; +export { default as HdsDisclosurePrimitive } from './components/hds/disclosure-primitive/index.gts'; // DismissButton -export { default as HdsDismissButton } from './components/hds/dismiss-button/index.ts'; +export { default as HdsDismissButton } from './components/hds/dismiss-button/index.gts'; // Interactive export { default as HdsInteractive } from './components/hds/interactive/index.gts'; // MenuPrimitive -export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.ts'; +export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.gts'; // PopoverPrimitive -export { default as HdsPopoverPrimitive } from './components/hds/popover-primitive/index.ts'; +export { default as HdsPopoverPrimitive } from './components/hds/popover-primitive/index.gts'; diff --git a/packages/components/src/components/hds/accordion/index.ts b/packages/components/src/components/hds/accordion/index.gts similarity index 80% rename from packages/components/src/components/hds/accordion/index.ts rename to packages/components/src/components/hds/accordion/index.gts index ae366555177..b23782e2650 100644 --- a/packages/components/src/components/hds/accordion/index.ts +++ b/packages/components/src/components/hds/accordion/index.gts @@ -5,12 +5,18 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import { hash } from '@ember/helper'; -import { SIZES, DEFAULT_SIZE, TYPES, DEFAULT_TYPE } from './item/index.ts'; +import HdsAccordionItem, { + SIZES, + DEFAULT_SIZE, + TYPES, + DEFAULT_TYPE, +} 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, HdsAccordionSizes, @@ -96,4 +102,20 @@ export default class HdsAccordion extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/accordion/index.hbs b/packages/components/src/components/hds/accordion/index.hbs deleted file mode 100644 index 27d98b8c0b9..00000000000 --- a/packages/components/src/components/hds/accordion/index.hbs +++ /dev/null @@ -1,12 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
- {{yield - (hash - Item=(component "hds/accordion/item" titleTag=this.titleTag size=this.size type=this.type forceState=@forceState) - ) - }} -
\ No newline at end of file diff --git a/packages/components/src/components/hds/accordion/item/button.ts b/packages/components/src/components/hds/accordion/item/button.gts similarity index 76% rename from packages/components/src/components/hds/accordion/item/button.ts rename to packages/components/src/components/hds/accordion/item/button.gts index cdb110fbc9d..95ee1fb08f5 100644 --- a/packages/components/src/components/hds/accordion/item/button.ts +++ b/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 + + } diff --git a/packages/components/src/components/hds/accordion/item/button.hbs b/packages/components/src/components/hds/accordion/item/button.hbs deleted file mode 100644 index 7e21cd1dc87..00000000000 --- a/packages/components/src/components/hds/accordion/item/button.hbs +++ /dev/null @@ -1,17 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - \ No newline at end of file diff --git a/packages/components/src/components/hds/accordion/item/index.ts b/packages/components/src/components/hds/accordion/item/index.gts similarity index 71% rename from packages/components/src/components/hds/accordion/item/index.ts rename to packages/components/src/components/hds/accordion/item/index.gts index eed81836b8e..521394f4f3e 100644 --- a/packages/components/src/components/hds/accordion/item/index.ts +++ b/packages/components/src/components/hds/accordion/item/index.gts @@ -6,7 +6,12 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { guidFor } from '@ember/object/internals'; +import { hash } from '@ember/helper'; +import { eq, or } from 'ember-truth-helpers'; +import HdsAccordionItemButton from './button.gts'; +import HdsDisclosurePrimitive from '../../disclosure-primitive/index.gts'; +import HdsTextBody from '../../text/body.gts'; import { HdsAccordionSizeValues, HdsAccordionTypeValues, @@ -163,4 +168,51 @@ export default class HdsAccordionItem extends Component + + <:toggle as |t|> +
+ + + + {{yield to="toggle"}} + +
+ + + <:content as |c|> + + {{yield (hash close=c.close) to="content"}} + + + + } diff --git a/packages/components/src/components/hds/advanced-table/expandable-tr-group.ts b/packages/components/src/components/hds/advanced-table/expandable-tr-group.gts similarity index 54% rename from packages/components/src/components/hds/advanced-table/expandable-tr-group.ts rename to packages/components/src/components/hds/advanced-table/expandable-tr-group.gts index 90c6384c065..60f8195a785 100644 --- a/packages/components/src/components/hds/advanced-table/expandable-tr-group.ts +++ b/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 + {{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|}} + + {{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 + ) + }} + + {{/each}} + {{/if}} + } diff --git a/packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs b/packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs deleted file mode 100644 index 1aab7246787..00000000000 --- a/packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs +++ /dev/null @@ -1,44 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{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|}} - - {{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 - ) - }} - - {{/each}} -{{/if}} \ No newline at end of file diff --git a/packages/components/src/components/hds/advanced-table/index.ts b/packages/components/src/components/hds/advanced-table/index.gts similarity index 99% rename from packages/components/src/components/hds/advanced-table/index.ts rename to packages/components/src/components/hds/advanced-table/index.gts index a3435882c29..ea096d331c1 100644 --- a/packages/components/src/components/hds/advanced-table/index.ts +++ b/packages/components/src/components/hds/advanced-table/index.gts @@ -3,14 +3,13 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; import { assert } from '@ember/debug'; +import { action } from '@ember/object'; +import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import type { WithBoundArgs } from '@glint/template'; -import { guidFor } from '@ember/object/internals'; import { modifier } from 'ember-modifier'; -import type Owner from '@ember/owner'; import HdsAdvancedTableTableModel from './models/table.ts'; @@ -18,22 +17,24 @@ import { HdsAdvancedTableDensityValues, HdsAdvancedTableVerticalAlignmentValues, } from './types.ts'; + +import type Owner from '@ember/owner'; +import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts'; +import type HdsAdvancedTableColumnType from './models/column.ts'; +import type HdsAdvancedTableTd from './td.ts'; +import type HdsAdvancedTableTh from './th.ts'; +import type HdsAdvancedTableTr from './tr.ts'; import type { HdsAdvancedTableColumn, HdsAdvancedTableDensities, + HdsAdvancedTableExpandState, HdsAdvancedTableHorizontalAlignment, + HdsAdvancedTableModel, HdsAdvancedTableOnSelectionChangeSignature, HdsAdvancedTableSelectableRow, HdsAdvancedTableThSortOrder, HdsAdvancedTableVerticalAlignment, - HdsAdvancedTableModel, - HdsAdvancedTableExpandState, } from './types.ts'; -import type HdsAdvancedTableColumnType from './models/column.ts'; -import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts'; -import type HdsAdvancedTableTd from './td.ts'; -import type HdsAdvancedTableTh from './th.ts'; -import type HdsAdvancedTableTr from './tr.ts'; export const DENSITIES: HdsAdvancedTableDensities[] = Object.values( HdsAdvancedTableDensityValues diff --git a/packages/components/src/components/hds/advanced-table/td.ts b/packages/components/src/components/hds/advanced-table/td.gts similarity index 73% rename from packages/components/src/components/hds/advanced-table/td.ts rename to packages/components/src/components/hds/advanced-table/td.gts index c985dbeb5ad..b5d69c7a796 100644 --- a/packages/components/src/components/hds/advanced-table/td.ts +++ b/packages/components/src/components/hds/advanced-table/td.gts @@ -8,11 +8,17 @@ import { assert } from '@ember/debug'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; import { focusable, type FocusableElement } from 'tabbable'; +import { hash } from '@ember/helper'; +import style from 'ember-style-modifier'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; -import type { HdsAdvancedTableHorizontalAlignment } from './types.ts'; +import hdsAdvancedTableCell from '../../../modifiers/hds-advanced-table-cell.ts'; import { HdsAdvancedTableHorizontalAlignmentValues } from './types.ts'; import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts'; +import type { HdsAdvancedTableHorizontalAlignment } from './types.ts'; + export const ALIGNMENTS: string[] = Object.values( HdsAdvancedTableHorizontalAlignmentValues ); @@ -88,4 +94,30 @@ export default class HdsAdvancedTableTd extends Component +
+ {{yield}} +
+ } diff --git a/packages/components/src/components/hds/advanced-table/td.hbs b/packages/components/src/components/hds/advanced-table/td.hbs deleted file mode 100644 index bb10e148b9f..00000000000 --- a/packages/components/src/components/hds/advanced-table/td.hbs +++ /dev/null @@ -1,26 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
- {{yield}} -
\ No newline at end of file diff --git a/packages/components/src/components/hds/advanced-table/th-button-expand.ts b/packages/components/src/components/hds/advanced-table/th-button-expand.gts similarity index 67% rename from packages/components/src/components/hds/advanced-table/th-button-expand.ts rename to packages/components/src/components/hds/advanced-table/th-button-expand.gts index cc2f75b9274..d60b77cef2f 100644 --- a/packages/components/src/components/hds/advanced-table/th-button-expand.ts +++ b/packages/components/src/components/hds/advanced-table/th-button-expand.gts @@ -6,12 +6,15 @@ import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import HdsIcon from '../icon/index.gts'; import { HdsAdvancedTableThExpandIconValues, type HdsAdvancedTableExpandState, } from './types.ts'; import type { HdsAdvancedTableThSortExpandIcons } from './types.ts'; + export interface HdsAdvancedTableThButtonExpandSignature { Args: { labelId?: string; @@ -61,4 +64,25 @@ export default class HdsAdvancedTableThButtonExpand extends Component + {{! template-lint-disable no-unsupported-role-attributes }} + {{! ember template lint doesnt support ARIA 1.3 yet, including aria-description - https://github.com/A11yance/aria-query/pull/557 }} + + } diff --git a/packages/components/src/components/hds/advanced-table/th-button-sort.ts b/packages/components/src/components/hds/advanced-table/th-button-sort.gts similarity index 78% rename from packages/components/src/components/hds/advanced-table/th-button-sort.ts rename to packages/components/src/components/hds/advanced-table/th-button-sort.gts index 013a2675d90..acc060a5775 100644 --- a/packages/components/src/components/hds/advanced-table/th-button-sort.ts +++ b/packages/components/src/components/hds/advanced-table/th-button-sort.gts @@ -5,17 +5,21 @@ import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; +import { on } from '@ember/modifier'; +import HdsIcon from '../icon/index.gts'; import { HdsAdvancedTableThSortOrderIconValues, HdsAdvancedTableThSortOrderLabelValues, HdsAdvancedTableThSortOrderValues, } from './types.ts'; + import type { HdsAdvancedTableThSortOrder, HdsAdvancedTableThSortOrderIcons, HdsAdvancedTableThSortOrderLabels, } from './types.ts'; + export interface HdsAdvancedTableThButtonSortSignature { Args: { labelId?: string; @@ -77,4 +81,24 @@ export default class HdsAdvancedTableThButtonSort extends Component + + } diff --git a/packages/components/src/components/hds/advanced-table/th-button-tooltip.ts b/packages/components/src/components/hds/advanced-table/th-button-tooltip.gts similarity index 65% rename from packages/components/src/components/hds/advanced-table/th-button-tooltip.ts rename to packages/components/src/components/hds/advanced-table/th-button-tooltip.gts index 4dc11c25671..053434812b4 100644 --- a/packages/components/src/components/hds/advanced-table/th-button-tooltip.ts +++ b/packages/components/src/components/hds/advanced-table/th-button-tooltip.gts @@ -7,6 +7,9 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { guidFor } from '@ember/object/internals'; +import HdsIcon from '../icon/index.gts'; +import hdsTooltip from '../../../modifiers/hds-tooltip.ts'; + export interface HdsAdvancedTableThButtonTooltipSignature { Args: { labelId?: string; @@ -35,4 +38,20 @@ export default class HdsAdvancedTableThButtonTooltip extends Component + + } diff --git a/packages/components/src/components/hds/advanced-table/th-selectable.ts b/packages/components/src/components/hds/advanced-table/th-selectable.gts similarity index 71% rename from packages/components/src/components/hds/advanced-table/th-selectable.ts rename to packages/components/src/components/hds/advanced-table/th-selectable.gts index bb1e2a481f2..ebd107048ec 100644 --- a/packages/components/src/components/hds/advanced-table/th-selectable.ts +++ b/packages/components/src/components/hds/advanced-table/th-selectable.gts @@ -8,18 +8,23 @@ import { action } from '@ember/object'; import { guidFor } from '@ember/object/internals'; import { tracked } from '@glimmer/tracking'; import { modifier } from 'ember-modifier'; +import { on } from '@ember/modifier'; +import HdsAdvancedTableThButtonSort from './th-button-sort.gts'; +import HdsFormCheckboxBase from '../form/checkbox/base.gts'; +import HdsAdvancedTableTh from './th.gts'; import { HdsAdvancedTableThSortOrderValues, HdsAdvancedTableThSortOrderLabelValues, } from './types.ts'; -import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base'; + +import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.gts'; import type { HdsAdvancedTableScope, HdsAdvancedTableThSortOrder, HdsAdvancedTableThSortOrderLabels, } from './types.ts'; -import type { HdsAdvancedTableThSignature } from './th.ts'; +import type { HdsAdvancedTableThSignature } from './th.gts'; export interface HdsAdvancedTableThSelectableSignature { Args: { @@ -97,4 +102,34 @@ export default class HdsAdvancedTableThSelectable extends Component + +
+ + {{#if this.isSortable}} + selection state + + {{/if}} +
+ + } diff --git a/packages/components/src/components/hds/advanced-table/th-sort.ts b/packages/components/src/components/hds/advanced-table/th-sort.gts similarity index 99% rename from packages/components/src/components/hds/advanced-table/th-sort.ts rename to packages/components/src/components/hds/advanced-table/th-sort.gts index 5858e6bcc7e..993820ea1de 100644 --- a/packages/components/src/components/hds/advanced-table/th-sort.ts +++ b/packages/components/src/components/hds/advanced-table/th-sort.gts @@ -3,30 +3,31 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { guidFor } from '@ember/object/internals'; import { assert } from '@ember/debug'; import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { focusable, type FocusableElement } from 'tabbable'; +import { guidFor } from '@ember/object/internals'; import type Owner from '@ember/owner'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; import { modifier } from 'ember-modifier'; +import { focusable, type FocusableElement } from 'tabbable'; +import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts'; import { HdsAdvancedTableHorizontalAlignmentValues, - HdsAdvancedTableThSortOrderValues, HdsAdvancedTableThSortOrderLabelValues, + HdsAdvancedTableThSortOrderValues, } from './types.ts'; + +import type { HdsAdvancedTableSignature } from './index.ts'; +import type { HdsAdvancedTableThButtonSortSignature } from './th-button-sort.ts'; +import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts'; +import type { HdsAdvancedTableThSignature } from './th.ts'; import type { HdsAdvancedTableHorizontalAlignment, HdsAdvancedTableThSortOrder, HdsAdvancedTableThSortOrderLabels, } from './types.ts'; -import type { HdsAdvancedTableThButtonSortSignature } from './th-button-sort.ts'; -import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts'; -import type { HdsAdvancedTableThSignature } from './th.ts'; -import type { HdsAdvancedTableSignature } from './index.ts'; -import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts'; export const ALIGNMENTS: string[] = Object.values( HdsAdvancedTableHorizontalAlignmentValues diff --git a/packages/components/src/components/hds/advanced-table/th.ts b/packages/components/src/components/hds/advanced-table/th.gts similarity index 71% rename from packages/components/src/components/hds/advanced-table/th.ts rename to packages/components/src/components/hds/advanced-table/th.gts index eebd3d5236d..a0a3ffa91f3 100644 --- a/packages/components/src/components/hds/advanced-table/th.ts +++ b/packages/components/src/components/hds/advanced-table/th.gts @@ -3,25 +3,25 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { guidFor } from '@ember/object/internals'; import { assert } from '@ember/debug'; import { action } from '@ember/object'; +import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { focusable, type FocusableElement } from 'tabbable'; import { modifier } from 'ember-modifier'; -import HdsAdvancedTableColumn from './models/column.ts'; +import { focusable, type FocusableElement } from 'tabbable'; import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts'; +import HdsAdvancedTableColumn from './models/column.ts'; import { HdsAdvancedTableHorizontalAlignmentValues } from './types.ts'; import type Owner from '@ember/owner'; +import type { HdsAdvancedTableSignature } from './index.ts'; +import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts'; import type { + HdsAdvancedTableExpandState, HdsAdvancedTableHorizontalAlignment, HdsAdvancedTableScope, - HdsAdvancedTableExpandState, } from './types.ts'; -import type { HdsAdvancedTableSignature } from './index.ts'; -import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts'; export const ALIGNMENTS: string[] = Object.values( HdsAdvancedTableHorizontalAlignmentValues @@ -185,4 +185,75 @@ export default class HdsAdvancedTableTh extends Component +
+ {{#if @isVisuallyHidden}} + {{yield}} + {{else}} + {{#if @tooltip}} +
+ {{#if @isExpandable}} + + {{/if}} + {{yield}} + +
+ {{else}} +
+ {{#if @isExpandable}} + + {{/if}} + {{yield}} +
+ {{/if}} + {{/if}} +
+ } diff --git a/packages/components/src/components/hds/advanced-table/tr.ts b/packages/components/src/components/hds/advanced-table/tr.gts similarity index 74% rename from packages/components/src/components/hds/advanced-table/tr.ts rename to packages/components/src/components/hds/advanced-table/tr.gts index ae2433b3296..8996c316321 100644 --- a/packages/components/src/components/hds/advanced-table/tr.ts +++ b/packages/components/src/components/hds/advanced-table/tr.gts @@ -3,17 +3,19 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import Component from '@glimmer/component'; +import { eq } from 'ember-truth-helpers'; + +import HdsAdvancedTableThSelectable from './th-selectable.gts'; -// import { HdsAdvancedTableScopeValues } from './types.ts'; +import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.gts'; +import type { HdsAdvancedTableSignature } from './index.gts'; +import type { HdsAdvancedTableThSelectableSignature } from './th-selectable.gts'; import type { HdsAdvancedTableScope, HdsAdvancedTableThSortOrder, } from './types.ts'; -import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts'; -import type { HdsAdvancedTableSignature } from './index.ts'; -import type { HdsAdvancedTableThSelectableSignature } from './th-selectable.ts'; export interface BaseHdsAdvancedTableTrSignature { Args: { @@ -101,4 +103,27 @@ export default class HdsAdvancedTableTr extends Component +
+ {{#if @isSelectable}} + + {{/if}} + + {{yield}} +
+ } diff --git a/packages/components/src/components/hds/advanced-table/tr.hbs b/packages/components/src/components/hds/advanced-table/tr.hbs deleted file mode 100644 index 9f00ba1932d..00000000000 --- a/packages/components/src/components/hds/advanced-table/tr.hbs +++ /dev/null @@ -1,25 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
- {{#if @isSelectable}} - - {{/if}} - - {{yield}} -
\ No newline at end of file diff --git a/packages/components/src/components/hds/advanced-table/types.ts b/packages/components/src/components/hds/advanced-table/types.ts index 4a66a1a7787..af1040305ce 100644 --- a/packages/components/src/components/hds/advanced-table/types.ts +++ b/packages/components/src/components/hds/advanced-table/types.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts'; +import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.gts'; export enum HdsAdvancedTableDensityValues { Default = 'default', diff --git a/packages/components/src/components/hds/alert/description.gts b/packages/components/src/components/hds/alert/description.gts new file mode 100644 index 00000000000..a1d6716f729 --- /dev/null +++ b/packages/components/src/components/hds/alert/description.gts @@ -0,0 +1,22 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsAlertDescriptionSignature { + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsAlertDescription: TOC = ; + +export default HdsAlertDescription; diff --git a/packages/components/src/components/hds/alert/description.hbs b/packages/components/src/components/hds/alert/description.hbs deleted file mode 100644 index fc97c4e9d04..00000000000 --- a/packages/components/src/components/hds/alert/description.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
{{yield}}
\ No newline at end of file diff --git a/packages/components/src/components/hds/alert/description.ts b/packages/components/src/components/hds/alert/description.ts deleted file mode 100644 index 7767669d206..00000000000 --- a/packages/components/src/components/hds/alert/description.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsAlertDescriptionSignature { - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsAlertDescription = - TemplateOnlyComponent(); - -export default HdsAlertDescription; diff --git a/packages/components/src/components/hds/alert/index.ts b/packages/components/src/components/hds/alert/index.gts similarity index 72% rename from packages/components/src/components/hds/alert/index.ts rename to packages/components/src/components/hds/alert/index.gts index b147b911f19..3cdd62f365e 100644 --- a/packages/components/src/components/hds/alert/index.ts +++ b/packages/components/src/components/hds/alert/index.gts @@ -8,16 +8,26 @@ import { action } from '@ember/object'; import { assert } from '@ember/debug'; import { guidFor } from '@ember/object/internals'; import { tracked } from '@glimmer/tracking'; - +import { hash } from '@ember/helper'; +import { on } from '@ember/modifier'; +import { eq } from 'ember-truth-helpers'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; + +import HdsIcon from '../icon/index.gts'; +import HdsDismissButton from '../dismiss-button/index.gts'; +import HdsYield from '../yield/index.gts'; +import HdsAlertTitle from './title.gts'; +import HdsButton from '../button/index.gts'; +import HdsAlertDescription from './description.gts'; +import HdsLinkStandalone from '../link/standalone.gts'; import { HdsAlertColorValues, HdsAlertTypeValues } from './types.ts'; import type { ComponentLike, WithBoundArgs } from '@glint/template'; -import type HdsButtonComponent from '../button'; -import type HdsLinkStandaloneComponent from '../link/standalone'; -import type { HdsYieldSignature } from '../yield'; +import type HdsLinkStandaloneComponent from '../link/standalone.gts'; +import type { HdsYieldSignature } from '../yield/index.gts'; import type { HdsAlertColors, HdsAlertTypes } from './types.ts'; -import type { HdsAlertTitleSignature } from './title.ts'; -import type { HdsAlertDescriptionSignature } from './description.ts'; +import type { HdsAlertTitleSignature } from './title.gts'; +import type { HdsAlertDescriptionSignature } from './description.gts'; import type { HdsIconSignature } from '../icon'; import type Owner from '@ember/owner'; @@ -55,7 +65,7 @@ export interface HdsAlertSignature { typeof HdsLinkStandaloneComponent, 'size' >; - Button?: WithBoundArgs; + Button?: WithBoundArgs; }, ]; }; @@ -179,4 +189,56 @@ export default class HdsAlert extends Component { this._ariaLabelledBy = labelId; } } + + } diff --git a/packages/components/src/components/hds/alert/index.hbs b/packages/components/src/components/hds/alert/index.hbs deleted file mode 100644 index e00894d8ebc..00000000000 --- a/packages/components/src/components/hds/alert/index.hbs +++ /dev/null @@ -1,38 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
- {{#if this.icon}} -
- -
- {{/if}} - -
-
- {{yield (hash Title=(component "hds/alert/title"))}} - {{yield (hash Description=(component "hds/alert/description"))}} -
- -
- {{yield - (hash - Button=(component "hds/button" size="small") LinkStandalone=(component "hds/link/standalone" size="small") - ) - }} -
- {{yield (hash Generic=(component "hds/yield"))}} -
- - {{#if this.onDismiss}} - - {{/if}} -
\ No newline at end of file diff --git a/packages/components/src/components/hds/alert/title.ts b/packages/components/src/components/hds/alert/title.gts similarity index 50% rename from packages/components/src/components/hds/alert/title.ts rename to packages/components/src/components/hds/alert/title.gts index 4e04c2694ec..9fde6dc9215 100644 --- a/packages/components/src/components/hds/alert/title.ts +++ b/packages/components/src/components/hds/alert/title.gts @@ -4,8 +4,12 @@ */ import Component from '@glimmer/component'; + +import { element } from 'ember-element-helper'; import { HdsAlertTitleTagValues } from './types.ts'; -import type { HdsAlertTitleTags } from './types'; + +import type { HdsAlertTitleTags } from './types.ts'; + export interface HdsAlertTitleSignature { Args: { tag?: HdsAlertTitleTags; @@ -20,4 +24,12 @@ export default class HdsAlertTitle extends Component { get componentTag(): HdsAlertTitleTags { return this.args.tag ?? HdsAlertTitleTagValues.Div; } + + // IMPORTANT: we removed any extra newlines before/after the `let` to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/1652) + } diff --git a/packages/components/src/components/hds/alert/title.hbs b/packages/components/src/components/hds/alert/title.hbs deleted file mode 100644 index 6096883f60b..00000000000 --- a/packages/components/src/components/hds/alert/title.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! IMPORTANT: we removed any extra newlines before/after the `let` to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/1652) }} -{{#let (element this.componentTag) as |Tag|}}{{yield}}{{/let}} \ No newline at end of file diff --git a/packages/components/src/components/hds/app-footer/copyright.ts b/packages/components/src/components/hds/app-footer/copyright.gts similarity index 64% rename from packages/components/src/components/hds/app-footer/copyright.ts rename to packages/components/src/components/hds/app-footer/copyright.gts index 1ffae1dffad..55dbaaea349 100644 --- a/packages/components/src/components/hds/app-footer/copyright.ts +++ b/packages/components/src/components/hds/app-footer/copyright.gts @@ -4,6 +4,8 @@ */ import Component from '@glimmer/component'; +import HdsIcon from '../icon/index.gts'; +import HdsTextBody from '../text/body.gts'; export interface HdsAppFooterCopyrightSignature { Args: { @@ -22,4 +24,13 @@ export default class HdsAppFooterCopyright extends Component +
+ + © + {{this.year}} + HashiCorp +
+ } diff --git a/packages/components/src/components/hds/app-footer/index.ts b/packages/components/src/components/hds/app-footer/index.gts similarity index 62% rename from packages/components/src/components/hds/app-footer/index.ts rename to packages/components/src/components/hds/app-footer/index.gts index f67513f7127..7ebd7e39608 100644 --- a/packages/components/src/components/hds/app-footer/index.ts +++ b/packages/components/src/components/hds/app-footer/index.gts @@ -4,13 +4,21 @@ */ import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; + +import HdsYield from '../yield/index.gts'; +import HdsAppFooterStatusLink from './status-link.gts'; +import HdsAppFooterCopyright from './copyright.gts'; +import HdsAppFooterLink from './link.gts'; +import HdsAppFooterLegalLinks from './legal-links.gts'; +import HdsAppFooterItem from './item.gts'; import type { ComponentLike } from '@glint/template'; -import type { HdsYieldSignature } from '../yield'; -import type { HdsAppFooterItemSignature } from './item.ts'; -import type { HdsAppFooterLegalLinksSignature } from './legal-links'; -import type { HdsAppFooterLinkSignature } from './link'; -import type { HdsAppFooterStatusLinkSignature } from './status-link'; +import type { HdsYieldSignature } from '../yield/index.gts'; +import type { HdsAppFooterItemSignature } from './item.gts'; +import type { HdsAppFooterLegalLinksSignature } from './legal-links.gts'; +import type { HdsAppFooterLinkSignature } from './link.gts'; +import type { HdsAppFooterStatusLinkSignature } from './status-link.gts'; import type { HdsAppFooterThemeTypes } from './types.ts'; export interface HdsAppFooterSignature { @@ -67,4 +75,22 @@ export default class HdsAppFooter extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/app-footer/index.hbs b/packages/components/src/components/hds/app-footer/index.hbs deleted file mode 100644 index 8c5c6b4c956..00000000000 --- a/packages/components/src/components/hds/app-footer/index.hbs +++ /dev/null @@ -1,20 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
- {{yield (hash ExtraBefore=(component "hds/yield"))}} -
    - {{yield (hash StatusLink=(component "hds/app-footer/status-link"))}} - {{yield - (hash - Link=(component "hds/app-footer/link") - LegalLinks=(component "hds/app-footer/legal-links") - Item=(component "hds/app-footer/item") - ) - }} -
- {{yield (hash ExtraAfter=(component "hds/yield"))}} - -
\ No newline at end of file diff --git a/packages/components/src/components/hds/app-footer/item.ts b/packages/components/src/components/hds/app-footer/item.gts similarity index 50% rename from packages/components/src/components/hds/app-footer/item.ts rename to packages/components/src/components/hds/app-footer/item.gts index 0358f090c4c..34a9700c26e 100644 --- a/packages/components/src/components/hds/app-footer/item.ts +++ b/packages/components/src/components/hds/app-footer/item.gts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import TemplateOnlyComponent from '@ember/component/template-only'; +import type { TOC } from '@ember/component/template-only'; export interface HdsAppFooterItemSignature { Blocks: { @@ -12,6 +12,10 @@ export interface HdsAppFooterItemSignature { Element: HTMLLIElement; } -const HdsAppFooterItem = TemplateOnlyComponent(); +const HdsAppFooterItem: TOC = ; export default HdsAppFooterItem; diff --git a/packages/components/src/components/hds/app-footer/item.hbs b/packages/components/src/components/hds/app-footer/item.hbs deleted file mode 100644 index bebf0c349ec..00000000000 --- a/packages/components/src/components/hds/app-footer/item.hbs +++ /dev/null @@ -1,8 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
  • - {{yield}} -
    • \ No newline at end of file diff --git a/packages/components/src/components/hds/app-footer/legal-links.ts b/packages/components/src/components/hds/app-footer/legal-links.gts similarity index 69% rename from packages/components/src/components/hds/app-footer/legal-links.ts rename to packages/components/src/components/hds/app-footer/legal-links.gts index 0e1e59260fa..6de5007e204 100644 --- a/packages/components/src/components/hds/app-footer/legal-links.ts +++ b/packages/components/src/components/hds/app-footer/legal-links.gts @@ -4,6 +4,8 @@ */ import Component from '@glimmer/component'; +import HdsAppFooterItem from './item.gts'; +import HdsAppFooterLink from './link.gts'; export interface HdsAppFooterLegalLinksSignature { Args: { @@ -76,4 +78,30 @@ export default class HdsAppFooterLegalLinks extends Component + +
      + + Support + + + Terms + + + Privacy + + + Security + + + Accessibility + +
    +     + } diff --git a/packages/components/src/components/hds/app-footer/link.gts b/packages/components/src/components/hds/app-footer/link.gts new file mode 100644 index 00000000000..ae03bfe8ccd --- /dev/null +++ b/packages/components/src/components/hds/app-footer/link.gts @@ -0,0 +1,53 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; +import HdsAppFooterItem from './item.gts'; +import HdsLinkInline from '../link/inline.gts'; +import HdsTextBody from '../text/body.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; +import type { HdsLinkColors, HdsLinkIconPositions } from '../link/types.ts'; +import type { HdsLinkInlineSignature } from '../link/inline.gts'; +import type { HdsIconSignature } from '../icon/index.gts'; + +export interface HdsAppFooterLinkSignature { + Args: HdsInteractiveSignature['Args'] & { + color?: HdsLinkColors; + icon?: HdsIconSignature['Args']['name']; + iconPosition?: HdsLinkIconPositions; + }; + Blocks: { + default: []; + }; + Element: HdsLinkInlineSignature['Element']; +} + +const HdsAppFooterLink: TOC = ; + +export default HdsAppFooterLink; diff --git a/packages/components/src/components/hds/app-footer/link.hbs b/packages/components/src/components/hds/app-footer/link.hbs deleted file mode 100644 index 36e08dd679c..00000000000 --- a/packages/components/src/components/hds/app-footer/link.hbs +++ /dev/null @@ -1,22 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - {{yield}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/app-footer/link.ts b/packages/components/src/components/hds/app-footer/link.ts deleted file mode 100644 index eccc6b45639..00000000000 --- a/packages/components/src/components/hds/app-footer/link.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -import type { HdsInteractiveSignature } from '../interactive/index.gts'; -import type { HdsLinkColors, HdsLinkIconPositions } from '../link/types.ts'; -import type { HdsLinkInlineSignature } from '../link/inline.ts'; -import type { HdsIconSignature } from '../icon'; - -export interface HdsAppFooterLinkSignature { - Args: HdsInteractiveSignature['Args'] & { - color?: HdsLinkColors; - icon?: HdsIconSignature['Args']['name']; - iconPosition?: HdsLinkIconPositions; - }; - Blocks: { - default: []; - }; - Element: HdsLinkInlineSignature['Element']; -} - -const HdsAppFooterLink = TemplateOnlyComponent(); - -export default HdsAppFooterLink; diff --git a/packages/components/src/components/hds/app-footer/status-link.ts b/packages/components/src/components/hds/app-footer/status-link.gts similarity index 80% rename from packages/components/src/components/hds/app-footer/status-link.ts rename to packages/components/src/components/hds/app-footer/status-link.gts index 33d7ce5e416..6a48928ebdd 100644 --- a/packages/components/src/components/hds/app-footer/status-link.ts +++ b/packages/components/src/components/hds/app-footer/status-link.gts @@ -7,13 +7,17 @@ import Component from '@glimmer/component'; import { htmlSafe } from '@ember/template'; import { assert } from '@ember/debug'; +import HdsAppFooterLink from './link.gts'; +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; +import { HdsAppFooterStatusLinkStatusValues } from './types.ts'; + import type { SafeString } from '@ember/template'; +import type Owner from '@ember/owner'; import type { HdsInteractiveSignature } from '../interactive/index.gts'; -import { HdsAppFooterStatusLinkStatusValues } from './types.ts'; import type { HdsAppFooterStatusTypes } from './types.ts'; -import type { HdsAppFooterLinkSignature } from './link.ts'; -import type { HdsIconSignature } from '../icon'; -import type Owner from '@ember/owner'; +import type { HdsAppFooterLinkSignature } from './link.gts'; +import type { HdsIconSignature } from '../icon/index.gts'; export const STATUSES = HdsAppFooterStatusLinkStatusValues; @@ -117,4 +121,22 @@ export default class HdsAppFooterStatusLink extends Component + {{this.text}} + } diff --git a/packages/components/src/components/hds/app-footer/status-link.hbs b/packages/components/src/components/hds/app-footer/status-link.hbs deleted file mode 100644 index b47a3818289..00000000000 --- a/packages/components/src/components/hds/app-footer/status-link.hbs +++ /dev/null @@ -1,20 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -{{this.text}} \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/index.ts b/packages/components/src/components/hds/app-frame/index.gts similarity index 59% rename from packages/components/src/components/hds/app-frame/index.ts rename to packages/components/src/components/hds/app-frame/index.gts index 34024f01aad..a7f59c6a7d3 100644 --- a/packages/components/src/components/hds/app-frame/index.ts +++ b/packages/components/src/components/hds/app-frame/index.gts @@ -4,12 +4,21 @@ */ import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; + +import HdsAppFrameSidebar from './parts/sidebar.gts'; +import HdsAppFrameHeader from './parts/header.gts'; +import HdsAppFrameModals from './parts/modals.gts'; +import HdsAppFrameMain from './parts/main.gts'; +import HdsAppFrameFooter from './parts/footer.gts'; + import type { ComponentLike } from '@glint/template'; -import type { HdsAppFrameFooterSignature } from './parts/footer.ts'; -import type { HdsAppFrameHeaderSignature } from './parts/header.ts'; -import type { HdsAppFrameMainSignature } from './parts/main.ts'; -import type { HdsAppFrameModalsSignature } from './parts/modals.ts'; -import type { HdsAppFrameSidebarSignature } from './parts/sidebar.ts'; +import type { HdsAppFrameFooterSignature } from './parts/footer.gts'; +import type { HdsAppFrameHeaderSignature } from './parts/header.gts'; +import type { HdsAppFrameMainSignature } from './parts/main.gts'; +import type { HdsAppFrameModalsSignature } from './parts/modals.gts'; +import type { HdsAppFrameSidebarSignature } from './parts/sidebar.gts'; + export interface HdsAppFrameSignature { Args: { hasFooter?: boolean; @@ -63,4 +72,27 @@ export default class HdsAppFrame extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/app-frame/index.hbs b/packages/components/src/components/hds/app-frame/index.hbs deleted file mode 100644 index 4b22bff0456..00000000000 --- a/packages/components/src/components/hds/app-frame/index.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{#if this.hasHeader}} - {{yield (hash Header=(component "hds/app-frame/parts/header"))}} - {{/if}} - {{#if this.hasSidebar}} - {{yield (hash Sidebar=(component "hds/app-frame/parts/sidebar"))}} - {{/if}} - {{! - IMPORTANT: since the modals may be injected via portal or `in-element` with code that lives in the "main" container, - the "modal" container needs to be present in the DOM _before_ the "main" block, otherwise it may cause errors - where the target DOM element is not found (for example in tests where the modal may be immediately opened on first render). - }} - {{#if this.hasModals}} - {{yield (hash Modals=(component "hds/app-frame/parts/modals"))}} - {{/if}} - {{yield (hash Main=(component "hds/app-frame/parts/main"))}} - {{#if this.hasFooter}} - {{yield (hash Footer=(component "hds/app-frame/parts/footer"))}} - {{/if}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/parts/footer.gts b/packages/components/src/components/hds/app-frame/parts/footer.gts new file mode 100644 index 00000000000..e1180733ef4 --- /dev/null +++ b/packages/components/src/components/hds/app-frame/parts/footer.gts @@ -0,0 +1,21 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsAppFrameFooterSignature { + Blocks: { + default: []; + }; + Element: HTMLElement; +} + +const HdsAppFrameFooter: TOC = ; + +export default HdsAppFrameFooter; diff --git a/packages/components/src/components/hds/app-frame/parts/footer.hbs b/packages/components/src/components/hds/app-frame/parts/footer.hbs deleted file mode 100644 index 48993ac8071..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/footer.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/parts/footer.ts b/packages/components/src/components/hds/app-frame/parts/footer.ts deleted file mode 100644 index dc845308b26..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/footer.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsAppFrameFooterSignature { - Blocks: { - default: []; - }; - Element: HTMLElement; -} - -const HdsAppFrameFooter = TemplateOnlyComponent(); - -export default HdsAppFrameFooter; diff --git a/packages/components/src/components/hds/app-frame/parts/header.gts b/packages/components/src/components/hds/app-frame/parts/header.gts new file mode 100644 index 00000000000..4b13a62f36a --- /dev/null +++ b/packages/components/src/components/hds/app-frame/parts/header.gts @@ -0,0 +1,21 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsAppFrameHeaderSignature { + Blocks: { + default: []; + }; + Element: HTMLElement; +} + +const HdsAppFrameHeader: TOC = ; + +export default HdsAppFrameHeader; diff --git a/packages/components/src/components/hds/app-frame/parts/header.hbs b/packages/components/src/components/hds/app-frame/parts/header.hbs deleted file mode 100644 index 7f837d69ee0..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/header.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/parts/header.ts b/packages/components/src/components/hds/app-frame/parts/header.ts deleted file mode 100644 index 043d22b36ef..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/header.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsAppFrameHeaderSignature { - Blocks: { - default: []; - }; - Element: HTMLElement; -} - -const HdsAppFrameHeader = TemplateOnlyComponent(); - -export default HdsAppFrameHeader; diff --git a/packages/components/src/components/hds/app-frame/parts/main.gts b/packages/components/src/components/hds/app-frame/parts/main.gts new file mode 100644 index 00000000000..1e222e553d4 --- /dev/null +++ b/packages/components/src/components/hds/app-frame/parts/main.gts @@ -0,0 +1,21 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsAppFrameMainSignature { + Blocks: { + default: []; + }; + Element: HTMLElement; +} + +const HdsAppFrameMain: TOC = ; + +export default HdsAppFrameMain; diff --git a/packages/components/src/components/hds/app-frame/parts/main.hbs b/packages/components/src/components/hds/app-frame/parts/main.hbs deleted file mode 100644 index 844b8fcb346..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/main.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/parts/main.ts b/packages/components/src/components/hds/app-frame/parts/main.ts deleted file mode 100644 index a7678eefeb3..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/main.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsAppFrameMainSignature { - Blocks: { - default: []; - }; - Element: HTMLElement; -} - -const HdsAppFrameMain = TemplateOnlyComponent(); - -export default HdsAppFrameMain; diff --git a/packages/components/src/components/hds/app-frame/parts/modals.gts b/packages/components/src/components/hds/app-frame/parts/modals.gts new file mode 100644 index 00000000000..7f8e9da924f --- /dev/null +++ b/packages/components/src/components/hds/app-frame/parts/modals.gts @@ -0,0 +1,20 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsAppFrameModalsSignature { + Blocks: { + default: []; + }; + Element: HTMLElement; +} + +const HdsAppFrameModals: TOC = ; + +export default HdsAppFrameModals; diff --git a/packages/components/src/components/hds/app-frame/parts/modals.hbs b/packages/components/src/components/hds/app-frame/parts/modals.hbs deleted file mode 100644 index 9071c352af5..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/modals.hbs +++ /dev/null @@ -1,6 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! we use `:empty` in CSS so we have to avoid whitespaces }} -
    {{~yield~}}
    \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/parts/modals.ts b/packages/components/src/components/hds/app-frame/parts/modals.ts deleted file mode 100644 index 52e1204e056..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/modals.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsAppFrameModalsSignature { - Blocks: { - default: []; - }; - Element: HTMLElement; -} - -const HdsAppFrameModals = TemplateOnlyComponent(); - -export default HdsAppFrameModals; diff --git a/packages/components/src/components/hds/app-frame/parts/sidebar.gts b/packages/components/src/components/hds/app-frame/parts/sidebar.gts new file mode 100644 index 00000000000..6b0e50c3ad3 --- /dev/null +++ b/packages/components/src/components/hds/app-frame/parts/sidebar.gts @@ -0,0 +1,21 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsAppFrameSidebarSignature { + Blocks: { + default: []; + }; + Element: HTMLElement; +} + +const HdsAppFrameSidebar: TOC = ; + +export default HdsAppFrameSidebar; diff --git a/packages/components/src/components/hds/app-frame/parts/sidebar.hbs b/packages/components/src/components/hds/app-frame/parts/sidebar.hbs deleted file mode 100644 index 1b28ae1a73d..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/sidebar.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/app-frame/parts/sidebar.ts b/packages/components/src/components/hds/app-frame/parts/sidebar.ts deleted file mode 100644 index 6f2a7a8275b..00000000000 --- a/packages/components/src/components/hds/app-frame/parts/sidebar.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsAppFrameSidebarSignature { - Blocks: { - default: []; - }; - Element: HTMLElement; -} - -const HdsAppFrameSidebar = TemplateOnlyComponent(); - -export default HdsAppFrameSidebar; diff --git a/packages/components/src/components/hds/app-header/home-link.ts b/packages/components/src/components/hds/app-header/home-link.gts similarity index 59% rename from packages/components/src/components/hds/app-header/home-link.ts rename to packages/components/src/components/hds/app-header/home-link.gts index 82c6c44eb6f..e32da62cb85 100644 --- a/packages/components/src/components/hds/app-header/home-link.ts +++ b/packages/components/src/components/hds/app-header/home-link.gts @@ -6,6 +6,11 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import HdsInteractive from '../interactive/index.gts'; +import HdsIcon from '../icon/index.gts'; +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; + import type { HdsIconSignature } from '../icon'; import type { HdsInteractiveSignature } from '../interactive/index.gts'; @@ -45,4 +50,22 @@ export default class HdsAppHeaderHomeLink extends Component + + + + } diff --git a/packages/components/src/components/hds/app-header/index.ts b/packages/components/src/components/hds/app-header/index.gts similarity index 74% rename from packages/components/src/components/hds/app-header/index.ts rename to packages/components/src/components/hds/app-header/index.gts index d590dceb6e9..822acab85bb 100644 --- a/packages/components/src/components/hds/app-header/index.ts +++ b/packages/components/src/components/hds/app-header/index.gts @@ -8,6 +8,13 @@ import { action } from '@ember/object'; import { guidFor } from '@ember/object/internals'; import { tracked } from '@glimmer/tracking'; import { registerDestructor } from '@ember/destroyable'; +import { and, not } from 'ember-truth-helpers'; +// @ts-expect-error: missing types +import NavigationNarrator from 'ember-a11y-refocus/components/navigation-narrator'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; + +import HdsAppHeaderMenuButton from './menu-button.gts'; import type Owner from '@ember/owner'; import { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts'; @@ -147,4 +154,42 @@ export default class HdsAppHeader extends Component { this._isOpen = false; } } + + } diff --git a/packages/components/src/components/hds/app-header/menu-button.ts b/packages/components/src/components/hds/app-header/menu-button.gts similarity index 59% rename from packages/components/src/components/hds/app-header/menu-button.ts rename to packages/components/src/components/hds/app-header/menu-button.gts index 906f9d03a1d..124248bc58c 100644 --- a/packages/components/src/components/hds/app-header/menu-button.ts +++ b/packages/components/src/components/hds/app-header/menu-button.gts @@ -5,8 +5,11 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; +import { on } from '@ember/modifier'; -import type { HdsButtonSignature } from '../button/'; +import HdsButton from '../button/index.gts'; + +import type { HdsButtonSignature } from '../button/index.gts'; export interface HdsAppHeaderMenuButtonSignature { Args: { @@ -30,4 +33,17 @@ export default class HdsAppHeaderMenuButton extends Component + + } diff --git a/packages/components/src/components/hds/app-side-nav/index.ts b/packages/components/src/components/hds/app-side-nav/index.gts similarity index 80% rename from packages/components/src/components/hds/app-side-nav/index.ts rename to packages/components/src/components/hds/app-side-nav/index.gts index 53425810819..ebf5db174ba 100644 --- a/packages/components/src/components/hds/app-side-nav/index.ts +++ b/packages/components/src/components/hds/app-side-nav/index.gts @@ -7,6 +7,14 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { registerDestructor } from '@ember/destroyable'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; + +import HdsAppSideNavToggleButton from './toggle-button.gts'; + import type Owner from '@ember/owner'; import { modifier } from 'ember-modifier'; @@ -229,4 +237,40 @@ export default class HdsAppSideNav extends Component { onDesktopViewportChange(this._isDesktop); } } + + } diff --git a/packages/components/src/components/hds/app-side-nav/list/back-link.gts b/packages/components/src/components/hds/app-side-nav/list/back-link.gts new file mode 100644 index 00000000000..fb3a95d4d10 --- /dev/null +++ b/packages/components/src/components/hds/app-side-nav/list/back-link.gts @@ -0,0 +1,50 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import HdsAppSideNavListItem from './item.gts'; +import HdsInteractive from '../../interactive/index.gts'; +import HdsIcon from '../../icon/index.gts'; +import hdsLinkToModels from '../../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../../helpers/hds-link-to-query.ts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; + +export interface HdsAppSideNavListBackLinkSignature { + Args: HdsInteractiveSignature['Args'] & { + text: string; + }; + Element: HdsInteractiveSignature['Element']; +} + +const HdsAppSideNavListBackLink: TOC = + ; + +export default HdsAppSideNavListBackLink; diff --git a/packages/components/src/components/hds/app-side-nav/list/back-link.hbs b/packages/components/src/components/hds/app-side-nav/list/back-link.hbs deleted file mode 100644 index 91da72b719d..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/back-link.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - - - - {{@text}} - - - \ No newline at end of file diff --git a/packages/components/src/components/hds/app-side-nav/list/back-link.ts b/packages/components/src/components/hds/app-side-nav/list/back-link.ts deleted file mode 100644 index b5338fde907..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/back-link.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -import type { HdsInteractiveSignature } from '../../interactive/index.gts'; - -export interface HdsAppSideNavListBackLinkSignature { - Args: HdsInteractiveSignature['Args'] & { - text: string; - }; - Element: HdsInteractiveSignature['Element']; -} - -const HdsAppSideNavListBackLink = - TemplateOnlyComponent(); - -export default HdsAppSideNavListBackLink; diff --git a/packages/components/src/components/hds/app-side-nav/list/index.gts b/packages/components/src/components/hds/app-side-nav/list/index.gts new file mode 100644 index 00000000000..71b4406a12a --- /dev/null +++ b/packages/components/src/components/hds/app-side-nav/list/index.gts @@ -0,0 +1,78 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { hash } from '@ember/helper'; + +import HdsYield from '../../yield/index.gts'; +import HdsAppSideNavListItem from './item.gts'; +import HdsAppSideNavListBackLink from './back-link.gts'; +import HdsAppSideNavListTitle from './title.gts'; +import HdsAppSideNavListLink from './link.gts'; + +import type { ComponentLike } from '@glint/template'; +import type { HdsYieldSignature } from '../../yield/index.gts'; +import type { HdsAppSideNavListItemSignature } from './item.gts'; +import type { HdsAppSideNavListBackLinkSignature } from './back-link.gts'; +import type { HdsAppSideNavListTitleSignature } from './title.gts'; +import type { HdsAppSideNavListLinkSignature } from './link.gts'; + +export interface HdsAppSideNavListSignature { + Blocks: { + default: [ + { + ExtraBefore?: ComponentLike; + Item?: ComponentLike; + BackLink?: ComponentLike; + Title?: ComponentLike; + Link?: ComponentLike; + ExtraAfter?: ComponentLike; + }, + ]; + }; + Element: HTMLElement; +} + +export default class HdsAppSideNavList extends Component { + @tracked private _titleIds: string[] = []; + + get titleIds(): string { + return this._titleIds.join(' '); + } + + @action + didInsertTitle(titleId: string): void { + this._titleIds = [...this._titleIds, titleId]; + } + + +} diff --git a/packages/components/src/components/hds/app-side-nav/list/index.ts b/packages/components/src/components/hds/app-side-nav/list/index.ts deleted file mode 100644 index a67d6084748..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import type { ComponentLike } from '@glint/template'; -import type { HdsYieldSignature } from '../../yield'; -import type { HdsAppSideNavListItemSignature } from './item'; -import type { HdsAppSideNavListBackLinkSignature } from './back-link'; -import type { HdsAppSideNavListTitleSignature } from './title'; -import type { HdsAppSideNavListLinkSignature } from './link'; - -export interface HdsAppSideNavListSignature { - Blocks: { - default: [ - { - ExtraBefore?: ComponentLike; - Item?: ComponentLike; - BackLink?: ComponentLike; - Title?: ComponentLike; - Link?: ComponentLike; - ExtraAfter?: ComponentLike; - }, - ]; - }; - Element: HTMLElement; -} - -export default class HdsAppSideNavList extends Component { - @tracked private _titleIds: string[] = []; - - get titleIds(): string { - return this._titleIds.join(' '); - } - - @action - didInsertTitle(titleId: string): void { - this._titleIds = [...this._titleIds, titleId]; - } -} diff --git a/packages/components/src/components/hds/app-side-nav/list/item.ts b/packages/components/src/components/hds/app-side-nav/list/item.gts similarity index 50% rename from packages/components/src/components/hds/app-side-nav/list/item.ts rename to packages/components/src/components/hds/app-side-nav/list/item.gts index 4dcd422618e..f58697efdc0 100644 --- a/packages/components/src/components/hds/app-side-nav/list/item.ts +++ b/packages/components/src/components/hds/app-side-nav/list/item.gts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import TemplateOnlyComponent from '@ember/component/template-only'; +import type { TOC } from '@ember/component/template-only'; export interface HdsAppSideNavListItemSignature { Blocks: { @@ -12,7 +12,10 @@ export interface HdsAppSideNavListItemSignature { Element: HTMLLIElement; } -const HdsAppSideNavListItem = - TemplateOnlyComponent(); +const HdsAppSideNavListItem: TOC = ; export default HdsAppSideNavListItem; diff --git a/packages/components/src/components/hds/app-side-nav/list/item.hbs b/packages/components/src/components/hds/app-side-nav/list/item.hbs deleted file mode 100644 index 1a7773a5d33..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/item.hbs +++ /dev/null @@ -1,8 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
  • - {{yield}} -
    • \ No newline at end of file diff --git a/packages/components/src/components/hds/app-side-nav/list/link.gts b/packages/components/src/components/hds/app-side-nav/list/link.gts new file mode 100644 index 00000000000..94cfe2d3dd3 --- /dev/null +++ b/packages/components/src/components/hds/app-side-nav/list/link.gts @@ -0,0 +1,87 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import HdsInteractive from '../../interactive/index.gts'; +import HdsIcon from '../../icon/index.gts'; +import HdsBadgeCount from '../../badge-count/index.gts'; +import HdsBadge from '../../badge/index.gts'; +import hdsLinkToModels from '../../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../../helpers/hds-link-to-query.ts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsIconSignature } from '../../icon'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; +import HdsAppSideNavListItem from './item.gts'; + +export interface HdsAppSideNavListLinkSignature { + Args: HdsInteractiveSignature['Args'] & { + icon?: HdsIconSignature['Args']['name']; + text?: string; + badge?: string; + count?: string; + hasSubItems?: boolean; + isActive?: boolean; + }; + Blocks: { + default: []; + }; + Element: HdsInteractiveSignature['Element']; +} + +const HdsAppSideNavListLink: TOC = ; + +export default HdsAppSideNavListLink; diff --git a/packages/components/src/components/hds/app-side-nav/list/link.hbs b/packages/components/src/components/hds/app-side-nav/list/link.hbs deleted file mode 100644 index 1c959972deb..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/link.hbs +++ /dev/null @@ -1,51 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - - {{#if @icon}} - - {{/if}} - - {{#if @text}} - - {{@text}} - - {{/if}} - - {{#if @count}} - - {{/if}} - - {{#if @badge}} - - {{/if}} - - {{yield}} - - {{#if @hasSubItems}} - - - - {{/if}} - {{#if @isHrefExternal}} - - - - {{/if}} - - \ No newline at end of file diff --git a/packages/components/src/components/hds/app-side-nav/list/link.ts b/packages/components/src/components/hds/app-side-nav/list/link.ts deleted file mode 100644 index c733b9e40f3..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/link.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive/index.gts'; - -export interface HdsAppSideNavListLinkSignature { - Args: HdsInteractiveSignature['Args'] & { - icon?: HdsIconSignature['Args']['name']; - text?: string; - badge?: string; - count?: string; - hasSubItems?: boolean; - isActive?: boolean; - }; - Blocks: { - default: []; - }; - Element: HdsInteractiveSignature['Element']; -} - -const HdsAppSideNavListLink = - TemplateOnlyComponent(); - -export default HdsAppSideNavListLink; diff --git a/packages/components/src/components/hds/app-side-nav/list/title.ts b/packages/components/src/components/hds/app-side-nav/list/title.gts similarity index 64% rename from packages/components/src/components/hds/app-side-nav/list/title.ts rename to packages/components/src/components/hds/app-side-nav/list/title.gts index 75b013a9fad..0f405139b64 100644 --- a/packages/components/src/components/hds/app-side-nav/list/title.ts +++ b/packages/components/src/components/hds/app-side-nav/list/title.gts @@ -3,9 +3,12 @@ * SPDX-License-Identifier: MPL-2.0 */ +import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; import { action } from '@ember/object'; -import Component from '@glimmer/component'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; + +import HdsAppSideNavListItem from './item.gts'; export interface HdsAppSideNavListTitleSignature { Args: { @@ -29,4 +32,15 @@ export default class HdsAppSideNavListTitle extends Component + +
    {{~yield~}}
    +     + } diff --git a/packages/components/src/components/hds/app-side-nav/list/title.hbs b/packages/components/src/components/hds/app-side-nav/list/title.hbs deleted file mode 100644 index c588194b66a..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/title.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - -
    {{~yield~}}
    -     \ No newline at end of file diff --git a/packages/components/src/components/hds/app-side-nav/portal/index.gts b/packages/components/src/components/hds/app-side-nav/portal/index.gts new file mode 100644 index 00000000000..b5a0f5b7182 --- /dev/null +++ b/packages/components/src/components/hds/app-side-nav/portal/index.gts @@ -0,0 +1,46 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import Portal from 'ember-stargate/components/portal'; + +import HdsAppSideNavList from '../list/index.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsAppSideNavListSignature } from '../list/index.gts'; + +// TODO! understand how this should be done "correctly" +// import type { PortalSignature } from 'ember-stargate/components/portal'; +interface PortalSignature { + Args: { + target: string; + renderInPlace?: boolean; + fallback?: 'inplace'; + }; + Blocks: { + default: []; + }; +} + +export interface HdsAppSideNavPortalSignature { + Args: PortalSignature['Args'] & { + ariaLabel?: string; + targetName?: string; + }; + Blocks: HdsAppSideNavListSignature['Blocks']; + Element: HTMLDivElement; +} + +const HdsAppSideNavPortal: TOC = ; + +export default HdsAppSideNavPortal; diff --git a/packages/components/src/components/hds/app-side-nav/portal/index.hbs b/packages/components/src/components/hds/app-side-nav/portal/index.hbs deleted file mode 100644 index 1b560ca4ece..00000000000 --- a/packages/components/src/components/hds/app-side-nav/portal/index.hbs +++ /dev/null @@ -1,12 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - -
    - - {{yield ListElements}} - -
    -     \ No newline at end of file diff --git a/packages/components/src/components/hds/app-side-nav/portal/target.ts b/packages/components/src/components/hds/app-side-nav/portal/target.gts similarity index 87% rename from packages/components/src/components/hds/app-side-nav/portal/target.ts rename to packages/components/src/components/hds/app-side-nav/portal/target.gts index c6ec46fea37..cac596d7159 100644 --- a/packages/components/src/components/hds/app-side-nav/portal/target.ts +++ b/packages/components/src/components/hds/app-side-nav/portal/target.gts @@ -3,13 +3,29 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; +import { action } from '@ember/object'; import { inject as service } from '@ember/service'; +import { isTesting, macroCondition } from '@embroider/macros'; +import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; -import { macroCondition, isTesting } from '@embroider/macros'; +import PortalTarget from 'ember-stargate/components/portal-target'; + +import type { HdsAppSideNavPortalSignature } from './index.gts'; + +// import { PortalTargetSignature } from 'ember-stargate/components/portal-target'; +interface PortalTargetSignature { + Element: HTMLDivElement; + Args: { + name: string; + multiple?: boolean; + onChange?: (count: number) => void; + }; + Blocks: { + default: [number]; + }; +} -import type { HdsAppSideNavPortalSignature } from './index'; +import didUpdate from '@ember/render-modifiers/modifiers/did-update'; import type { Registry as Services } from '@ember/service'; interface HdsAppSideNavPortalTargetSignature { @@ -176,4 +192,16 @@ export default class HdsAppSideNavPortalTarget extends Component +
    + +
    + } diff --git a/packages/components/src/components/hds/app-side-nav/toggle-button.gts b/packages/components/src/components/hds/app-side-nav/toggle-button.gts new file mode 100644 index 00000000000..8ed6f18e207 --- /dev/null +++ b/packages/components/src/components/hds/app-side-nav/toggle-button.gts @@ -0,0 +1,26 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +import HdsIcon from '../icon/index.gts'; + +import type { HdsIconSignature } from '../icon'; + +interface HdsAppSideNavToggleButtonSignature { + Args: { + icon: HdsIconSignature['Args']['name']; + }; + Element: HTMLButtonElement; +} + +const HdsAppSideNavToggleButton: TOC = + ; + +export default HdsAppSideNavToggleButton; diff --git a/packages/components/src/components/hds/app-side-nav/toggle-button.hbs b/packages/components/src/components/hds/app-side-nav/toggle-button.hbs deleted file mode 100644 index aaf35b42d78..00000000000 --- a/packages/components/src/components/hds/app-side-nav/toggle-button.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/app-side-nav/toggle-button.ts b/packages/components/src/components/hds/app-side-nav/toggle-button.ts deleted file mode 100644 index 11dbe1f0f02..00000000000 --- a/packages/components/src/components/hds/app-side-nav/toggle-button.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -import type { HdsIconSignature } from '../icon'; - -interface HdsAppSideNavToggleButtonSignature { - Args: { - icon: HdsIconSignature['Args']['name']; - }; - Element: HTMLButtonElement; -} - -const HdsAppSideNavToggleButton = - TemplateOnlyComponent(); - -export default HdsAppSideNavToggleButton; diff --git a/packages/components/src/components/hds/application-state/body.gts b/packages/components/src/components/hds/application-state/body.gts new file mode 100644 index 00000000000..0522a090bf6 --- /dev/null +++ b/packages/components/src/components/hds/application-state/body.gts @@ -0,0 +1,37 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import HdsTextBody from '../text/body.gts'; + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsApplicationStateBodySignature { + Args: { + text?: string; + }; + Blocks: { + default?: []; + }; + Element: HTMLDivElement; +} + +const HdsApplicationStateBody: TOC = + ; + +export default HdsApplicationStateBody; diff --git a/packages/components/src/components/hds/application-state/body.hbs b/packages/components/src/components/hds/application-state/body.hbs deleted file mode 100644 index 69ac33caf1a..00000000000 --- a/packages/components/src/components/hds/application-state/body.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{#if (has-block)}} - {{yield}} - {{else}} - - {{@text}} - - {{/if}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/application-state/body.ts b/packages/components/src/components/hds/application-state/body.ts deleted file mode 100644 index 3110e6cb820..00000000000 --- a/packages/components/src/components/hds/application-state/body.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsApplicationStateBodySignature { - Args: { - text?: string; - }; - Blocks: { - default?: []; - }; - Element: HTMLDivElement; -} - -const HdsApplicationStateBody = - TemplateOnlyComponent(); - -export default HdsApplicationStateBody; diff --git a/packages/components/src/components/hds/application-state/footer.gts b/packages/components/src/components/hds/application-state/footer.gts new file mode 100644 index 00000000000..a4d5c8c6bcc --- /dev/null +++ b/packages/components/src/components/hds/application-state/footer.gts @@ -0,0 +1,43 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; +import type { ComponentLike } from '@glint/template'; +import type { HdsLinkStandaloneSignature } from '../link/standalone.gts'; +import type { HdsButtonSignature } from '../button/index.gts'; +import type { HdsDropdownSignature } from '../dropdown/index.gts'; +import { hash } from '@ember/helper'; +import HdsButton from '../button/index.gts'; +import HdsDropdown from '../dropdown/index.gts'; +import HdsLinkStandalone from '../link/standalone.gts'; + +export interface HdsApplicationStateFooterSignature { + Args: { + hasDivider?: boolean; + }; + Blocks: { + default?: [ + { + Button?: ComponentLike; + Dropdown?: ComponentLike; + LinkStandalone?: ComponentLike; + }, + ]; + }; + Element: HTMLDivElement; +} + +const HdsApplicationStateFooter: TOC = + ; + +export default HdsApplicationStateFooter; diff --git a/packages/components/src/components/hds/application-state/footer.hbs b/packages/components/src/components/hds/application-state/footer.hbs deleted file mode 100644 index e8c2e5c1fe9..00000000000 --- a/packages/components/src/components/hds/application-state/footer.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{yield - (hash - Button=(component "hds/button") - Dropdown=(component "hds/dropdown") - LinkStandalone=(component "hds/link/standalone") - ) - }} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/application-state/footer.ts b/packages/components/src/components/hds/application-state/footer.ts deleted file mode 100644 index 2f14c09d7ff..00000000000 --- a/packages/components/src/components/hds/application-state/footer.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; -import type { ComponentLike } from '@glint/template'; -import type { HdsLinkStandaloneSignature } from '../link/standalone'; -import type { HdsButtonSignature } from '../button'; -import type { HdsDropdownSignature } from '../dropdown'; - -export interface HdsApplicationStateFooterSignature { - Args: { - hasDivider?: boolean; - }; - Blocks: { - default?: [ - { - Button?: ComponentLike; - Dropdown?: ComponentLike; - LinkStandalone?: ComponentLike; - }, - ]; - }; - Element: HTMLDivElement; -} - -const HdsApplicationStateFooter = - TemplateOnlyComponent(); - -export default HdsApplicationStateFooter; diff --git a/packages/components/src/components/hds/application-state/header.gts b/packages/components/src/components/hds/application-state/header.gts new file mode 100644 index 00000000000..ea17e28dcd1 --- /dev/null +++ b/packages/components/src/components/hds/application-state/header.gts @@ -0,0 +1,66 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +import HdsTextBody from '../text/body.gts'; +import HdsIcon from '../icon/index.gts'; +import HdsTextDisplay from '../text/display.gts'; +import { HdsApplicationStateTitleTagValues } from './types.ts'; + +import type { HdsIconSignature } from '../icon'; +import type { HdsApplicationStateTitleTags } from './types.ts'; + +export interface HdsApplicationStateHeaderSignature { + Args: { + title?: string; + titleTag?: HdsApplicationStateTitleTags; + errorCode?: string; + icon?: HdsIconSignature['Args']['name']; + }; + Element: HTMLDivElement; +} + +export default class HdsApplicationStateHeader extends Component { + get titleTag(): HdsApplicationStateTitleTags { + return this.args.titleTag ?? HdsApplicationStateTitleTagValues.Div; + } + + +} diff --git a/packages/components/src/components/hds/application-state/header.ts b/packages/components/src/components/hds/application-state/header.ts deleted file mode 100644 index 2e7430a2420..00000000000 --- a/packages/components/src/components/hds/application-state/header.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { HdsApplicationStateTitleTagValues } from './types.ts'; - -import type { HdsIconSignature } from '../icon'; -import type { HdsApplicationStateTitleTags } from './types'; -export interface HdsApplicationStateHeaderSignature { - Args: { - title?: string; - titleTag?: HdsApplicationStateTitleTags; - errorCode?: string; - icon?: HdsIconSignature['Args']['name']; - }; - Element: HTMLDivElement; -} - -export default class HdsApplicationStateHeader extends Component { - get titleTag(): HdsApplicationStateTitleTags { - return this.args.titleTag ?? HdsApplicationStateTitleTagValues.Div; - } -} diff --git a/packages/components/src/components/hds/application-state/index.ts b/packages/components/src/components/hds/application-state/index.gts similarity index 69% rename from packages/components/src/components/hds/application-state/index.ts rename to packages/components/src/components/hds/application-state/index.gts index 1a53f591a4c..f8364ef4cc6 100644 --- a/packages/components/src/components/hds/application-state/index.ts +++ b/packages/components/src/components/hds/application-state/index.gts @@ -5,14 +5,20 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import { hash } from '@ember/helper'; + +import HdsApplicationStateMedia from './media.gts'; +import HdsApplicationStateHeader from './header.gts'; +import HdsApplicationStateBody from './body.gts'; +import HdsApplicationStateFooter from './footer.gts'; import { HdsApplicationStateAlignValues } from './types.ts'; import type { ComponentLike } from '@glint/template'; -import type { HdsApplicationStateAligns } from './types'; -import type { HdsApplicationStateMediaSignature } from './media'; -import type { HdsApplicationStateHeaderSignature } from './header'; -import type { HdsApplicationStateBodySignature } from './body'; -import type { HdsApplicationStateFooterSignature } from './footer'; +import type { HdsApplicationStateAligns } from './types.ts'; +import type { HdsApplicationStateMediaSignature } from './media.gts'; +import type { HdsApplicationStateHeaderSignature } from './header.gts'; +import type { HdsApplicationStateBodySignature } from './body.gts'; +import type { HdsApplicationStateFooterSignature } from './footer.gts'; export const ALIGNS: HdsApplicationStateAligns[] = Object.values( HdsApplicationStateAlignValues @@ -58,4 +64,17 @@ export default class HdsApplicationState extends Component +
    + {{yield + (hash + Media=HdsApplicationStateMedia + Header=HdsApplicationStateHeader + Body=HdsApplicationStateBody + Footer=HdsApplicationStateFooter + ) + }} +
    + } diff --git a/packages/components/src/components/hds/application-state/index.hbs b/packages/components/src/components/hds/application-state/index.hbs deleted file mode 100644 index 1caae7a1905..00000000000 --- a/packages/components/src/components/hds/application-state/index.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield - (hash - Media=(component "hds/application-state/media") - Header=(component "hds/application-state/header") - Body=(component "hds/application-state/body") - Footer=(component "hds/application-state/footer") - ) - }} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/application-state/media.gts b/packages/components/src/components/hds/application-state/media.gts new file mode 100644 index 00000000000..c80d4cc47c4 --- /dev/null +++ b/packages/components/src/components/hds/application-state/media.gts @@ -0,0 +1,22 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsApplicationStateMediaSignature { + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsApplicationStateMedia: TOC = + ; + +export default HdsApplicationStateMedia; diff --git a/packages/components/src/components/hds/application-state/media.hbs b/packages/components/src/components/hds/application-state/media.hbs deleted file mode 100644 index 5ccc4f2b2e9..00000000000 --- a/packages/components/src/components/hds/application-state/media.hbs +++ /dev/null @@ -1,8 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/application-state/media.ts b/packages/components/src/components/hds/application-state/media.ts deleted file mode 100644 index 8445b0ebdfd..00000000000 --- a/packages/components/src/components/hds/application-state/media.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsApplicationStateMediaSignature { - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsApplicationStateMedia = - TemplateOnlyComponent(); - -export default HdsApplicationStateMedia; diff --git a/packages/components/src/components/hds/badge-count/index.ts b/packages/components/src/components/hds/badge-count/index.gts similarity index 96% rename from packages/components/src/components/hds/badge-count/index.ts rename to packages/components/src/components/hds/badge-count/index.gts index 61b7f4b5411..ca347fc40a8 100644 --- a/packages/components/src/components/hds/badge-count/index.ts +++ b/packages/components/src/components/hds/badge-count/index.gts @@ -123,4 +123,10 @@ export default class HdsBadgeCount extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/badge-count/index.hbs b/packages/components/src/components/hds/badge-count/index.hbs deleted file mode 100644 index 66a6877834e..00000000000 --- a/packages/components/src/components/hds/badge-count/index.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{@text}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/badge/index.ts b/packages/components/src/components/hds/badge/index.gts similarity index 89% rename from packages/components/src/components/hds/badge/index.ts rename to packages/components/src/components/hds/badge/index.gts index b545b95b727..d6edbcc1610 100644 --- a/packages/components/src/components/hds/badge/index.ts +++ b/packages/components/src/components/hds/badge/index.gts @@ -6,6 +6,7 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import HdsIcon from '../icon/index.gts'; import { HdsBadgeColorValues, HdsBadgeSizeValues, @@ -147,4 +148,21 @@ export default class HdsBadge extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/badge/index.hbs b/packages/components/src/components/hds/badge/index.hbs deleted file mode 100644 index d9e468e00c7..00000000000 --- a/packages/components/src/components/hds/badge/index.hbs +++ /dev/null @@ -1,18 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{#if @icon}} -
    - -
    - {{/if}} - {{#if this.isIconOnly}} - {{this.text}} - {{else}} -
    - {{this.text}} -
    - {{/if}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/breadcrumb/index.ts b/packages/components/src/components/hds/breadcrumb/index.gts similarity index 83% rename from packages/components/src/components/hds/breadcrumb/index.ts rename to packages/components/src/components/hds/breadcrumb/index.gts index 66ff86ba41e..43a452e683c 100644 --- a/packages/components/src/components/hds/breadcrumb/index.ts +++ b/packages/components/src/components/hds/breadcrumb/index.gts @@ -4,6 +4,7 @@ */ import Component from '@glimmer/component'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; export interface HdsBreadcrumbSignature { Args: { @@ -68,4 +69,12 @@ export default class HdsBreadcrumb extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/breadcrumb/index.hbs b/packages/components/src/components/hds/breadcrumb/index.hbs deleted file mode 100644 index a52f892205b..00000000000 --- a/packages/components/src/components/hds/breadcrumb/index.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/breadcrumb/truncation.gts b/packages/components/src/components/hds/breadcrumb/truncation.gts new file mode 100644 index 00000000000..413a24cf06c --- /dev/null +++ b/packages/components/src/components/hds/breadcrumb/truncation.gts @@ -0,0 +1,64 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; + +import HdsPopoverPrimitive from '../popover-primitive/index.gts'; +import HdsIcon from '../icon/index.gts'; + +export interface HdsBreadcrumbTruncationSignature { + Args: { + ariaLabel?: string; + }; + Blocks: { + default: []; + }; + Element: HTMLLIElement; +} + +export default class HdsBreadcrumbTruncation extends Component { + /** + * @param ariaLabel + * @type {string} + * @default 'show more' + */ + get ariaLabel(): string { + return this.args.ariaLabel ?? 'show more'; + } + + +} diff --git a/packages/components/src/components/hds/breadcrumb/truncation.hbs b/packages/components/src/components/hds/breadcrumb/truncation.hbs deleted file mode 100644 index 9c7a4284b7b..00000000000 --- a/packages/components/src/components/hds/breadcrumb/truncation.hbs +++ /dev/null @@ -1,27 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
  • - -
    - -
    -
      - {{yield}} -
    -
    -
    -     -
    • \ No newline at end of file diff --git a/packages/components/src/components/hds/breadcrumb/truncation.ts b/packages/components/src/components/hds/breadcrumb/truncation.ts deleted file mode 100644 index cfc8f4cd77f..00000000000 --- a/packages/components/src/components/hds/breadcrumb/truncation.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; - -export interface HdsBreadcrumbTruncationSignature { - Args: { - ariaLabel?: string; - }; - Blocks: { - default: []; - }; - Element: HTMLLIElement; -} - -export default class HdsBreadcrumbTruncation extends Component { - /** - * @param ariaLabel - * @type {string} - * @default 'show more' - */ - get ariaLabel(): string { - return this.args.ariaLabel ?? 'show more'; - } -} diff --git a/packages/components/src/components/hds/button-set/index.ts b/packages/components/src/components/hds/button-set/index.gts similarity index 50% rename from packages/components/src/components/hds/button-set/index.ts rename to packages/components/src/components/hds/button-set/index.gts index 725f9bbd3c7..00edf0d7e20 100644 --- a/packages/components/src/components/hds/button-set/index.ts +++ b/packages/components/src/components/hds/button-set/index.gts @@ -3,11 +3,16 @@ * SPDX-License-Identifier: MPL-2.0 */ -import TemplateOnlyComponent from '@ember/component/template-only'; +import type { TOC } from '@ember/component/template-only'; + export interface HdsButtonSetSignature { Blocks: { default: [] }; Element: HTMLDivElement; } -const HdsButtonSet = TemplateOnlyComponent(); +const HdsButtonSet: TOC = ; export default HdsButtonSet; diff --git a/packages/components/src/components/hds/button-set/index.hbs b/packages/components/src/components/hds/button-set/index.hbs deleted file mode 100644 index 9e81e922d3c..00000000000 --- a/packages/components/src/components/hds/button-set/index.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/button/index.ts b/packages/components/src/components/hds/button/index.gts similarity index 73% rename from packages/components/src/components/hds/button/index.ts rename to packages/components/src/components/hds/button/index.gts index 99aaae2597e..61bf00fa584 100644 --- a/packages/components/src/components/hds/button/index.ts +++ b/packages/components/src/components/hds/button/index.gts @@ -5,7 +5,12 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import { eq } from 'ember-truth-helpers'; +import HdsInteractive from '../interactive/index.gts'; +import HdsIcon from '../icon/index.gts'; +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; import { HdsButtonSizeValues, HdsButtonColorValues, @@ -194,4 +199,62 @@ export default class HdsButton extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/button/index.hbs b/packages/components/src/components/hds/button/index.hbs deleted file mode 100644 index 5440cf81fa1..00000000000 --- a/packages/components/src/components/hds/button/index.hbs +++ /dev/null @@ -1,47 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{#if this.isIconOnly}} - {{#if this.icon}} - - - - {{/if}} - {{else}} - {{#if this.icon}} - {{#if (eq this.iconPosition "leading")}} - - - - - {{this.text}} - - {{else}} - - {{this.text}} - - - - - {{/if}} - {{else}} - - {{this.text}} - - {{/if}} - {{/if}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/card/container.ts b/packages/components/src/components/hds/card/container.gts similarity index 85% rename from packages/components/src/components/hds/card/container.ts rename to packages/components/src/components/hds/card/container.gts index c6737c709df..7c95bef0207 100644 --- a/packages/components/src/components/hds/card/container.ts +++ b/packages/components/src/components/hds/card/container.gts @@ -3,8 +3,10 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import Component from '@glimmer/component'; +import element from 'ember-element-helper/helpers/element'; +import { eq } from 'ember-truth-helpers'; import { HdsCardBackgroundValues, @@ -168,4 +170,19 @@ export default class HdsCardContainer extends Component + {{#if (eq this.componentTag "div")}} +
    {{yield}}
    + {{else}} + {{#let (element this.componentTag) as |Tag|}} + {{yield}} + {{/let}} + {{/if}} + } diff --git a/packages/components/src/components/hds/card/container.hbs b/packages/components/src/components/hds/card/container.hbs deleted file mode 100644 index 6666c26716d..00000000000 --- a/packages/components/src/components/hds/card/container.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! - Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering - a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it). -}} -{{#if (eq this.componentTag "div")}} -
    {{yield}}
    -{{else}} - {{#let (element this.componentTag) as |Tag|}} - {{yield}} - {{/let}} -{{/if}} \ No newline at end of file diff --git a/packages/components/src/components/hds/code-block/copy-button.ts b/packages/components/src/components/hds/code-block/copy-button.gts similarity index 63% rename from packages/components/src/components/hds/code-block/copy-button.ts rename to packages/components/src/components/hds/code-block/copy-button.gts index 4d85e969d31..b06f293d6ff 100644 --- a/packages/components/src/components/hds/code-block/copy-button.ts +++ b/packages/components/src/components/hds/code-block/copy-button.gts @@ -5,7 +5,9 @@ import Component from '@glimmer/component'; -import type { HdsCopyButtonSignature } from '../copy/button'; +import HdsCopyButton from '../copy/button/index.gts'; + +import type { HdsCopyButtonSignature } from '../copy/button/index.gts'; export interface HdsCodeBlockCopyButtonSignature { Args: { @@ -23,4 +25,16 @@ export default class HdsCodeBlockCopyButton extends Component + + } diff --git a/packages/components/src/components/hds/code-block/copy-button.hbs b/packages/components/src/components/hds/code-block/copy-button.hbs deleted file mode 100644 index 74320be75a3..00000000000 --- a/packages/components/src/components/hds/code-block/copy-button.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - \ No newline at end of file diff --git a/packages/components/src/components/hds/code-block/description.gts b/packages/components/src/components/hds/code-block/description.gts new file mode 100644 index 00000000000..34b4256fe58 --- /dev/null +++ b/packages/components/src/components/hds/code-block/description.gts @@ -0,0 +1,30 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import HdsTextBody from '../text/body.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsTextBodySignature } from '../text/body.gts'; + +export interface HdsCodeBlockDescriptionSignature { + Blocks: { + default: []; + }; + Element: HdsTextBodySignature['Element']; +} + +const HdsCodeBlockDescription: TOC = + ; + +export default HdsCodeBlockDescription; diff --git a/packages/components/src/components/hds/code-block/index.ts b/packages/components/src/components/hds/code-block/index.gts similarity index 88% rename from packages/components/src/components/hds/code-block/index.ts rename to packages/components/src/components/hds/code-block/index.gts index 1fb1180cb8a..dafd2f43251 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.gts @@ -3,31 +3,39 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; import { assert } from '@ember/debug'; +import { action } from '@ember/object'; +import { guidFor } from '@ember/object/internals'; import { next, schedule } from '@ember/runloop'; import { htmlSafe } from '@ember/template'; -import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; import { modifier } from 'ember-modifier'; +import { hash } from '@ember/helper'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; +import didUpdate from '@ember/render-modifiers/modifiers/did-update'; +import style from 'ember-style-modifier'; import Prism from 'prismjs'; +import HdsCodeBlockCopyButton from './copy-button.gts'; +import HdsCodeBlockDescription from './description.gts'; +import HdsCodeBlockTitle from './title.gts'; +import { HdsCodeBlockLanguageValues } from './types.ts'; + import type { SafeString } from '@ember/template'; import type { WithBoundArgs } from '@glint/template'; -import type { HdsCodeBlockTitleSignature } from './title'; -import type { HdsCodeBlockDescriptionSignature } from './description'; -import { HdsCodeBlockLanguageValues } from './types.ts'; +import type { HdsCopyButtonSignature } from '../copy/button/index.gts'; +import type { HdsCodeBlockDescriptionSignature } from './description.gts'; +import type { HdsCodeBlockTitleSignature } from './title.gts'; import type { HdsCodeBlockLanguages } from './types.ts'; -import type { HdsCopyButtonSignature } from '../copy/button/index.ts'; -import HdsCodeBlockTitleComponent from './title.ts'; import HdsCodeBlockDescriptionComponent from './description.ts'; +import HdsCodeBlockTitleComponent from './title.ts'; -import 'prismjs/plugins/line-numbers/prism-line-numbers'; import 'prismjs/plugins/line-highlight/prism-line-highlight'; +import 'prismjs/plugins/line-numbers/prism-line-numbers'; import 'prismjs/components/prism-bash'; import 'prismjs/components/prism-go'; @@ -41,8 +49,8 @@ import 'prismjs/components/prism-yaml'; // These imports are required to overcome a global variable clash in Helios website // where language import are overriden by the Prism instance in `CodeBlock` // Note that `prism-handlebars` is dependant on `prism-markup-templating` -import 'prismjs/components/prism-markup-templating'; import 'prismjs/components/prism-handlebars'; +import 'prismjs/components/prism-markup-templating'; export const LANGUAGES: HdsCodeBlockLanguages[] = Object.values( HdsCodeBlockLanguageValues @@ -347,4 +355,38 @@ export default class HdsCodeBlock extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/code-block/title.ts b/packages/components/src/components/hds/code-block/title.gts similarity index 73% rename from packages/components/src/components/hds/code-block/title.ts rename to packages/components/src/components/hds/code-block/title.gts index 0ab75a3ba81..e11f1db08ab 100644 --- a/packages/components/src/components/hds/code-block/title.ts +++ b/packages/components/src/components/hds/code-block/title.gts @@ -2,12 +2,15 @@ * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; import { modifier } from 'ember-modifier'; + +import HdsTextBody from '../text/body.gts'; import { HdsCodeBlockTitleTagValues } from './types.ts'; -import type { HdsCodeBlockTitleTags } from './types'; -import type { HdsTextBodySignature } from '../text/body'; + +import type { HdsTextBodySignature } from '../text/body.gts'; +import type { HdsCodeBlockTitleTags } from './types.ts'; type HdsCodeBlockTitleElement = HdsTextBodySignature['Element']; export interface HdsCodeBlockTitleSignature { @@ -38,4 +41,16 @@ export default class HdsCodeBlockTitle extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/code-editor/description.ts b/packages/components/src/components/hds/code-editor/description.gts similarity index 58% rename from packages/components/src/components/hds/code-editor/description.ts rename to packages/components/src/components/hds/code-editor/description.gts index cd83383f1d9..31d94829c69 100644 --- a/packages/components/src/components/hds/code-editor/description.ts +++ b/packages/components/src/components/hds/code-editor/description.gts @@ -4,8 +4,11 @@ */ import Component from '@glimmer/component'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; -import type { HdsTextBodySignature } from '../text/body'; +import HdsTextBody from '../text/body.gts'; + +import type { HdsTextBodySignature } from '../text/body.gts'; type HdsCodeEditorDescriptionElement = HdsTextBodySignature['Element']; export interface HdsCodeEditorDescriptionSignature { @@ -21,4 +24,17 @@ export interface HdsCodeEditorDescriptionSignature { export default class HdsCodeEditorDescription extends Component { private _id = `${this.args.editorId}-description`; + + } diff --git a/packages/components/src/components/hds/code-editor/description.hbs b/packages/components/src/components/hds/code-editor/description.hbs deleted file mode 100644 index a1a817352ac..00000000000 --- a/packages/components/src/components/hds/code-editor/description.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - {{yield}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/code-editor/full-screen-button.ts b/packages/components/src/components/hds/code-editor/full-screen-button.gts similarity index 63% rename from packages/components/src/components/hds/code-editor/full-screen-button.ts rename to packages/components/src/components/hds/code-editor/full-screen-button.gts index b9816966067..7a4ce2b1be2 100644 --- a/packages/components/src/components/hds/code-editor/full-screen-button.ts +++ b/packages/components/src/components/hds/code-editor/full-screen-button.gts @@ -4,8 +4,11 @@ */ import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; -import type { HdsButtonSignature } from '../button'; +import HdsButton from '../button/index.gts'; + +import type { HdsButtonSignature } from '../button/index.gts'; export interface HdsCodeEditorFullScreenButtonSignature { Args: { @@ -32,4 +35,18 @@ export default class HdsCodeEditorFullScreenButton extends Component + + } diff --git a/packages/components/src/components/hds/code-editor/generic.gts b/packages/components/src/components/hds/code-editor/generic.gts new file mode 100644 index 00000000000..13e26f565a8 --- /dev/null +++ b/packages/components/src/components/hds/code-editor/generic.gts @@ -0,0 +1,21 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsCodeEditorGenericSignature { + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsCodeEditorGeneric: TOC = ; + +export default HdsCodeEditorGeneric; diff --git a/packages/components/src/components/hds/code-editor/generic.hbs b/packages/components/src/components/hds/code-editor/generic.hbs deleted file mode 100644 index 18e31e012d8..00000000000 --- a/packages/components/src/components/hds/code-editor/generic.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/code-editor/generic.ts b/packages/components/src/components/hds/code-editor/generic.ts deleted file mode 100644 index 354252a3721..00000000000 --- a/packages/components/src/components/hds/code-editor/generic.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -export interface HdsCodeEditorGenericSignature { - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsCodeEditorGeneric = - TemplateOnlyComponent(); - -export default HdsCodeEditorGeneric; diff --git a/packages/components/src/components/hds/code-editor/index.ts b/packages/components/src/components/hds/code-editor/index.gts similarity index 57% rename from packages/components/src/components/hds/code-editor/index.ts rename to packages/components/src/components/hds/code-editor/index.gts index 8d827a76449..4a3506f3cfe 100644 --- a/packages/components/src/components/hds/code-editor/index.ts +++ b/packages/components/src/components/hds/code-editor/index.gts @@ -8,6 +8,8 @@ import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { modifier } from 'ember-modifier'; import { guidFor } from '@ember/object/internals'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; import HdsCodeEditorDescription from './description.ts'; import HdsCodeEditorTitle from './title.ts'; @@ -16,11 +18,20 @@ import type { WithBoundArgs } from '@glint/template'; import type Owner from '@ember/owner'; import type { ComponentLike } from '@glint/template'; import type { HdsCodeEditorSignature as HdsCodeEditorModifierSignature } from '../../../modifiers/hds-code-editor.ts'; -import type { HdsCodeEditorDescriptionSignature } from './description'; -import type { HdsCodeEditorTitleSignature } from './title'; -import type { HdsCodeEditorGenericSignature } from './generic'; +import type { HdsCodeEditorDescriptionSignature } from './description.gts'; +import type { HdsCodeEditorTitleSignature } from './title.gts'; +import type { HdsCodeEditorGenericSignature } from './generic.gts'; import type { EditorView } from '@codemirror/view'; -import type { HdsCopyButtonSignature } from '../copy/button/index.ts'; +import type { HdsCopyButtonSignature } from '../copy/button/index.gts'; +import { hash } from '@ember/helper'; +import { or } from 'ember-truth-helpers'; +import HdsIcon from '../icon/index.gts'; +import hdsCodeEditor from '../../../modifiers/hds-code-editor.ts'; +import HdsCodeEditorFullScreenButton from './full-screen-button.gts'; +import HdsCopyButton from '../copy/button/index.gts'; +import HdsCodeEditorGeneric from './generic.gts'; +import HdsCodeEditorDescription from './description.gts'; +import HdsCodeEditorTitle from './title.gts'; export interface HdsCodeEditorSignature { Args: { @@ -155,4 +166,84 @@ export default class HdsCodeEditor extends Component { this._isSetupComplete = true; this.args.onSetup?.(editorView); } + + } diff --git a/packages/components/src/components/hds/code-editor/title.ts b/packages/components/src/components/hds/code-editor/title.gts similarity index 60% rename from packages/components/src/components/hds/code-editor/title.ts rename to packages/components/src/components/hds/code-editor/title.gts index 740129146d2..b6596e6c825 100644 --- a/packages/components/src/components/hds/code-editor/title.ts +++ b/packages/components/src/components/hds/code-editor/title.gts @@ -4,8 +4,11 @@ */ import Component from '@glimmer/component'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; -import type { HdsTextBodySignature } from '../text/body'; +import HdsTextBody from '../text/body.gts'; + +import type { HdsTextBodySignature } from '../text/body.gts'; type HdsCodeEditorTitleElement = HdsTextBodySignature['Element']; @@ -27,4 +30,18 @@ export default class HdsCodeEditorTitle extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/code-editor/title.hbs b/packages/components/src/components/hds/code-editor/title.hbs deleted file mode 100644 index 38e83ecc0dc..00000000000 --- a/packages/components/src/components/hds/code-editor/title.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - {{yield}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/copy/button/index.ts b/packages/components/src/components/hds/copy/button/index.gts similarity index 84% rename from packages/components/src/components/hds/copy/button/index.ts rename to packages/components/src/components/hds/copy/button/index.gts index 7fb15fce15b..a9a28bbb171 100644 --- a/packages/components/src/components/hds/copy/button/index.ts +++ b/packages/components/src/components/hds/copy/button/index.gts @@ -7,9 +7,12 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; +import HdsButton from '../../button/index.gts'; +import hdsClipboard from '../../../../modifiers/hds-clipboard.ts'; import { HdsCopyButtonSizeValues } from './types.ts'; + import type { HdsCopyButtonSizes } from './types.ts'; -import type { HdsButtonSignature } from '../../button/'; +import type { HdsButtonSignature } from '../../button/index.gts'; import type { HdsClipboardModifierSignature } from '../../../../modifiers/hds-clipboard.ts'; import type { HdsIconSignature } from '../../icon'; @@ -122,4 +125,24 @@ export default class HdsCopyButton extends Component { this._status = DEFAULT_STATUS; }, 1500); } + + } diff --git a/packages/components/src/components/hds/copy/button/index.hbs b/packages/components/src/components/hds/copy/button/index.hbs deleted file mode 100644 index 59d4cb93252..00000000000 --- a/packages/components/src/components/hds/copy/button/index.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/copy/snippet/index.ts b/packages/components/src/components/hds/copy/snippet/index.gts similarity index 87% rename from packages/components/src/components/hds/copy/snippet/index.ts rename to packages/components/src/components/hds/copy/snippet/index.gts index 5d904a2e098..7c0edd5db07 100644 --- a/packages/components/src/components/hds/copy/snippet/index.ts +++ b/packages/components/src/components/hds/copy/snippet/index.gts @@ -7,7 +7,13 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; +import { concat } from '@ember/helper'; + +import hdsClipboard from '../../../../modifiers/hds-clipboard.ts'; +import HdsTextCode from '../../text/code.gts'; +import HdsIcon from '../../icon/index.gts'; import { HdsCopySnippetColorValues } from './types.ts'; + import type { HdsCopySnippetColors } from './types.ts'; import type { HdsClipboardModifierSignature } from '../../../../modifiers/hds-clipboard.ts'; import type { HdsIconSignature } from '../../icon'; @@ -169,4 +175,23 @@ export default class HdsCopySnippet extends Component { this._status = DEFAULT_STATUS; }, 1500); } + + } diff --git a/packages/components/src/components/hds/copy/snippet/index.hbs b/packages/components/src/components/hds/copy/snippet/index.hbs deleted file mode 100644 index 295ff852c7e..00000000000 --- a/packages/components/src/components/hds/copy/snippet/index.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/body.gts b/packages/components/src/components/hds/dialog-primitive/body.gts new file mode 100644 index 00000000000..5c96f1b31ce --- /dev/null +++ b/packages/components/src/components/hds/dialog-primitive/body.gts @@ -0,0 +1,28 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDialogPrimitiveBodySignature { + Args: { + contextualClass?: string; + }; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsDialogPrimitiveBody: TOC = ; + +export default HdsDialogPrimitiveBody; diff --git a/packages/components/src/components/hds/dialog-primitive/body.hbs b/packages/components/src/components/hds/dialog-primitive/body.hbs deleted file mode 100644 index 6f8f5b08dae..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/body.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/body.ts b/packages/components/src/components/hds/dialog-primitive/body.ts deleted file mode 100644 index 54b4d8d9cfd..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/body.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDialogPrimitiveBodySignature { - Args: { - contextualClass?: string; - }; - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsDialogPrimitiveBody = - templateOnlyComponent(); - -export default HdsDialogPrimitiveBody; diff --git a/packages/components/src/components/hds/dialog-primitive/description.gts b/packages/components/src/components/hds/dialog-primitive/description.gts new file mode 100644 index 00000000000..3eade9b5c18 --- /dev/null +++ b/packages/components/src/components/hds/dialog-primitive/description.gts @@ -0,0 +1,29 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDialogPrimitiveDescriptionSignature { + Args: { + contextualClass?: string; + }; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsDialogPrimitiveDescription: TOC = + ; + +export default HdsDialogPrimitiveDescription; diff --git a/packages/components/src/components/hds/dialog-primitive/description.hbs b/packages/components/src/components/hds/dialog-primitive/description.hbs deleted file mode 100644 index a3fe877ca1e..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/description.hbs +++ /dev/null @@ -1,10 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/description.ts b/packages/components/src/components/hds/dialog-primitive/description.ts deleted file mode 100644 index 6197b9d444b..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/description.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDialogPrimitiveDescriptionSignature { - Args: { - contextualClass?: string; - }; - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsDialogPrimitiveDescription = - templateOnlyComponent(); - -export default HdsDialogPrimitiveDescription; diff --git a/packages/components/src/components/hds/dialog-primitive/footer.ts b/packages/components/src/components/hds/dialog-primitive/footer.gts similarity index 85% rename from packages/components/src/components/hds/dialog-primitive/footer.ts rename to packages/components/src/components/hds/dialog-primitive/footer.gts index 277c8a9eba5..cabafa61328 100644 --- a/packages/components/src/components/hds/dialog-primitive/footer.ts +++ b/packages/components/src/components/hds/dialog-primitive/footer.gts @@ -4,6 +4,7 @@ */ import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; export interface HdsDialogPrimitiveFooterSignature { Args: { @@ -37,4 +38,13 @@ export default class HdsDialogPrimitiveFooter extends Component +
    + {{yield (hash close=this.onDismiss)}} +
    + } diff --git a/packages/components/src/components/hds/dialog-primitive/footer.hbs b/packages/components/src/components/hds/dialog-primitive/footer.hbs deleted file mode 100644 index c94a39b53f8..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/footer.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield (hash close=this.onDismiss)}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/header.gts b/packages/components/src/components/hds/dialog-primitive/header.gts new file mode 100644 index 00000000000..bd00c59980b --- /dev/null +++ b/packages/components/src/components/hds/dialog-primitive/header.gts @@ -0,0 +1,120 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; +import { concat } from '@ember/helper'; +import { element } from 'ember-element-helper'; + +import HdsIcon from '../icon/index.gts'; +import HdsTextBody from '../text/body.gts'; +import HdsTextDisplay from '../text/display.gts'; +import HdsDismissButton from '../dismiss-button/index.gts'; +import { HdsDialogPrimitiveHeaderTitleTagValues } from './types.ts'; + +import type { HdsIconSignature } from '../icon'; +import type { HdsDialogPrimitiveHeaderTitleTags } from './types.ts'; + +export interface HdsDialogPrimitiveHeaderSignature { + Args: { + contextualClassPrefix?: string; + id?: string; + icon?: HdsIconSignature['Args']['name']; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onDismiss?: (event: MouseEvent, ...args: any[]) => void; + titleTag?: HdsDialogPrimitiveHeaderTitleTags; + tagline?: string; + }; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const NOOP = (): void => {}; + +export default class HdsDialogPrimitiveHeader extends Component { + get titleTag(): HdsDialogPrimitiveHeaderTitleTags { + return this.args.titleTag ?? HdsDialogPrimitiveHeaderTitleTagValues.Div; + } + + /** + * @param onDismiss + * @type {function} + * @default () => {} + */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any + get onDismiss(): (event: MouseEvent, ...args: any[]) => void { + const { onDismiss } = this.args; + + // notice: this is a guard used in case the button is used as standalone element (eg. in the showcase) + // in reality it's always used inside the main components as a yielded component, so the onDismiss handler is always defined + if (typeof onDismiss === 'function') { + return onDismiss; + } else { + return NOOP; + } + } + + +} diff --git a/packages/components/src/components/hds/dialog-primitive/header.hbs b/packages/components/src/components/hds/dialog-primitive/header.hbs deleted file mode 100644 index 329248bc0a9..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/header.hbs +++ /dev/null @@ -1,42 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{#if @icon}} - - {{/if}} - - {{#let (element this.titleTag) as |Tag|}} - {{#if @tagline}} - - {{@tagline}} - - {{/if}} - - - {{yield}} - - - {{/let}} - - -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/header.ts b/packages/components/src/components/hds/dialog-primitive/header.ts deleted file mode 100644 index 27fe0f920c2..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/header.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import type { HdsIconSignature } from '../icon'; -import type { HdsDialogPrimitiveHeaderTitleTags } from './types'; -import { HdsDialogPrimitiveHeaderTitleTagValues } from './types.ts'; - -export interface HdsDialogPrimitiveHeaderSignature { - Args: { - contextualClassPrefix?: string; - id?: string; - icon?: HdsIconSignature['Args']['name']; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onDismiss?: (event: MouseEvent, ...args: any[]) => void; - titleTag?: HdsDialogPrimitiveHeaderTitleTags; - tagline?: string; - }; - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const NOOP = (): void => {}; - -export default class HdsDialogPrimitiveHeader extends Component { - get titleTag(): HdsDialogPrimitiveHeaderTitleTags { - return this.args.titleTag ?? HdsDialogPrimitiveHeaderTitleTagValues.Div; - } - - /** - * @param onDismiss - * @type {function} - * @default () => {} - */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - get onDismiss(): (event: MouseEvent, ...args: any[]) => void { - const { onDismiss } = this.args; - - // notice: this is a guard used in case the button is used as standalone element (eg. in the showcase) - // in reality it's always used inside the main components as a yielded component, so the onDismiss handler is always defined - if (typeof onDismiss === 'function') { - return onDismiss; - } else { - return NOOP; - } - } -} diff --git a/packages/components/src/components/hds/dialog-primitive/overlay.ts b/packages/components/src/components/hds/dialog-primitive/overlay.gts similarity index 51% rename from packages/components/src/components/hds/dialog-primitive/overlay.ts rename to packages/components/src/components/hds/dialog-primitive/overlay.gts index c15a1532444..f880b3854a0 100644 --- a/packages/components/src/components/hds/dialog-primitive/overlay.ts +++ b/packages/components/src/components/hds/dialog-primitive/overlay.gts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import templateOnlyComponent from '@ember/component/template-only'; +import type { TOC } from '@ember/component/template-only'; export interface HdsDialogPrimitiveOverlaySignature { Args: { @@ -12,7 +12,9 @@ export interface HdsDialogPrimitiveOverlaySignature { Element: HTMLDivElement; } -const HdsDialogPrimitiveOverlay = - templateOnlyComponent(); +const HdsDialogPrimitiveOverlay: TOC = + ; export default HdsDialogPrimitiveOverlay; diff --git a/packages/components/src/components/hds/dialog-primitive/overlay.hbs b/packages/components/src/components/hds/dialog-primitive/overlay.hbs deleted file mode 100644 index 276c46171d6..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/overlay.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/wrapper.gts b/packages/components/src/components/hds/dialog-primitive/wrapper.gts new file mode 100644 index 00000000000..4cf982c5eaa --- /dev/null +++ b/packages/components/src/components/hds/dialog-primitive/wrapper.gts @@ -0,0 +1,32 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDialogPrimitiveWrapperSignature { + Blocks: { + header?: []; + body?: []; + footer?: []; + }; + Element: HTMLDialogElement; +} + +const HdsDialogPrimitiveWrapper: TOC = + ; + +export default HdsDialogPrimitiveWrapper; diff --git a/packages/components/src/components/hds/dialog-primitive/wrapper.hbs b/packages/components/src/components/hds/dialog-primitive/wrapper.hbs deleted file mode 100644 index 54db0dea147..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/wrapper.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{yield to="header"}} -
    -
    - {{yield to="body"}} -
    -
    - {{yield to="footer"}} -
    -     \ No newline at end of file diff --git a/packages/components/src/components/hds/dialog-primitive/wrapper.ts b/packages/components/src/components/hds/dialog-primitive/wrapper.ts deleted file mode 100644 index 9e1d71a1c4d..00000000000 --- a/packages/components/src/components/hds/dialog-primitive/wrapper.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDialogPrimitiveWrapperSignature { - Blocks: { - header?: []; - body?: []; - footer?: []; - }; - Element: HTMLDialogElement; -} - -const HdsDialogPrimitiveWrapper = - templateOnlyComponent(); - -export default HdsDialogPrimitiveWrapper; diff --git a/packages/components/src/components/hds/disclosure-primitive/index.ts b/packages/components/src/components/hds/disclosure-primitive/index.gts similarity index 80% rename from packages/components/src/components/hds/disclosure-primitive/index.ts rename to packages/components/src/components/hds/disclosure-primitive/index.gts index d475d664d12..85b39c10577 100644 --- a/packages/components/src/components/hds/disclosure-primitive/index.ts +++ b/packages/components/src/components/hds/disclosure-primitive/index.gts @@ -3,11 +3,13 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; +import { hash } from '@ember/helper'; import { action } from '@ember/object'; -import { schedule } from '@ember/runloop'; import { guidFor } from '@ember/object/internals'; +import didUpdate from '@ember/render-modifiers/modifiers/did-update'; +import { schedule } from '@ember/runloop'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; export interface HdsDisclosurePrimitiveSignature { Args: { @@ -88,4 +90,24 @@ export default class HdsDisclosurePrimitive extends Component +
    +
    + {{yield + (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) + to="toggle" + }} +
    + {{#if this.isOpen}} +
    + {{yield (hash close=this.close) to="content"}} +
    + {{/if}} +
    + } diff --git a/packages/components/src/components/hds/dismiss-button/index.ts b/packages/components/src/components/hds/dismiss-button/index.gts similarity index 72% rename from packages/components/src/components/hds/dismiss-button/index.ts rename to packages/components/src/components/hds/dismiss-button/index.gts index ad38ff511c7..ad4f34e1dae 100644 --- a/packages/components/src/components/hds/dismiss-button/index.ts +++ b/packages/components/src/components/hds/dismiss-button/index.gts @@ -8,6 +8,8 @@ import { service } from '@ember/service'; import type HdsIntlService from '../../../services/hds-intl'; +import HdsIcon from '../icon/index.gts'; + export interface HdsDismissButtonSignature { Args: { ariaLabel?: string; @@ -26,4 +28,15 @@ export default class HdsDismissButton extends Component + + } diff --git a/packages/components/src/components/hds/dismiss-button/index.hbs b/packages/components/src/components/hds/dismiss-button/index.hbs deleted file mode 100644 index 4804be14899..00000000000 --- a/packages/components/src/components/hds/dismiss-button/index.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/footer.gts b/packages/components/src/components/hds/dropdown/footer.gts new file mode 100644 index 00000000000..61b6fa38499 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/footer.gts @@ -0,0 +1,28 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDropdownFooterSignature { + Args: { + hasDivider?: boolean; + }; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsDropdownFooter: TOC = ; + +export default HdsDropdownFooter; diff --git a/packages/components/src/components/hds/dropdown/footer.hbs b/packages/components/src/components/hds/dropdown/footer.hbs deleted file mode 100644 index 01a1d7b5774..00000000000 --- a/packages/components/src/components/hds/dropdown/footer.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/footer.ts b/packages/components/src/components/hds/dropdown/footer.ts deleted file mode 100644 index 42bda051ceb..00000000000 --- a/packages/components/src/components/hds/dropdown/footer.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDropdownFooterSignature { - Args: { - hasDivider?: boolean; - }; - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsDropdownFooter = templateOnlyComponent(); - -export default HdsDropdownFooter; diff --git a/packages/components/src/components/hds/dropdown/header.gts b/packages/components/src/components/hds/dropdown/header.gts new file mode 100644 index 00000000000..130e2e73d21 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/header.gts @@ -0,0 +1,28 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDropdownHeaderSignature { + Args: { + hasDivider?: boolean; + }; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +const HdsDropdownHeader: TOC = ; + +export default HdsDropdownHeader; diff --git a/packages/components/src/components/hds/dropdown/header.hbs b/packages/components/src/components/hds/dropdown/header.hbs deleted file mode 100644 index aa3d292de6c..00000000000 --- a/packages/components/src/components/hds/dropdown/header.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/header.ts b/packages/components/src/components/hds/dropdown/header.ts deleted file mode 100644 index 06637a777e3..00000000000 --- a/packages/components/src/components/hds/dropdown/header.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDropdownHeaderSignature { - Args: { - hasDivider?: boolean; - }; - Blocks: { - default: []; - }; - Element: HTMLDivElement; -} - -const HdsDropdownHeader = templateOnlyComponent(); - -export default HdsDropdownHeader; diff --git a/packages/components/src/components/hds/dropdown/index.ts b/packages/components/src/components/hds/dropdown/index.gts similarity index 64% rename from packages/components/src/components/hds/dropdown/index.ts rename to packages/components/src/components/hds/dropdown/index.gts index 12bccfcd4ce..ed75cfec362 100644 --- a/packages/components/src/components/hds/dropdown/index.ts +++ b/packages/components/src/components/hds/dropdown/index.gts @@ -6,7 +6,25 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; import { assert } from '@ember/debug'; - +import { hash } from '@ember/helper'; +import { or } from 'ember-truth-helpers'; +import style from 'ember-style-modifier'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; + +import HdsPopoverPrimitive from '../popover-primitive/index.gts'; +import HdsDropdownToggleButton from './toggle/button.gts'; +import HdsDropdownToggleIcon from './toggle/icon.gts'; +import HdsDropdownHeader from './header.gts'; +import HdsDropdownFooter from './footer.gts'; +import HdsDropdownListItemCheckbox from './list-item/checkbox.gts'; +import HdsDropdownListItemCheckmark from './list-item/checkmark.gts'; +import HdsDropdownListItemCopyItem from './list-item/copy-item.gts'; +import HdsDropdownListItemDescription from './list-item/description.gts'; +import HdsDropdownListItemGeneric from './list-item/generic.gts'; +import HdsDropdownListItemInteractive from './list-item/interactive.gts'; +import HdsDropdownListItemRadio from './list-item/radio.gts'; +import HdsDropdownListItemSeparator from './list-item/separator.gts'; +import HdsDropdownListItemTitle from './list-item/title.gts'; import { // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values HdsDropdownPositionToPlacementValues, @@ -15,21 +33,21 @@ import { } from './types.ts'; import type { ComponentLike } from '@glint/template'; -import type { MenuPrimitiveSignature } from '../menu-primitive'; -import type { HdsDropdownFooterSignature } from './footer'; -import type { HdsDropdownHeaderSignature } from './header'; -import type { HdsDropdownListItemCheckboxSignature } from './list-item/checkbox'; -import type { HdsDropdownListItemCheckmarkSignature } from './list-item/checkmark'; -import type { HdsDropdownListItemCopyItemSignature } from './list-item/copy-item'; -import type { HdsDropdownListItemDescriptionSignature } from './list-item/description'; -import type { HdsDropdownListItemGenericSignature } from './list-item/generic'; -import type { HdsDropdownListItemInteractiveSignature } from './list-item/interactive'; -import type { HdsDropdownListItemRadioSignature } from './list-item/radio'; -import type { HdsDropdownListItemSeparatorSignature } from './list-item/separator'; -import type { HdsDropdownListItemTitleSignature } from './list-item/title'; -import type { HdsDropdownToggleButtonSignature } from './toggle/button'; -import type { HdsDropdownToggleIconSignature } from './toggle/icon'; -import type { HdsDropdownPositions } from './types'; +import type { MenuPrimitiveSignature } from '../menu-primitive/index.gts'; +import type { HdsDropdownFooterSignature } from './footer.gts'; +import type { HdsDropdownHeaderSignature } from './header.gts'; +import type { HdsDropdownListItemCheckboxSignature } from './list-item/checkbox.gts'; +import type { HdsDropdownListItemCheckmarkSignature } from './list-item/checkmark.gts'; +import type { HdsDropdownListItemCopyItemSignature } from './list-item/copy-item.gts'; +import type { HdsDropdownListItemDescriptionSignature } from './list-item/description.gts'; +import type { HdsDropdownListItemGenericSignature } from './list-item/generic.gts'; +import type { HdsDropdownListItemInteractiveSignature } from './list-item/interactive.gts'; +import type { HdsDropdownListItemRadioSignature } from './list-item/radio.gts'; +import type { HdsDropdownListItemSeparatorSignature } from './list-item/separator.gts'; +import type { HdsDropdownListItemTitleSignature } from './list-item/title.gts'; +import type { HdsDropdownToggleButtonSignature } from './toggle/button.gts'; +import type { HdsDropdownToggleIconSignature } from './toggle/icon.gts'; +import type { HdsDropdownPositions } from './types.ts'; import type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts'; @@ -169,4 +187,63 @@ export default class HdsDropdown extends Component { } } } + + } diff --git a/packages/components/src/components/hds/dropdown/list-item/checkbox.gts b/packages/components/src/components/hds/dropdown/list-item/checkbox.gts new file mode 100644 index 00000000000..a96ff749c35 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/checkbox.gts @@ -0,0 +1,60 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +import { getElementId } from '../../../../utils/hds-get-element-id.ts'; +import HdsFormCheckboxBase from '../../form/checkbox/base.gts'; +import HdsIcon from '../../icon/index.gts'; + +import type { HdsIconSignature } from '../../icon'; +import type { HdsFormCheckboxBaseSignature } from '../../form/checkbox/base.gts'; + +export interface HdsDropdownListItemCheckboxSignature { + Args: HdsFormCheckboxBaseSignature['Args'] & { + count?: string | number; + icon?: HdsIconSignature['Args']['name']; + }; + Blocks: { + default: []; + }; + Element: HdsFormCheckboxBaseSignature['Element']; +} + +export default class HdsDropdownListItemCheckbox extends Component { + /** + * Determines the unique ID to assign to the checkbox control + */ + get id(): string { + return getElementId(this); + } + + +} diff --git a/packages/components/src/components/hds/dropdown/list-item/checkbox.ts b/packages/components/src/components/hds/dropdown/list-item/checkbox.ts deleted file mode 100644 index b8a9a65f19c..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/checkbox.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { getElementId } from '../../../../utils/hds-get-element-id.ts'; -import type { HdsIconSignature } from '../../icon'; -import type { HdsFormCheckboxBaseSignature } from '../../form/checkbox/base.ts'; - -export interface HdsDropdownListItemCheckboxSignature { - Args: HdsFormCheckboxBaseSignature['Args'] & { - count?: string | number; - icon?: HdsIconSignature['Args']['name']; - }; - Blocks: { - default: []; - }; - Element: HdsFormCheckboxBaseSignature['Element']; -} - -export default class HdsDropdownListItemCheckbox extends Component { - /** - * Determines the unique ID to assign to the checkbox control - */ - get id(): string { - return getElementId(this); - } -} diff --git a/packages/components/src/components/hds/dropdown/list-item/checkmark.gts b/packages/components/src/components/hds/dropdown/list-item/checkmark.gts new file mode 100644 index 00000000000..bfded33a87c --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/checkmark.gts @@ -0,0 +1,101 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import HdsInteractive from '../../interactive/index.gts'; +import HdsIcon from '../../icon/index.gts'; +import HdsTextBody from '../../text/body.gts'; +import hdsLinkToModels from '../../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../../helpers/hds-link-to-query.ts'; + +import type { HdsIconSignature } from '../../icon'; +import type { HdsInteractiveSignature } from '../../interactive/index.gts'; + +export interface HdsDropdownListItemCheckmarkSignature { + Args: HdsInteractiveSignature['Args'] & { + count?: string | number; + icon?: HdsIconSignature['Args']['name']; + selected?: boolean; + }; + Blocks: { + default: []; + }; + Element: HdsInteractiveSignature['Element']; +} + +export default class HdsDropdownListItemCheckmark extends Component { + /** + * Get the class names to apply to the component. + * @method classNames + * @return {string} The "class" attribute to apply to the component. + */ + get classNames(): string { + const classes = [ + 'hds-dropdown-list-item', + 'hds-dropdown-list-item--color-action', + 'hds-dropdown-list-item--variant-checkmark', + ]; + + // add a class based on the @selected argument + if (this.args.selected) { + classes.push('hds-dropdown-list-item--variant-checkmark-selected'); + } + + return classes.join(' '); + } + + +} diff --git a/packages/components/src/components/hds/dropdown/list-item/checkmark.ts b/packages/components/src/components/hds/dropdown/list-item/checkmark.ts deleted file mode 100644 index b50923013a2..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/checkmark.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import type { HdsIconSignature } from '../../icon'; -import type { HdsInteractiveSignature } from '../../interactive/index.gts'; - -export interface HdsDropdownListItemCheckmarkSignature { - Args: HdsInteractiveSignature['Args'] & { - count?: string | number; - icon?: HdsIconSignature['Args']['name']; - selected?: boolean; - }; - Blocks: { - default: []; - }; - Element: HdsInteractiveSignature['Element']; -} - -export default class HdsDropdownListItemCheckmark extends Component { - /** - * Get the class names to apply to the component. - * @method classNames - * @return {string} The "class" attribute to apply to the component. - */ - get classNames(): string { - const classes = [ - 'hds-dropdown-list-item', - 'hds-dropdown-list-item--color-action', - 'hds-dropdown-list-item--variant-checkmark', - ]; - - // add a class based on the @selected argument - if (this.args.selected) { - classes.push('hds-dropdown-list-item--variant-checkmark-selected'); - } - - return classes.join(' '); - } -} diff --git a/packages/components/src/components/hds/dropdown/list-item/copy-item.ts b/packages/components/src/components/hds/dropdown/list-item/copy-item.gts similarity index 73% rename from packages/components/src/components/hds/dropdown/list-item/copy-item.ts rename to packages/components/src/components/hds/dropdown/list-item/copy-item.gts index bb4b6af6e9f..1b04cd15c23 100644 --- a/packages/components/src/components/hds/dropdown/list-item/copy-item.ts +++ b/packages/components/src/components/hds/dropdown/list-item/copy-item.gts @@ -5,7 +5,11 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; -import type { HdsCopySnippetSignature } from '../../copy/snippet'; + +import HdsTextBody from '../../text/body.gts'; +import HdsCopySnippet from '../../copy/snippet/index.gts'; + +import type { HdsCopySnippetSignature } from '../../copy/snippet/index.gts'; export interface HdsDropdownListItemCopyItemSignature { Args: { @@ -58,4 +62,23 @@ export default class HdsDropdownListItemCopyItem extends Component +
  • + {{#if @copyItemTitle}} + {{@copyItemTitle}} + {{/if}} + +
    • + } diff --git a/packages/components/src/components/hds/dropdown/list-item/copy-item.hbs b/packages/components/src/components/hds/dropdown/list-item/copy-item.hbs deleted file mode 100644 index 817165fdc26..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/copy-item.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
  • - {{#if @copyItemTitle}} - {{@copyItemTitle}} - {{/if}} - -
    • \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/list-item/description.ts b/packages/components/src/components/hds/dropdown/list-item/description.gts similarity index 66% rename from packages/components/src/components/hds/dropdown/list-item/description.ts rename to packages/components/src/components/hds/dropdown/list-item/description.gts index b1bbbead52b..f14673cb93b 100644 --- a/packages/components/src/components/hds/dropdown/list-item/description.ts +++ b/packages/components/src/components/hds/dropdown/list-item/description.gts @@ -5,7 +5,10 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; -import type { HdsTextBodySignature } from '../../text/body'; + +import HdsTextBody from '../../text/body.gts'; + +import type { HdsTextBodySignature } from '../../text/body.gts'; export interface HdsDropdownListItemDescriptionSignature { Args: { @@ -30,4 +33,17 @@ export default class HdsDropdownListItemDescription extends Component + + {{this.text}} + + } diff --git a/packages/components/src/components/hds/dropdown/list-item/description.hbs b/packages/components/src/components/hds/dropdown/list-item/description.hbs deleted file mode 100644 index 1c65b42955a..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/description.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{this.text}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/list-item/generic.gts b/packages/components/src/components/hds/dropdown/list-item/generic.gts new file mode 100644 index 00000000000..ec478bd494f --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/generic.gts @@ -0,0 +1,25 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDropdownListItemGenericSignature { + Blocks: { + default: []; + }; + Element: HTMLLIElement; +} + +const HdsDropdownListItemGeneric: TOC = + ; + +export default HdsDropdownListItemGeneric; diff --git a/packages/components/src/components/hds/dropdown/list-item/generic.hbs b/packages/components/src/components/hds/dropdown/list-item/generic.hbs deleted file mode 100644 index aa168204c8d..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/generic.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
  • - {{yield}} -
    • \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/list-item/generic.ts b/packages/components/src/components/hds/dropdown/list-item/generic.ts deleted file mode 100644 index eb6f71f9f9c..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/generic.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDropdownListItemGenericSignature { - Blocks: { - default: []; - }; - Element: HTMLLIElement; -} - -const HdsDropdownListItemGeneric = - templateOnlyComponent(); - -export default HdsDropdownListItemGeneric; diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.ts b/packages/components/src/components/hds/dropdown/list-item/interactive.gts similarity index 54% rename from packages/components/src/components/hds/dropdown/list-item/interactive.ts rename to packages/components/src/components/hds/dropdown/list-item/interactive.gts index c9ab5cba1a2..c4fd415bf51 100644 --- a/packages/components/src/components/hds/dropdown/list-item/interactive.ts +++ b/packages/components/src/components/hds/dropdown/list-item/interactive.gts @@ -5,14 +5,21 @@ import Component from '@glimmer/component'; import { assert, deprecate } from '@ember/debug'; - +import { hash } from '@ember/helper'; + +import HdsIcon from '../../icon/index.gts'; +import HdsTextBody from '../../text/body.gts'; +import HdsInteractive from '../../interactive/index.gts'; +import HdsBadge from '../../badge/index.gts'; +import hdsLinkToModels from '../../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../../helpers/hds-link-to-query.ts'; import { HdsDropdownListItemInteractiveColorValues } from './types.ts'; import type { HdsIconSignature } from '../../icon'; import type { HdsInteractiveSignature } from '../../interactive/index.gts'; import type { HdsDropdownListItemInteractiveColors } from './types.ts'; import type { ComponentLike } from '@glint/template'; -import type { HdsBadgeSignature } from '../../badge/index.ts'; +import type { HdsBadgeSignature } from '../../badge/index.gts'; import type Owner from '@ember/owner'; export const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action; @@ -101,4 +108,72 @@ export default class HdsDropdownListItemInteractive extends Component +
  • + {{#if @isLoading}} +
    +
    + +
    + + {{#if (has-block)}} + {{yield (hash Badge=(component HdsBadge size="small"))}} + {{else}} + {{this.text}} + {{/if}} + +
    + {{else}} + + {{#if @icon}} + + + + {{/if}} + + {{#if (has-block)}} + {{yield (hash Badge=(component HdsBadge size="small"))}} + {{else}} + {{this.text}} + {{/if}} + + {{#if @trailingIcon}} + + + + {{/if}} + + {{/if}} +
    • + } diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.hbs b/packages/components/src/components/hds/dropdown/list-item/interactive.hbs deleted file mode 100644 index 53fc34e1b9f..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/interactive.hbs +++ /dev/null @@ -1,50 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
  • - {{#if @isLoading}} -
    -
    - -
    - - {{#if (has-block)}} - {{yield (hash Badge=(component "hds/badge" size="small"))}} - {{else}} - {{this.text}} - {{/if}} - -
    - {{else}} - - {{#if @icon}} - - - - {{/if}} - - {{#if (has-block)}} - {{yield (hash Badge=(component "hds/badge" size="small"))}} - {{else}} - {{this.text}} - {{/if}} - - {{#if @trailingIcon}} - - - - {{/if}} - - {{/if}} -
    • \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/list-item/radio.gts b/packages/components/src/components/hds/dropdown/list-item/radio.gts new file mode 100644 index 00000000000..6e084b0b34c --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/radio.gts @@ -0,0 +1,67 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +import { getElementId } from '../../../../utils/hds-get-element-id.ts'; +import HdsFormRadioBase from '../../form/radio/base.gts'; +import HdsIcon from '../../icon/index.gts'; +import HdsTextBody from '../../text/body.gts'; + +import type { HdsIconSignature } from '../../icon'; +import type { HdsFormRadioBaseSignature } from '../../form/radio/base.gts'; + +export interface HdsDropdownListItemRadioSignature { + Args: HdsFormRadioBaseSignature['Args'] & { + count?: string | number; + icon?: HdsIconSignature['Args']['name']; + }; + Blocks: { + default: []; + }; + Element: HdsFormRadioBaseSignature['Element']; +} + +export default class HdsDropdownListItemRadio extends Component { + /** + * Determines the unique ID to assign to the radio control + */ + get id(): string { + return getElementId(this); + } + + +} diff --git a/packages/components/src/components/hds/dropdown/list-item/radio.ts b/packages/components/src/components/hds/dropdown/list-item/radio.ts deleted file mode 100644 index 06588b5bbfa..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/radio.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { getElementId } from '../../../../utils/hds-get-element-id.ts'; -import type { HdsIconSignature } from '../../icon'; -import type { HdsFormRadioBaseSignature } from '../../form/radio/base.ts'; - -export interface HdsDropdownListItemRadioSignature { - Args: HdsFormRadioBaseSignature['Args'] & { - count?: string | number; - icon?: HdsIconSignature['Args']['name']; - }; - Blocks: { - default: []; - }; - Element: HdsFormRadioBaseSignature['Element']; -} - -export default class HdsDropdownListItemRadio extends Component { - /** - * Determines the unique ID to assign to the radio control - */ - get id(): string { - return getElementId(this); - } -} diff --git a/packages/components/src/components/hds/dropdown/list-item/separator.gts b/packages/components/src/components/hds/dropdown/list-item/separator.gts new file mode 100644 index 00000000000..ad06ecbac0b --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/separator.gts @@ -0,0 +1,22 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDropdownListItemSeparatorSignature { + Element: HTMLLIElement; +} + +const HdsDropdownListItemSeparator: TOC = + ; + +export default HdsDropdownListItemSeparator; diff --git a/packages/components/src/components/hds/dropdown/list-item/separator.hbs b/packages/components/src/components/hds/dropdown/list-item/separator.hbs deleted file mode 100644 index 565f252bcfe..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/separator.hbs +++ /dev/null @@ -1,10 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/list-item/separator.ts b/packages/components/src/components/hds/dropdown/list-item/separator.ts deleted file mode 100644 index 63372f8b1a1..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/separator.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDropdownListItemSeparatorSignature { - Element: HTMLLIElement; -} - -const HdsDropdownListItemSeparator = - templateOnlyComponent(); - -export default HdsDropdownListItemSeparator; diff --git a/packages/components/src/components/hds/dropdown/list-item/title.ts b/packages/components/src/components/hds/dropdown/list-item/title.gts similarity index 65% rename from packages/components/src/components/hds/dropdown/list-item/title.ts rename to packages/components/src/components/hds/dropdown/list-item/title.gts index 57024a2e334..eb5d0cc8a91 100644 --- a/packages/components/src/components/hds/dropdown/list-item/title.ts +++ b/packages/components/src/components/hds/dropdown/list-item/title.gts @@ -5,7 +5,10 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; -import type { HdsTextBodySignature } from '../../text/body'; + +import HdsTextBody from '../../text/body.gts'; + +import type { HdsTextBodySignature } from '../../text/body.gts'; export interface HdsDropdownListItemTitleSignature { Args: { @@ -30,4 +33,17 @@ export default class HdsDropdownListItemTitle extends Component + + {{this.text}} + + } diff --git a/packages/components/src/components/hds/dropdown/list-item/title.hbs b/packages/components/src/components/hds/dropdown/list-item/title.hbs deleted file mode 100644 index 31fff6cca32..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/title.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{this.text}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/toggle/button.ts b/packages/components/src/components/hds/dropdown/toggle/button.gts similarity index 76% rename from packages/components/src/components/hds/dropdown/toggle/button.ts rename to packages/components/src/components/hds/dropdown/toggle/button.gts index 15962e53d58..b89c5926471 100644 --- a/packages/components/src/components/hds/dropdown/toggle/button.ts +++ b/packages/components/src/components/hds/dropdown/toggle/button.gts @@ -6,20 +6,25 @@ import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { guidFor } from '@ember/object/internals'; + +import HdsIcon from '../../icon/index.gts'; +import HdsBadgeCount from '../../badge-count/index.gts'; +import HdsBadge from '../../badge/index.gts'; +import HdsDropdownToggleChevron from './chevron.gts'; import { HdsDropdownToggleButtonSizeValues, HdsDropdownToggleButtonColorValues, } from './types.ts'; import type { HdsIconSignature } from '../../icon'; -import type { HdsBadgeSignature } from '../../badge'; -import type { HdsBadgeCountSignature } from '../../badge-count'; +import type { HdsBadgeSignature } from '../../badge/index.gts'; +import type { HdsBadgeCountSignature } from '../../badge-count/index.gts'; import type { HdsDropdownToggleButtonSizes, HdsDropdownToggleButtonColors, -} from './types'; +} from './types.ts'; import type { ModifierLike } from '@glint/template'; -import type { SetupPrimitiveToggleModifier } from '../../popover-primitive/index.ts'; +import type { SetupPrimitiveToggleModifier } from '../../popover-primitive/index.gts'; export const DEFAULT_SIZE = HdsDropdownToggleButtonSizeValues.Medium; export const DEFAULT_COLOR = HdsDropdownToggleButtonColorValues.Primary; @@ -154,4 +159,42 @@ export default class HdsDropdownToggleButton extends Component + + } diff --git a/packages/components/src/components/hds/dropdown/toggle/button.hbs b/packages/components/src/components/hds/dropdown/toggle/button.hbs deleted file mode 100644 index 532b761129b..00000000000 --- a/packages/components/src/components/hds/dropdown/toggle/button.hbs +++ /dev/null @@ -1,39 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/toggle/chevron.gts b/packages/components/src/components/hds/dropdown/toggle/chevron.gts new file mode 100644 index 00000000000..2ae36a0fc40 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/toggle/chevron.gts @@ -0,0 +1,21 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import HdsIcon from '../../icon/index.gts'; + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsDropdownToggleChevronSignature { + Element: HTMLDivElement; +} + +const HdsDropdownToggleChevron: TOC = + ; + +export default HdsDropdownToggleChevron; diff --git a/packages/components/src/components/hds/dropdown/toggle/chevron.hbs b/packages/components/src/components/hds/dropdown/toggle/chevron.hbs deleted file mode 100644 index e64b89fa1e3..00000000000 --- a/packages/components/src/components/hds/dropdown/toggle/chevron.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/toggle/chevron.ts b/packages/components/src/components/hds/dropdown/toggle/chevron.ts deleted file mode 100644 index 313e1ee9f7e..00000000000 --- a/packages/components/src/components/hds/dropdown/toggle/chevron.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsDropdownToggleChevronSignature { - Element: HTMLDivElement; -} - -const HdsDropdownToggleChevron = - templateOnlyComponent(); - -export default HdsDropdownToggleChevron; diff --git a/packages/components/src/components/hds/dropdown/toggle/icon.ts b/packages/components/src/components/hds/dropdown/toggle/icon.gts similarity index 76% rename from packages/components/src/components/hds/dropdown/toggle/icon.ts rename to packages/components/src/components/hds/dropdown/toggle/icon.gts index f400e879eeb..be0c1ca271d 100644 --- a/packages/components/src/components/hds/dropdown/toggle/icon.ts +++ b/packages/components/src/components/hds/dropdown/toggle/icon.gts @@ -7,12 +7,17 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; import { assert } from '@ember/debug'; import { tracked } from '@glimmer/tracking'; +import { on } from '@ember/modifier'; +import didUpdate from '@ember/render-modifiers/modifiers/did-update'; + +import HdsIcon from '../../icon/index.gts'; +import HdsDropdownToggleChevron from './chevron.gts'; import { HdsDropdownToggleIconSizeValues } from './types.ts'; import type { HdsIconSignature } from '../../icon'; -import type { HdsDropdownToggleIconSizes } from './types'; +import type { HdsDropdownToggleIconSizes } from './types.ts'; import type { ModifierLike } from '@glint/template'; -import type { SetupPrimitiveToggleModifier } from '../../popover-primitive/index.ts'; +import type { SetupPrimitiveToggleModifier } from '../../popover-primitive/index.gts'; import type Owner from '@ember/owner'; export const DEFAULT_SIZE = HdsDropdownToggleIconSizeValues.Medium; @@ -138,4 +143,36 @@ export default class HdsDropdownToggleIcon extends Component + + } diff --git a/packages/components/src/components/hds/dropdown/toggle/icon.hbs b/packages/components/src/components/hds/dropdown/toggle/icon.hbs deleted file mode 100644 index 4b894a5ea09..00000000000 --- a/packages/components/src/components/hds/dropdown/toggle/icon.hbs +++ /dev/null @@ -1,28 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/flyout/body.ts b/packages/components/src/components/hds/flyout/body.gts similarity index 92% rename from packages/components/src/components/hds/flyout/body.ts rename to packages/components/src/components/hds/flyout/body.gts index 72f070a5ed5..171edffc288 100644 --- a/packages/components/src/components/hds/flyout/body.ts +++ b/packages/components/src/components/hds/flyout/body.gts @@ -37,4 +37,10 @@ export default class HdsFlyoutBody extends Component { } ); } + + } diff --git a/packages/components/src/components/hds/flyout/body.hbs b/packages/components/src/components/hds/flyout/body.hbs deleted file mode 100644 index b64fb3b9af7..00000000000 --- a/packages/components/src/components/hds/flyout/body.hbs +++ /dev/null @@ -1,10 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! - THIS SUBCOMPONENT IS NOW DEPRECATED -}} -
    - {{yield}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/flyout/description.ts b/packages/components/src/components/hds/flyout/description.gts similarity index 78% rename from packages/components/src/components/hds/flyout/description.ts rename to packages/components/src/components/hds/flyout/description.gts index e04a663fe82..28853b7c347 100644 --- a/packages/components/src/components/hds/flyout/description.ts +++ b/packages/components/src/components/hds/flyout/description.gts @@ -5,8 +5,11 @@ import Component from '@glimmer/component'; import { deprecate } from '@ember/debug'; -import type { HdsTextBodySignature } from '../text/body'; + +import HdsTextBody from '../text/body.gts'; + import type Owner from '@ember/owner'; +import type { HdsTextBodySignature } from '../text/body.gts'; export interface HdsFlyoutDescriptionSignature { Args: never; @@ -35,4 +38,16 @@ export default class HdsFlyoutDescription extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/flyout/description.hbs b/packages/components/src/components/hds/flyout/description.hbs deleted file mode 100644 index 92ce65b7b43..00000000000 --- a/packages/components/src/components/hds/flyout/description.hbs +++ /dev/null @@ -1,10 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! - THIS SUBCOMPONENT IS NOW DEPRECATED -}} - - {{yield}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/flyout/footer.ts b/packages/components/src/components/hds/flyout/footer.gts similarity index 87% rename from packages/components/src/components/hds/flyout/footer.ts rename to packages/components/src/components/hds/flyout/footer.gts index 98e237553e9..e08d8849541 100644 --- a/packages/components/src/components/hds/flyout/footer.ts +++ b/packages/components/src/components/hds/flyout/footer.gts @@ -5,6 +5,8 @@ import Component from '@glimmer/component'; import { deprecate } from '@ember/debug'; +import { hash } from '@ember/helper'; + import type Owner from '@ember/owner'; export interface HdsFlyoutFooterSignature { @@ -36,4 +38,10 @@ export default class HdsFlyoutFooter extends Component } ); } + + } diff --git a/packages/components/src/components/hds/flyout/footer.hbs b/packages/components/src/components/hds/flyout/footer.hbs deleted file mode 100644 index 448b9041755..00000000000 --- a/packages/components/src/components/hds/flyout/footer.hbs +++ /dev/null @@ -1,10 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! - THIS SUBCOMPONENT IS NOW DEPRECATED -}} -
    - {{yield (hash close=@onDismiss)}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/flyout/header.ts b/packages/components/src/components/hds/flyout/header.gts similarity index 56% rename from packages/components/src/components/hds/flyout/header.ts rename to packages/components/src/components/hds/flyout/header.gts index 7ff4f297fdf..9e67cc64dda 100644 --- a/packages/components/src/components/hds/flyout/header.ts +++ b/packages/components/src/components/hds/flyout/header.gts @@ -5,6 +5,13 @@ import Component from '@glimmer/component'; import { deprecate } from '@ember/debug'; +import { on } from '@ember/modifier'; + +import HdsIcon from '../icon/index.gts'; +import HdsTextDisplay from '../text/display.gts'; +import HdsTextBody from '../text/body.gts'; +import HdsDismissButton from '../dismiss-button/index.gts'; + import type { HdsIconSignature } from '../icon'; import type Owner from '@ember/owner'; @@ -40,4 +47,33 @@ export default class HdsFlyoutHeader extends Component } ); } + + } diff --git a/packages/components/src/components/hds/flyout/header.hbs b/packages/components/src/components/hds/flyout/header.hbs deleted file mode 100644 index e46e9e2c03e..00000000000 --- a/packages/components/src/components/hds/flyout/header.hbs +++ /dev/null @@ -1,21 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! - THIS SUBCOMPONENT IS NOW DEPRECATED -}} -
    - {{#if @icon}} - - {{/if}} - - {{#if @tagline}} - - {{@tagline}} - - {{/if}} - {{yield}} - - -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/flyout/index.ts b/packages/components/src/components/hds/flyout/index.gts similarity index 73% rename from packages/components/src/components/hds/flyout/index.ts rename to packages/components/src/components/hds/flyout/index.gts index 4861fe385c6..eb30d911992 100644 --- a/packages/components/src/components/hds/flyout/index.ts +++ b/packages/components/src/components/hds/flyout/index.gts @@ -7,17 +7,28 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { assert } from '@ember/debug'; -import { getElementId } from '../../../utils/hds-get-element-id.ts'; import { buildWaiter } from '@ember/test-waiters'; -import type { WithBoundArgs } from '@glint/template'; - -import type { HdsFlyoutSizes } from './types.ts'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; +import willDestroy from '@ember/render-modifiers/modifiers/will-destroy'; +import { hash } from '@ember/helper'; +import HdsDialogPrimitiveWrapper from '../dialog-primitive/wrapper.gts'; +import HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.gts'; +import HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.gts'; +import HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.gts'; +import HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.gts'; +import HdsDialogPrimitiveOverlay from '../dialog-primitive/overlay.gts'; +import HdsDialogPrimitiveHeader from '../dialog-primitive/header.gts'; +import HdsDialogPrimitiveDescription from '../dialog-primitive/description.gts'; +import HdsDialogPrimitiveBody from '../dialog-primitive/body.gts'; +import HdsDialogPrimitiveFooter from '../dialog-primitive/footer.gts'; import { HdsFlyoutSizesValues } from './types.ts'; -import HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts'; -import HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.ts'; -import HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts'; -import HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts'; +import { getElementId } from '../../../utils/hds-get-element-id.ts'; + +import type { WithBoundArgs } from '@glint/template'; +import type { HdsFlyoutSizes } from './types.ts'; const waiter = buildWaiter('@hashicorp/design-system-components:flyout'); @@ -205,4 +216,61 @@ export default class HdsFlyout extends Component { } } } + } diff --git a/packages/components/src/components/hds/flyout/index.hbs b/packages/components/src/components/hds/flyout/index.hbs deleted file mode 100644 index 949ca208a42..00000000000 --- a/packages/components/src/components/hds/flyout/index.hbs +++ /dev/null @@ -1,42 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - <:header> - {{yield - (hash - Header=(component - "hds/dialog-primitive/header" - id=this.id - onDismiss=this.onDismiss - contextualClassPrefix="hds-flyout" - titleTag="h1" - ) - Description=(component "hds/dialog-primitive/description" contextualClass="hds-flyout__description") - ) - }} - - <:body> - {{yield (hash Body=(component "hds/dialog-primitive/body" contextualClass="hds-flyout__body"))}} - - <:footer> - {{yield - (hash - Footer=(component "hds/dialog-primitive/footer" onDismiss=this.onDismiss contextualClass="hds-flyout__footer") - ) - }} - - - -{{#if this._isOpen}} - -{{/if}} \ No newline at end of file diff --git a/packages/components/src/components/hds/form/character-count/index.ts b/packages/components/src/components/hds/form/character-count/index.gts similarity index 86% rename from packages/components/src/components/hds/form/character-count/index.ts rename to packages/components/src/components/hds/form/character-count/index.gts index cd7769d0f5b..c73e8747f41 100644 --- a/packages/components/src/components/hds/form/character-count/index.ts +++ b/packages/components/src/components/hds/form/character-count/index.gts @@ -4,7 +4,12 @@ */ import Component from '@glimmer/component'; -import type { HdsTextBodySignature } from '../../text/body'; +import { hash } from '@ember/helper'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; + +import HdsTextBody from '../../text/body.gts'; + +import type { HdsTextBodySignature } from '../../text/body.gts'; const ID_PREFIX = 'character-count-'; const NOOP = (): void => {}; @@ -171,4 +176,30 @@ export default class HdsFormCharacterCount extends Component + + {{#if (has-block)}} + {{yield + (hash + minLength=this.minLength + maxLength=this.maxLength + currentLength=this.currentLength + remaining=this.remaining + shortfall=this.shortfall + ) + }} + {{else}} + {{this.message}} + {{/if}} + + } diff --git a/packages/components/src/components/hds/form/character-count/index.hbs b/packages/components/src/components/hds/form/character-count/index.hbs deleted file mode 100644 index 71a0d37efae..00000000000 --- a/packages/components/src/components/hds/form/character-count/index.hbs +++ /dev/null @@ -1,27 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{#if (has-block)}} - {{yield - (hash - minLength=this.minLength - maxLength=this.maxLength - currentLength=this.currentLength - remaining=this.remaining - shortfall=this.shortfall - ) - }} - {{else}} - {{this.message}} - {{/if}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/checkbox/base.gts b/packages/components/src/components/hds/form/checkbox/base.gts new file mode 100644 index 00000000000..1ad4a630e57 --- /dev/null +++ b/packages/components/src/components/hds/form/checkbox/base.gts @@ -0,0 +1,24 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsFormCheckboxBaseSignature { + Args: { + value?: string; + }; + Element: HTMLInputElement; +} + +const HdsFormCheckboxBase: TOC = ; + +export default HdsFormCheckboxBase; diff --git a/packages/components/src/components/hds/form/checkbox/base.hbs b/packages/components/src/components/hds/form/checkbox/base.hbs deleted file mode 100644 index 1e49d9c998f..00000000000 --- a/packages/components/src/components/hds/form/checkbox/base.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/checkbox/base.ts b/packages/components/src/components/hds/form/checkbox/base.ts deleted file mode 100644 index e6d9a6dda37..00000000000 --- a/packages/components/src/components/hds/form/checkbox/base.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsFormCheckboxBaseSignature { - Args: { - value?: string; - }; - Element: HTMLInputElement; -} - -const HdsFormCheckboxBase = - templateOnlyComponent(); - -export default HdsFormCheckboxBase; diff --git a/packages/components/src/components/hds/form/checkbox/field.gts b/packages/components/src/components/hds/form/checkbox/field.gts new file mode 100644 index 00000000000..91e1a661a5b --- /dev/null +++ b/packages/components/src/components/hds/form/checkbox/field.gts @@ -0,0 +1,58 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { hash } from '@ember/helper'; + +import HdsFormField from '../field/index.gts'; +import HdsFormCheckboxBase from './base.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsFormFieldSignature } from '../field/index.gts'; +import type { ComponentLike } from '@glint/template'; +import type { HdsFormLabelSignature } from '../label/index.gts'; +import type { HdsFormHelperTextSignature } from '../helper-text/index.gts'; +import type { HdsFormErrorSignature } from '../error/index.gts'; + +export interface HdsFormCheckboxFieldSignature { + Args: Omit & { + value?: string; + name?: string; + }; + Blocks: { + default: [ + { + Label?: ComponentLike; + HelperText?: ComponentLike; + Error?: ComponentLike; + }, + ]; + }; + Element: HdsFormFieldSignature['Element']; +} + +const HdsFormCheckboxField: TOC = ; + +export default HdsFormCheckboxField; diff --git a/packages/components/src/components/hds/form/checkbox/field.hbs b/packages/components/src/components/hds/form/checkbox/field.hbs deleted file mode 100644 index 025f19d96c8..00000000000 --- a/packages/components/src/components/hds/form/checkbox/field.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Field" component level }} - {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}} - - - - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/checkbox/field.ts b/packages/components/src/components/hds/form/checkbox/field.ts deleted file mode 100644 index 8ed766d9ecc..00000000000 --- a/packages/components/src/components/hds/form/checkbox/field.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; -import type { HdsFormFieldSignature } from '../field'; -import type { ComponentLike } from '@glint/template'; -import type { HdsFormLabelSignature } from '../label'; -import type { HdsFormHelperTextSignature } from '../helper-text'; -import type { HdsFormErrorSignature } from '../error'; - -export interface HdsFormCheckboxFieldSignature { - Args: Omit & { - value?: string; - name?: string; - }; - Blocks: { - default: [ - { - Label?: ComponentLike; - HelperText?: ComponentLike; - Error?: ComponentLike; - }, - ]; - }; - Element: HdsFormFieldSignature['Element']; -} - -const HdsFormCheckboxField = - templateOnlyComponent(); - -export default HdsFormCheckboxField; diff --git a/packages/components/src/components/hds/form/checkbox/group.gts b/packages/components/src/components/hds/form/checkbox/group.gts new file mode 100644 index 00000000000..ad6c805276d --- /dev/null +++ b/packages/components/src/components/hds/form/checkbox/group.gts @@ -0,0 +1,62 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { hash } from '@ember/helper'; + +import HdsFormFieldset from '../fieldset/index.gts'; +import HdsFormCheckboxField from './field.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsFormFieldsetSignature } from '../fieldset/index.gts'; +import type { ComponentLike } from '@glint/template'; +import type { HdsFormLegendSignature } from '../legend/index.gts'; +import type { HdsFormHelperTextSignature } from '../helper-text/index.gts'; +import type { HdsFormCheckboxFieldSignature } from './field.gts'; +import type { HdsFormErrorSignature } from '../error/index.gts'; + +export interface HdsFormCheckboxGroupSignature { + Args: HdsFormFieldsetSignature['Args'] & { + name?: string; + }; + Blocks: { + default: [ + { + Legend?: ComponentLike; + HelperText?: ComponentLike; + CheckboxField?: ComponentLike; + Error?: ComponentLike; + }, + ]; + }; + Element: HdsFormFieldsetSignature['Element']; +} + +const HdsFormCheckboxGroup: TOC = ; + +export default HdsFormCheckboxGroup; diff --git a/packages/components/src/components/hds/form/checkbox/group.hbs b/packages/components/src/components/hds/form/checkbox/group.hbs deleted file mode 100644 index 1858b251b4d..00000000000 --- a/packages/components/src/components/hds/form/checkbox/group.hbs +++ /dev/null @@ -1,21 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }} - {{yield (hash Legend=F.Legend HelperText=F.HelperText Error=F.Error)}} - - {{yield - (hash - CheckboxField=(component - "hds/form/checkbox/field" - contextualClass="hds-form-group__control-field" - isRequired=@isRequired - name=@name - extraAriaDescribedBy=F.ariaDescribedBy - ) - ) - }} - - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/checkbox/group.ts b/packages/components/src/components/hds/form/checkbox/group.ts deleted file mode 100644 index e6a42c6b671..00000000000 --- a/packages/components/src/components/hds/form/checkbox/group.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; -import type { HdsFormFieldsetSignature } from '../fieldset'; -import type { ComponentLike } from '@glint/template'; -import type { HdsFormLegendSignature } from '../legend'; -import type { HdsFormHelperTextSignature } from '../helper-text'; -import type { HdsFormCheckboxFieldSignature } from './field'; -import type { HdsFormErrorSignature } from '../error'; - -export interface HdsFormCheckboxGroupSignature { - Args: HdsFormFieldsetSignature['Args'] & { - name?: string; - }; - Blocks: { - default: [ - { - Legend?: ComponentLike; - HelperText?: ComponentLike; - CheckboxField?: ComponentLike; - Error?: ComponentLike; - }, - ]; - }; - Element: HdsFormFieldsetSignature['Element']; -} - -const HdsFormCheckboxGroup = - templateOnlyComponent(); - -export default HdsFormCheckboxGroup; diff --git a/packages/components/src/components/hds/form/error/index.ts b/packages/components/src/components/hds/form/error/index.gts similarity index 75% rename from packages/components/src/components/hds/form/error/index.ts rename to packages/components/src/components/hds/form/error/index.gts index c6400a1a046..da82cccf3f2 100644 --- a/packages/components/src/components/hds/form/error/index.ts +++ b/packages/components/src/components/hds/form/error/index.gts @@ -4,8 +4,16 @@ */ import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; +import willDestroy from '@ember/render-modifiers/modifiers/will-destroy'; + +import HdsIcon from '../../icon/index.gts'; +import HdsTextBody from '../../text/body.gts'; +import HdsFormErrorMessage from './message.gts'; + import type { ComponentLike } from '@glint/template'; -import type { HdsFormErrorMessageSignature } from './message'; +import type { HdsFormErrorMessageSignature } from './message.gts'; export const ID_PREFIX = 'error-'; @@ -94,4 +102,24 @@ export default class HdsFormError extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/form/error/index.hbs b/packages/components/src/components/hds/form/error/index.hbs deleted file mode 100644 index d00d5fd1657..00000000000 --- a/packages/components/src/components/hds/form/error/index.hbs +++ /dev/null @@ -1,10 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - - - {{yield (hash Message=(component "hds/form/error/message"))}} - -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/form/error/message.gts b/packages/components/src/components/hds/form/error/message.gts new file mode 100644 index 00000000000..4953263de74 --- /dev/null +++ b/packages/components/src/components/hds/form/error/message.gts @@ -0,0 +1,30 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import HdsTextBody from '../../text/body.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { HdsTextBodySignature } from '../../text/body.gts'; + +export interface HdsFormErrorMessageSignature { + Blocks: { + default: []; + }; + Element: HdsTextBodySignature['Element']; +} + +const HdsFormErrorMessage: TOC = ; + +export default HdsFormErrorMessage; diff --git a/packages/components/src/components/hds/form/error/message.hbs b/packages/components/src/components/hds/form/error/message.hbs deleted file mode 100644 index a13888a3747..00000000000 --- a/packages/components/src/components/hds/form/error/message.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{yield}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/error/message.ts b/packages/components/src/components/hds/form/error/message.ts deleted file mode 100644 index 70dad3e1cf1..00000000000 --- a/packages/components/src/components/hds/form/error/message.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -import type { HdsTextBodySignature } from '../../text/body'; - -export interface HdsFormErrorMessageSignature { - Blocks: { - default: []; - }; - Element: HdsTextBodySignature['Element']; -} - -const HdsFormErrorMessage = - templateOnlyComponent(); - -export default HdsFormErrorMessage; diff --git a/packages/components/src/components/hds/form/field/index.ts b/packages/components/src/components/hds/form/field/index.gts similarity index 65% rename from packages/components/src/components/hds/form/field/index.ts rename to packages/components/src/components/hds/form/field/index.gts index 29959f2a401..45424858a0c 100644 --- a/packages/components/src/components/hds/form/field/index.ts +++ b/packages/components/src/components/hds/form/field/index.gts @@ -13,15 +13,21 @@ import { unregisterAriaDescriptionElement, } from '../../../../utils/hds-aria-described-by.ts'; import { HdsFormFieldLayoutValues } from './types.ts'; -import HdsFormLabelComponent from '../label/index.ts'; -import HdsFormHelperTextComponent from '../helper-text/index.ts'; -import HdsFormCharacterCountComponent from '../character-count/index.ts'; -import HdsFormErrorComponent from '../error/index.ts'; +import HdsFormLabelComponent from '../label/index.gts'; +import HdsFormHelperTextComponent from '../helper-text/index.gts'; +import HdsFormCharacterCountComponent from '../character-count/index.gts'; +import HdsFormErrorComponent from '../error/index.gts'; import type { HdsFormFieldLayouts } from './types.ts'; import type { ComponentLike, WithBoundArgs } from '@glint/template'; -import type { HdsYieldSignature } from '../../yield/index.ts'; +import type { HdsYieldSignature } from '../../yield/index.gts'; import type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts'; +import { hash } from '@ember/helper'; +import HdsFormLabel from '../label/index.gts'; +import HdsFormHelperText from '../helper-text/index.gts'; +import HdsYield from '../../yield/index.gts'; +import HdsFormCharacterCount from '../character-count/index.gts'; +import HdsFormError from '../error/index.gts'; export const LAYOUT_TYPES = Object.values(HdsFormFieldLayoutValues); @@ -138,4 +144,59 @@ export default class HdsFormField extends Component { @action removeDescriptor(element: HTMLElement): void { unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element); } + + } diff --git a/packages/components/src/components/hds/form/fieldset/index.ts b/packages/components/src/components/hds/form/fieldset/index.gts similarity index 66% rename from packages/components/src/components/hds/form/fieldset/index.ts rename to packages/components/src/components/hds/form/fieldset/index.gts index f8a7d084208..98b70ece25e 100644 --- a/packages/components/src/components/hds/form/fieldset/index.ts +++ b/packages/components/src/components/hds/form/fieldset/index.gts @@ -5,6 +5,11 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; +import { hash } from '@ember/helper'; + +import HdsFormLegend from '../legend/index.gts'; +import HdsFormHelperText from '../helper-text/index.gts'; +import HdsFormError from '../error/index.gts'; import { getElementId } from '../../../../utils/hds-get-element-id.ts'; import { ariaDescribedBy, @@ -12,14 +17,15 @@ import { unregisterAriaDescriptionElement, } from '../../../../utils/hds-aria-described-by.ts'; import { HdsFormFieldsetLayoutValues } from './types.ts'; -import HdsFormLegendComponent from '../legend/index.ts'; -import HdsFormHelperTextComponent from '../helper-text/index.ts'; -import HdsFormErrorComponent from '../error/index.ts'; +import HdsFormLegendComponent from '../legend/index.gts'; +import HdsFormHelperTextComponent from '../helper-text/index.gts'; +import HdsFormErrorComponent from '../error/index.gts'; import type { ComponentLike, WithBoundArgs } from '@glint/template'; import type { HdsFormFieldsetLayouts } from './types.ts'; -import type { HdsYieldSignature } from '../../yield/index.ts'; +import type { HdsYieldSignature } from '../../yield/index.gts'; import type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts'; +import HdsYield from '../../yield/index.gts'; export const LAYOUT_TYPES: HdsFormFieldsetLayouts[] = Object.values( HdsFormFieldsetLayoutValues @@ -118,4 +124,44 @@ export default class HdsFormFieldset extends Component @action removeDescriptor(element: HTMLElement): void { unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element); } + + } diff --git a/packages/components/src/components/hds/form/fieldset/index.hbs b/packages/components/src/components/hds/form/fieldset/index.hbs deleted file mode 100644 index 2cef0948b4d..00000000000 --- a/packages/components/src/components/hds/form/fieldset/index.hbs +++ /dev/null @@ -1,38 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield - (hash - Legend=(component - "hds/form/legend" isRequired=this.isRequired isOptional=this.isOptional contextualClass="hds-form-group__legend" - ) - ) - }} - {{yield - (hash - HelperText=(component - "hds/form/helper-text" - controlId=this.id - onInsert=this.appendDescriptor - contextualClass="hds-form-group__helper-text" - ) - ) - }} -
    - {{! @glint-expect-error }} - {{yield (hash Control=(component "hds/yield") ariaDescribedBy=this.ariaDescribedBy)}} -
    - {{yield - (hash - Error=(component - "hds/form/error" - controlId=this.id - onInsert=this.appendDescriptor - onRemove=this.removeDescriptor - contextualClass="hds-form-group__error" - ) - ) - }} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/form/file-input/base.gts b/packages/components/src/components/hds/form/file-input/base.gts new file mode 100644 index 00000000000..90fd24ea34d --- /dev/null +++ b/packages/components/src/components/hds/form/file-input/base.gts @@ -0,0 +1,20 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsFormFileInputBaseSignature { + Element: HTMLInputElement; +} + +const HdsFormFileInputBase: TOC = ; + +export default HdsFormFileInputBase; diff --git a/packages/components/src/components/hds/form/file-input/field.gts b/packages/components/src/components/hds/form/file-input/field.gts new file mode 100644 index 00000000000..5899a1c36bd --- /dev/null +++ b/packages/components/src/components/hds/form/file-input/field.gts @@ -0,0 +1,54 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { hash } from '@ember/helper'; + +import HdsFormField from '../field/index.gts'; +import HdsFormFileInputBase from './base.gts'; + +import type { TOC } from '@ember/component/template-only'; +import type { ComponentLike } from '@glint/template'; +import type { HdsFormFieldSignature } from '../field/index.gts'; +import type { HdsFormLabelSignature } from '../label/index.gts'; +import type { HdsFormHelperTextSignature } from '../helper-text/index.gts'; +import type { HdsFormErrorSignature } from '../error/index.gts'; + +export interface HdsFormFileInputFieldSignature { + Args: Omit; + Blocks: { + default: [ + { + Label?: ComponentLike; + HelperText?: ComponentLike; + Error?: ComponentLike; + }, + ]; + }; + Element: HdsFormFieldSignature['Element']; +} + +const HdsFormFileInputField: TOC = ; + +export default HdsFormFileInputField; diff --git a/packages/components/src/components/hds/form/file-input/field.hbs b/packages/components/src/components/hds/form/file-input/field.hbs deleted file mode 100644 index ce775f8171b..00000000000 --- a/packages/components/src/components/hds/form/file-input/field.hbs +++ /dev/null @@ -1,23 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }} - {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}} - - - - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/file-input/field.ts b/packages/components/src/components/hds/form/file-input/field.ts deleted file mode 100644 index 0f4062f0bfd..00000000000 --- a/packages/components/src/components/hds/form/file-input/field.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; -import type { ComponentLike } from '@glint/template'; -import type { HdsFormFieldSignature } from '../field'; -import type { HdsFormLabelSignature } from '../label'; -import type { HdsFormHelperTextSignature } from '../helper-text'; -import type { HdsFormErrorSignature } from '../error'; - -export interface HdsFormFileInputFieldSignature { - Args: Omit; - Blocks: { - default: [ - { - Label?: ComponentLike; - HelperText?: ComponentLike; - Error?: ComponentLike; - }, - ]; - }; - Element: HdsFormFieldSignature['Element']; -} - -const HdsFormFileInputField = - templateOnlyComponent(); - -export default HdsFormFileInputField; diff --git a/packages/components/src/components/hds/form/helper-text/index.ts b/packages/components/src/components/hds/form/helper-text/index.gts similarity index 82% rename from packages/components/src/components/hds/form/helper-text/index.ts rename to packages/components/src/components/hds/form/helper-text/index.gts index 295a04ebfcc..0e51ce8d0f3 100644 --- a/packages/components/src/components/hds/form/helper-text/index.ts +++ b/packages/components/src/components/hds/form/helper-text/index.gts @@ -4,7 +4,11 @@ */ import Component from '@glimmer/component'; -import type { HdsTextBodySignature } from '../../text/body'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; + +import HdsTextBody from '../../text/body.gts'; + +import type { HdsTextBodySignature } from '../../text/body.gts'; export const ID_PREFIX = 'helper-text-'; @@ -71,4 +75,18 @@ export default class HdsFormHelperText extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/form/helper-text/index.hbs b/packages/components/src/components/hds/form/helper-text/index.hbs deleted file mode 100644 index a20c74000d9..00000000000 --- a/packages/components/src/components/hds/form/helper-text/index.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - {{yield}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/form/indicator/index.ts b/packages/components/src/components/hds/form/indicator/index.gts similarity index 55% rename from packages/components/src/components/hds/form/indicator/index.ts rename to packages/components/src/components/hds/form/indicator/index.gts index f8904c79fb9..70f271d3b1c 100644 --- a/packages/components/src/components/hds/form/indicator/index.ts +++ b/packages/components/src/components/hds/form/indicator/index.gts @@ -4,8 +4,12 @@ */ import Component from '@glimmer/component'; -import type { HdsTextBodySignature } from '../../text/body'; -import type { HdsBadgeSignature } from '../../badge'; + +import HdsTextBody from '../../text/body.gts'; +import HdsBadge from '../../badge/index.gts'; + +import type { HdsTextBodySignature } from '../../text/body.gts'; +import type { HdsBadgeSignature } from '../../badge/index.gts'; export interface HdsFormIndicatorSignature { Args: { @@ -31,4 +35,24 @@ export default class HdsFormIndicator extends Component + {{#if @isOptional}} + (Optional) + {{/if}} + {{#if @isRequired}} +