Skip to content

Commit 9f5ea9d

Browse files
dchyundchyun
authored
Showcase: Convert Form Base Elements to gts (#3232)
1 parent 75f5bed commit 9f5ea9d

File tree

15 files changed

+1093
-845
lines changed

15 files changed

+1093
-845
lines changed

‎showcase/app/components/page-components/form/base-elements/code-fragments/with-character-count.gts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { on } from '@ember/modifier';
7+
import { tracked } from '@glimmer/tracking';
8+
import { guidFor } from '@ember/object/internals';
9+
import type Owner from '@ember/owner';
10+
11+
import { HdsFormCharacterCount } from '@hashicorp/design-system-components/components';
12+
13+
export interface CodeFragmentWithCharacterCountSignature {
14+
Args: {
15+
value?: string;
16+
ariaLabel?: string;
17+
minLength?: number;
18+
maxLength?: number;
19+
customContent?: boolean;
20+
};
21+
Element: HTMLDivElement;
22+
}
23+
24+
export default class CodeFragmentWithCharacterCount extends Component<CodeFragmentWithCharacterCountSignature> {
25+
@tracked value = '';
26+
uuid = guidFor(this);
27+
28+
constructor(
29+
owner: Owner,
30+
args: CodeFragmentWithCharacterCountSignature['Args'],
31+
) {
32+
super(owner, args);
33+
this.value = this.args.value ?? '';
34+
}
35+
36+
updateValue = (event: Event) => {
37+
const { value } = event.target as HTMLInputElement;
38+
this.value = value;
39+
};
40+
41+
<template>
42+
{{! template-lint-disable require-input-label }}
43+
<input
44+
type="text"
45+
aria-label={{@ariaLabel}}
46+
id={{this.uuid}}
47+
value={{this.value}}
48+
{{on "input" this.updateValue}}
49+
/>
50+
{{#if @customContent}}
51+
<HdsFormCharacterCount
52+
@minLength={{@minLength}}
53+
@maxLength={{@maxLength}}
54+
@controlId={{this.uuid}}
55+
@value={{this.value}}
56+
as |CC|
57+
>
58+
maxLength={{CC.maxLength}}; minLength={{CC.minLength}}; remaining={{CC.remaining}};
59+
shortfall={{CC.shortfall}}; currentLength={{CC.currentLength}};
60+
</HdsFormCharacterCount>
61+
{{else}}
62+
<HdsFormCharacterCount
63+
@minLength={{@minLength}}
64+
@maxLength={{@maxLength}}
65+
@controlId={{this.uuid}}
66+
@value={{this.value}}
67+
/>
68+
{{/if}}
69+
{{! template-lint-enable require-input-label }}
70+
</template>
71+
}

‎showcase/app/components/page-components/form/base-elements/index.gts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { tracked } from '@glimmer/tracking';
7+
import { pageTitle } from 'ember-page-title';
8+
9+
import ShwTextH1 from 'showcase/components/shw/text/h1';
10+
11+
import SubSectionCharacterCount from 'showcase/components/page-components/form/base-elements/sub-sections/character-count';
12+
import SubSectionError from 'showcase/components/page-components/form/base-elements/sub-sections/error';
13+
import SubSectionField from 'showcase/components/page-components/form/base-elements/sub-sections/field';
14+
import SubSectionFieldset from 'showcase/components/page-components/form/base-elements/sub-sections/fieldset';
15+
import SubSectionHelperText from 'showcase/components/page-components/form/base-elements/sub-sections/helper-text';
16+
import SubSectionIndicator from 'showcase/components/page-components/form/base-elements/sub-sections/indicator';
17+
import SubSectionLabel from 'showcase/components/page-components/form/base-elements/sub-sections/label';
18+
import SubSectionLegend from 'showcase/components/page-components/form/base-elements/sub-sections/legend';
19+
import SubSectionVisibilityToggle from 'showcase/components/page-components/form/base-elements/sub-sections/visibility-toggle';
20+
21+
export default class FormBaseElementsIndex extends Component {
22+
@tracked showHighlight = false;
23+
24+
toggleHighlight = () => {
25+
this.showHighlight = !this.showHighlight;
26+
};
27+
28+
<template>
29+
{{pageTitle "BaseElements Component"}}
30+
31+
<ShwTextH1>Form / Base elements</ShwTextH1>
32+
33+
<section data-test-percy>
34+
<SubSectionLabel />
35+
<SubSectionHelperText />
36+
<SubSectionIndicator />
37+
<SubSectionCharacterCount />
38+
<SubSectionError />
39+
<SubSectionLegend />
40+
<SubSectionField
41+
@showHighlight={{this.showHighlight}}
42+
@toggleHighlight={{this.toggleHighlight}}
43+
/>
44+
<SubSectionFieldset
45+
@showHighlight={{this.showHighlight}}
46+
@toggleHighlight={{this.toggleHighlight}}
47+
/>
48+
<SubSectionVisibilityToggle />
49+
</section>
50+
</template>
51+
}

‎showcase/app/components/page-components/form/base-elements/sub-sections/character-count.gts‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
7+
import ShwDivider from 'showcase/components/shw/divider';
8+
import ShwFlex from 'showcase/components/shw/flex';
9+
import ShwGrid from 'showcase/components/shw/grid';
10+
import ShwTextBody from 'showcase/components/shw/text/body';
11+
import ShwTextH2 from 'showcase/components/shw/text/h2';
12+
import ShwTextH3 from 'showcase/components/shw/text/h3';
13+
14+
import CodeFragmentWithCharacterCount from 'showcase/components/page-components/form/base-elements/code-fragments/with-character-count';
15+
16+
const SubSectionCharacterCount: TemplateOnlyComponent = <template>
17+
<ShwTextH2>Character count</ShwTextH2>
18+
19+
<ShwTextH3>Default content</ShwTextH3>
20+
21+
<ShwTextBody>Base</ShwTextBody>
22+
23+
<ShwGrid @columns={{4}} as |SG|>
24+
<SG.Item @label="currentLength = 0">
25+
<CodeFragmentWithCharacterCount @ariaLabel="currentLength = 0" />
26+
</SG.Item>
27+
<SG.Item @label="currentLength > 0">
28+
<CodeFragmentWithCharacterCount
29+
@ariaLabel="currentLength > 0"
30+
@value="cl"
31+
/>
32+
</SG.Item>
33+
</ShwGrid>
34+
35+
<ShwTextBody>maxLength</ShwTextBody>
36+
37+
<ShwGrid @columns={{4}} as |SG|>
38+
<SG.Item @label="currentLength = 0">
39+
<CodeFragmentWithCharacterCount
40+
@ariaLabel="currentLength = 0"
41+
@maxLength={{25}}
42+
/>
43+
</SG.Item>
44+
<SG.Item @label="currentLength < maxLength">
45+
<CodeFragmentWithCharacterCount
46+
@ariaLabel="currentLength < maxLength"
47+
@maxLength={{25}}
48+
@value="cluster"
49+
/>
50+
</SG.Item>
51+
<SG.Item @label="currentLength = maxLength">
52+
<CodeFragmentWithCharacterCount
53+
@ariaLabel="currentLength = maxLength"
54+
@maxLength={{25}}
55+
@value="cluster-length-is-longer-"
56+
/>
57+
</SG.Item>
58+
<SG.Item @label="currentLength > maxLength">
59+
<CodeFragmentWithCharacterCount
60+
@ariaLabel="currentLength > maxLength"
61+
@maxLength={{25}}
62+
@value="cluster-length-is-longer-than"
63+
/>
64+
</SG.Item>
65+
</ShwGrid>
66+
67+
<ShwTextBody>minLength</ShwTextBody>
68+
69+
<ShwGrid @columns={{4}} as |SG|>
70+
<SG.Item @label="currentLength = 0">
71+
<CodeFragmentWithCharacterCount
72+
@ariaLabel="currentLength = 0"
73+
@minLength={{3}}
74+
/>
75+
</SG.Item>
76+
<SG.Item @label="currentLength < maxLength">
77+
<CodeFragmentWithCharacterCount
78+
@ariaLabel="currentLength < maxLength"
79+
@minLength={{3}}
80+
@value="c"
81+
/>
82+
</SG.Item>
83+
<SG.Item @label="currentLength >= minLength">
84+
<CodeFragmentWithCharacterCount
85+
@ariaLabel="currentLength >= minLength"
86+
@minLength={{3}}
87+
@value="clu"
88+
/>
89+
</SG.Item>
90+
<SG.Item />
91+
</ShwGrid>
92+
93+
<ShwTextBody>minLength + maxLength</ShwTextBody>
94+
95+
<ShwGrid @columns={{4}} as |SG|>
96+
<SG.Item @label="currentLength = 0">
97+
<CodeFragmentWithCharacterCount
98+
@ariaLabel="currentLength = 0"
99+
@minLength={{3}}
100+
@maxLength={{25}}
101+
/>
102+
</SG.Item>
103+
<SG.Item @label="currentLength < minLength">
104+
<CodeFragmentWithCharacterCount
105+
@ariaLabel="currentLength < minLength"
106+
@minLength={{3}}
107+
@maxLength={{25}}
108+
@value="c"
109+
/>
110+
</SG.Item>
111+
<SG.Item @label="minLength <= currentLength <= maxLength">
112+
<CodeFragmentWithCharacterCount
113+
@ariaLabel="minLength <= currentLength <= maxLength"
114+
@minLength={{3}}
115+
@maxLength={{25}}
116+
@value="cluster"
117+
/>
118+
</SG.Item>
119+
<SG.Item @label="currentLength > maxLength">
120+
<CodeFragmentWithCharacterCount
121+
@ariaLabel="currentLength > maxLength"
122+
@minLength={{3}}
123+
@maxLength={{25}}
124+
@value="cluster-length-is-longer-than"
125+
/>
126+
</SG.Item>
127+
</ShwGrid>
128+
129+
<ShwDivider @level={{2}} />
130+
131+
<ShwTextH3>Custom content</ShwTextH3>
132+
133+
<ShwFlex @direction="column" as |SF|>
134+
<SF.Item @label="With custom content">
135+
<CodeFragmentWithCharacterCount
136+
@ariaLabel="with custom content"
137+
@minLength={{20}}
138+
@maxLength={{40}}
139+
@customContent={{true}}
140+
@value="Lorem ipsum dolor"
141+
/>
142+
</SF.Item>
143+
</ShwFlex>
144+
145+
<ShwDivider />
146+
</template>;
147+
148+
export default SubSectionCharacterCount;

‎showcase/app/components/page-components/form/base-elements/sub-sections/error.gts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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 ShwDivider from 'showcase/components/shw/divider';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
import ShwTextH2 from 'showcase/components/shw/text/h2';
11+
import ShwOutliner from 'showcase/components/shw/outliner';
12+
13+
import { HdsFormError } from '@hashicorp/design-system-components/components';
14+
15+
const SubSectionError: TemplateOnlyComponent = <template>
16+
<ShwTextH2>Error</ShwTextH2>
17+
18+
<ShwFlex @direction="column" as |SF|>
19+
<SF.Item @label="With simple text">
20+
<HdsFormError>This is a simple error message</HdsFormError>
21+
</SF.Item>
22+
<SF.Item @label="With text that spans multiple lines">
23+
<ShwOutliner {{style width="250px"}}>
24+
<HdsFormError>This is a very long error message that should span on
25+
multiple lines</HdsFormError>
26+
</ShwOutliner>
27+
</SF.Item>
28+
<SF.Item @label="With multiple error messages">
29+
<HdsFormError as |Error|>
30+
<Error.Message>First error message</Error.Message>
31+
<Error.Message>Second error message</Error.Message>
32+
</HdsFormError>
33+
</SF.Item>
34+
</ShwFlex>
35+
36+
<ShwDivider />
37+
</template>;
38+
39+
export default SubSectionError;

0 commit comments

Comments
 (0)