Skip to content

Commit 1451e49

Browse files
shleewhiteshleewhite
authored
Showcase: convert CopySnippet page to gts (#3193)
1 parent c2f491f commit 1451e49

File tree

10 files changed

+359
-259
lines changed

10 files changed

+359
-259
lines changed

‎showcase/app/components/page-components/copy/snippet/index.gts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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 SubSectionStates from 'showcase/components/page-components/copy/snippet/sub-sections/states';
11+
import SubSectionContainers from 'showcase/components/page-components/copy/snippet/sub-sections/containers';
12+
import SubSectionContent from 'showcase/components/page-components/copy/snippet/sub-sections/content';
13+
import SubSectionFullWidth from 'showcase/components/page-components/copy/snippet/sub-sections/full-width';
14+
import SubSectionColor from 'showcase/components/page-components/copy/snippet/sub-sections/color';
15+
16+
const CopySnippetIndex: TemplateOnlyComponent = <template>
17+
{{pageTitle "CopySnippet Component"}}
18+
19+
<ShwTextH1>CopySnippet</ShwTextH1>
20+
21+
<section data-test-percy>
22+
<SubSectionContent />
23+
<SubSectionFullWidth />
24+
<SubSectionColor />
25+
<SubSectionStates />
26+
<SubSectionContainers />
27+
</section>
28+
</template>;
29+
30+
export default CopySnippetIndex;

‎showcase/app/components/page-components/copy/snippet/sub-sections/color.gts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
8+
import ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
import ShwDivider from 'showcase/components/shw/divider';
11+
12+
import { HdsCopySnippet } from '@hashicorp/design-system-components/components';
13+
14+
import { COLORS } from '@hashicorp/design-system-components/components/hds/copy/snippet/index';
15+
16+
const SubSectionColor: TemplateOnlyComponent = <template>
17+
<ShwTextH2>Color</ShwTextH2>
18+
19+
<ShwFlex as |SF|>
20+
{{#each COLORS as |color|}}
21+
<SF.Item @label={{capitalize color}}>
22+
<HdsCopySnippet
23+
@textToCopy="fbrct1ed-fgr35h-tyng89-wed4r"
24+
@color={{color}}
25+
/>
26+
</SF.Item>
27+
{{/each}}
28+
</ShwFlex>
29+
30+
<ShwDivider />
31+
</template>;
32+
33+
export default SubSectionColor;

‎showcase/app/components/page-components/copy/snippet/sub-sections/containers.gts‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
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+
import { array } from '@ember/helper';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
13+
import {
14+
HdsTable,
15+
HdsCopySnippet,
16+
} from '@hashicorp/design-system-components/components';
17+
18+
const SubSectionContainers: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Containers</ShwTextH2>
20+
21+
<ShwGrid @columns={{3}} as |SG|>
22+
{{#let (array "block" "flex" "grid") as |displays|}}
23+
{{#each displays as |display|}}
24+
<SG.Item @forceMinWidth={{true}} as |SGI|>
25+
<SGI.Label>Parent with <code>display: {{display}}</code></SGI.Label>
26+
<div {{style display=display overflow="hidden"}}>
27+
<HdsCopySnippet @textToCopy="With short text" />
28+
</div>
29+
<div {{style display=display overflow="hidden"}}>
30+
<HdsCopySnippet
31+
@textToCopy="With some really long text that should wrap and be multi-line"
32+
/>
33+
</div>
34+
<div {{style display=display overflow="hidden"}}>
35+
<HdsCopySnippet
36+
@textToCopy="With some really long text that should be truncated"
37+
@isTruncated={{true}}
38+
/>
39+
</div>
40+
</SG.Item>
41+
{{/each}}
42+
{{/let}}
43+
</ShwGrid>
44+
45+
<ShwFlex @label="Within a table" as |SF|>
46+
<SF.Item @grow={{true}}>
47+
<HdsTable
48+
@isStriped={{true}}
49+
@isFixedLayout={{true}}
50+
@caption="Static table used to demo different use cases of the Copy::Snippet component"
51+
>
52+
<:head as |H|>
53+
<H.Tr>
54+
<H.Th>Use case</H.Th>
55+
<H.Th>Cluster partition</H.Th>
56+
<H.Th>Imported services</H.Th>
57+
<H.Th>Exported services</H.Th>
58+
<H.Th {{style width="250px"}}>Secret key</H.Th>
59+
</H.Tr>
60+
</:head>
61+
<:body as |B|>
62+
<B.Tr>
63+
<B.Th>With short text</B.Th>
64+
<B.Td>cluster-2 / partition-2</B.Td>
65+
<B.Td>10</B.Td>
66+
<B.Td>10</B.Td>
67+
<B.Td><HdsCopySnippet
68+
@textToCopy="With short text"
69+
@color="secondary"
70+
/></B.Td>
71+
</B.Tr>
72+
<B.Tr>
73+
<B.Th>With short text + Full width</B.Th>
74+
<B.Td>cluster-3 / partition-3</B.Td>
75+
<B.Td>10</B.Td>
76+
<B.Td>10</B.Td>
77+
<B.Td><HdsCopySnippet
78+
@textToCopy="With short text"
79+
@color="secondary"
80+
@isFullWidth={{true}}
81+
/></B.Td>
82+
</B.Tr>
83+
<B.Tr>
84+
<B.Th>With long text (wrapping)</B.Th>
85+
<B.Td>cluster-3 / partition-3</B.Td>
86+
<B.Td>10</B.Td>
87+
<B.Td>10</B.Td>
88+
<B.Td><HdsCopySnippet
89+
@textToCopy="With some really long text that should wrap and be multi-line"
90+
@color="secondary"
91+
/></B.Td>
92+
</B.Tr>
93+
<B.Tr>
94+
<B.Th>With long text + Truncation</B.Th>
95+
<B.Td>cluster-3 / partition-3</B.Td>
96+
<B.Td>10</B.Td>
97+
<B.Td>10</B.Td>
98+
<B.Td><HdsCopySnippet
99+
@textToCopy="With some really long text that should be truncated"
100+
@color="secondary"
101+
@isTruncated={{true}}
102+
/></B.Td>
103+
</B.Tr>
104+
</:body>
105+
</HdsTable>
106+
</SF.Item>
107+
</ShwFlex>
108+
</template>;
109+
110+
export default SubSectionContainers;

‎showcase/app/components/page-components/copy/snippet/sub-sections/content.gts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
import ShwOutliner from 'showcase/components/shw/outliner';
11+
12+
import { HdsCopySnippet } from '@hashicorp/design-system-components/components';
13+
14+
const SubSectionContent: TemplateOnlyComponent = <template>
15+
<ShwTextH2>Content</ShwTextH2>
16+
17+
<ShwFlex as |SF|>
18+
<SF.Item @label="With short text">
19+
<HdsCopySnippet @textToCopy="fbrct1ed-fgr35h-tyng89-wed4r" />
20+
</SF.Item>
21+
<SF.Item @label="With long text (multi-line / default)">
22+
<ShwOutliner {{style width="300px"}}>
23+
<HdsCopySnippet
24+
@textToCopy="With some really long text that should wrap and be multi-line"
25+
/>
26+
</ShwOutliner>
27+
</SF.Item>
28+
<SF.Item @label="With long text (truncated)">
29+
<ShwOutliner {{style width="300px"}}>
30+
<HdsCopySnippet
31+
@textToCopy="With some really long text that should be truncated because isTruncated is set to true"
32+
@isTruncated={{true}}
33+
/>
34+
</ShwOutliner>
35+
</SF.Item>
36+
<SF.Item @label="With an empty string to copy">
37+
<HdsCopySnippet @textToCopy="" />
38+
</SF.Item>
39+
</ShwFlex>
40+
41+
<ShwFlex as |SF|>
42+
<SF.Item @label="With number to copy">
43+
{{! context: https://github.com/hashicorp/design-system/pull/1564 }}
44+
<HdsCopySnippet @textToCopy={{123456789}} />
45+
</SF.Item>
46+
<SF.Item @label="With the number '0' to copy">
47+
<HdsCopySnippet @textToCopy={{0}} />
48+
</SF.Item>
49+
</ShwFlex>
50+
</template>;
51+
52+
export default SubSectionContent;

‎showcase/app/components/page-components/copy/snippet/sub-sections/full-width.gts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
import ShwOutliner from 'showcase/components/shw/outliner';
11+
12+
import { HdsCopySnippet } from '@hashicorp/design-system-components/components';
13+
14+
const SubSectionFullWidth: TemplateOnlyComponent = <template>
15+
<ShwTextH2>Full width</ShwTextH2>
16+
<ShwFlex as |SF|>
17+
<SF.Item @label="With short text">
18+
<ShwOutliner {{style width="500px"}}>
19+
<HdsCopySnippet
20+
@textToCopy="fbrct1ed-fgr35h-tyng89-wed4r"
21+
@isFullWidth={{true}}
22+
/>
23+
</ShwOutliner>
24+
</SF.Item>
25+
<SF.Item @label="With long text">
26+
<ShwOutliner {{style width="500px"}}>
27+
<HdsCopySnippet
28+
@textToCopy="fbrct1ed-fgr35h-tyng89-wed4r and some other text that should not matter because the element with is set to full width and hopefully people will not do this but in case they do we want to make sure that we still have the designed layout"
29+
@isFullWidth={{true}}
30+
/>
31+
</ShwOutliner>
32+
</SF.Item>
33+
</ShwFlex>
34+
</template>;
35+
36+
export default SubSectionFullWidth;

‎showcase/app/components/page-components/copy/snippet/sub-sections/states.gts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { capitalize } from '@ember/string';
8+
import { array } from '@ember/helper';
9+
import { eq, or } from 'ember-truth-helpers';
10+
import { modifier } from 'ember-modifier';
11+
12+
import ShwDivider from 'showcase/components/shw/divider';
13+
import ShwGrid from 'showcase/components/shw/grid';
14+
import ShwTextH2 from 'showcase/components/shw/text/h2';
15+
16+
import { HdsCopySnippet } from '@hashicorp/design-system-components/components';
17+
import {
18+
COLORS,
19+
SUCCESS_ICON,
20+
ERROR_ICON,
21+
} from '@hashicorp/design-system-components/components/hds/copy/snippet/index';
22+
23+
const STATES = ['default', 'hover', 'active', 'focus'];
24+
25+
export default class SubSectionBaseElements extends Component {
26+
replaceCopyStatus = modifier((container: HTMLDivElement) => {
27+
container.querySelectorAll('[mock-copy-status]').forEach((element) => {
28+
const status = element.getAttribute('mock-copy-status');
29+
element.classList.remove('hds-copy-snippet--status-idle');
30+
element.classList.add(`hds-copy-snippet--status-${status}`);
31+
32+
const icon = element.querySelector('svg use');
33+
34+
if (icon) {
35+
if (status === 'success') {
36+
// eg. href="#flight-clipboard-checked-16"
37+
icon.setAttribute('href', `#flight-${SUCCESS_ICON}-16`);
38+
} else if (status === 'error') {
39+
icon.setAttribute('href', `#flight-${ERROR_ICON}-16`);
40+
}
41+
}
42+
});
43+
});
44+
45+
<template>
46+
<ShwTextH2>States</ShwTextH2>
47+
48+
<div {{this.replaceCopyStatus}}>
49+
<ShwGrid @columns={{6}} as |SG|>
50+
{{#each COLORS as |color|}}
51+
{{#each STATES as |state|}}
52+
<SG.Item @label={{if (eq color "primary") (capitalize state)}}>
53+
<div
54+
class={{if
55+
(or (eq state "default") (eq state "focus"))
56+
"shw-component-copy-snippet-state-container-chequered-background"
57+
}}
58+
>
59+
<HdsCopySnippet
60+
@textToCopy="fbrct1ed-fgr35h-tyng89-wed4r"
61+
@color={{color}}
62+
mock-state-value={{state}}
63+
/>
64+
</div>
65+
</SG.Item>
66+
{{/each}}
67+
{{#let (array "success" "error") as |statuses|}}
68+
{{#each statuses as |status|}}
69+
<SG.Item @label={{if (eq color "primary") (capitalize status)}}>
70+
<HdsCopySnippet
71+
@textToCopy="fbrct1ed-fgr35h-tyng89-wed4r"
72+
@color={{color}}
73+
mock-copy-status={{status}}
74+
/>
75+
</SG.Item>
76+
{{/each}}
77+
{{/let}}
78+
{{/each}}
79+
</ShwGrid>
80+
</div>
81+
82+
<ShwDivider />
83+
</template>
84+
}

0 commit comments

Comments
 (0)