Skip to content

Commit fec7c9a

Browse files
shleewhiteshleewhite
authored
Showcase: convert Form > Toggle to gts (#3247)
1 parent 4478017 commit fec7c9a

File tree

8 files changed

+430
-407
lines changed

8 files changed

+430
-407
lines changed

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

‎showcase/app/components/page-components/form/toggle/sub-sections/base-element.gts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextH3 from 'showcase/components/shw/text/h3';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
import ShwFlex from 'showcase/components/shw/flex';
13+
import ShwDivider from 'showcase/components/shw/divider';
14+
15+
import { HdsFormToggleBase } from '@hashicorp/design-system-components/components';
16+
17+
const STATES = ['default', 'hover', 'focus'];
18+
19+
const SubSectionBaseElement: 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+
<HdsFormToggleBase aria-label="Unchecked toggle" />
27+
</SF.Item>
28+
<SF.Item @label="Checked">
29+
<HdsFormToggleBase checked="checked" aria-label="Checked toggle" />
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+
<HdsFormToggleBase aria-label="Toggle" />
46+
</SG.Item>
47+
<SG.Item>
48+
<HdsFormToggleBase checked="checked" aria-label="Checked toggle" />
49+
</SG.Item>
50+
{{#unless (eq state "focus")}}
51+
<SG.Item>
52+
<HdsFormToggleBase
53+
disabled="disabled"
54+
aria-label="Disabled toggle"
55+
/>
56+
</SG.Item>
57+
<SG.Item>
58+
<HdsFormToggleBase
59+
checked="checked"
60+
disabled="disabled"
61+
aria-label="Checked, disabled toggle"
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-toggle-base-custom-layout">
75+
<label for="my-custom-toggle-example">Custom label</label>
76+
<HdsFormToggleBase id="my-custom-toggle-example" />
77+
<span>Some extra content</span>
78+
</div>
79+
</SF.Item>
80+
</ShwFlex>
81+
82+
<ShwDivider />
83+
</template>;
84+
85+
export default SubSectionBaseElement;

‎showcase/app/components/page-components/form/toggle/sub-sections/field-element.gts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
8+
import ShwTextH3 from 'showcase/components/shw/text/h3';
9+
import ShwGrid from 'showcase/components/shw/grid';
10+
import ShwDivider from 'showcase/components/shw/divider';
11+
12+
import {
13+
HdsFormToggleField,
14+
HdsLinkInline,
15+
} from '@hashicorp/design-system-components/components';
16+
17+
const SubSectionFieldElement: 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+
<HdsFormToggleField as |F|>
25+
<F.Label>This is the label text</F.Label>
26+
</HdsFormToggleField>
27+
</SG.Item>
28+
<SG.Item @label="Label + Helper text">
29+
<HdsFormToggleField checked="checked" as |F|>
30+
<F.Label>This is the label</F.Label>
31+
<F.HelperText>This is the helper text</F.HelperText>
32+
</HdsFormToggleField>
33+
</SG.Item>
34+
<SG.Item @label="Label + Helper text with link">
35+
<HdsFormToggleField 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+
</HdsFormToggleField>
40+
</SG.Item>
41+
<SG.Item @label="Label + Error">
42+
<HdsFormToggleField as |F|>
43+
<F.Label>This is the label</F.Label>
44+
<F.Error>This is the error</F.Error>
45+
</HdsFormToggleField>
46+
</SG.Item>
47+
<SG.Item @label="Label + Helper text + Error">
48+
<HdsFormToggleField 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+
</HdsFormToggleField>
53+
</SG.Item>
54+
<SG.Item @label="Label + Helper text + Errors">
55+
<HdsFormToggleField 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+
</HdsFormToggleField>
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 / Checked">
72+
<HdsFormToggleField checked="checked" disabled={{true}} as |F|>
73+
<F.Label>This is the label</F.Label>
74+
<F.HelperText>This is the helper text</F.HelperText>
75+
</HdsFormToggleField>
76+
</SG.Item>
77+
</ShwGrid>
78+
79+
<ShwDivider />
80+
</template>;
81+
82+
export default SubSectionFieldElement;

0 commit comments

Comments
 (0)