Skip to content

Commit b8cc394

Browse files
dchyundchyun
authored
Showcase: Convert FormRadio to gts (#3255)
1 parent de65c66 commit b8cc394

File tree

7 files changed

+305
-209
lines changed

7 files changed

+305
-209
lines changed

‎showcase/app/components/page-components/form/radio/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/radio/sub-sections/base-control';
11+
import SubSectionFieldControl from 'showcase/components/page-components/form/radio/sub-sections/field-control';
12+
import SubSectionGroupControl from 'showcase/components/page-components/form/radio/sub-sections/group-control';
13+
14+
const FormRadioIndex: TemplateOnlyComponent = <template>
15+
{{pageTitle "Radio Component"}}
16+
17+
<ShwTextH1>Radio</ShwTextH1>
18+
19+
<section data-test-percy>
20+
<SubSectionBaseControl />
21+
<SubSectionFieldControl />
22+
<SubSectionGroupControl />
23+
</section>
24+
</template>;
25+
26+
export default FormRadioIndex;

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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 { HdsFormRadioBase } 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+
<HdsFormRadioBase aria-label="Unchecked radio" />
27+
</SF.Item>
28+
<SF.Item @label="Checked">
29+
<HdsFormRadioBase checked="checked" aria-label="Checked radio" />
30+
</SF.Item>
31+
</ShwFlex>
32+
33+
<ShwTextH3>States (Base / Disabled)</ShwTextH3>
34+
35+
<ShwFlex @gap="2rem" as |SF|>
36+
{{#each STATES as |state|}}
37+
<SF.Item @label={{capitalize state}}>
38+
<ShwGrid
39+
@columns={{2}}
40+
mock-state-value={{state}}
41+
mock-state-selector="input"
42+
as |SG|
43+
>
44+
<SG.Item>
45+
<HdsFormRadioBase aria-label="Radio" />
46+
</SG.Item>
47+
<SG.Item>
48+
<HdsFormRadioBase checked="checked" aria-label="Checked radio" />
49+
</SG.Item>
50+
{{#unless (eq state "focus")}}
51+
<SG.Item>
52+
<HdsFormRadioBase
53+
disabled="disabled"
54+
aria-label="Disabled radio"
55+
/>
56+
</SG.Item>
57+
<SG.Item>
58+
<HdsFormRadioBase
59+
checked="checked"
60+
disabled="disabled"
61+
aria-label="Checked, disabled radio"
62+
/>
63+
</SG.Item>
64+
{{/unless}}
65+
</ShwGrid>
66+
</SF.Item>
67+
{{/each}}
68+
</ShwFlex>
69+
70+
<ShwTextH3>Custom layout</ShwTextH3>
71+
72+
<ShwFlex as |SF|>
73+
<SF.Item>
74+
<div class="shw-component-form-radio-base-custom-layout">
75+
<label>
76+
<strong>Some content</strong>
77+
<span>Some other content content</span>
78+
<div
79+
class="shw-component-form-radio-base-custom-layout__control-wrapper"
80+
>
81+
<HdsFormRadioBase id="my-custom-radio-example" />
82+
</div>
83+
</label>
84+
</div>
85+
</SF.Item>
86+
</ShwFlex>
87+
88+
<ShwDivider />
89+
</template>;
90+
91+
export default SubSectionBaseControl;

‎showcase/app/components/page-components/form/radio/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+
HdsFormRadioField,
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+
<HdsFormRadioField as |F|>
25+
<F.Label>This is the label text</F.Label>
26+
</HdsFormRadioField>
27+
</SG.Item>
28+
<SG.Item @label="Label + Helper text">
29+
<HdsFormRadioField checked="checked" as |F|>
30+
<F.Label>This is the label</F.Label>
31+
<F.HelperText>This is the helper text</F.HelperText>
32+
</HdsFormRadioField>
33+
</SG.Item>
34+
<SG.Item @label="Label + Helper text with link">
35+
<HdsFormRadioField 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+
</HdsFormRadioField>
40+
</SG.Item>
41+
<SG.Item @label="Label + Error">
42+
<HdsFormRadioField as |F|>
43+
<F.Label>This is the label</F.Label>
44+
<F.Error>This is the error</F.Error>
45+
</HdsFormRadioField>
46+
</SG.Item>
47+
<SG.Item @label="Label + Helper text + Error">
48+
<HdsFormRadioField 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+
</HdsFormRadioField>
53+
</SG.Item>
54+
<SG.Item @label="Label + Helper text + Errors">
55+
<HdsFormRadioField 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+
</HdsFormRadioField>
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+
<HdsFormRadioField disabled as |F|>
73+
<F.Label>This is the label text</F.Label>
74+
<F.HelperText>This is the helper text</F.HelperText>
75+
</HdsFormRadioField>
76+
</SG.Item>
77+
<SG.Item @label="Disabled / Checked">
78+
<HdsFormRadioField 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+
</HdsFormRadioField>
82+
</SG.Item>
83+
</ShwGrid>
84+
85+
<ShwDivider />
86+
</template>;
87+
88+
export default SubSectionFieldControl;

0 commit comments

Comments
 (0)