diff --git a/.changeset/two-bugs-send.md b/.changeset/two-bugs-send.md new file mode 100644 index 00000000000..c58c05a8a4f --- /dev/null +++ b/.changeset/two-bugs-send.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-components": patch +--- + +SFC but also placeholder changelog 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/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 400dc061324..406302b3fb4 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 HdsAppHeaderMenuButton } from './components/hds/app-header/menu-button.ts'; +export { default as HdsAppHeaderHomeLink } from './components/hds/app-header/home-link.gts'; +export { default as HdsAppHeader } from './components/hds/app-header/index.gts'; +export { default as HdsAppHeaderMenuButton } from './components/hds/app-header/menu-button.gts'; // 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 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 HdsAppSideNav } from './components/hds/app-side-nav/index.gts'; +export { default as HdsAppSideNavListBackLink } from './components/hds/app-side-nav/list/back-link.gts'; +export { default as HdsAppSideNavList } from './components/hds/app-side-nav/list/index.gts'; +export { default as HdsAppSideNavListItem } from './components/hds/app-side-nav/list/item.gts'; +export { default as HdsAppSideNavListLink } from './components/hds/app-side-nav/list/link.gts'; +export { default as HdsAppSideNavListTitle } from './components/hds/app-side-nav/list/title.gts'; +export { default as HdsAppSideNavPortal } from './components/hds/app-side-nav/portal/index.gts'; +export { default as HdsAppSideNavPortalTarget } from './components/hds/app-side-nav/portal/target.gts'; +export { default as HdsAppSideNavToggleButton } from './components/hds/app-side-nav/toggle-button.gts'; // 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 HdsBreadcrumbItem } from './components/hds/breadcrumb/item.ts'; -export { default as HdsBreadcrumbTruncation } from './components/hds/breadcrumb/truncation.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.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 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 HdsFormSectionHeader } from './components/hds/form/section/header.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 { default as HdsFormFooter } from './components/hds/form/footer/index.gts'; +export { default as HdsFormHeaderDescription } from './components/hds/form/header/description.gts'; +export { default as HdsFormHeader } from './components/hds/form/header/index.gts'; +export { default as HdsFormHeaderTitle } from './components/hds/form/header/title.gts'; +export { default as HdsForm } from './components/hds/form/index.gts'; +export { default as HdsFormSectionHeader } from './components/hds/form/section/header.gts'; +export { default as HdsFormSection } from './components/hds/form/section/index.gts'; +export { default as HdsFormSectionMultiFieldGroup } from './components/hds/form/section/multi-field-group/index.gts'; +export { default as HdsFormSectionMultiFieldGroupItem } from './components/hds/form/section/multi-field-group/item.gts'; +export { default as HdsFormSeparator } from './components/hds/form/separator/index.gts'; 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 HdsFormKeyValueInputsAddRowButton } from './components/hds/form/key-value-inputs/add-row-button.gts'; +export { default as HdsFormKeyValueInputsDeleteRowButton } from './components/hds/form/key-value-inputs/delete-row-button.gts'; +export { default as HdsFormKeyValueInputsField } from './components/hds/form/key-value-inputs/field.gts'; +export { default as HdsFormKeyValueInputsGeneric } from './components/hds/form/key-value-inputs/generic.gts'; +export { default as HdsFormKeyValueInputs } from './components/hds/form/key-value-inputs/index.gts'; // 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.ts'; +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,21 +345,21 @@ 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'; -export { default as HdsLayoutFlexItem } from './components/hds/layout/flex/item.ts'; +export { default as HdsLayoutFlex } from './components/hds/layout/flex/index.gts'; +export { default as HdsLayoutFlexItem } from './components/hds/layout/flex/item.gts'; export * from './components/hds/layout/flex/types.ts'; // Layout > Grid -export { default as HdsLayoutGrid } from './components/hds/layout/grid/index.ts'; -export { default as HdsLayoutGridItem } from './components/hds/layout/grid/item.ts'; +export { default as HdsLayoutGrid } from './components/hds/layout/grid/index.gts'; +export { default as HdsLayoutGridItem } from './components/hds/layout/grid/item.gts'; // we're being explicit with exports here as AvailableTagNames and AvailableElements are overlapping the Flex exports export { HdsLayoutGridAlignValues, @@ -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.ts'; +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..44c5c702b83 100644 --- a/packages/components/src/components/hds/accordion/index.ts +++ b/packages/components/src/components/hds/accordion/index.gts @@ -3,19 +3,25 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import { hash } from '@ember/helper'; +import Component from '@glimmer/component'; -import { SIZES, DEFAULT_SIZE, TYPES, DEFAULT_TYPE } from './item/index.ts'; +import HdsAccordionItem, { + DEFAULT_SIZE, + DEFAULT_TYPE, + SIZES, + TYPES, +} from './item/index.gts'; +import { HdsAccordionItemTitleTagValues } from './types.ts'; import type { ComponentLike } from '@glint/template'; -import { HdsAccordionItemTitleTagValues } from './types.ts'; -import type { HdsAccordionItemSignature } from './item/index.ts'; +import type { HdsAccordionItemSignature } from './item/index.gts'; import type { HdsAccordionForceStates, + HdsAccordionItemTitleTags, HdsAccordionSizes, HdsAccordionTypes, - HdsAccordionItemTitleTags, } from './types.ts'; export interface HdsAccordionSignature { @@ -96,4 +102,20 @@ export default class HdsAccordion extends Component { 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 72% rename from packages/components/src/components/hds/accordion/item/index.ts rename to packages/components/src/components/hds/accordion/item/index.gts index eed81836b8e..a49e1ea8254 100644 --- a/packages/components/src/components/hds/accordion/item/index.ts +++ b/packages/components/src/components/hds/accordion/item/index.gts @@ -3,21 +3,26 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import { hash } from '@ember/helper'; import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; +import { eq, or } from 'ember-truth-helpers'; -import { - HdsAccordionSizeValues, - HdsAccordionTypeValues, - HdsAccordionItemTitleTagValues, -} from '../types.ts'; +import HdsDisclosurePrimitive from '../../disclosure-primitive/index.gts'; +import HdsTextBody from '../../text/body.gts'; import type { HdsAccordionForceStates, + HdsAccordionItemTitleTags, HdsAccordionSizes, HdsAccordionTypes, - HdsAccordionItemTitleTags, } from '../types.ts'; +import { + HdsAccordionItemTitleTagValues, + HdsAccordionSizeValues, + HdsAccordionTypeValues, +} from '../types.ts'; +import HdsAccordionItemButton from './button.gts'; export const SIZES: HdsAccordionSizes[] = Object.values(HdsAccordionSizeValues); export const DEFAULT_SIZE = HdsAccordionSizeValues.Medium; @@ -163,4 +168,50 @@ export default class HdsAccordionItem extends Component + + <:toggle as |t|> +
+ + + + {{yield to="toggle"}} + +
+ + + <:content as |c|> + + {{yield (hash close=c.close) to="content"}} + + + + } diff --git a/packages/components/src/components/hds/accordion/item/index.hbs b/packages/components/src/components/hds/accordion/item/index.hbs deleted file mode 100644 index 6deaac27611..00000000000 --- a/packages/components/src/components/hds/accordion/item/index.hbs +++ /dev/null @@ -1,42 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - <:toggle as |t|> -
- - - - {{yield to="toggle"}} - -
- - - <:content as |c|> - - {{yield (hash close=c.close) to="content"}} - - - \ No newline at end of file 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 68% rename from packages/components/src/components/hds/advanced-table/index.ts rename to packages/components/src/components/hds/advanced-table/index.gts index a3435882c29..b67a44f6baf 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,30 @@ import { HdsAdvancedTableDensityValues, HdsAdvancedTableVerticalAlignmentValues, } from './types.ts'; + +import { fn, hash } from '@ember/helper'; +import type Owner from '@ember/owner'; +import didUpdate from '@ember/render-modifiers/modifiers/did-update'; +import style from 'ember-style-modifier'; +import { eq } from 'ember-truth-helpers'; +import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.ts'; +import HdsAdvancedTableExpandableTrGroup from './expandable-tr-group.gts'; +import type HdsAdvancedTableColumnType from './models/column.ts'; +import HdsAdvancedTableTd from './td.gts'; +import HdsAdvancedTableThSort from './th-sort.gts'; +import HdsAdvancedTableTh from './th.gts'; +import HdsAdvancedTableTr from './tr.gts'; 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 @@ -687,4 +694,231 @@ export default class HdsAdvancedTable extends Component +
+ {{! Caption }} +
+ {{@caption}} + {{this.sortedMessageText}} +
+ + {{! Grid }} +
+ {{! Header }} +
+ + {{#each this._tableModel.columns as |column|}} + {{#if column.isSortable}} + + {{column.label}} + + {{else}} + + {{column.label}} + + {{/if}} + {{/each}} + +
+ + {{! Body }} +
+ {{! ---------------------------------------------------------------------------------------- + IMPORTANT: we loop on the model array and for each record + we yield the Tr/Td/Th elements _and_ the record itself as data + this means the consumer will *have to* use the data key to access it in their template + -------------------------------------------------------------------------------------------- }} + {{#each + this._tableModel.sortedRows key=this.identityKey + as |record index| + }} + {{#if this._tableModel.hasRowsWithChildren}} + + {{yield + (hash + Tr=(component + HdsAdvancedTableTr + isLastRow=(eq + this._tableModel.lastVisibleRow.id T.data.id + ) + isParentRow=T.isExpandable + depth=T.depth + displayRow=T.shouldDisplayChildRows + ) + Th=(component + HdsAdvancedTableTh + depth=T.depth + isExpandable=T.isExpandable + isExpanded=T.isExpanded + newLabel=T.id + parentId=T.parentId + scope="row" + onClickToggle=T.onClickToggle + ) + Td=(component HdsAdvancedTableTd align=@align) + data=T.data + isOpen=T.isExpanded + rowIndex=T.rowIndex + ) + to="body" + }} + + {{else}} + {{yield + (hash + Tr=(component + HdsAdvancedTableTr + selectionScope="row" + isLastRow=(eq this._tableModel.lastVisibleRow.id record.id) + isSelectable=this.isSelectable + onSelectionChange=this.onSelectionRowChange + didInsert=this.didInsertRowCheckbox + willDestroy=this.willDestroyRowCheckbox + selectionAriaLabelSuffix=@selectionAriaLabelSuffix + hasStickyColumn=this.hasStickyFirstColumn + isStickyColumnPinned=this.isStickyColumnPinned + ) + Th=(component + HdsAdvancedTableTh + scope="row" + isStickyColumn=this.hasStickyFirstColumn + isStickyColumnPinned=this.isStickyColumnPinned + ) + Td=(component HdsAdvancedTableTd align=@align) + data=record + rowIndex=index + ) + to="body" + }} + {{/if}} + {{/each}} +
+
+ + {{#if this.showScrollIndicatorLeft}} +
+ {{/if}} + + {{#if this.showScrollIndicatorRight}} +
+ {{/if}} + + {{#if this.showScrollIndicatorTop}} +
+ {{/if}} + + {{#if this.showScrollIndicatorBottom}} +
+ {{/if}} +
+ } diff --git a/packages/components/src/components/hds/advanced-table/index.hbs b/packages/components/src/components/hds/advanced-table/index.hbs deleted file mode 100644 index 03be21112e2..00000000000 --- a/packages/components/src/components/hds/advanced-table/index.hbs +++ /dev/null @@ -1,188 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
- {{! Caption }} -
- {{@caption}} - {{this.sortedMessageText}} -
- - {{! Grid }} -
- {{! Header }} -
- - {{#each this._tableModel.columns as |column|}} - {{#if column.isSortable}} - - {{column.label}} - - {{else}} - - {{column.label}} - - {{/if}} - {{/each}} - -
- - {{! Body }} -
- {{! ---------------------------------------------------------------------------------------- - IMPORTANT: we loop on the `model` array and for each record - we yield the Tr/Td/Th elements _and_ the record itself as `data` - this means the consumer will *have to* use the `data` key to access it in their template - -------------------------------------------------------------------------------------------- }} - {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}} - {{#if this._tableModel.hasRowsWithChildren}} - - {{yield - (hash - Tr=(component - "hds/advanced-table/tr" - isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id) - isParentRow=T.isExpandable - depth=T.depth - displayRow=T.shouldDisplayChildRows - ) - Th=(component - "hds/advanced-table/th" - depth=T.depth - isExpandable=T.isExpandable - isExpanded=T.isExpanded - newLabel=T.id - parentId=T.parentId - scope="row" - onClickToggle=T.onClickToggle - ) - Td=(component "hds/advanced-table/td" align=@align) - data=T.data - isOpen=T.isExpanded - rowIndex=T.rowIndex - ) - to="body" - }} - - {{else}} - {{yield - (hash - Tr=(component - "hds/advanced-table/tr" - selectionScope="row" - isLastRow=(eq this._tableModel.lastVisibleRow.id record.id) - isSelectable=this.isSelectable - onSelectionChange=this.onSelectionRowChange - didInsert=this.didInsertRowCheckbox - willDestroy=this.willDestroyRowCheckbox - selectionAriaLabelSuffix=@selectionAriaLabelSuffix - hasStickyColumn=this.hasStickyFirstColumn - isStickyColumnPinned=this.isStickyColumnPinned - ) - Th=(component - "hds/advanced-table/th" - scope="row" - isStickyColumn=this.hasStickyFirstColumn - isStickyColumnPinned=this.isStickyColumnPinned - ) - Td=(component "hds/advanced-table/td" align=@align) - data=record - rowIndex=index - ) - to="body" - }} - {{/if}} - {{/each}} -
-
- - {{#if this.showScrollIndicatorLeft}} -
- {{/if}} - - {{#if this.showScrollIndicatorRight}} -
- {{/if}} - - {{#if this.showScrollIndicatorTop}} -
- {{/if}} - - {{#if this.showScrollIndicatorBottom}} -
- {{/if}} -
\ No newline at end of file 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 62% 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..6a0525beac8 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 @@ -3,15 +3,19 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { guidFor } from '@ember/object/internals'; +import { on } from '@ember/modifier'; import { action } from '@ember/object'; +import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; +import hdsT from '../../../helpers/hds-t.ts'; +import HdsIcon from '../icon/index.gts'; +import type { HdsAdvancedTableThSortExpandIcons } from './types.ts'; import { HdsAdvancedTableThExpandIconValues, type HdsAdvancedTableExpandState, } from './types.ts'; -import type { HdsAdvancedTableThSortExpandIcons } from './types.ts'; + export interface HdsAdvancedTableThButtonExpandSignature { Args: { labelId?: string; @@ -61,4 +65,30 @@ 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-expand.hbs b/packages/components/src/components/hds/advanced-table/th-button-expand.hbs deleted file mode 100644 index d5472da3b8f..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-button-expand.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! 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 }} - \ No newline at end of file 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 75% 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..2145f1f2034 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 @@ -3,19 +3,24 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; +import hdsT from '../../../helpers/hds-t.ts'; +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 +82,26 @@ export default class HdsAdvancedTableThButtonSort extends Component + + } diff --git a/packages/components/src/components/hds/advanced-table/th-button-sort.hbs b/packages/components/src/components/hds/advanced-table/th-button-sort.hbs deleted file mode 100644 index d5b1e131eb9..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-button-sort.hbs +++ /dev/null @@ -1,20 +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/advanced-table/th-button-tooltip.ts b/packages/components/src/components/hds/advanced-table/th-button-tooltip.gts similarity index 59% 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..a4e773a52f0 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 @@ -3,9 +3,13 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; + +import hdsT from '../../../helpers/hds-t.ts'; +import hdsTooltip from '../../../modifiers/hds-tooltip.ts'; +import HdsIcon from '../icon/index.gts'; export interface HdsAdvancedTableThButtonTooltipSignature { Args: { @@ -35,4 +39,25 @@ export default class HdsAdvancedTableThButtonTooltip extends Component + + } diff --git a/packages/components/src/components/hds/advanced-table/th-button-tooltip.hbs b/packages/components/src/components/hds/advanced-table/th-button-tooltip.hbs deleted file mode 100644 index 7eef052881f..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-button-tooltip.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/advanced-table/th-context-menu.ts b/packages/components/src/components/hds/advanced-table/th-context-menu.gts similarity index 82% rename from packages/components/src/components/hds/advanced-table/th-context-menu.ts rename to packages/components/src/components/hds/advanced-table/th-context-menu.gts index 7d1da4dfa69..e548da8299c 100644 --- a/packages/components/src/components/hds/advanced-table/th-context-menu.ts +++ b/packages/components/src/components/hds/advanced-table/th-context-menu.gts @@ -3,17 +3,20 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { action } from '@ember/object'; import { service } from '@ember/service'; +import Component from '@glimmer/component'; -import type HdsAdvancedTableColumn from './models/column.ts'; +import { fn } from '@ember/helper'; +import { on } from '@ember/modifier'; +import { tracked } from '@glimmer/tracking'; +import type HdsIntlService from '../../../services/hds-intl.ts'; +import HdsDropdown from '../dropdown/index.gts'; import type { HdsDropdownSignature } from '../dropdown/index.ts'; import type { HdsDropdownToggleIconSignature } from '../dropdown/toggle/icon.ts'; import type { HdsAdvancedTableSignature } from './index.ts'; -import { tracked } from '@glimmer/tracking'; -import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts'; -import type HdsIntlService from '../../../services/hds-intl.ts'; +import type HdsAdvancedTableColumn from './models/column.ts'; +import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.gts'; interface HdsAdvancedTableThContextMenuOption { key: string; @@ -136,4 +139,31 @@ export default class HdsAdvancedTableThContextMenu extends Component + + + + {{#each this._options as |option|}} + + {{option.label}} + + {{/each}} + + } diff --git a/packages/components/src/components/hds/advanced-table/th-context-menu.hbs b/packages/components/src/components/hds/advanced-table/th-context-menu.hbs deleted file mode 100644 index 6f9746e1b64..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-context-menu.hbs +++ /dev/null @@ -1,22 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - - {{#each this._options as |option|}} - - {{option.label}} - - {{/each}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/advanced-table/th-resize-handle.ts b/packages/components/src/components/hds/advanced-table/th-resize-handle.gts similarity index 90% rename from packages/components/src/components/hds/advanced-table/th-resize-handle.ts rename to packages/components/src/components/hds/advanced-table/th-resize-handle.gts index 5d6d9ff0387..10ea26d100f 100644 --- a/packages/components/src/components/hds/advanced-table/th-resize-handle.ts +++ b/packages/components/src/components/hds/advanced-table/th-resize-handle.gts @@ -3,13 +3,19 @@ * SPDX-License-Identifier: MPL-2.0 */ +import { action } from '@ember/object'; import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; import { modifier } from 'ember-modifier'; -import type HdsAdvancedTableColumn from './models/column.ts'; +import { concat } from '@ember/helper'; +import { on } from '@ember/modifier'; +import style from 'ember-style-modifier'; +import { or } from 'ember-truth-helpers'; +import hdsT from '../../../helpers/hds-t.ts'; import type { HdsAdvancedTableSignature } from './index.ts'; +import type HdsAdvancedTableColumn from './models/column.ts'; +import type Owner from '@ember/owner'; const TABLE_BORDER_WIDTH = 1; const KEYBOARD_RESIZE_STEP = 10; @@ -87,7 +93,7 @@ export default class HdsAdvancedTableThResizeHandle extends Component + {{! template-lint-disable no-pointer-down-event-binding }} +
+ } diff --git a/packages/components/src/components/hds/advanced-table/th-resize-handle.hbs b/packages/components/src/components/hds/advanced-table/th-resize-handle.hbs deleted file mode 100644 index c9509da6f7a..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-resize-handle.hbs +++ /dev/null @@ -1,26 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -{{! template-lint-disable no-pointer-down-event-binding }} -
\ No newline at end of file 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 72% 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..d7409681bf4 100644 --- a/packages/components/src/components/hds/advanced-table/th-selectable.ts +++ b/packages/components/src/components/hds/advanced-table/th-selectable.gts @@ -3,23 +3,28 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; import { action } from '@ember/object'; import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { modifier } from 'ember-modifier'; +import HdsFormCheckboxBase from '../form/checkbox/base.gts'; +import HdsAdvancedTableThButtonSort from './th-button-sort.gts'; +import HdsAdvancedTableTh from './th.gts'; import { - HdsAdvancedTableThSortOrderValues, HdsAdvancedTableThSortOrderLabelValues, + HdsAdvancedTableThSortOrderValues, } from './types.ts'; -import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base'; + +import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base.gts'; +import type { HdsAdvancedTableThSignature } from './th.gts'; import type { HdsAdvancedTableScope, HdsAdvancedTableThSortOrder, HdsAdvancedTableThSortOrderLabels, } from './types.ts'; -import type { HdsAdvancedTableThSignature } from './th.ts'; export interface HdsAdvancedTableThSelectableSignature { Args: { @@ -97,4 +102,33 @@ export default class HdsAdvancedTableThSelectable extends Component + +
+ + {{#if this.isSortable}} + + {{/if}} +
+ + } diff --git a/packages/components/src/components/hds/advanced-table/th-selectable.hbs b/packages/components/src/components/hds/advanced-table/th-selectable.hbs deleted file mode 100644 index fcc89bff955..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-selectable.hbs +++ /dev/null @@ -1,31 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - -
- - {{#if this.isSortable}} - - {{/if}} -
- \ No newline at end of file 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 60% 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..ceb3427bf38 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,41 @@ * 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'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; +import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts'; import { HdsAdvancedTableHorizontalAlignmentValues, - HdsAdvancedTableThSortOrderValues, HdsAdvancedTableThSortOrderLabelValues, + HdsAdvancedTableThSortOrderValues, } from './types.ts'; + +import { hash } from '@ember/helper'; +import { and, not } from 'ember-truth-helpers'; +import hdsAdvancedTableCell from '../../../modifiers/hds-advanced-table-cell.ts'; +import HdsLayoutFlex from '../layout/flex/index.gts'; +import type { HdsAdvancedTableSignature } from './index.ts'; +import type { HdsAdvancedTableThButtonSortSignature } from './th-button-sort.gts'; +import HdsAdvancedTableThButtonSort from './th-button-sort.gts'; +import HdsAdvancedTableThButtonTooltip from './th-button-tooltip.gts'; +import HdsAdvancedTableThContextMenu from './th-context-menu.gts'; +import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.gts'; +import HdsAdvancedTableThResizeHandle from './th-resize-handle.gts'; +import type { HdsAdvancedTableThSignature } from './th.gts'; 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 @@ -148,4 +159,81 @@ export default class HdsAdvancedTableThSort extends Component +
+ +
+ + {{yield}} + + + {{#if @tooltip}} + + {{/if}} +
+ + + + + {{#if @column}} + {{#if this.showContextMenu}} + + {{/if}} + + {{#if (and @hasResizableColumns (not @column.isLast))}} + + {{/if}} + {{/if}} + + +
+ } diff --git a/packages/components/src/components/hds/advanced-table/th-sort.hbs b/packages/components/src/components/hds/advanced-table/th-sort.hbs deleted file mode 100644 index 9628869a41d..00000000000 --- a/packages/components/src/components/hds/advanced-table/th-sort.hbs +++ /dev/null @@ -1,70 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
- -
- - {{yield}} - - - {{#if @tooltip}} - - {{/if}} -
- - - - - {{#if @column}} - {{#if this.showContextMenu}} - - {{/if}} - - {{#if (and @hasResizableColumns (not @column.isLast))}} - - {{/if}} - {{/if}} - - -
\ No newline at end of file diff --git a/packages/components/src/components/hds/advanced-table/th.ts b/packages/components/src/components/hds/advanced-table/th.gts similarity index 56% rename from packages/components/src/components/hds/advanced-table/th.ts rename to packages/components/src/components/hds/advanced-table/th.gts index eebd3d5236d..a79ff6e374f 100644 --- a/packages/components/src/components/hds/advanced-table/th.ts +++ b/packages/components/src/components/hds/advanced-table/th.gts @@ -3,25 +3,36 @@ * 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'; +// @ts-expect-error: missing types +import focusTrap from 'ember-focus-trap/modifiers/focus-trap'; import { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts'; +import HdsAdvancedTableColumn from './models/column.ts'; import { HdsAdvancedTableHorizontalAlignmentValues } from './types.ts'; +import { hash } from '@ember/helper'; import type Owner from '@ember/owner'; +import style from 'ember-style-modifier'; +import { and, not } from 'ember-truth-helpers'; +import hdsAdvancedTableCell from '../../../modifiers/hds-advanced-table-cell.ts'; +import HdsLayoutFlex from '../layout/flex/index.gts'; +import type { HdsAdvancedTableSignature } from './index.ts'; +import HdsAdvancedTableThButtonExpand from './th-button-expand.gts'; +import HdsAdvancedTableThButtonTooltip from './th-button-tooltip.gts'; +import HdsAdvancedTableThContextMenu from './th-context-menu.gts'; +import type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.gts'; +import HdsAdvancedTableThResizeHandle from './th-resize-handle.gts'; 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 @@ -103,7 +114,7 @@ export default class HdsAdvancedTableTh extends Component +
+ + {{#if @column.isVisuallyHidden}} + {{yield}} + {{else}} + {{#if @tooltip}} + {{#if @isExpandable}} + + {{/if}} +
+ + {{yield}} + + +
+ {{else}} + {{#if @isExpandable}} + + {{/if}} +
+ {{yield}} +
+ {{/if}} + {{/if}} + + {{#if @column}} + {{#if this.showContextMenu}} + + {{/if}} + + {{#if (and @hasResizableColumns (not @column.isLast))}} + + {{/if}} + {{/if}} + +
+ } diff --git a/packages/components/src/components/hds/advanced-table/th.hbs b/packages/components/src/components/hds/advanced-table/th.hbs deleted file mode 100644 index 83f3599e885..00000000000 --- a/packages/components/src/components/hds/advanced-table/th.hbs +++ /dev/null @@ -1,91 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
- - {{#if @column.isVisuallyHidden}} - {{yield}} - {{else}} - {{#if @tooltip}} - {{#if @isExpandable}} - - {{/if}} -
- - {{yield}} - - -
- {{else}} - {{#if @isExpandable}} - - {{/if}} -
- {{yield}} -
- {{/if}} - {{/if}} - - {{#if @column}} - {{#if this.showContextMenu}} - - {{/if}} - - {{#if (and @hasResizableColumns (not @column.isLast))}} - - {{/if}} - {{/if}} - -
\ No newline at end of file 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 51% rename from packages/components/src/components/hds/app-footer/copyright.ts rename to packages/components/src/components/hds/app-footer/copyright.gts index 1ffae1dffad..c40ab106445 100644 --- a/packages/components/src/components/hds/app-footer/copyright.ts +++ b/packages/components/src/components/hds/app-footer/copyright.gts @@ -3,7 +3,11 @@ * SPDX-License-Identifier: MPL-2.0 */ +import { concat } from '@ember/helper'; import Component from '@glimmer/component'; +import hdsT from '../../../helpers/hds-t.ts'; +import HdsIcon from '../icon/index.gts'; +import HdsTextBody from '../text/body.gts'; export interface HdsAppFooterCopyrightSignature { Args: { @@ -22,4 +26,17 @@ export default class HdsAppFooterCopyright extends Component +
+ + + {{hdsT + "hds.components.app-footer.copyright.copyright-text" + default=(concat "© " this.year " HashiCorp") + year=this.year + }} + +
+ } diff --git a/packages/components/src/components/hds/app-footer/copyright.hbs b/packages/components/src/components/hds/app-footer/copyright.hbs deleted file mode 100644 index 5b54911d90e..00000000000 --- a/packages/components/src/components/hds/app-footer/copyright.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
- - - {{hds-t - "hds.components.app-footer.copyright.copyright-text" - default=(concat "© " this.year " HashiCorp") - year=this.year - }} - -
\ No newline at end of file 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 58% 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..484d6e310f7 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,9 @@ */ import Component from '@glimmer/component'; +import hdsT from '../../../helpers/hds-t.ts'; +import HdsAppFooterItem from './item.gts'; +import HdsAppFooterLink from './link.gts'; export interface HdsAppFooterLegalLinksSignature { Args: { @@ -76,4 +79,42 @@ export default class HdsAppFooterLegalLinks extends Component + +
      + + {{hdsT + "hds.components.app-footer.legal-links.support" + default="Support" + }} + + + {{hdsT "hds.components.app-footer.legal-links.terms" default="Terms"}} + + + {{hdsT + "hds.components.app-footer.legal-links.privacy" + default="Privacy" + }} + + + {{hdsT + "hds.components.app-footer.legal-links.security" + default="Security" + }} + + + {{hdsT + "hds.components.app-footer.legal-links.accessibility" + default="Accessibility" + }} + +
    +     + } diff --git a/packages/components/src/components/hds/app-footer/legal-links.hbs b/packages/components/src/components/hds/app-footer/legal-links.hbs deleted file mode 100644 index 5023e1efe59..00000000000 --- a/packages/components/src/components/hds/app-footer/legal-links.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - -
      - - {{hds-t "hds.components.app-footer.legal-links.support" default="Support"}} - - - {{hds-t "hds.components.app-footer.legal-links.terms" default="Terms"}} - - - {{hds-t "hds.components.app-footer.legal-links.privacy" default="Privacy"}} - - - {{hds-t "hds.components.app-footer.legal-links.security" default="Security"}} - - - {{hds-t "hds.components.app-footer.legal-links.accessibility" default="Accessibility"}} - -
    -     \ No newline at end of file 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 b650035a10c..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/'; -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 78% 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 266d7c76a7b..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 type { SafeString } from '@ember/template'; -import type { HdsInteractiveSignature } from '../interactive/'; +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 { HdsAppFooterStatusTypes } from './types.ts'; -import type { HdsAppFooterLinkSignature } from './link.ts'; -import type { HdsIconSignature } from '../icon'; + +import type { SafeString } from '@ember/template'; import type Owner from '@ember/owner'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; +import type { HdsAppFooterStatusTypes } from './types.ts'; +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.gts b/packages/components/src/components/hds/app-header/home-link.gts new file mode 100644 index 00000000000..7bfde59f765 --- /dev/null +++ b/packages/components/src/components/hds/app-header/home-link.gts @@ -0,0 +1,78 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { assert } from '@ember/debug'; +import Component from '@glimmer/component'; + +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; +import HdsIcon from '../icon/index.gts'; +import HdsInteractive from '../interactive/index.gts'; + +import type { HdsIconSignature } from '../icon'; +import type { HdsInteractiveSignature } from '../interactive/index.gts'; +import HdsTextDisplay from '../text/display.gts'; + +export interface HdsAppHeaderHomeLinkSignature { + Args: HdsInteractiveSignature['Args'] & { + icon: HdsIconSignature['Args']['name']; + isIconOnly?: boolean; + color?: string; + text: string; + }; + Element: HdsInteractiveSignature['Element']; +} + +export default class HdsAppHeaderHomeLink extends Component { + get text(): string { + const { text } = this.args; + + assert( + '@text for "Hds::AppHeader::HomeLink" must have a valid value', + text !== undefined + ); + + return text; + } + + get icon(): HdsIconSignature['Args']['name'] { + const { icon } = this.args; + + assert( + '@icon name for "Hds::AppHeader::HomeLink" must be provided', + icon !== undefined + ); + + return icon; + } + + get isIconOnly(): boolean { + return this.args.isIconOnly ?? true; + } + + +} diff --git a/packages/components/src/components/hds/app-header/home-link.hbs b/packages/components/src/components/hds/app-header/home-link.hbs deleted file mode 100644 index 9521f6f6b45..00000000000 --- a/packages/components/src/components/hds/app-header/home-link.hbs +++ /dev/null @@ -1,23 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - - {{#unless this.isIconOnly}} - {{this.text}} - {{/unless}} - \ No newline at end of file diff --git a/packages/components/src/components/hds/app-header/home-link.ts b/packages/components/src/components/hds/app-header/home-link.ts deleted file mode 100644 index bb53d175014..00000000000 --- a/packages/components/src/components/hds/app-header/home-link.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { assert } from '@ember/debug'; - -import type { HdsIconSignature } from '../icon'; -import type { HdsInteractiveSignature } from '../interactive/'; - -export interface HdsAppHeaderHomeLinkSignature { - Args: HdsInteractiveSignature['Args'] & { - icon: HdsIconSignature['Args']['name']; - isIconOnly?: boolean; - color?: string; - text: string; - }; - Element: HdsInteractiveSignature['Element']; -} - -export default class HdsAppHeaderHomeLink extends Component { - get text(): string { - const { text } = this.args; - - assert( - '@text for "Hds::AppHeader::HomeLink" must have a valid value', - text !== undefined - ); - - return text; - } - - get icon(): HdsIconSignature['Args']['name'] { - const { icon } = this.args; - - assert( - '@icon name for "Hds::AppHeader::HomeLink" must be provided', - icon !== undefined - ); - - return icon; - } - - get isIconOnly(): boolean { - return this.args.isIconOnly ?? true; - } -} diff --git a/packages/components/src/components/hds/app-header/index.ts b/packages/components/src/components/hds/app-header/index.gts similarity index 73% rename from packages/components/src/components/hds/app-header/index.ts rename to packages/components/src/components/hds/app-header/index.gts index d590dceb6e9..e91effe715e 100644 --- a/packages/components/src/components/hds/app-header/index.ts +++ b/packages/components/src/components/hds/app-header/index.gts @@ -3,13 +3,21 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; +import { registerDestructor } from '@ember/destroyable'; import { action } from '@ember/object'; import { guidFor } from '@ember/object/internals'; +import Component from '@glimmer/component'; 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 type Owner from '@ember/owner'; +import HdsAppHeaderMenuButton from './menu-button.gts'; +import { hash } from '@ember/helper'; import { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts'; export interface HdsAppHeaderSignature { @@ -147,4 +155,42 @@ export default class HdsAppHeader extends Component { this._isOpen = false; } } + + } diff --git a/packages/components/src/components/hds/app-header/index.hbs b/packages/components/src/components/hds/app-header/index.hbs deleted file mode 100644 index 55e1ad6f2fd..00000000000 --- a/packages/components/src/components/hds/app-header/index.hbs +++ /dev/null @@ -1,42 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{#if (and this.hasA11yRefocus (not this._isOpen))}} - {{! @glint-expect-error - `ember-a11y-refocus` doesn't expose types yet }} - - {{/if}} - - {{yield (hash close=this.close) to="logo"}} - - {{#if (not this._isDesktop)}} - - {{/if}} - -
    -
    - {{yield (hash close=this.close) to="globalActions"}} -
    - -
    - {{yield (hash close=this.close) to="utilityActions"}} -
    -
    -
    \ No newline at end of file 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 55% 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..2b2a651538c 100644 --- a/packages/components/src/components/hds/app-header/menu-button.ts +++ b/packages/components/src/components/hds/app-header/menu-button.gts @@ -3,10 +3,14 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; +import { on } from '@ember/modifier'; import { action } from '@ember/object'; +import Component from '@glimmer/component'; -import type { HdsButtonSignature } from '../button/'; +import HdsButton from '../button/index.gts'; + +import hdsT from '../../../helpers/hds-t.ts'; +import type { HdsButtonSignature } from '../button/index.gts'; export interface HdsAppHeaderMenuButtonSignature { Args: { @@ -30,4 +34,17 @@ export default class HdsAppHeaderMenuButton extends Component + + } diff --git a/packages/components/src/components/hds/app-header/menu-button.hbs b/packages/components/src/components/hds/app-header/menu-button.hbs deleted file mode 100644 index 31090765860..00000000000 --- a/packages/components/src/components/hds/app-header/menu-button.hbs +++ /dev/null @@ -1,15 +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/index.ts b/packages/components/src/components/hds/app-side-nav/index.gts similarity index 78% 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..a35ab1355ca 100644 --- a/packages/components/src/components/hds/app-side-nav/index.ts +++ b/packages/components/src/components/hds/app-side-nav/index.gts @@ -3,13 +3,20 @@ * SPDX-License-Identifier: MPL-2.0 */ +import { registerDestructor } from '@ember/destroyable'; +import { fn } from '@ember/helper'; +import { on } from '@ember/modifier'; +import { action } from '@ember/object'; import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; -import { registerDestructor } from '@ember/destroyable'; +// @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'; +import hdsT from '../../../helpers/hds-t.ts'; import { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts'; export interface HdsAppSideNavSignature { @@ -229,4 +236,47 @@ export default class HdsAppSideNav extends Component { onDesktopViewportChange(this._isDesktop); } } + + } diff --git a/packages/components/src/components/hds/app-side-nav/index.hbs b/packages/components/src/components/hds/app-side-nav/index.hbs deleted file mode 100644 index c41ea9c7622..00000000000 --- a/packages/components/src/components/hds/app-side-nav/index.hbs +++ /dev/null @@ -1,36 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }} -
    -

    - {{hds-t "hds.components.app-side-nav.screen-reader-label" default="Application local navigation"}} -

    - -
    - {{#if this.showToggleButton}} - {{! template-lint-disable no-invalid-interactive}} -
    - {{! template-lint-enable no-invalid-interactive}} - - {{/if}} - -
    - {{~yield~}} -
    -
    -
    \ No newline at end of file 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 4cd0e21d8e2..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'; - -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..4180ccdde16 --- /dev/null +++ b/packages/components/src/components/hds/app-side-nav/list/index.gts @@ -0,0 +1,82 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { hash } from '@ember/helper'; +import { action } from '@ember/object'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; + +import HdsYield from '../../yield/index.gts'; +import HdsAppSideNavListBackLink from './back-link.gts'; +import HdsAppSideNavListItem from './item.gts'; +import HdsAppSideNavListLink from './link.gts'; +import HdsAppSideNavListTitle from './title.gts'; + +import type { ComponentLike } from '@glint/template'; +import hdsT from '../../../../helpers/hds-t.ts'; +import type { HdsYieldSignature } from '../../yield/index.gts'; +import type { HdsAppSideNavListBackLinkSignature } from './back-link.gts'; +import type { HdsAppSideNavListItemSignature } from './item.gts'; +import type { HdsAppSideNavListLinkSignature } from './link.gts'; +import type { HdsAppSideNavListTitleSignature } from './title.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.hbs b/packages/components/src/components/hds/app-side-nav/list/index.hbs deleted file mode 100644 index adb1c30f885..00000000000 --- a/packages/components/src/components/hds/app-side-nav/list/index.hbs +++ /dev/null @@ -1,23 +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/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 6d22928fe1e..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'; - -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/index.ts b/packages/components/src/components/hds/app-side-nav/portal/index.ts deleted file mode 100644 index fa9d0beb8a2..00000000000 --- a/packages/components/src/components/hds/app-side-nav/portal/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import TemplateOnlyComponent from '@ember/component/template-only'; - -import type { HdsAppSideNavListSignature } from '../list/index'; - -export interface HdsAppSideNavPortalSignature { - Args: { - ariaLabel?: string; - targetName?: string; - }; - Blocks: HdsAppSideNavListSignature['Blocks']; - Element: HTMLDivElement; -} - -const HdsAppSideNavPortal = - TemplateOnlyComponent(); - -export default HdsAppSideNavPortal; 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 90% 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..c59fbe1665a 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,16 @@ * 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 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 +179,16 @@ export default class HdsAppSideNavPortalTarget extends Component +
    + +
    + } diff --git a/packages/components/src/components/hds/app-side-nav/portal/target.hbs b/packages/components/src/components/hds/app-side-nav/portal/target.hbs deleted file mode 100644 index 1e55cc26865..00000000000 --- a/packages/components/src/components/hds/app-side-nav/portal/target.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/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..24dfde5e141 --- /dev/null +++ b/packages/components/src/components/hds/application-state/header.gts @@ -0,0 +1,67 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +import HdsIcon from '../icon/index.gts'; +import HdsTextBody from '../text/body.gts'; +import HdsTextDisplay from '../text/display.gts'; +import { HdsApplicationStateTitleTagValues } from './types.ts'; + +import hdsT from '../../../helpers/hds-t.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.hbs b/packages/components/src/components/hds/application-state/header.hbs deleted file mode 100644 index cf3b9a80f74..00000000000 --- a/packages/components/src/components/hds/application-state/header.hbs +++ /dev/null @@ -1,26 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{#if @errorCode}} - - {{hds-t "hds.application-state.header.error" default="ERROR"}} - {{@errorCode}} - - {{/if}} - {{#if @icon}} -
    - -
    - {{/if}} - - {{@title}} - -
    \ No newline at end of file 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/item.ts b/packages/components/src/components/hds/breadcrumb/item.gts similarity index 56% rename from packages/components/src/components/hds/breadcrumb/item.ts rename to packages/components/src/components/hds/breadcrumb/item.gts index 20b48374541..9e30251be4d 100644 --- a/packages/components/src/components/hds/breadcrumb/item.ts +++ b/packages/components/src/components/hds/breadcrumb/item.gts @@ -3,17 +3,19 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { htmlSafe } from '@ember/template'; import { assert } from '@ember/debug'; - +import { LinkTo } from '@ember/routing'; +import { htmlSafe } from '@ember/template'; +import Component from '@glimmer/component'; +import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts'; import { hdsResolveLinkToExternal } from '../../../utils/hds-resolve-link-to-external.ts'; +import HdsIcon from '../icon/index.gts'; import type Owner from '@ember/owner'; -import type { LinkTo } from '@ember/routing'; import type { SafeString } from '@ember/template'; -import type { HdsIconSignature } from '../icon/index'; +import type { HdsIconSignature } from '../icon'; +import { tracked } from '@glimmer/tracking'; export interface HdsBreadcrumbItemSignature { Args: { @@ -94,4 +96,53 @@ export default class HdsBreadcrumbItem extends Component +
  • + {{#if @current}} +
    + {{#if @icon}} +
    + +
    + {{/if}} + {{@text}} +
    + {{else}} + {{#if @isRouteExternal}} + + {{#if @icon}} +
    + +
    + {{/if}} + {{@text}} +     + {{else}} + + {{#if @icon}} +
    + +
    + {{/if}} + {{@text}} +     + {{/if}} + {{/if}} +
    • + } diff --git a/packages/components/src/components/hds/breadcrumb/item.hbs b/packages/components/src/components/hds/breadcrumb/item.hbs deleted file mode 100644 index 761d2c3233f..00000000000 --- a/packages/components/src/components/hds/breadcrumb/item.hbs +++ /dev/null @@ -1,50 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
  • - {{#if @current}} -
    - {{#if @icon}} -
    - -
    - {{/if}} - {{@text}} -
    - {{else}} - {{#if @isRouteExternal}} - - {{#if @icon}} -
    - -
    - {{/if}} - {{@text}} -     - {{else}} - - {{#if @icon}} -
    - -
    - {{/if}} - {{@text}} -     - {{/if}} - {{/if}} -
    • \ 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 72% rename from packages/components/src/components/hds/button/index.ts rename to packages/components/src/components/hds/button/index.gts index cb162bde628..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, @@ -17,7 +22,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); @@ -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.ts b/packages/components/src/components/hds/code-block/description.gts similarity index 72% rename from packages/components/src/components/hds/code-block/description.ts rename to packages/components/src/components/hds/code-block/description.gts index 56b2800c53d..44193f58650 100644 --- a/packages/components/src/components/hds/code-block/description.ts +++ b/packages/components/src/components/hds/code-block/description.gts @@ -3,10 +3,11 @@ * 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 type { HdsTextBodySignature } from '../text/body'; +import type { HdsTextBodySignature } from '../text/body.gts'; +import HdsTextBody from '../text/body.gts'; type HdsCodeBlockDescriptionElement = HdsTextBodySignature['Element']; export interface HdsCodeBlockDescriptionSignature { @@ -32,4 +33,17 @@ export default class HdsCodeBlockDescription extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/code-block/description.hbs b/packages/components/src/components/hds/code-block/description.hbs deleted file mode 100644 index 36c013d7006..00000000000 --- a/packages/components/src/components/hds/code-block/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-block/index.ts b/packages/components/src/components/hds/code-block/index.gts similarity index 82% rename from packages/components/src/components/hds/code-block/index.ts rename to packages/components/src/components/hds/code-block/index.gts index 1fb1180cb8a..e343ff5e255 100644 --- a/packages/components/src/components/hds/code-block/index.ts +++ b/packages/components/src/components/hds/code-block/index.gts @@ -3,31 +3,35 @@ * 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 style from 'ember-style-modifier'; import Prism from 'prismjs'; +import HdsCodeBlockCopyButton from './copy-button.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 HdsCodeBlockDescription from './description.gts'; +import HdsCodeBlockTitle from './title.gts'; -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 +45,10 @@ 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 { on } from '@ember/modifier'; import 'prismjs/components/prism-handlebars'; +import 'prismjs/components/prism-markup-templating'; +import HdsButton from '../button/index.gts'; export const LANGUAGES: HdsCodeBlockLanguages[] = Object.values( HdsCodeBlockLanguageValues @@ -68,12 +74,9 @@ export interface HdsCodeBlockSignature { Blocks: { default: [ { - Title?: WithBoundArgs< - typeof HdsCodeBlockTitleComponent, - 'didInsertNode' - >; + Title?: WithBoundArgs; Description?: WithBoundArgs< - typeof HdsCodeBlockDescriptionComponent, + typeof HdsCodeBlockDescription, 'didInsertNode' >; }, @@ -347,4 +350,63 @@ export default class HdsCodeBlock extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/code-block/index.hbs b/packages/components/src/components/hds/code-block/index.hbs deleted file mode 100644 index 4cbfbc4fa08..00000000000 --- a/packages/components/src/components/hds/code-block/index.hbs +++ /dev/null @@ -1,50 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    -
    - {{~yield (hash Title=(component "hds/code-block/title" didInsertNode=this.registerTitleElement))~}} - {{~yield - (hash Description=(component "hds/code-block/description" didInsertNode=this.registerDescriptionElement)) - ~}} -
    -
    - {{! content within pre tag is whitespace-sensitive; do not add new lines! }} - 
    
-        {{~this._prismCode~}}
-
    - - {{#if @hasCopyButton}} - - {{/if}} -
    - {{#if this.showFooter}} -
    - -
    - {{/if}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/code-block/title.ts b/packages/components/src/components/hds/code-block/title.gts similarity index 70% rename from packages/components/src/components/hds/code-block/title.ts rename to packages/components/src/components/hds/code-block/title.gts index 0ab75a3ba81..bcb20aa9aa0 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,18 @@ export default class HdsCodeBlockTitle extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/code-block/title.hbs b/packages/components/src/components/hds/code-block/title.hbs deleted file mode 100644 index e05f7c4acbd..00000000000 --- a/packages/components/src/components/hds/code-block/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/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 57% 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..0c1d514ddf1 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 @@ -3,9 +3,13 @@ * SPDX-License-Identifier: MPL-2.0 */ +import { on } from '@ember/modifier'; import Component from '@glimmer/component'; -import type { HdsButtonSignature } from '../button'; +import HdsButton from '../button/index.gts'; + +import hdsT from '../../../helpers/hds-t.ts'; +import type { HdsButtonSignature } from '../button/index.gts'; export interface HdsCodeEditorFullScreenButtonSignature { Args: { @@ -32,4 +36,21 @@ export default class HdsCodeEditorFullScreenButton extends Component + + } diff --git a/packages/components/src/components/hds/code-editor/full-screen-button.hbs b/packages/components/src/components/hds/code-editor/full-screen-button.hbs deleted file mode 100644 index 92c5c29df0e..00000000000 --- a/packages/components/src/components/hds/code-editor/full-screen-button.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/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 54% rename from packages/components/src/components/hds/code-editor/index.ts rename to packages/components/src/components/hds/code-editor/index.gts index 8d827a76449..7ea0d7ae804 100644 --- a/packages/components/src/components/hds/code-editor/index.ts +++ b/packages/components/src/components/hds/code-editor/index.gts @@ -3,24 +3,32 @@ * SPDX-License-Identifier: MPL-2.0 */ +import { action } from '@ember/object'; +import { guidFor } from '@ember/object/internals'; import Component from '@glimmer/component'; 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'; - -import type { WithBoundArgs } from '@glint/template'; +import type { EditorView } from '@codemirror/view'; +import { hash } from '@ember/helper'; import type Owner from '@ember/owner'; -import type { ComponentLike } from '@glint/template'; +import type { ComponentLike, WithBoundArgs } from '@glint/template'; +import { or } from 'ember-truth-helpers'; +import hdsT from '../../../helpers/hds-t.ts'; 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 { EditorView } from '@codemirror/view'; -import type { HdsCopyButtonSignature } from '../copy/button/index.ts'; +import hdsCodeEditor from '../../../modifiers/hds-code-editor.ts'; +import type { HdsCopyButtonSignature } from '../copy/button/index.gts'; +import HdsCopyButton from '../copy/button/index.gts'; +import HdsIcon from '../icon/index.gts'; +import type { HdsCodeEditorDescriptionSignature } from './description.gts'; +import HdsCodeEditorDescription from './description.gts'; +import HdsCodeEditorFullScreenButton from './full-screen-button.gts'; +import type { HdsCodeEditorGenericSignature } from './generic.gts'; +import HdsCodeEditorGeneric from './generic.gts'; +import type { HdsCodeEditorTitleSignature } from './title.gts'; +import HdsCodeEditorTitle from './title.gts'; export interface HdsCodeEditorSignature { Args: { @@ -155,4 +163,87 @@ export default class HdsCodeEditor extends Component { this._isSetupComplete = true; this.args.onSetup?.(editorView); } + + } diff --git a/packages/components/src/components/hds/code-editor/index.hbs b/packages/components/src/components/hds/code-editor/index.hbs deleted file mode 100644 index 9eecf641a7c..00000000000 --- a/packages/components/src/components/hds/code-editor/index.hbs +++ /dev/null @@ -1,77 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{! header }} - {{#if (or this.hasActions (has-block))}} -
    -
    - {{yield - (hash - Title=(component "hds/code-editor/title" editorId=this._id onInsert=this.registerTitleElement) - Description=(component - "hds/code-editor/description" editorId=this._id onInsert=this.registerDescriptionElement - ) - Generic=(component "hds/code-editor/generic") - ) - }} -
    - - {{#if this.hasActions}} -
    - {{#if @hasCopyButton}} - - {{/if}} - {{#if @hasFullScreenButton}} - - {{/if}} -
    - {{/if}} -
    - {{/if}} - - {{! editor }} -
    - - {{! loader }} - {{#unless this._isSetupComplete}} -
    - - {{hds-t "hds.components.common.loading" default="Loading"}} -
    - {{/unless}} -
    \ No newline at end of file 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 78% rename from packages/components/src/components/hds/disclosure-primitive/index.ts rename to packages/components/src/components/hds/disclosure-primitive/index.gts index d475d664d12..33967589a43 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,28 @@ export default class HdsDisclosurePrimitive extends Component +
    +
    + {{yield + (hash + onClickToggle=this.onClickToggle + isOpen=this.isOpen + contentId=this._contentId + ) + to="toggle" + }} +
    +
    + {{#if this.isOpen}} + {{yield (hash close=this.close) to="content"}} + {{/if}} +
    +
    + } diff --git a/packages/components/src/components/hds/disclosure-primitive/index.hbs b/packages/components/src/components/hds/disclosure-primitive/index.hbs deleted file mode 100644 index 0867c02a868..00000000000 --- a/packages/components/src/components/hds/disclosure-primitive/index.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    -
    - {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen contentId=this._contentId) to="toggle"}} -
    -
    - {{#if this.isOpen}} - {{yield (hash close=this.close) to="content"}} - {{/if}} -
    -
    \ No newline at end of file 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.gts b/packages/components/src/components/hds/dropdown/index.gts new file mode 100644 index 00000000000..95836078b13 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/index.gts @@ -0,0 +1,299 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { assert } from '@ember/debug'; +import { hash } from '@ember/helper'; +import { action } from '@ember/object'; +import didInsert from '@ember/render-modifiers/modifiers/did-insert'; +import Component from '@glimmer/component'; +import style from 'ember-style-modifier'; +import { or } from 'ember-truth-helpers'; + +import HdsPopoverPrimitive from '../popover-primitive/index.gts'; +import HdsDropdownFooter from './footer.gts'; +import HdsDropdownHeader from './header.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 HdsDropdownToggleButton from './toggle/button.gts'; +import HdsDropdownToggleIcon from './toggle/icon.gts'; +import { + // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values + HdsDropdownPositionToPlacementValues, + // Dropdown's `listPosition` values + HdsDropdownPositionValues, +} from './types.ts'; + +import type { MenuPrimitiveSignature } from '../menu-primitive/index.gts'; +import type { HdsDropdownPositions } from './types.ts'; + +import type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts'; +import type { WithBoundArgs } from '@glint/template'; + +export const DEFAULT_POSITION = HdsDropdownPositionValues.BottomRight; +export const POSITIONS: HdsDropdownPositions[] = Object.values( + HdsDropdownPositionValues +); + +export interface HdsDropdownSignature { + Args: MenuPrimitiveSignature['Args'] & { + height?: string; + isInline?: boolean; + isOpen?: boolean; + listPosition?: HdsDropdownPositions; + width?: string; + enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection']; + preserveContentInDom?: boolean; + matchToggleWidth?: boolean; + }; + Blocks: { + default: [ + { + Footer?: typeof HdsDropdownFooter; + Header?: typeof HdsDropdownHeader; + Checkbox?: typeof HdsDropdownListItemCheckbox; + Checkmark?: typeof HdsDropdownListItemCheckmark; + CopyItem?: typeof HdsDropdownListItemCopyItem; + Description?: typeof HdsDropdownListItemDescription; + Generic?: typeof HdsDropdownListItemGeneric; + Interactive?: typeof HdsDropdownListItemInteractive; + Radio?: typeof HdsDropdownListItemRadio; + Separator?: typeof HdsDropdownListItemSeparator; + Title?: typeof HdsDropdownListItemTitle; + ToggleButton?: WithBoundArgs< + typeof HdsDropdownToggleButton, + 'isOpen' | 'setupPrimitiveToggle' + >; + ToggleIcon?: WithBoundArgs< + typeof HdsDropdownToggleIcon, + 'isOpen' | 'setupPrimitiveToggle' + >; + close?: (event?: Event) => void; + }, + ]; + }; + Element: MenuPrimitiveSignature['Element']; +} + +export default class HdsDropdown extends Component { + /** + * @param listPosition + * @type {string} + * @default bottom-right + * @description Determines the position of the "list" + */ + get listPosition(): HdsDropdownPositions { + const { listPosition = DEFAULT_POSITION } = this.args; + + assert( + `@listPosition for "Hds::Dropdown::Index" must be one of the following: ${POSITIONS.join( + ', ' + )}; received: ${listPosition}`, + POSITIONS.includes(listPosition) + ); + + return listPosition; + } + + get enableCollisionDetection(): HdsAnchoredPositionOptions['enableCollisionDetection'] { + return this.args.enableCollisionDetection ?? false; + } + + get matchToggleWidth(): HdsAnchoredPositionOptions['matchToggleWidth'] { + return this.args.matchToggleWidth ?? false; + } + + get anchoredPositionOptions(): { + placement: HdsAnchoredPositionOptions['placement']; + offsetOptions: HdsAnchoredPositionOptions['offsetOptions']; + enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection']; + matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth']; + } { + // custom options specific for the `RichTooltip` component + // for details see the `hds-anchored-position` modifier + return { + placement: HdsDropdownPositionToPlacementValues[this.listPosition], + offsetOptions: 4, + enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false, + matchToggleWidth: this.matchToggleWidth, + }; + } + + /** + * Get the class names to apply to the element + * @method classNames + * @return {string} The "class" attribute to apply to the root element + */ + get classNames(): string { + const classes = ['hds-dropdown']; + + // add a class based on the @isInline argument + if (this.args.isInline) { + classes.push('hds-dropdown--is-inline'); + } + + return classes.join(' '); + } + + /** + * Get the class names to apply to the content + * @method classNamesContent + * @return {string} The "class" attribute to apply to the disclosed content + */ + get classNamesContent(): string { + const classes = ['hds-dropdown__content']; + + // add a class based on the @listPosition argument + // TODO: we preserved these classes to avoid introducing breaking changes for consumers who rely on these classes for tests, but we aim to remove them in the next major release + // context: https://github.com/hashicorp/design-system/pull/2309#discussion_r1706941892 + classes.push(`hds-dropdown__content--position-${this.listPosition}`); + + // add a class based on the @width or @matchToggleWidth arguments + if (this.args.width || this.args.matchToggleWidth) { + classes.push('hds-dropdown__content--fixed-width'); + } + + return classes.join(' '); + } + + @action + didInsertList(element: HTMLUListElement): void { + const checkmarkItems = element.querySelectorAll(`[role="option"]`); + if (checkmarkItems.length) { + const toggleButtonId = element + .closest('.hds-dropdown') + ?.querySelector('.hds-dropdown-toggle-button') + ?.getAttribute('id'); + + element.setAttribute('role', 'listbox'); + + if (toggleButtonId) { + element.setAttribute('aria-labelledby', toggleButtonId); + } + } + } + + +} diff --git a/packages/components/src/components/hds/dropdown/index.hbs b/packages/components/src/components/hds/dropdown/index.hbs deleted file mode 100644 index 8958126a74d..00000000000 --- a/packages/components/src/components/hds/dropdown/index.hbs +++ /dev/null @@ -1,44 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{yield - (hash - ToggleButton=(component - "hds/dropdown/toggle/button" isOpen=PP.isOpen setupPrimitiveToggle=PP.setupPrimitiveToggle - ) - ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=PP.isOpen setupPrimitiveToggle=PP.setupPrimitiveToggle) - close=PP.hidePopover - ) - }} -
    - {{#if (or PP.isOpen @preserveContentInDom)}} - {{yield (hash Header=(component "hds/dropdown/header") close=PP.hidePopover)}} -
      - {{yield - (hash - close=PP.hidePopover - Checkbox=(component "hds/dropdown/list-item/checkbox") - Checkmark=(component "hds/dropdown/list-item/checkmark") - CopyItem=(component "hds/dropdown/list-item/copy-item") - Description=(component "hds/dropdown/list-item/description") - Generic=(component "hds/dropdown/list-item/generic") - Interactive=(component "hds/dropdown/list-item/interactive") - Radio=(component "hds/dropdown/list-item/radio") - Separator=(component "hds/dropdown/list-item/separator") - Title=(component "hds/dropdown/list-item/title") - ) - }} -
    - {{yield (hash close=PP.hidePopover Footer=(component "hds/dropdown/footer"))}} - {{/if}} -
    -
    -     \ No newline at end of file diff --git a/packages/components/src/components/hds/dropdown/index.ts b/packages/components/src/components/hds/dropdown/index.ts deleted file mode 100644 index 12bccfcd4ce..00000000000 --- a/packages/components/src/components/hds/dropdown/index.ts +++ /dev/null @@ -1,172 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { assert } from '@ember/debug'; - -import { - // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values - HdsDropdownPositionToPlacementValues, - // Dropdown's `listPosition` values - HdsDropdownPositionValues, -} 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 { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts'; - -export const DEFAULT_POSITION = HdsDropdownPositionValues.BottomRight; -export const POSITIONS: HdsDropdownPositions[] = Object.values( - HdsDropdownPositionValues -); - -export interface HdsDropdownSignature { - Args: MenuPrimitiveSignature['Args'] & { - height?: string; - isInline?: boolean; - isOpen?: boolean; - listPosition?: HdsDropdownPositions; - width?: string; - enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection']; - preserveContentInDom?: boolean; - matchToggleWidth?: boolean; - }; - Blocks: { - default: [ - { - Footer?: ComponentLike; - Header?: ComponentLike; - Checkbox?: ComponentLike; - Checkmark?: ComponentLike; - CopyItem?: ComponentLike; - Description?: ComponentLike; - Generic?: ComponentLike; - Interactive?: ComponentLike; - Radio?: ComponentLike; - Separator?: ComponentLike; - Title?: ComponentLike; - ToggleButton?: ComponentLike; - ToggleIcon?: ComponentLike; - close: (event?: Event) => void; - }, - ]; - }; - Element: MenuPrimitiveSignature['Element']; -} - -export default class HdsDropdown extends Component { - /** - * @param listPosition - * @type {string} - * @default bottom-right - * @description Determines the position of the "list" - */ - get listPosition(): HdsDropdownPositions { - const { listPosition = DEFAULT_POSITION } = this.args; - - assert( - `@listPosition for "Hds::Dropdown::Index" must be one of the following: ${POSITIONS.join( - ', ' - )}; received: ${listPosition}`, - POSITIONS.includes(listPosition) - ); - - return listPosition; - } - - get enableCollisionDetection(): HdsAnchoredPositionOptions['enableCollisionDetection'] { - return this.args.enableCollisionDetection ?? false; - } - - get matchToggleWidth(): HdsAnchoredPositionOptions['matchToggleWidth'] { - return this.args.matchToggleWidth ?? false; - } - - get anchoredPositionOptions(): { - placement: HdsAnchoredPositionOptions['placement']; - offsetOptions: HdsAnchoredPositionOptions['offsetOptions']; - enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection']; - matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth']; - } { - // custom options specific for the `RichTooltip` component - // for details see the `hds-anchored-position` modifier - return { - placement: HdsDropdownPositionToPlacementValues[this.listPosition], - offsetOptions: 4, - enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false, - matchToggleWidth: this.matchToggleWidth, - }; - } - - /** - * Get the class names to apply to the element - * @method classNames - * @return {string} The "class" attribute to apply to the root element - */ - get classNames(): string { - const classes = ['hds-dropdown']; - - // add a class based on the @isInline argument - if (this.args.isInline) { - classes.push('hds-dropdown--is-inline'); - } - - return classes.join(' '); - } - - /** - * Get the class names to apply to the content - * @method classNamesContent - * @return {string} The "class" attribute to apply to the disclosed content - */ - get classNamesContent(): string { - const classes = ['hds-dropdown__content']; - - // add a class based on the @listPosition argument - // TODO: we preserved these classes to avoid introducing breaking changes for consumers who rely on these classes for tests, but we aim to remove them in the next major release - // context: https://github.com/hashicorp/design-system/pull/2309#discussion_r1706941892 - classes.push(`hds-dropdown__content--position-${this.listPosition}`); - - // add a class based on the @width or @matchToggleWidth arguments - if (this.args.width || this.args.matchToggleWidth) { - classes.push('hds-dropdown__content--fixed-width'); - } - - return classes.join(' '); - } - - @action - didInsertList(element: HTMLUListElement): void { - const checkmarkItems = element.querySelectorAll(`[role="option"]`); - if (checkmarkItems.length) { - const toggleButtonId = element - .closest('.hds-dropdown') - ?.querySelector('.hds-dropdown-toggle-button') - ?.getAttribute('id'); - - element.setAttribute('role', 'listbox'); - - if (toggleButtonId) { - element.setAttribute('aria-labelledby', toggleButtonId); - } - } - } -} 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..f3a4605a80e --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/checkbox.gts @@ -0,0 +1,69 @@ +/** + * 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 { HdsFormCheckboxBaseSignature } from '../../form/checkbox/base.gts'; +import type { HdsIconSignature } from '../../icon'; +import HdsTextBody from '../../text/body.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.hbs b/packages/components/src/components/hds/dropdown/list-item/checkbox.hbs deleted file mode 100644 index cfa9a329877..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/checkbox.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/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..db00cbe7160 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/checkmark.gts @@ -0,0 +1,99 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import hdsLinkToModels from '../../../../helpers/hds-link-to-models.ts'; +import hdsLinkToQuery from '../../../../helpers/hds-link-to-query.ts'; +import HdsIcon from '../../icon/index.gts'; +import HdsInteractive from '../../interactive/index.gts'; +import HdsTextBody from '../../text/body.gts'; + +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.hbs b/packages/components/src/components/hds/dropdown/list-item/checkmark.hbs deleted file mode 100644 index f367269df4b..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/checkmark.hbs +++ /dev/null @@ -1,48 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{! template-lint-disable no-invalid-role require-context-role require-presentational-children }} -
  • - - {{#if @icon}} - - - - {{/if}} - {{yield}} - {{#if @count}} - {{@count}} - {{/if}} - - {{#if @selected}} - - {{/if}} - - -
    • -{{! template-lint-enable no-invalid-role require-context-role require-presentational-children }} \ No newline at end of file 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 d3a405a6611..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'; - -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 53% 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 323942938b0..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'; +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..b2160fdb8b2 --- /dev/null +++ b/packages/components/src/components/hds/dropdown/list-item/radio.gts @@ -0,0 +1,69 @@ +/** + * 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 { HdsFormRadioBaseSignature } from '../../form/radio/base.gts'; +import type { HdsIconSignature } from '../../icon'; + +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.hbs b/packages/components/src/components/hds/dropdown/list-item/radio.hbs deleted file mode 100644 index eee61f5594e..00000000000 --- a/packages/components/src/components/hds/dropdown/list-item/radio.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/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 61% rename from packages/components/src/components/hds/form/field/index.ts rename to packages/components/src/components/hds/form/field/index.gts index 29959f2a401..ff6bf37637e 100644 --- a/packages/components/src/components/hds/form/field/index.ts +++ b/packages/components/src/components/hds/form/field/index.gts @@ -3,25 +3,32 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; import { action } from '@ember/object'; -import { getElementId } from '../../../../utils/hds-get-element-id.ts'; +import Component from '@glimmer/component'; import { ariaDescribedBy, registerAriaDescriptionElement, unregisterAriaDescriptionElement, } from '../../../../utils/hds-aria-described-by.ts'; +import { getElementId } from '../../../../utils/hds-get-element-id.ts'; +import HdsFormCharacterCountComponent from '../character-count/index.gts'; +import HdsFormErrorComponent from '../error/index.gts'; +import HdsFormHelperTextComponent from '../helper-text/index.gts'; +import HdsFormLabelComponent from '../label/index.gts'; 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 type { HdsFormFieldLayouts } from './types.ts'; +import { hash } from '@ember/helper'; import type { ComponentLike, WithBoundArgs } from '@glint/template'; -import type { HdsYieldSignature } from '../../yield/index.ts'; +import { eq } from 'ember-truth-helpers'; import type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts'; +import type { HdsYieldSignature } from '../../yield/index.gts'; +import HdsYield from '../../yield/index.gts'; +import HdsFormCharacterCount from '../character-count/index.gts'; +import HdsFormError from '../error/index.gts'; +import HdsFormHelperText from '../helper-text/index.gts'; +import HdsFormLabel from '../label/index.gts'; +import type { HdsFormFieldLayouts } from './types.ts'; export const LAYOUT_TYPES = Object.values(HdsFormFieldLayoutValues); @@ -138,4 +145,69 @@ 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/field/index.hbs b/packages/components/src/components/hds/form/field/index.hbs deleted file mode 100644 index 53ae6e667de..00000000000 --- a/packages/components/src/components/hds/form/field/index.hbs +++ /dev/null @@ -1,66 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -
    - {{yield - (hash - Label=(component - "hds/form/label" - controlId=this.id - isRequired=this.isRequired - isOptional=this.isOptional - contextualClass="hds-form-field__label" - ) - ) - }} - {{#unless (eq @layout "flag")}} - {{yield - (hash - HelperText=(component - "hds/form/helper-text" - controlId=this.id - onInsert=this.appendDescriptor - contextualClass="hds-form-field__helper-text" - ) - ) - }} - {{/unless}} -
    - {{! @glint-expect-error }} - {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}} -
    - {{#if (eq @layout "flag")}} - {{yield - (hash - HelperText=(component - "hds/form/helper-text" - controlId=this.id - onInsert=this.appendDescriptor - contextualClass="hds-form-field__helper-text" - ) - ) - }} - {{/if}} - {{yield - (hash - CharacterCount=(component - "hds/form/character-count" - controlId=this.id - onInsert=this.appendDescriptor - contextualClass="hds-form-field__character-count" - ) - ) - }} - {{yield - (hash - Error=(component - "hds/form/error" - controlId=this.id - onInsert=this.appendDescriptor - onRemove=this.removeDescriptor - contextualClass="hds-form-field__error" - ) - ) - }} -
    \ No newline at end of file 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..f6ee3d0fb4c --- /dev/null +++ b/packages/components/src/components/hds/form/file-input/base.gts @@ -0,0 +1,26 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TOC } from '@ember/component/template-only'; + +export interface HdsFormFileInputBaseSignature { + Args: { + id?: string; + ariaDescribedBy?: string; + }; + Element: HTMLInputElement; +} + +const HdsFormFileInputBase: TOC = ; + +export default HdsFormFileInputBase; diff --git a/packages/components/src/components/hds/form/file-input/base.hbs b/packages/components/src/components/hds/form/file-input/base.hbs deleted file mode 100644 index 926ba21759e..00000000000 --- a/packages/components/src/components/hds/form/file-input/base.hbs +++ /dev/null @@ -1,11 +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/file-input/base.ts b/packages/components/src/components/hds/form/file-input/base.ts deleted file mode 100644 index 71dac9820c8..00000000000 --- a/packages/components/src/components/hds/form/file-input/base.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import templateOnlyComponent from '@ember/component/template-only'; - -export interface HdsFormFileInputBaseSignature { - Args: { - id?: string; - ariaDescribedBy?: string; - }; - Element: HTMLInputElement; -} - -const HdsFormFileInputBase = - templateOnlyComponent(); - -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/footer/index.ts b/packages/components/src/components/hds/form/footer/index.gts similarity index 78% rename from packages/components/src/components/hds/form/footer/index.ts rename to packages/components/src/components/hds/form/footer/index.gts index 3dca51153f8..7a2944221be 100644 --- a/packages/components/src/components/hds/form/footer/index.ts +++ b/packages/components/src/components/hds/form/footer/index.gts @@ -5,7 +5,9 @@ import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; import type { ComponentLike } from '@glint/template'; +import HdsButtonSet from '../../button-set/index.gts'; import type { HdsButtonSetSignature } from '../../button-set/index.ts'; export interface HdsFormFooterSignature { @@ -33,4 +35,10 @@ export default class HdsFormFooter extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/form/footer/index.hbs b/packages/components/src/components/hds/form/footer/index.hbs deleted file mode 100644 index 4a7d825e49d..00000000000 --- a/packages/components/src/components/hds/form/footer/index.hbs +++ /dev/null @@ -1,8 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{yield (hash ButtonSet=(component "hds/button-set"))}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/form/header/description.gts b/packages/components/src/components/hds/form/header/description.gts new file mode 100644 index 00000000000..953af486de7 --- /dev/null +++ b/packages/components/src/components/hds/form/header/description.gts @@ -0,0 +1,30 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import type { HdsTextBodySignature } from '../../text/body.gts'; +import HdsTextBody from '../../text/body.gts'; + +export interface HdsFormHeaderDescriptionSignature { + Blocks: { + default: []; + }; + Element: HdsTextBodySignature['Element']; +} + +const HdsFormHeaderDescription: TemplateOnlyComponent = + ; + +export default HdsFormHeaderDescription; diff --git a/packages/components/src/components/hds/form/header/description.hbs b/packages/components/src/components/hds/form/header/description.hbs deleted file mode 100644 index afb6bedb7a5..00000000000 --- a/packages/components/src/components/hds/form/header/description.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/form/header/description.ts b/packages/components/src/components/hds/form/header/description.ts deleted file mode 100644 index 8d29882af55..00000000000 --- a/packages/components/src/components/hds/form/header/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'; -import type { HdsTextBodySignature } from '../../text/body.ts'; - -export interface HdsFormHeaderDescriptionSignature { - Blocks: { - default: []; - }; - Element: HdsTextBodySignature['Element']; -} - -const HdsFormHeaderDescription = - TemplateOnlyComponent(); -export default HdsFormHeaderDescription; diff --git a/packages/components/src/components/hds/form/header/index.ts b/packages/components/src/components/hds/form/header/index.gts similarity index 59% rename from packages/components/src/components/hds/form/header/index.ts rename to packages/components/src/components/hds/form/header/index.gts index a8f79950507..096ca6accde 100644 --- a/packages/components/src/components/hds/form/header/index.ts +++ b/packages/components/src/components/hds/form/header/index.gts @@ -5,9 +5,9 @@ import Component from '@glimmer/component'; -import type { ComponentLike } from '@glint/template'; -import type { HdsFormHeaderTitleSignature } from './title.ts'; -import type { HdsFormHeaderDescriptionSignature } from './description.ts'; +import { hash } from '@ember/helper'; +import HdsFormHeaderDescription from './description.gts'; +import HdsFormHeaderTitle from './title.gts'; export interface HdsFormHeaderSignature { Args: { @@ -16,8 +16,8 @@ export interface HdsFormHeaderSignature { Blocks: { default: [ { - Title?: ComponentLike; - Description?: ComponentLike; + Title?: typeof HdsFormHeaderTitle; + Description?: typeof HdsFormHeaderDescription; }, ]; }; @@ -35,4 +35,12 @@ export default class HdsFormHeader extends Component { return classes.join(' '); } + + } diff --git a/packages/components/src/components/hds/form/header/index.hbs b/packages/components/src/components/hds/form/header/index.hbs deleted file mode 100644 index 949169879c7..00000000000 --- a/packages/components/src/components/hds/form/header/index.hbs +++ /dev/null @@ -1,8 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -
    - {{yield (hash Title=(component "hds/form/header/title") Description=(component "hds/form/header/description"))}} -
    \ No newline at end of file diff --git a/packages/components/src/components/hds/form/header/title.ts b/packages/components/src/components/hds/form/header/title.gts similarity index 82% rename from packages/components/src/components/hds/form/header/title.ts rename to packages/components/src/components/hds/form/header/title.gts index 9c5ce51c55a..cdc06b14a51 100644 --- a/packages/components/src/components/hds/form/header/title.ts +++ b/packages/components/src/components/hds/form/header/title.gts @@ -3,13 +3,14 @@ * SPDX-License-Identifier: MPL-2.0 */ -import Component from '@glimmer/component'; import { assert } from '@ember/debug'; +import Component from '@glimmer/component'; import type { HdsFormHeaderTitleTags } from '../types.ts'; import { HdsFormHeaderTitleTagValues } from '../types.ts'; +import type { HdsTextDisplaySignature } from '../../text/display.gts'; +import HdsTextDisplay from '../../text/display.gts'; import { HdsTextSizeValues } from '../../text/types.ts'; -import type { HdsTextDisplaySignature } from '../../text/display.ts'; export const DEFAULT_SIZE = HdsTextSizeValues.FourHundred; export const DEFAULT_TAG = HdsFormHeaderTitleTagValues.Div; @@ -45,4 +46,16 @@ export default class HdsFormHeaderTitle extends Component + + {{yield}} + + } diff --git a/packages/components/src/components/hds/form/header/title.hbs b/packages/components/src/components/hds/form/header/title.hbs deleted file mode 100644 index e0ec62926a9..00000000000 --- a/packages/components/src/components/hds/form/header/title.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/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/index.gts b/packages/components/src/components/hds/form/index.gts new file mode 100644 index 00000000000..e5a741bf1f6 --- /dev/null +++ b/packages/components/src/components/hds/form/index.gts @@ -0,0 +1,122 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { assert } from '@ember/debug'; +import Component from '@glimmer/component'; +import HdsFormHeaderTitleComponent from './header/title.gts'; + +import { HdsFormTagValues } from './types.ts'; + +import type Owner from '@ember/owner'; +import type { HdsFormTags } from './types.ts'; + +import type { WithBoundArgs } from '@glint/template'; +import { eq } from 'ember-truth-helpers'; +import style from 'ember-style-modifier'; +import { hash } from '@ember/helper'; +import HdsFormHeader from './header/index.gts'; +import HdsFormHeaderTitle from './header/title.gts'; +import HdsFormHeaderDescription from './header/description.gts'; +import HdsFormSection from './section/index.gts'; +import HdsFormSectionHeader from './section/header.gts'; +import HdsFormSectionMultiFieldGroup from './section/multi-field-group/index.gts'; +import HdsFormSectionMultiFieldGroupItem from './section/multi-field-group/item.gts'; +import HdsFormSeparator from './separator/index.gts'; +import HdsFormFooter from './footer/index.gts'; + +export const DEFAULT_TAG = HdsFormTagValues.Form; +export const AVAILABLE_TAGS: string[] = Object.values(HdsFormTagValues); + +export interface HdsFormSignature { + Args: { + tag?: HdsFormTags; + sectionMaxWidth?: string; + }; + Blocks: { + default: [ + { + Header?: typeof HdsFormHeader; + HeaderTitle?: typeof HdsFormHeaderTitle; + HeaderDescription?: typeof HdsFormHeaderDescription; + Section?: typeof HdsFormSection; + SectionHeader?: typeof HdsFormSectionHeader; + SectionHeaderTitle?: WithBoundArgs< + typeof HdsFormHeaderTitleComponent, + 'size' + >; + SectionHeaderDescription?: typeof HdsFormHeaderDescription; + SectionMultiFieldGroup?: typeof HdsFormSectionMultiFieldGroup; + SectionMultiFieldGroupItem?: typeof HdsFormSectionMultiFieldGroupItem; + Separator?: typeof HdsFormSeparator; + Footer?: typeof HdsFormFooter; + }, + ]; + }; + Element: HTMLFormElement | HTMLDivElement; +} + +export default class HdsForm extends Component { + tag: HdsFormTags; + + constructor(owner: Owner, args: HdsFormSignature['Args']) { + super(owner, args); + this.tag = args.tag ?? DEFAULT_TAG; + + assert( + `@tag for "Hds::Form" must be one of the following: ${AVAILABLE_TAGS.join(', ')}; received: ${this.tag}`, + AVAILABLE_TAGS.includes(this.tag) + ); + } + + get sectionMaxWidthStyle(): Record { + const sectionMaxWidthStyle: { [key: string]: string } = {}; + + if (this.args.sectionMaxWidth) { + sectionMaxWidthStyle['--hds-form-section-max-width'] = + this.args.sectionMaxWidth; + } + return sectionMaxWidthStyle; + } + + +} diff --git a/packages/components/src/components/hds/form/index.hbs b/packages/components/src/components/hds/form/index.hbs deleted file mode 100644 index 9d334ae4da4..00000000000 --- a/packages/components/src/components/hds/form/index.hbs +++ /dev/null @@ -1,42 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -{{#if (eq this.tag "form")}} -
    - {{yield - (hash - Header=(component "hds/form/header") - HeaderTitle=(component "hds/form/header/title") - HeaderDescription=(component "hds/form/header/description") - Section=(component "hds/form/section") - SectionHeader=(component "hds/form/section/header") - SectionHeaderTitle=(component "hds/form/header/title" size="300") - SectionHeaderDescription=(component "hds/form/header/description") - SectionMultiFieldGroup=(component "hds/form/section/multi-field-group") - SectionMultiFieldGroupItem=(component "hds/form/section/multi-field-group/item") - Separator=(component "hds/form/separator") - Footer=(component "hds/form/footer") - ) - }} -
    -{{else}} -
    - {{yield - (hash - Header=(component "hds/form/header") - HeaderTitle=(component "hds/form/header/title") - HeaderDescription=(component "hds/form/header/description") - Section=(component "hds/form/section") - SectionHeader=(component "hds/form/section/header") - SectionHeaderTitle=(component "hds/form/header/title" size="300") - SectionHeaderDescription=(component "hds/form/header/description") - SectionMultiFieldGroup=(component "hds/form/section/multi-field-group") - SectionMultiFieldGroupItem=(component "hds/form/section/multi-field-group/item") - Separator=(component "hds/form/separator") - Footer=(component "hds/form/footer") - ) - }} -
    -{{/if}} \ No newline at end of file diff --git a/packages/components/src/components/hds/form/index.ts b/packages/components/src/components/hds/form/index.ts deleted file mode 100644 index 71878853221..00000000000 --- a/packages/components/src/components/hds/form/index.ts +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import { assert } from '@ember/debug'; -import HdsFormHeaderTitleComponent from './header/title.ts'; - -import { HdsFormTagValues } from './types.ts'; - -import type { HdsFormTags } from './types.ts'; -import type Owner from '@ember/owner'; - -import type { ComponentLike, WithBoundArgs } from '@glint/template'; -import type { HdsFormHeaderSignature } from './header/index.ts'; -import type { HdsFormHeaderTitleSignature } from './header/title.ts'; -import type { HdsFormHeaderDescriptionSignature } from './header/description.ts'; -import type { HdsFormSectionSignature } from './section/index.ts'; -import type { HdsFormSectionHeaderSignature } from './section/header.ts'; -import type { HdsFormSectionMultiFieldGroupSignature } from './section/multi-field-group/index.ts'; -import type { HdsFormSectionMultiFieldGroupItemSignature } from './section/multi-field-group/item.ts'; -import type { HdsFormSeparatorSignature } from './separator/index.ts'; -import type { HdsFormFooterSignature } from './footer/index.ts'; - -export const DEFAULT_TAG = HdsFormTagValues.Form; -export const AVAILABLE_TAGS: string[] = Object.values(HdsFormTagValues); - -export interface HdsFormSignature { - Args: { - tag?: HdsFormTags; - sectionMaxWidth?: string; - }; - Blocks: { - default: [ - { - Header?: ComponentLike; - HeaderTitle?: ComponentLike; - HeaderDescription?: ComponentLike; - Section?: ComponentLike; - SectionHeader?: ComponentLike; - SectionHeaderTitle?: WithBoundArgs< - typeof HdsFormHeaderTitleComponent, - 'size' - >; - SectionHeaderDescription?: ComponentLike; - SectionMultiFieldGroup?: ComponentLike; - SectionMultiFieldGroupItem?: ComponentLike; - Separator?: ComponentLike; - Footer?: ComponentLike; - }, - ]; - }; - Element: HTMLFormElement | HTMLDivElement; -} - -export default class HdsForm extends Component { - tag: HdsFormTags; - - constructor(owner: Owner, args: HdsFormSignature['Args']) { - super(owner, args); - this.tag = args.tag ?? DEFAULT_TAG; - - assert( - `@tag for "Hds::Form" must be one of the following: ${AVAILABLE_TAGS.join(', ')}; received: ${this.tag}`, - AVAILABLE_TAGS.includes(this.tag) - ); - } - - get sectionMaxWidthStyle(): Record { - const sectionMaxWidthStyle: { [key: string]: string } = {}; - - if (this.args.sectionMaxWidth) { - sectionMaxWidthStyle['--hds-form-section-max-width'] = - this.args.sectionMaxWidth; - } - return sectionMaxWidthStyle; - } -} diff --git a/packages/components/src/components/hds/form/indicator/index.gts b/packages/components/src/components/hds/form/indicator/index.gts new file mode 100644 index 00000000000..19ec6fc8a45 --- /dev/null +++ b/packages/components/src/components/hds/form/indicator/index.gts @@ -0,0 +1,67 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +import HdsBadge from '../../badge/index.gts'; +import HdsTextBody from '../../text/body.gts'; + +import hdsT from '../../../../helpers/hds-t.ts'; +import type { HdsBadgeSignature } from '../../badge/index.gts'; +import type { HdsTextBodySignature } from '../../text/body.gts'; + +export interface HdsFormIndicatorSignature { + Args: { + isOptional?: boolean; + isRequired?: boolean; + }; + Element: HdsTextBodySignature['Element'] | HdsBadgeSignature['Element']; +} + +export default class HdsFormIndicator 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-form-indicator']; + + if (this.args.isOptional) { + // add speficic class for "optional" indicator + classes.push('hds-form-indicator--optional'); + } + + return classes.join(' '); + } + + +} diff --git a/packages/components/src/components/hds/form/indicator/index.hbs b/packages/components/src/components/hds/form/indicator/index.hbs deleted file mode 100644 index f474506f966..00000000000 --- a/packages/components/src/components/hds/form/indicator/index.hbs +++ /dev/null @@ -1,18 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} -{{#if @isOptional}} - - ({{hds-t "hds.components.form.common.optional_field_indicator" default="Optional"}}) - -{{/if}} -{{#if @isRequired}} -