Skip to content

Commit c811d22

Browse files
didoodidoo
committed
small refactorings
1 parent 99ae3ba commit c811d22

File tree

3 files changed

+241
-46
lines changed

3 files changed

+241
-46
lines changed

‎showcase/app/components/page-components/badge/sub-sections/carbonization.gts‎

Lines changed: 224 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import type { TemplateOnlyComponent } from '@ember/component/template-only';
77
import { notEq } from 'ember-truth-helpers';
8+
import { array } from '@ember/helper';
89

910
import ShwTextH2 from 'showcase/components/shw/text/h2';
1011
import ShwFlex from 'showcase/components/shw/flex';
@@ -80,6 +81,24 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
8081
{{/each}}
8182
</ShwFlex>
8283
</:theming>
84+
<:reference>
85+
<ShwFlex @direction="column" as |SF|>
86+
{{#let (array "sm" "md" "lg") as |SIZES|}}
87+
{{#each SIZES as |size|}}
88+
<SF.Item>
89+
<cds-tag size={{size}}><HdsIcon
90+
@name="activity"
91+
slot="icon"
92+
/></cds-tag>
93+
<cds-tag size={{size}}><HdsIcon
94+
@name="activity"
95+
slot="icon"
96+
/>Lorem ipsum</cds-tag>
97+
</SF.Item>
98+
{{/each}}
99+
{{/let}}
100+
</ShwFlex>
101+
</:reference>
83102
</ShwCarbonizationComparisonGrid>
84103

85104
<ShwTextH2>Type</ShwTextH2>
@@ -100,37 +119,215 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
100119
{{/each}}
101120
</ShwFlex>
102121
</:theming>
122+
<:reference>
123+
<ShwFlex @direction="column" as |SF|>
124+
{{#let (array "gray" "high-contrast" "outline") as |TYPES|}}
125+
{{#each TYPES as |type|}}
126+
<SF.Item>
127+
<cds-tag type={{type}}><HdsIcon
128+
@name="activity"
129+
slot="icon"
130+
/></cds-tag>
131+
<cds-tag type={{type}}><HdsIcon @name="activity" slot="icon" />
132+
Lorem ipsum</cds-tag>
133+
</SF.Item>
134+
{{/each}}
135+
{{/let}}
136+
</ShwFlex>
137+
</:reference>
103138
</ShwCarbonizationComparisonGrid>
104139

105140
<ShwTextH2>Color</ShwTextH2>
106141

107-
{{#each COLORS as |color index|}}
108-
<ShwCarbonizationComparisonGrid
109-
@hideThemeLabels={{(if (notEq index 0) true)}}
110-
>
111-
<:theming>
112-
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
113-
{{#each TYPES as |type|}}
114-
<SF.Item class="shw-component-badge-sample-color--{{color}}">
115-
<HdsBadge
116-
@icon="activity"
117-
@text="Lorem Ipsum"
118-
@type={{type}}
119-
@color={{color}}
120-
@isIconOnly={{true}}
121-
/>
122-
<HdsBadge
123-
@icon="activity"
124-
@text="Lorem ipsum"
125-
@type={{type}}
126-
@color={{color}}
127-
/>
128-
</SF.Item>
129-
{{/each}}
130-
</ShwFlex>
131-
</:theming>
132-
</ShwCarbonizationComparisonGrid>
133-
{{/each}}
142+
<ShwCarbonizationComparisonGrid @label="neutral">
143+
<:theming>
144+
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
145+
{{#each TYPES as |type|}}
146+
<SF.Item class="shw-component-badge-sample-color--neutral">
147+
<HdsBadge
148+
@icon="activity"
149+
@text="Lorem Ipsum"
150+
@type={{type}}
151+
@color="neutral"
152+
@isIconOnly={{true}}
153+
/>
154+
<HdsBadge
155+
@icon="activity"
156+
@text="Lorem ipsum"
157+
@type={{type}}
158+
@color="neutral"
159+
/>
160+
</SF.Item>
161+
{{/each}}
162+
</ShwFlex>
163+
</:theming>
164+
<:reference>
165+
<ShwFlex @direction="column" as |SF|>
166+
<SF.Item>
167+
<cds-tag type="gray"><HdsIcon
168+
@name="activity"
169+
slot="icon"
170+
/></cds-tag>
171+
<cds-tag type="gray"><HdsIcon @name="activity" slot="icon" />
172+
Lorem ipsum</cds-tag>
173+
</SF.Item>
174+
<SF.Item>
175+
<cds-tag type="outline"><HdsIcon
176+
@name="activity"
177+
slot="icon"
178+
/></cds-tag>
179+
<cds-tag type="outline"><HdsIcon @name="activity" slot="icon" />
180+
Lorem ipsum</cds-tag>
181+
</SF.Item>
182+
</ShwFlex>
183+
</:reference>
184+
</ShwCarbonizationComparisonGrid>
185+
186+
<ShwCarbonizationComparisonGrid @label="neutral-dark-mode">
187+
<:theming>
188+
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
189+
{{#each TYPES as |type|}}
190+
<SF.Item class="shw-component-badge-sample-color--neutral-dark-mode">
191+
<HdsBadge
192+
@icon="activity"
193+
@text="Lorem Ipsum"
194+
@type={{type}}
195+
@color="neutral-dark-mode"
196+
@isIconOnly={{true}}
197+
/>
198+
<HdsBadge
199+
@icon="activity"
200+
@text="Lorem ipsum"
201+
@type={{type}}
202+
@color="neutral-dark-mode"
203+
/>
204+
</SF.Item>
205+
{{/each}}
206+
</ShwFlex>
207+
</:theming>
208+
<:reference>
209+
<cds-tag type="high-contrast"><HdsIcon
210+
@name="activity"
211+
slot="icon"
212+
/></cds-tag>
213+
<cds-tag type="high-contrast"><HdsIcon @name="activity" slot="icon" />
214+
Lorem ipsum</cds-tag>
215+
</:reference>
216+
</ShwCarbonizationComparisonGrid>
217+
218+
<ShwCarbonizationComparisonGrid @label="highlight">
219+
<:theming>
220+
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
221+
{{#each TYPES as |type|}}
222+
<SF.Item class="shw-component-badge-sample-color--highlight">
223+
<HdsBadge
224+
@icon="activity"
225+
@text="Lorem Ipsum"
226+
@type={{type}}
227+
@color="highlight"
228+
@isIconOnly={{true}}
229+
/>
230+
<HdsBadge
231+
@icon="activity"
232+
@text="Lorem ipsum"
233+
@type={{type}}
234+
@color="highlight"
235+
/>
236+
</SF.Item>
237+
{{/each}}
238+
</ShwFlex>
239+
</:theming>
240+
<:reference>
241+
<cds-tag type="purple"><HdsIcon @name="activity" slot="icon" /></cds-tag>
242+
<cds-tag type="purple"><HdsIcon @name="activity" slot="icon" />
243+
Lorem ipsum</cds-tag>
244+
</:reference>
245+
</ShwCarbonizationComparisonGrid>
246+
247+
<ShwCarbonizationComparisonGrid @label="success">
248+
<:theming>
249+
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
250+
{{#each TYPES as |type|}}
251+
<SF.Item class="shw-component-badge-sample-color--success">
252+
<HdsBadge
253+
@icon="activity"
254+
@text="Lorem Ipsum"
255+
@type={{type}}
256+
@color="success"
257+
@isIconOnly={{true}}
258+
/>
259+
<HdsBadge
260+
@icon="activity"
261+
@text="Lorem ipsum"
262+
@type={{type}}
263+
@color="success"
264+
/>
265+
</SF.Item>
266+
{{/each}}
267+
</ShwFlex>
268+
</:theming>
269+
<:reference>
270+
<cds-tag type="green"><HdsIcon @name="activity" slot="icon" /></cds-tag>
271+
<cds-tag type="green"><HdsIcon @name="activity" slot="icon" />
272+
Lorem ipsum</cds-tag>
273+
</:reference>
274+
</ShwCarbonizationComparisonGrid>
275+
276+
<ShwCarbonizationComparisonGrid @label="warning">
277+
<:theming>
278+
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
279+
{{#each TYPES as |type|}}
280+
<SF.Item class="shw-component-badge-sample-color--warning">
281+
<HdsBadge
282+
@icon="activity"
283+
@text="Lorem Ipsum"
284+
@type={{type}}
285+
@color="warning"
286+
@isIconOnly={{true}}
287+
/>
288+
<HdsBadge
289+
@icon="activity"
290+
@text="Lorem ipsum"
291+
@type={{type}}
292+
@color="warning"
293+
/>
294+
</SF.Item>
295+
{{/each}}
296+
</ShwFlex>
297+
</:theming>
298+
<:reference>
299+
<code>???</code>
300+
</:reference>
301+
</ShwCarbonizationComparisonGrid>
302+
303+
<ShwCarbonizationComparisonGrid @hideThemeLabels={{true}} @label="critical">
304+
<:theming>
305+
<ShwFlex @direction="column" @gap="0.5rem" as |SF|>
306+
{{#each TYPES as |type|}}
307+
<SF.Item class="shw-component-badge-sample-color--critical">
308+
<HdsBadge
309+
@icon="activity"
310+
@text="Lorem Ipsum"
311+
@type={{type}}
312+
@color="critical"
313+
@isIconOnly={{true}}
314+
/>
315+
<HdsBadge
316+
@icon="activity"
317+
@text="Lorem ipsum"
318+
@type={{type}}
319+
@color="critical"
320+
/>
321+
</SF.Item>
322+
{{/each}}
323+
</ShwFlex>
324+
</:theming>
325+
<:reference>
326+
<cds-tag type="red"><HdsIcon @name="activity" slot="icon" /></cds-tag>
327+
<cds-tag type="red"><HdsIcon @name="activity" slot="icon" />
328+
Lorem ipsum</cds-tag>
329+
</:reference>
330+
</ShwCarbonizationComparisonGrid>
134331
</template>;
135332

136333
export default SubSectionCarbonization;

‎showcase/app/components/shw/carbonization/comparison-grid/item.gts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,6 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
3838
get classNames(): string {
3939
const classes = ['shw-carbonization-comparison-grid__item'];
4040

41-
// add a class based on the `@scope` argument
42-
classes.push(
43-
`shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
44-
);
45-
4641
if (this.args.scope === 'theming') {
4742
// here we use the custom HDS theming selector
4843
classes.push(`hds-theme-${this.args.theme}`);
@@ -79,7 +74,9 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
7974
<template>
8075
<div class={{this.classNames}} ...attributes>
8176
{{#if @label}}
82-
<ShwLabel>{{@label}}</ShwLabel>
77+
<ShwLabel
78+
class="shw-carbonization-comparison-grid__item-label"
79+
>{{@label}}</ShwLabel>
8380
{{/if}}
8481
<div class="shw-carbonization-comparison-grid__item-content">
8582
{{yield (hash Label=ShwLabel)}}

‎showcase/app/styles/showcase-components/carbonization/comparison-grid.scss‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,49 @@
77
grid-template-areas:
88
"hds cds-g0 cds-g10 cds-g90 cds-g100"
99
"--- cwc-g0 cwc-g10 cwc-g90 cwc-g100";
10-
grid-template-rows: auto, auto;
10+
grid-template-rows: auto auto;
1111
grid-template-columns: repeat(5, 1fr);
12-
row-gap: 0; // we use vertical margin to separate the web-components row from the one above
12+
row-gap: 12px;
1313
column-gap: 8px;
1414
}
1515

1616
.shw-carbonization-comparison-grid__top-label {
1717
margin-top: 2rem;
1818
}
1919

20-
// .shw-carbonization-comparison-grid__item {}
21-
22-
.shw-carbonization-comparison-grid__item--scope-reference {
23-
margin-top: 1rem;
24-
}
20+
// ITEM
2521

2622
@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'cwc-g0', 'cwc-g10', 'cwc-g90', 'cwc-g100' {
2723
.shw-carbonization-comparison-grid__item--area-#{$area} {
2824
grid-area: #{$area};
2925
}
3026
}
3127

28+
.shw-carbonization-comparison__item-label {
29+
// override the margin since we're using `row-gap` above
30+
margin-bottom: 0;
31+
}
32+
3233
// THEMING BACKGROUNDS
3334

3435
.shw-carbonization-comparison-grid__item-content {
3536
padding: 8px;
36-
background-color: var(--background-color);
37+
background-color: var(--content-background-color);
3738
}
3839

3940
.shw-carbonization-comparison-grid__item--area-hds {
40-
--background-color: var(--token-color-surface-primary);
41+
--content-background-color: var(--token-color-surface-primary);
4142
}
4243

4344
// TODO replace the hex values (copied from the `--cds-background` themed variable) with CSS design tokens from our theming
4445
.shw-carbonization-comparison-grid__item--area-cds-g0 {
45-
--background-color: #ffffff;
46+
--content-background-color: #ffffff;
4647
}
4748
.shw-carbonization-comparison-grid__item--area-cds-g10 {
48-
--background-color: #f4f4f4;
49+
--content-background-color: #f4f4f4;
4950
}
5051
.shw-carbonization-comparison-grid__item--area-cds-g90 {
51-
--background-color: #262626;
52+
--content-background-color: #262626;
5253
}
5354
.shw-carbonization-comparison-grid__item--area-cds-g100 {
5455
--background-color: #161616;
@@ -58,7 +59,7 @@
5859
.shw-carbonization-comparison-grid__item--area-cwc-g10,
5960
.shw-carbonization-comparison-grid__item--area-cwc-g90,
6061
.shw-carbonization-comparison-grid__item--area-cwc-g100 {
61-
--background-color: var(--cds-background);
62+
--content-background-color: var(--cds-background);
6263
}
6364

6465

0 commit comments

Comments
 (0)