Showcase: Convert SuperSelect to gts

showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-base-element.gts

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
+
+import CodeFragmentWithOptionsGenericContent from 'showcase/components/page-components/form/super-select/code-fragments/with-options-generic-content';
+
+import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectMultipleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+const PLACES_OPTIONS = [
+  'Oregon (us-west-2)',
+  'N. Virginia (us-east-1)',
+  'ALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenString',
+  'Ireland (eu-west-1)',
+  'London(eu-west-2)',
+  'Frankfurt (eu-central-1)',
+];
+
+export interface CodeFragmentWithMultipleBaseElementSignature {
+  Args: {
+    options?: 'basic' | 'places';
+    isSelected?: boolean;
+    hasBeforeOptionsComponent?: boolean;
+    hasAfterOptionsComponent?: boolean;
+    hasResultCountMessage?: boolean;
+    placeholder?: HdsFormSuperSelectMultipleBaseSignature['Args']['placeholder'];
+    disabled?: HdsFormSuperSelectMultipleBaseSignature['Args']['disabled'];
+    isInvalid?: HdsFormSuperSelectMultipleBaseSignature['Args']['isInvalid'];
+    matchTriggerWidth?: HdsFormSuperSelectMultipleBaseSignature['Args']['matchTriggerWidth'];
+    initiallyOpened?: HdsFormSuperSelectMultipleBaseSignature['Args']['initiallyOpened'];
+    verticalPosition?: HdsFormSuperSelectMultipleBaseSignature['Args']['verticalPosition'];
+    horizontalPosition?: HdsFormSuperSelectMultipleBaseSignature['Args']['horizontalPosition'];
+    searchEnabled?: HdsFormSuperSelectMultipleBaseSignature['Args']['searchEnabled'];
+    dropdownMaxWidth?: HdsFormSuperSelectMultipleBaseSignature['Args']['dropdownMaxWidth'];
+    showAfterOptions?: HdsFormSuperSelectMultipleBaseSignature['Args']['showAfterOptions'];
+    afterOptionsContent?: HdsFormSuperSelectMultipleBaseSignature['Args']['afterOptionsContent'];
+  };
+  Element: HdsFormSuperSelectMultipleBaseSignature['Element'];
+}
+
+export default class CodeFragmentWithMultipleBaseElement extends Component<CodeFragmentWithMultipleBaseElementSignature> {
+  @tracked selectedOptions;
+
+  options = OPTIONS;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithMultipleBaseElementSignature['Args'],
+  ) {
+    super(owner, args);
+    if (args.isSelected) {
+      this.selectedOptions =
+        args.options === 'places'
+          ? [PLACES_OPTIONS[0], PLACES_OPTIONS[1]]
+          : [OPTIONS[0], OPTIONS[1]];
+    }
+    if (args.options === 'places') {
+      this.options = PLACES_OPTIONS;
+    }
+  }
+
+  get resultCountMessage() {
+    return `Custom result count: ${this.options.length} options`;
+  }
+
+  <template>
+    <HdsFormSuperSelectMultipleBase
+      @onChange={{fn (mut this.selectedOptions)}}
+      @options={{this.options}}
+      @selected={{this.selectedOptions}}
+      @beforeOptionsComponent={{if
+        @hasBeforeOptionsComponent
+        CodeFragmentWithOptionsGenericContent
+      }}
+      @afterOptionsComponent={{if
+        @hasAfterOptionsComponent
+        CodeFragmentWithOptionsGenericContent
+      }}
+      @placeholder={{@placeholder}}
+      @disabled={{@disabled}}
+      @isInvalid={{@isInvalid}}
+      @matchTriggerWidth={{@matchTriggerWidth}}
+      @initiallyOpened={{@initiallyOpened}}
+      @verticalPosition={{@verticalPosition}}
+      @horizontalPosition={{@horizontalPosition}}
+      @searchEnabled={{@searchEnabled}}
+      @dropdownMaxWidth={{@dropdownMaxWidth}}
+      @showAfterOptions={{@showAfterOptions}}
+      @afterOptionsContent={{@afterOptionsContent}}
+      @resultCountMessage={{if @hasResultCountMessage this.resultCountMessage}}
+      @ariaLabel="Label"
+      ...attributes
+      as |option|
+    >
+      {{option}}
+    </HdsFormSuperSelectMultipleBase>
+  </template>
+}

showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-field-element.gts

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn, hash } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { eq } from 'ember-truth-helpers';
+import type Owner from '@ember/owner';
+
+import CodeFragmentWithSelectedComponent from 'showcase/components/page-components/form/super-select/code-fragments/with-selected-component';
+
+import { HdsFormSuperSelectMultipleField } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectMultipleFieldSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/field';
+
+interface GroupedOption {
+  groupName: string;
+  options: (string | GroupedOption)[];
+}
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+const CLUSTER_SIZE_OPTIONS = [
+  {
+    size: 'Extra Small',
+    description: '2 vCPU | 1 GiB RAM',
+    price: '$0.02',
+  },
+  {
+    size: 'Small',
+    description: '2 vCPU | 2 GiB RAM',
+    price: '$0.04',
+    disabled: true,
+  },
+  {
+    size: 'Medium',
+    description: '4 vCPU | 4 GiB RAM',
+    price: '$0.08',
+    disabled: true,
+  },
+  { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
+  {
+    size: 'Extra Large',
+    description: '16 vCPU | 16 GiB RAM',
+    price: '$0.32',
+  },
+];
+
+const GROUPED_OPTIONS = [
+  { groupName: 'Group', options: ['Option 1', 'Option 2'] },
+  { groupName: 'Group', options: ['Option 3', 'Option 4'] },
+  {
+    groupName: 'Group',
+    options: [
+      { groupName: 'Subgroup', options: ['Option 5', 'Option 6'] },
+      { groupName: 'Subgroup', options: ['Option 7', 'Option 8'] },
+    ],
+  },
+  {
+    groupName: 'Group',
+    options: [
+      { groupName: 'Subgroup', options: ['Option 10', 'Option 11'] },
+      { groupName: 'Subgroup', options: ['Option 12', 'Option 13'] },
+    ],
+  },
+];
+
+export interface CodeFragmentWithMultipleFieldElementSignature {
+  Args: {
+    options?: 'basic' | 'cluster-size' | 'grouped';
+    isSelected?: boolean;
+    hasSelectedItemComponent?: boolean;
+    hasRichContent?: boolean;
+    isInvalid?: HdsFormSuperSelectMultipleFieldSignature['Args']['isInvalid'];
+    isRequired?: HdsFormSuperSelectMultipleFieldSignature['Args']['isRequired'];
+    isOptional?: HdsFormSuperSelectMultipleFieldSignature['Args']['isOptional'];
+    disabled?: HdsFormSuperSelectMultipleFieldSignature['Args']['disabled'];
+    initiallyOpened?: HdsFormSuperSelectMultipleFieldSignature['Args']['initiallyOpened'];
+    verticalPosition?: HdsFormSuperSelectMultipleFieldSignature['Args']['verticalPosition'];
+    horizontalPosition?: HdsFormSuperSelectMultipleFieldSignature['Args']['horizontalPosition'];
+  };
+  Blocks: {
+    default: [
+      {
+        Label?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Label'];
+        HelperText?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['HelperText'];
+        Error?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Error'];
+        Options?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Options'];
+        options?: unknown;
+      },
+    ];
+  };
+}
+
+export default class CodeFragmentWithMultipleFieldElement extends Component<CodeFragmentWithMultipleFieldElementSignature> {
+  @tracked selectedOptions;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithMultipleFieldElementSignature['Args'],
+  ) {
+    super(owner, args);
+    if (args.isSelected) {
+      if (args.options === 'grouped') {
+        this.selectedOptions = [
+          (this.options as GroupedOption[])[0]?.options[0] as
+            | GroupedOption
+            | string,
+          (this.options as GroupedOption[])[1]?.options[0] as
+            | GroupedOption
+            | string,
+        ];
+      } else {
+        this.selectedOptions = [this.options[0], this.options[1]];
+      }
+    }
+  }
+
+  get options() {
+    const { options } = this.args;
+
+    if (options === 'cluster-size') {
+      return CLUSTER_SIZE_OPTIONS;
+    } else if (options === 'grouped') {
+      return GROUPED_OPTIONS;
+    } else {
+      return OPTIONS;
+    }
+  }
+
+  <template>
+    <HdsFormSuperSelectMultipleField
+      @onChange={{fn (mut this.selectedOptions)}}
+      @options={{this.options}}
+      @selected={{this.selectedOptions}}
+      @selectedItemComponent={{if
+        @hasSelectedItemComponent
+        CodeFragmentWithSelectedComponent
+      }}
+      @isInvalid={{@isInvalid}}
+      @isRequired={{@isRequired}}
+      @isOptional={{@isOptional}}
+      @disabled={{@disabled}}
+      @initiallyOpened={{@initiallyOpened}}
+      @verticalPosition={{@verticalPosition}}
+      @horizontalPosition={{@horizontalPosition}}
+      as |F|
+    >
+      {{#if (eq @options "grouped")}}
+        {{yield
+          (hash
+            Label=F.Label
+            HelperText=F.HelperText
+            Error=F.Error
+            Options=F.Options
+          )
+        }}
+      {{else}}
+        {{yield
+          (hash
+            Label=F.Label
+            HelperText=F.HelperText
+            Error=F.Error
+            Options=F.Options
+            options=F.options
+          )
+        }}
+      {{/if}}
+      {{#unless @hasRichContent}}
+        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+        {{F.options}}
+      {{/unless}}
+    </HdsFormSuperSelectMultipleField>
+  </template>
+}

showcase/app/components/page-components/form/super-select/code-fragments/with-options-generic-content.gts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import StyleModifier from 'ember-style-modifier';
+
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+
+const CodeFragmentWithOptionsGenericContent: TemplateOnlyComponent = <template>
+  <ShwPlaceholder
+    @text="placeholder"
+    {{StyleModifier textShadow="0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff"}}
+    @background="hsla(0, 100%, 92%, 1)"
+    @height="40px"
+  />
+</template>;
+
+export default CodeFragmentWithOptionsGenericContent;

showcase/app/components/mock/components/form/super-select/selected-component-single.gts → showcase/app/components/page-components/form/super-select/code-fragments/with-selected-component.gts

@@ -2,12 +2,11 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
 import { HdsTextBody } from '@hashicorp/design-system-components/components';
 
-export interface MockFormSuperSelectSelectedComponentSingleSignature {
+export interface CodeFragmentWithSelectedComponentSignature {
   Args: {
     option: {
       size: string;
@@ -16,10 +15,9 @@ export interface MockFormSuperSelectSelectedComponentSingleSignature {
   Element: HTMLSpanElement;
 }
 
-// This is not an HDS component, but a supporting file for `form/super-select.hbs` which requires a component to be passed in for the showcase
-const MockFormSuperSelectSelectedComponentSingle: TemplateOnlyComponent<MockFormSuperSelectSelectedComponentSingleSignature> =
+const CodeFragmentWithSelectedComponent: TemplateOnlyComponent<CodeFragmentWithSelectedComponentSignature> =
   <template>
     <HdsTextBody @tag="span" @size="200">{{@option.size}}</HdsTextBody>
   </template>;
 
-export default MockFormSuperSelectSelectedComponentSingle;
+export default CodeFragmentWithSelectedComponent;