Skip to content

Commit 88bd652

Browse files
zamoorezamoore
committed
initial conversion
1 parent 845029a commit 88bd652

File tree

9 files changed

+667
-543
lines changed

9 files changed

+667
-543
lines changed

‎showcase/app/components/page-layouts/grid/index.gts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
7+
8+
import { pageTitle } from 'ember-page-title';
9+
10+
import ShwTextH1 from 'showcase/components/shw/text/h1';
11+
import ShwDivider from 'showcase/components/shw/divider';
12+
13+
import SubSectionWidthManagement from 'showcase/components/page-layouts/grid/sub-sections/width-management';
14+
import SubSectionAlign from 'showcase/components/page-layouts/grid/sub-sections/align';
15+
import SubSectionGap from 'showcase/components/page-layouts/grid/sub-sections/gap';
16+
import SubSectionBaseElements from 'showcase/components/page-layouts/grid/sub-sections/base-elements';
17+
import SubSectionExamples from 'showcase/components/page-layouts/grid/sub-sections/examples';
18+
19+
const GridIndex: TemplateOnlyComponent = <template>
20+
{{pageTitle "LayoutGrid Component"}}
21+
22+
<ShwTextH1>LayoutGrid</ShwTextH1>
23+
24+
<section data-test-percy>
25+
<SubSectionWidthManagement />
26+
<SubSectionAlign />
27+
<SubSectionGap />
28+
</section>
29+
30+
<ShwDivider />
31+
32+
<section data-test-percy>
33+
<SubSectionBaseElements />
34+
</section>
35+
36+
<ShwDivider />
37+
38+
<section data-test-percy>
39+
<SubSectionExamples />
40+
</section>
41+
</template>;
42+
43+
export default GridIndex;

‎showcase/app/components/page-layouts/grid/sub-sections/align.gts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import { concat } from '@ember/helper';
4+
import style from 'ember-style-modifier';
5+
6+
import ShwTextH2 from 'showcase/components/shw/text/h2';
7+
import ShwTextBody from 'showcase/components/shw/text/body';
8+
import ShwGrid from 'showcase/components/shw/grid';
9+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
10+
import ShwDivider from 'showcase/components/shw/divider';
11+
import ShwOutliner from 'showcase/components/shw/outliner';
12+
13+
import {
14+
HdsLayoutGrid,
15+
} from '@hashicorp/design-system-components/components';
16+
import { ALIGNS } from '@hashicorp/design-system-components/components/hds/layout/grid/index';
17+
18+
const SubSectionAlign: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Align</ShwTextH2>
20+
<ShwTextBody>
21+
This is the <code>align-items</code> CSS property of <code>css grid</code>.
22+
</ShwTextBody>
23+
24+
<ShwGrid @columns={{ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
25+
{{#each ALIGNS as |align|}}
26+
<SG.Item @label={{(concat "align=" align)}}>
27+
<ShwOutliner {{style width="120px" height="120px"}}>
28+
<HdsLayoutGrid @align={{align}} {{style width="100%" height="100%"}}>
29+
<ShwPlaceholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
30+
<ShwPlaceholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
31+
<ShwPlaceholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
32+
</HdsLayoutGrid>
33+
</ShwOutliner>
34+
</SG.Item>
35+
{{/each}}
36+
</ShwGrid>
37+
38+
<ShwDivider @level={{2}} />
39+
</template>;
40+
41+
export default SubSectionAlign;

‎showcase/app/components/page-layouts/grid/sub-sections/base-elements.gts‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwTextH2 from 'showcase/components/shw/text/h2';
4+
import ShwTextH3 from 'showcase/components/shw/text/h3';
5+
import ShwGrid from 'showcase/components/shw/grid';
6+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
7+
import ShwDivider from 'showcase/components/shw/divider';
8+
import ShwOutliner from 'showcase/components/shw/outliner';
9+
10+
import {
11+
HdsLayoutGrid,
12+
HdsLayoutGridItem,
13+
} from '@hashicorp/design-system-components/components';
14+
15+
const SubSectionBaseElements: TemplateOnlyComponent = <template>
16+
<ShwTextH2>GridItem</ShwTextH2>
17+
18+
<ShwGrid @columns={{1}} as |SG|>
19+
<SG.Item @label="used directly or via yielded component">
20+
<ShwOutliner>
21+
<HdsLayoutGrid as |HLG|>
22+
<ShwPlaceholder @text="item #1" @height="40" @background="#e4c5f3" />
23+
24+
<HdsLayoutGridItem>
25+
<ShwPlaceholder @text="item #2 within GridItem" @height="40" @background="#e5ffd2" />
26+
</HdsLayoutGridItem>
27+
28+
<ShwPlaceholder @text="item #3" @height="40" @background="#d2f4ff" />
29+
30+
<HLG.Item>
31+
<ShwPlaceholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
32+
</HLG.Item>
33+
</HdsLayoutGrid>
34+
</ShwOutliner>
35+
</SG.Item>
36+
</ShwGrid>
37+
38+
<ShwDivider @level={{2}} />
39+
40+
<ShwTextH3>colspan</ShwTextH3>
41+
42+
<ShwGrid @columns={{1}} @gap="1.5rem" as |SG|>
43+
<SG.Item @label="1st item w/ colspan=2">
44+
<ShwOutliner>
45+
<HdsLayoutGrid @columnMinWidth="250px" @gap="12" as |HLG|>
46+
<HLG.Item @colspan={{2}}>
47+
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
48+
</HLG.Item>
49+
<HLG.Item>
50+
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
51+
</HLG.Item>
52+
<HLG.Item>
53+
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
54+
</HLG.Item>
55+
<HLG.Item>
56+
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
57+
</HLG.Item>
58+
</HdsLayoutGrid>
59+
</ShwOutliner>
60+
</SG.Item>
61+
62+
<SG.Item @label="1st item w/ colspan=3">
63+
<ShwOutliner>
64+
<HdsLayoutGrid @columnMinWidth="250px" @gap="12" as |HLG|>
65+
<HLG.Item @colspan={{3}}>
66+
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
67+
</HLG.Item>
68+
<HLG.Item>
69+
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
70+
</HLG.Item>
71+
<HLG.Item>
72+
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
73+
</HLG.Item>
74+
<HLG.Item>
75+
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
76+
</HLG.Item>
77+
</HdsLayoutGrid>
78+
</ShwOutliner>
79+
</SG.Item>
80+
81+
<SG.Item @label="1st item w/ colspan=4">
82+
<ShwOutliner>
83+
<HdsLayoutGrid @columnMinWidth="250px" @gap="12" as |HLG|>
84+
<HLG.Item @colspan={{4}}>
85+
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
86+
</HLG.Item>
87+
<HLG.Item>
88+
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
89+
</HLG.Item>
90+
<HLG.Item>
91+
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
92+
</HLG.Item>
93+
<HLG.Item>
94+
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
95+
</HLG.Item>
96+
</HdsLayoutGrid>
97+
</ShwOutliner>
98+
</SG.Item>
99+
</ShwGrid>
100+
101+
<ShwDivider @level={{2}} />
102+
103+
<ShwTextH3>rowspan</ShwTextH3>
104+
105+
<ShwGrid @columns={{1}} @gap="1.5rem" as |SG|>
106+
<SG.Item @label="1st item w/ rowspan=2">
107+
<ShwOutliner>
108+
<HdsLayoutGrid @columnMinWidth="33.33%" @gap="12" as |HLG|>
109+
<HLG.Item @rowspan={{2}}>
110+
<ShwPlaceholder @text="#1" @height="100%" @background="#e4c5f3" />
111+
</HLG.Item>
112+
<HLG.Item>
113+
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
114+
</HLG.Item>
115+
<HLG.Item>
116+
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
117+
</HLG.Item>
118+
<HLG.Item>
119+
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
120+
</HLG.Item>
121+
</HdsLayoutGrid>
122+
</ShwOutliner>
123+
</SG.Item>
124+
125+
<SG.Item @label="2nd item w/ rowspan=3">
126+
<ShwOutliner>
127+
<HdsLayoutGrid @columnMinWidth="50%" @gap="12" as |HLG|>
128+
<HLG.Item>
129+
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
130+
</HLG.Item>
131+
<HLG.Item @rowspan={{3}}>
132+
<ShwPlaceholder @text="#2" @height="100%" @background="#e5ffd2" />
133+
</HLG.Item>
134+
<HLG.Item>
135+
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
136+
</HLG.Item>
137+
<HLG.Item>
138+
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
139+
</HLG.Item>
140+
</HdsLayoutGrid>
141+
</ShwOutliner>
142+
</SG.Item>
143+
</ShwGrid>
144+
145+
<ShwDivider @level={{2}} />
146+
147+
<ShwTextH3>colspan & rowspan</ShwTextH3>
148+
149+
<ShwGrid @columns={{1}} @gap="1.5rem" as |SG|>
150+
<SG.Item @label="1st item w/ colspan=2 & rowspan=3">
151+
<ShwOutliner>
152+
<HdsLayoutGrid @columnMinWidth="33.33%" @gap="12" as |HLG|>
153+
<HLG.Item @colspan={{2}} @rowspan={{3}}>
154+
<ShwPlaceholder @text="#1" @height="100%" @background="#e4c5f3" />
155+
</HLG.Item>
156+
<HLG.Item>
157+
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
158+
</HLG.Item>
159+
<HLG.Item>
160+
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
161+
</HLG.Item>
162+
<HLG.Item>
163+
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
164+
</HLG.Item>
165+
<HLG.Item>
166+
<ShwPlaceholder @text="#5" @height="40" @background="#f3d9c5" />
167+
</HLG.Item>
168+
<HLG.Item>
169+
<ShwPlaceholder @text="#6" @height="40" @background="#fee1ec" />
170+
</HLG.Item>
171+
</HdsLayoutGrid>
172+
</ShwOutliner>
173+
</SG.Item>
174+
</ShwGrid>
175+
</template>;
176+
177+
export default SubSectionBaseElements;
178+

‎showcase/app/components/page-layouts/grid/sub-sections/examples.gts‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import style from 'ember-style-modifier';
4+
5+
import ShwTextH2 from 'showcase/components/shw/text/h2';
6+
import ShwGrid from 'showcase/components/shw/grid';
7+
8+
import {
9+
HdsBadge,
10+
HdsCardContainer,
11+
HdsIconTile,
12+
HdsLayoutFlex,
13+
HdsLayoutGrid,
14+
HdsLinkStandalone,
15+
HdsTextBody,
16+
HdsTextDisplay,
17+
} from '@hashicorp/design-system-components/components';
18+
import { HdsCardLevelValues } from '@hashicorp/design-system-components/components/hds/card/types';
19+
20+
const SubSectionExamples: TemplateOnlyComponent = <template>
21+
<ShwTextH2>Examples</ShwTextH2>
22+
23+
<ShwGrid @columns={{1}} @gap="2rem" as |SG|>
24+
<SG.Item @label="3 column layout Card layout using columnWidth=33.33%">
25+
<HdsLayoutGrid @columnWidth="33.33%" @gap="32">
26+
<HdsCardContainer @level={{HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>
27+
<HdsLayoutGrid @columnWidth="100%" @gap="16">
28+
<HdsLayoutFlex @align="center" @gap="8">
29+
<HdsIconTile @icon="cloud" @size="small" />
30+
<HdsTextDisplay @tag="h2" @size="300">
31+
Active resources
32+
</HdsTextDisplay>
33+
</HdsLayoutFlex>
34+
<HdsLayoutGrid @columnWidth="100%" @gap="8" as |LG|>
35+
<LG.Item>
36+
<HdsBadge @text="5 active resources" @color="success" @icon="check-circle" @size="medium" />
37+
</LG.Item>
38+
39+
<HdsTextBody @tag="p">
40+
There are 5 active resources inside this project.
41+
</HdsTextBody>
42+
</HdsLayoutGrid>
43+
44+
<HdsLinkStandalone
45+
@icon="arrow-right"
46+
@iconPosition="trailing"
47+
@text="View active resources"
48+
@href="#"
49+
/>
50+
</HdsLayoutGrid>
51+
</HdsCardContainer>
52+
53+
<HdsCardContainer @level={{HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>
54+
<HdsTextDisplay @tag="h2" @size="300">Card #2</HdsTextDisplay>
55+
</HdsCardContainer>
56+
57+
<HdsCardContainer @level={{HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>
58+
<HdsTextDisplay @tag="h2" @size="300">Card #3</HdsTextDisplay>
59+
</HdsCardContainer>
60+
</HdsLayoutGrid>
61+
</SG.Item>
62+
63+
<SG.Item @label="More complex layout using colspan">
64+
<HdsLayoutGrid @columnMinWidth="33.33%" @gap="24" as |LG|>
65+
<LG.Item @colspan={{2}}>
66+
<HdsCardContainer
67+
@level={{HdsCardLevelValues.Mid}}
68+
@hasBorder={{true}}
69+
{{style padding="24px"}}
70+
{{style background="radial-gradient(151.34% 168.34% at 0 0,#f6f9ff 0,#ebf2ff 100%)"}}
71+
>
72+
<HdsLayoutGrid @columnMinWidth="100%" @gap="16">
73+
<div>
74+
<HdsBadge @text="In Preview" @type="outlined" @color="highlight" />
75+
<HdsTextDisplay @tag="h2" @size="300" @weight="bold">Better together</HdsTextDisplay>
76+
</div>
77+
<HdsTextBody @tag="p" @weight="semibold">
78+
HCP Terraform now works together with HCP Vault Secrets.
79+
</HdsTextBody>
80+
<HdsTextBody @tag="p">
81+
The combined solution enables your team to provision infrastructure with a scalable and least-privilege
82+
security approach for your secrets.
83+
</HdsTextBody>
84+
</HdsLayoutGrid>
85+
</HdsCardContainer>
86+
</LG.Item>
87+
88+
<HdsCardContainer @level={{HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>
89+
<HdsTextDisplay @tag="h2" @size="300">content</HdsTextDisplay>
90+
</HdsCardContainer>
91+
92+
<HdsCardContainer @level={{HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>
93+
<HdsTextDisplay @tag="h2" @size="300">content</HdsTextDisplay>
94+
</HdsCardContainer>
95+
96+
<LG.Item @colspan={{2}}>
97+
<HdsCardContainer @level={{HdsCardLevelValues.Mid}} @hasBorder={{true}} {{style padding="24px"}}>
98+
<HdsLayoutGrid @columnMinWidth="100%" @gap="16">
99+
<HdsTextDisplay @tag="h2" @size="300">HCP Terraform Provider Resources</HdsTextDisplay>
100+
<HdsLayoutGrid @columnMinWidth="50%" @gap="24" @tag="ul" class="shw-layouts-grid-plain-list">
101+
<HdsLayoutGrid @columnMinWidth="100%" @gap="8" @tag="li">
102+
<HdsTextBody @tag="p" @weight="semibold">Deploy HCP Vault</HdsTextBody>
103+
<HdsTextBody @tag="p">
104+
Integrate HCP Vault into your environment faster.
105+
</HdsTextBody>
106+
</HdsLayoutGrid>
107+
<HdsLayoutGrid @columnMinWidth="100%" @gap="8" @tag="li">
108+
<HdsTextBody @tag="p" @weight="semibold">Deploy HCP Consul</HdsTextBody>
109+
<HdsTextBody @tag="p">
110+
Manage your provisions and snapshot.
111+
</HdsTextBody>
112+
</HdsLayoutGrid>
113+
</HdsLayoutGrid>
114+
</HdsLayoutGrid>
115+
</HdsCardContainer>
116+
</LG.Item>
117+
</HdsLayoutGrid>
118+
</SG.Item>
119+
</ShwGrid>
120+
</template>;
121+
122+
export default SubSectionExamples;
123+

0 commit comments

Comments
 (0)