Skip to content

Commit 05c4dbe

Browse files
zamooreshleewhite
zamoore
and
shleewhite
authored
GTS Conversion - LayoutGrid (#3292)
Co-authored-by: Lee White <[email protected]>
1 parent 1e01541 commit 05c4dbe

File tree

11 files changed

+753
-543
lines changed

11 files changed

+753
-543
lines changed

‎showcase/app/components/page-layouts/grid/code-fragments/with-gap-variants.gts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Component from '@glimmer/component';
2+
3+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
4+
5+
import { HdsLayoutGrid } from '@hashicorp/design-system-components/components';
6+
7+
import type { HdsLayoutGridSignature } from '@hashicorp/design-system-components/components/hds/layout/grid/index';
8+
9+
interface CodeFragmentWithChildGapVariantsSignature {
10+
Args: {
11+
childGap?: HdsLayoutGridSignature['Args']['gap'];
12+
gap?: HdsLayoutGridSignature['Args']['gap'];
13+
};
14+
}
15+
16+
export default class CodeFragmentWithGapVariants extends Component<CodeFragmentWithChildGapVariantsSignature> {
17+
get gap(): HdsLayoutGridSignature['Args']['gap'] {
18+
return this.args.gap ?? '16';
19+
}
20+
21+
<template>
22+
<HdsLayoutGrid @gap={{this.gap}} @align="center" as |LG|>
23+
<ShwPlaceholder @text="item #1" @height="48" />
24+
<ShwPlaceholder @text="item #2" @height="48" />
25+
<LG.Item>
26+
<HdsLayoutGrid @gap={{@childGap}}>
27+
<ShwPlaceholder @text="item #3A" @height="24" />
28+
<ShwPlaceholder @text="item #3B" @height="24" />
29+
<ShwPlaceholder @text="item #3C" @height="24" />
30+
</HdsLayoutGrid>
31+
</LG.Item>
32+
<ShwPlaceholder @text="item #4" @height="48" />
33+
</HdsLayoutGrid>
34+
</template>
35+
}

‎showcase/app/components/page-layouts/grid/code-fragments/with-placeholder-items.gts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Component from '@glimmer/component';
2+
3+
import ShwOutliner from 'showcase/components/shw/outliner';
4+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
5+
6+
import { HdsLayoutGrid } from '@hashicorp/design-system-components/components';
7+
8+
import type { HdsLayoutGridSignature } from '@hashicorp/design-system-components/components/hds/layout/grid/index';
9+
10+
interface CodeFragmentWithPlaceholderItemsSignature {
11+
Args: {
12+
columnCount?: number;
13+
columnMinWidth?: HdsLayoutGridSignature['Args']['columnMinWidth'];
14+
columnWidth?: HdsLayoutGridSignature['Args']['columnWidth'];
15+
};
16+
}
17+
18+
export default class CodeFragmentWithPlaceholderItems extends Component<CodeFragmentWithPlaceholderItemsSignature> {
19+
get columnCount() {
20+
return this.args.columnCount ?? 4;
21+
}
22+
23+
get columnArray() {
24+
return Array.from({ length: this.columnCount }, (_, i) => i + 1);
25+
}
26+
27+
<template>
28+
<ShwOutliner>
29+
<HdsLayoutGrid
30+
@gap="24"
31+
@columnMinWidth={{@columnMinWidth}}
32+
@columnWidth={{@columnWidth}}
33+
>
34+
{{#each this.columnArray as |column|}}
35+
<ShwPlaceholder @text="#{{column}}" @height="40" />
36+
{{/each}}
37+
</HdsLayoutGrid>
38+
</ShwOutliner>
39+
</template>
40+
}

‎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 './sub-sections/width-management';
14+
import SubSectionAlign from './sub-sections/align';
15+
import SubSectionGap from './sub-sections/gap';
16+
import SubSectionBaseElements from './sub-sections/base-elements';
17+
import SubSectionExamples from './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: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import { array, 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 { HdsLayoutGrid } from '@hashicorp/design-system-components/components';
14+
import { ALIGNS } from '@hashicorp/design-system-components/components/hds/layout/grid/index';
15+
16+
const SubSectionAlign: TemplateOnlyComponent = <template>
17+
<ShwTextH2>Align</ShwTextH2>
18+
<ShwTextBody>
19+
This is the
20+
<code>align-items</code>
21+
CSS property of
22+
<code>css grid</code>.
23+
</ShwTextBody>
24+
25+
<ShwGrid
26+
@columns={{ALIGNS.length}}
27+
@gap="2rem"
28+
class="shw-layout-grid-example-tint-flex-items"
29+
as |SG|
30+
>
31+
{{#each ALIGNS as |align|}}
32+
<SG.Item @label={{(concat "align=" align)}}>
33+
<ShwOutliner {{style width="120px" height="120px"}}>
34+
<HdsLayoutGrid @align={{align}} {{style width="100%" height="100%"}}>
35+
{{#each (array "A" "B" "C") as |item|}}
36+
<ShwPlaceholder
37+
@text={{concat "#" item}}
38+
@width="auto"
39+
@height="auto"
40+
{{style min-width="24px" min-height="24px"}}
41+
/>
42+
{{/each}}
43+
</HdsLayoutGrid>
44+
</ShwOutliner>
45+
</SG.Item>
46+
{{/each}}
47+
</ShwGrid>
48+
49+
<ShwDivider @level={{2}} />
50+
</template>;
51+
52+
export default SubSectionAlign;

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

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

0 commit comments

Comments
 (0)