Skip to content

Commit 65895e4

Browse files
dchyundchyun
authored
Showcase: Convert SuperSelect to gts (#3289)
1 parent 8eb28db commit 65895e4

File tree

23 files changed

+2165
-1784
lines changed

23 files changed

+2165
-1784
lines changed

‎showcase/app/components/mock/components/form/super-select/generic-content.gts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎showcase/app/components/mock/components/form/super-select/selected-component-multiple.gts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { fn } from '@ember/helper';
7+
import { tracked } from '@glimmer/tracking';
8+
import type Owner from '@ember/owner';
9+
10+
import CodeFragmentWithOptionsGenericContent from 'showcase/components/page-components/form/super-select/code-fragments/with-options-generic-content';
11+
12+
import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
13+
14+
import type { HdsFormSuperSelectMultipleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
15+
16+
const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
17+
18+
const PLACES_OPTIONS = [
19+
'Oregon (us-west-2)',
20+
'N. Virginia (us-east-1)',
21+
'ALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenString',
22+
'Ireland (eu-west-1)',
23+
'London(eu-west-2)',
24+
'Frankfurt (eu-central-1)',
25+
];
26+
27+
export interface CodeFragmentWithMultipleBaseElementSignature {
28+
Args: {
29+
options?: 'basic' | 'places';
30+
isSelected?: boolean;
31+
hasBeforeOptionsComponent?: boolean;
32+
hasAfterOptionsComponent?: boolean;
33+
hasResultCountMessage?: boolean;
34+
placeholder?: HdsFormSuperSelectMultipleBaseSignature['Args']['placeholder'];
35+
disabled?: HdsFormSuperSelectMultipleBaseSignature['Args']['disabled'];
36+
isInvalid?: HdsFormSuperSelectMultipleBaseSignature['Args']['isInvalid'];
37+
matchTriggerWidth?: HdsFormSuperSelectMultipleBaseSignature['Args']['matchTriggerWidth'];
38+
initiallyOpened?: HdsFormSuperSelectMultipleBaseSignature['Args']['initiallyOpened'];
39+
verticalPosition?: HdsFormSuperSelectMultipleBaseSignature['Args']['verticalPosition'];
40+
horizontalPosition?: HdsFormSuperSelectMultipleBaseSignature['Args']['horizontalPosition'];
41+
searchEnabled?: HdsFormSuperSelectMultipleBaseSignature['Args']['searchEnabled'];
42+
dropdownMaxWidth?: HdsFormSuperSelectMultipleBaseSignature['Args']['dropdownMaxWidth'];
43+
showAfterOptions?: HdsFormSuperSelectMultipleBaseSignature['Args']['showAfterOptions'];
44+
afterOptionsContent?: HdsFormSuperSelectMultipleBaseSignature['Args']['afterOptionsContent'];
45+
};
46+
Element: HdsFormSuperSelectMultipleBaseSignature['Element'];
47+
}
48+
49+
export default class CodeFragmentWithMultipleBaseElement extends Component<CodeFragmentWithMultipleBaseElementSignature> {
50+
@tracked selectedOptions;
51+
52+
options = OPTIONS;
53+
54+
constructor(
55+
owner: Owner,
56+
args: CodeFragmentWithMultipleBaseElementSignature['Args'],
57+
) {
58+
super(owner, args);
59+
if (args.isSelected) {
60+
this.selectedOptions =
61+
args.options === 'places'
62+
? [PLACES_OPTIONS[0], PLACES_OPTIONS[1]]
63+
: [OPTIONS[0], OPTIONS[1]];
64+
}
65+
if (args.options === 'places') {
66+
this.options = PLACES_OPTIONS;
67+
}
68+
}
69+
70+
get resultCountMessage() {
71+
return `Custom result count: ${this.options.length} options`;
72+
}
73+
74+
<template>
75+
<HdsFormSuperSelectMultipleBase
76+
@onChange={{fn (mut this.selectedOptions)}}
77+
@options={{this.options}}
78+
@selected={{this.selectedOptions}}
79+
@beforeOptionsComponent={{if
80+
@hasBeforeOptionsComponent
81+
CodeFragmentWithOptionsGenericContent
82+
}}
83+
@afterOptionsComponent={{if
84+
@hasAfterOptionsComponent
85+
CodeFragmentWithOptionsGenericContent
86+
}}
87+
@placeholder={{@placeholder}}
88+
@disabled={{@disabled}}
89+
@isInvalid={{@isInvalid}}
90+
@matchTriggerWidth={{@matchTriggerWidth}}
91+
@initiallyOpened={{@initiallyOpened}}
92+
@verticalPosition={{@verticalPosition}}
93+
@horizontalPosition={{@horizontalPosition}}
94+
@searchEnabled={{@searchEnabled}}
95+
@dropdownMaxWidth={{@dropdownMaxWidth}}
96+
@showAfterOptions={{@showAfterOptions}}
97+
@afterOptionsContent={{@afterOptionsContent}}
98+
@resultCountMessage={{if @hasResultCountMessage this.resultCountMessage}}
99+
@ariaLabel="Label"
100+
...attributes
101+
as |option|
102+
>
103+
{{option}}
104+
</HdsFormSuperSelectMultipleBase>
105+
</template>
106+
}

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

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { fn, hash } from '@ember/helper';
7+
import { tracked } from '@glimmer/tracking';
8+
import { eq } from 'ember-truth-helpers';
9+
import type Owner from '@ember/owner';
10+
11+
import CodeFragmentWithSelectedComponent from 'showcase/components/page-components/form/super-select/code-fragments/with-selected-component';
12+
13+
import { HdsFormSuperSelectMultipleField } from '@hashicorp/design-system-components/components';
14+
15+
import type { HdsFormSuperSelectMultipleFieldSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/field';
16+
17+
interface GroupedOption {
18+
groupName: string;
19+
options: (string | GroupedOption)[];
20+
}
21+
22+
const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
23+
24+
const CLUSTER_SIZE_OPTIONS = [
25+
{
26+
size: 'Extra Small',
27+
description: '2 vCPU | 1 GiB RAM',
28+
price: '$0.02',
29+
},
30+
{
31+
size: 'Small',
32+
description: '2 vCPU | 2 GiB RAM',
33+
price: '$0.04',
34+
disabled: true,
35+
},
36+
{
37+
size: 'Medium',
38+
description: '4 vCPU | 4 GiB RAM',
39+
price: '$0.08',
40+
disabled: true,
41+
},
42+
{ size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
43+
{
44+
size: 'Extra Large',
45+
description: '16 vCPU | 16 GiB RAM',
46+
price: '$0.32',
47+
},
48+
];
49+
50+
const GROUPED_OPTIONS = [
51+
{ groupName: 'Group', options: ['Option 1', 'Option 2'] },
52+
{ groupName: 'Group', options: ['Option 3', 'Option 4'] },
53+
{
54+
groupName: 'Group',
55+
options: [
56+
{ groupName: 'Subgroup', options: ['Option 5', 'Option 6'] },
57+
{ groupName: 'Subgroup', options: ['Option 7', 'Option 8'] },
58+
],
59+
},
60+
{
61+
groupName: 'Group',
62+
options: [
63+
{ groupName: 'Subgroup', options: ['Option 10', 'Option 11'] },
64+
{ groupName: 'Subgroup', options: ['Option 12', 'Option 13'] },
65+
],
66+
},
67+
];
68+
69+
export interface CodeFragmentWithMultipleFieldElementSignature {
70+
Args: {
71+
options?: 'basic' | 'cluster-size' | 'grouped';
72+
isSelected?: boolean;
73+
hasSelectedItemComponent?: boolean;
74+
hasRichContent?: boolean;
75+
isInvalid?: HdsFormSuperSelectMultipleFieldSignature['Args']['isInvalid'];
76+
isRequired?: HdsFormSuperSelectMultipleFieldSignature['Args']['isRequired'];
77+
isOptional?: HdsFormSuperSelectMultipleFieldSignature['Args']['isOptional'];
78+
disabled?: HdsFormSuperSelectMultipleFieldSignature['Args']['disabled'];
79+
initiallyOpened?: HdsFormSuperSelectMultipleFieldSignature['Args']['initiallyOpened'];
80+
verticalPosition?: HdsFormSuperSelectMultipleFieldSignature['Args']['verticalPosition'];
81+
horizontalPosition?: HdsFormSuperSelectMultipleFieldSignature['Args']['horizontalPosition'];
82+
};
83+
Blocks: {
84+
default: [
85+
{
86+
Label?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Label'];
87+
HelperText?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['HelperText'];
88+
Error?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Error'];
89+
Options?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Options'];
90+
options?: unknown;
91+
},
92+
];
93+
};
94+
}
95+
96+
export default class CodeFragmentWithMultipleFieldElement extends Component<CodeFragmentWithMultipleFieldElementSignature> {
97+
@tracked selectedOptions;
98+
99+
constructor(
100+
owner: Owner,
101+
args: CodeFragmentWithMultipleFieldElementSignature['Args'],
102+
) {
103+
super(owner, args);
104+
if (args.isSelected) {
105+
if (args.options === 'grouped') {
106+
this.selectedOptions = [
107+
(this.options as GroupedOption[])[0]?.options[0] as
108+
| GroupedOption
109+
| string,
110+
(this.options as GroupedOption[])[1]?.options[0] as
111+
| GroupedOption
112+
| string,
113+
];
114+
} else {
115+
this.selectedOptions = [this.options[0], this.options[1]];
116+
}
117+
}
118+
}
119+
120+
get options() {
121+
const { options } = this.args;
122+
123+
if (options === 'cluster-size') {
124+
return CLUSTER_SIZE_OPTIONS;
125+
} else if (options === 'grouped') {
126+
return GROUPED_OPTIONS;
127+
} else {
128+
return OPTIONS;
129+
}
130+
}
131+
132+
<template>
133+
<HdsFormSuperSelectMultipleField
134+
@onChange={{fn (mut this.selectedOptions)}}
135+
@options={{this.options}}
136+
@selected={{this.selectedOptions}}
137+
@selectedItemComponent={{if
138+
@hasSelectedItemComponent
139+
CodeFragmentWithSelectedComponent
140+
}}
141+
@isInvalid={{@isInvalid}}
142+
@isRequired={{@isRequired}}
143+
@isOptional={{@isOptional}}
144+
@disabled={{@disabled}}
145+
@initiallyOpened={{@initiallyOpened}}
146+
@verticalPosition={{@verticalPosition}}
147+
@horizontalPosition={{@horizontalPosition}}
148+
as |F|
149+
>
150+
{{#if (eq @options "grouped")}}
151+
{{yield
152+
(hash
153+
Label=F.Label
154+
HelperText=F.HelperText
155+
Error=F.Error
156+
Options=F.Options
157+
)
158+
}}
159+
{{else}}
160+
{{yield
161+
(hash
162+
Label=F.Label
163+
HelperText=F.HelperText
164+
Error=F.Error
165+
Options=F.Options
166+
options=F.options
167+
)
168+
}}
169+
{{/if}}
170+
{{#unless @hasRichContent}}
171+
{{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
172+
{{F.options}}
173+
{{/unless}}
174+
</HdsFormSuperSelectMultipleField>
175+
</template>
176+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import style from 'ember-style-modifier';
7+
8+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
9+
10+
const CodeFragmentWithOptionsGenericContent: TemplateOnlyComponent = <template>
11+
<ShwPlaceholder
12+
@text="placeholder"
13+
{{style textShadow="0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff"}}
14+
@background="hsla(0, 100%, 92%, 1)"
15+
@height="40px"
16+
/>
17+
</template>;
18+
19+
export default CodeFragmentWithOptionsGenericContent;

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
* Copyright (c) HashiCorp, Inc.
33
* SPDX-License-Identifier: MPL-2.0
44
*/
5-
65
import type { TemplateOnlyComponent } from '@ember/component/template-only';
76

87
import { HdsTextBody } from '@hashicorp/design-system-components/components';
98

10-
export interface MockFormSuperSelectSelectedComponentSingleSignature {
9+
export interface CodeFragmentWithSelectedComponentSignature {
1110
Args: {
1211
option: {
1312
size: string;
@@ -16,10 +15,9 @@ export interface MockFormSuperSelectSelectedComponentSingleSignature {
1615
Element: HTMLSpanElement;
1716
}
1817

19-
// 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
20-
const MockFormSuperSelectSelectedComponentSingle: TemplateOnlyComponent<MockFormSuperSelectSelectedComponentSingleSignature> =
18+
const CodeFragmentWithSelectedComponent: TemplateOnlyComponent<CodeFragmentWithSelectedComponentSignature> =
2119
<template>
2220
<HdsTextBody @tag="span" @size="200">{{@option.size}}</HdsTextBody>
2321
</template>;
2422

25-
export default MockFormSuperSelectSelectedComponentSingle;
23+
export default CodeFragmentWithSelectedComponent;

0 commit comments

Comments
 (0)