Skip to content

Commit 2208d89

Browse files
dchyundchyun
authored
Showcase: Convert FormCheckbox to gts (#3233)
1 parent 996312f commit 2208d89

File tree

7 files changed

+322
-216
lines changed

7 files changed

+322
-216
lines changed

‎showcase/app/components/page-components/form/checkbox/index.gts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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 { pageTitle } from 'ember-page-title';
7+
8+
import ShwTextH1 from 'showcase/components/shw/text/h1';
9+
10+
import SubSectionBaseControl from 'showcase/components/page-components/form/checkbox/sub-sections/base-control';
11+
import SubSectionFieldControl from 'showcase/components/page-components/form/checkbox/sub-sections/field-control';
12+
import SubSectionFieldGroup from 'showcase/components/page-components/form/checkbox/sub-sections/group-control';
13+
14+
const FormCheckboxIndex: TemplateOnlyComponent = <template>
15+
{{pageTitle "Checkbox Component"}}
16+
17+
<ShwTextH1>Checkbox</ShwTextH1>
18+
19+
<section data-test-percy>
20+
<SubSectionBaseControl />
21+
<SubSectionFieldControl />
22+
<SubSectionFieldGroup />
23+
</section>
24+
</template>;
25+
26+
export default FormCheckboxIndex;

‎showcase/app/components/page-components/form/checkbox/sub-sections/base-control.gts‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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 { capitalize } from '@ember/string';
7+
import { eq } from 'ember-truth-helpers';
8+
9+
import ShwDivider from 'showcase/components/shw/divider';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
import ShwTextH2 from 'showcase/components/shw/text/h2';
13+
import ShwTextH3 from 'showcase/components/shw/text/h3';
14+
15+
import { HdsFormCheckboxBase } from '@hashicorp/design-system-components/components';
16+
17+
const STATES = ['default', 'hover', 'focus'];
18+
19+
const SubSectionBaseControl: TemplateOnlyComponent = <template>
20+
<ShwTextH2>"Base" control</ShwTextH2>
21+
22+
<ShwTextH3>Interaction status</ShwTextH3>
23+
24+
<ShwFlex @gap="2rem" as |SF|>
25+
<SF.Item @label="Unchecked">
26+
<HdsFormCheckboxBase aria-label="Unchecked checkbox" />
27+
</SF.Item>
28+
<SF.Item @label="Checked">
29+
<HdsFormCheckboxBase checked="checked" aria-label="Checked checkbox" />
30+
</SF.Item>
31+
<SF.Item @label="Indeterminate">
32+
<HdsFormCheckboxBase
33+
indeterminate={{true}}
34+
aria-label="Indeterminate checkbox"
35+
/>
36+
</SF.Item>
37+
</ShwFlex>
38+
39+
<ShwTextH3>States (Base / Disabled)</ShwTextH3>
40+
41+
<ShwFlex @gap="2rem" as |SF|>
42+
{{#each STATES as |state|}}
43+
<SF.Item @label={{capitalize state}}>
44+
<ShwGrid
45+
@columns={{3}}
46+
mock-state-value={{state}}
47+
mock-state-selector="input"
48+
as |SG|
49+
>
50+
<SG.Item>
51+
<HdsFormCheckboxBase aria-label="Checkbox" />
52+
</SG.Item>
53+
<SG.Item>
54+
<HdsFormCheckboxBase
55+
checked="checked"
56+
aria-label="Checked checkbox"
57+
/>
58+
</SG.Item>
59+
<SG.Item>
60+
<HdsFormCheckboxBase
61+
indeterminate={{true}}
62+
aria-label="Indeterminate checkbox"
63+
/>
64+
</SG.Item>
65+
{{#unless (eq state "focus")}}
66+
<SG.Item>
67+
<HdsFormCheckboxBase
68+
disabled="disabled"
69+
aria-label="Disabled checkbox"
70+
/>
71+
</SG.Item>
72+
<SG.Item>
73+
<HdsFormCheckboxBase
74+
checked="checked"
75+
disabled="disabled"
76+
aria-label="Checked, disabled checkbox"
77+
/>
78+
</SG.Item>
79+
<SG.Item>
80+
<HdsFormCheckboxBase
81+
indeterminate={{true}}
82+
disabled="disabled"
83+
aria-label="Indeterminate, disabled checkbox"
84+
/>
85+
</SG.Item>
86+
{{/unless}}
87+
</ShwGrid>
88+
</SF.Item>
89+
{{/each}}
90+
</ShwFlex>
91+
92+
<ShwTextH3>Custom layout</ShwTextH3>
93+
94+
<ShwFlex as |SF|>
95+
<SF.Item>
96+
<div class="shw-component-form-checkbox-base-custom-layout">
97+
<label for="my-custom-checkbox-example">Custom label</label>
98+
<HdsFormCheckboxBase id="my-custom-checkbox-example" />
99+
<span>Some extra content</span>
100+
</div>
101+
</SF.Item>
102+
</ShwFlex>
103+
104+
<ShwDivider />
105+
</template>;
106+
107+
export default SubSectionBaseControl;

‎showcase/app/components/page-components/form/checkbox/sub-sections/field-control.gts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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 ShwGrid from 'showcase/components/shw/grid';
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextH3 from 'showcase/components/shw/text/h3';
11+
12+
import {
13+
HdsFormCheckboxField,
14+
HdsLinkInline,
15+
} from '@hashicorp/design-system-components/components';
16+
17+
const SubSectionFieldControl: TemplateOnlyComponent = <template>
18+
<ShwTextH2>"Field" control</ShwTextH2>
19+
20+
<ShwTextH3>Content</ShwTextH3>
21+
22+
<ShwGrid @columns={{3}} as |SG|>
23+
<SG.Item @label="Only label">
24+
<HdsFormCheckboxField as |F|>
25+
<F.Label>This is the label text</F.Label>
26+
</HdsFormCheckboxField>
27+
</SG.Item>
28+
<SG.Item @label="Label + Helper text">
29+
<HdsFormCheckboxField checked="checked" as |F|>
30+
<F.Label>This is the label</F.Label>
31+
<F.HelperText>This is the helper text</F.HelperText>
32+
</HdsFormCheckboxField>
33+
</SG.Item>
34+
<SG.Item @label="Label + Helper text with link">
35+
<HdsFormCheckboxField checked="checked" as |F|>
36+
<F.Label>This is the label</F.Label>
37+
<F.HelperText>This is the helper text
38+
<HdsLinkInline @route="index">with a link</HdsLinkInline></F.HelperText>
39+
</HdsFormCheckboxField>
40+
</SG.Item>
41+
<SG.Item @label="Label + Error">
42+
<HdsFormCheckboxField as |F|>
43+
<F.Label>This is the label</F.Label>
44+
<F.Error>This is the error</F.Error>
45+
</HdsFormCheckboxField>
46+
</SG.Item>
47+
<SG.Item @label="Label + Helper text + Error">
48+
<HdsFormCheckboxField checked="checked" as |F|>
49+
<F.Label>This is the label</F.Label>
50+
<F.HelperText>This is the helper text</F.HelperText>
51+
<F.Error>This is the error</F.Error>
52+
</HdsFormCheckboxField>
53+
</SG.Item>
54+
<SG.Item @label="Label + Helper text + Errors">
55+
<HdsFormCheckboxField checked="checked" as |F|>
56+
<F.Label>This is the label</F.Label>
57+
<F.HelperText>This is the helper text</F.HelperText>
58+
<F.Error as |E|>
59+
<E.Message>First error message</E.Message>
60+
<E.Message>Second error message</E.Message>
61+
</F.Error>
62+
</HdsFormCheckboxField>
63+
</SG.Item>
64+
</ShwGrid>
65+
66+
<ShwDivider @level={{2}} />
67+
68+
<ShwTextH3>States</ShwTextH3>
69+
70+
<ShwGrid @columns={{3}} as |SG|>
71+
<SG.Item @label="Disabled">
72+
<HdsFormCheckboxField disabled as |F|>
73+
<F.Label>This is the label text</F.Label>
74+
<F.HelperText>This is the helper text</F.HelperText>
75+
</HdsFormCheckboxField>
76+
</SG.Item>
77+
<SG.Item @label="Disabled / Checked">
78+
<HdsFormCheckboxField disabled checked="checked" as |F|>
79+
<F.Label>This is the label text</F.Label>
80+
<F.HelperText>This is the helper text</F.HelperText>
81+
</HdsFormCheckboxField>
82+
</SG.Item>
83+
</ShwGrid>
84+
85+
<ShwDivider />
86+
</template>;
87+
88+
export default SubSectionFieldControl;

0 commit comments

Comments
 (0)