Skip to content

Commit 7d25312

Browse files
didoodidoo
committed
refactored code to support theming for reference web components, based on Carbon implementation/specifications
1 parent add61ec commit 7d25312

File tree

4 files changed

+148
-80
lines changed

4 files changed

+148
-80
lines changed

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

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
*/
55

66
import type { TemplateOnlyComponent } from '@ember/component/template-only';
7-
import style from 'ember-style-modifier';
87
import { notEq } from 'ember-truth-helpers';
98

109
import ShwTextH2 from 'showcase/components/shw/text/h2';
1110
import ShwFlex from 'showcase/components/shw/flex';
1211
// import ShwDivider from 'showcase/components/shw/divider';
1312
import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
1413

15-
import { HdsBadge } from '@hashicorp/design-system-components/components';
14+
import {
15+
HdsBadge,
16+
HdsIcon,
17+
} from '@hashicorp/design-system-components/components';
1618
import {
1719
COLORS,
1820
SIZES,
@@ -24,24 +26,40 @@ const SubSectionCarbonization: TemplateOnlyComponent = <template>
2426

2527
<ShwCarbonizationComparisonGrid>
2628
<:themed>
27-
<ShwFlex @direction="column" as |SF|>
28-
<SF.Item>
29-
<HdsBadge @text="Only text" />
30-
</SF.Item>
31-
<SF.Item>
32-
<HdsBadge @icon="activity" @text="Text + icon" />
33-
</SF.Item>
34-
<SF.Item>
35-
<HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
36-
</SF.Item>
37-
<SF.Item {{style width="200px"}}>
38-
<HdsBadge
39-
@icon="activity"
40-
@text="This is a very long text that should go on two lines"
41-
/>
42-
</SF.Item>
43-
</ShwFlex>
29+
<HdsBadge @text="Only text" />
30+
</:themed>
31+
<:reference>
32+
<cds-tag>Lorem ipsum</cds-tag>
33+
</:reference>
34+
</ShwCarbonizationComparisonGrid>
35+
<ShwCarbonizationComparisonGrid>
36+
<:themed>
37+
<HdsBadge @icon="activity" @text="Text + icon" />
38+
</:themed>
39+
<:reference>
40+
<cds-tag>Lorem ipsum <HdsIcon @name="activity" slot="icon" /></cds-tag>
41+
</:reference>
42+
</ShwCarbonizationComparisonGrid>
43+
<ShwCarbonizationComparisonGrid>
44+
<:themed>
45+
<HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
46+
</:themed>
47+
<:reference>
48+
{{! <cds-tag><cds-icon shape="check"></cds-icon></cds-tag> }}
49+
<cds-tag><HdsIcon @name="activity" slot="icon" /></cds-tag>
50+
</:reference>
51+
</ShwCarbonizationComparisonGrid>
52+
<ShwCarbonizationComparisonGrid>
53+
<:themed>
54+
<HdsBadge
55+
@icon="activity"
56+
@text="This is a very long text that should go on two lines"
57+
/>
4458
</:themed>
59+
<:reference>
60+
<cds-tag><HdsIcon @name="activity" slot="icon" />
61+
This is a very long text that should go on multiple lines</cds-tag>
62+
</:reference>
4563
</ShwCarbonizationComparisonGrid>
4664

4765
<ShwTextH2>Size</ShwTextH2>

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

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,31 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
4343
`shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
4444
);
4545

46+
if (this.args.scope === 'show') {
47+
// here we use the custom HDS theming selector
48+
classes.push(`hds-theme-${this.args.theme}`);
49+
}
50+
51+
if (this.args.scope === 'reference') {
52+
// here we use the web-components specific selector (see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes)
53+
let selector;
54+
switch (this.args.theme) {
55+
case 'cds-g100':
56+
selector = 'cds-theme-zone-g100';
57+
break;
58+
case 'cds-g90':
59+
selector = 'cds-theme-zone-g90';
60+
break;
61+
case 'cds-g10':
62+
selector = 'cds-theme-zone-g10';
63+
break;
64+
default:
65+
selector = 'cds-theme-zone-white';
66+
break;
67+
}
68+
classes.push(selector);
69+
}
70+
4671
// add a class based on `this.area`
4772
classes.push(
4873
`shw-carbonization-comparison-grid__item--area-${this.areaName}`,
@@ -51,23 +76,8 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
5176
return classes.join(' ');
5277
}
5378

54-
get carbonTheme(): string | undefined {
55-
if (this.args.scope === 'reference') {
56-
return this.args.theme.replace(/^cds-/, '');
57-
} else {
58-
return undefined;
59-
}
60-
}
61-
6279
<template>
63-
<div
64-
class={{this.classNames}}
65-
...attributes
66-
{{! here we use the custom HDS theming selector/value combination }}
67-
data-hds-theme={{if (eq @scope "show") @theme}}
68-
{{! here we use the "standard" Carbon theming selector/value combination }}
69-
data-carbon-theme={{if (eq @scope "reference") this.carbonTheme}}
70-
>
80+
<div class={{this.classNames}} ...attributes>
7181
{{#if @label}}
7282
<ShwLabel>{{@label}}</ShwLabel>
7383
{{/if}}

‎showcase/app/index.html‎

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,61 @@
55
-->
66

77
<html lang="en-US">
8-
<head>
9-
<meta charset="utf-8">
10-
<title>HDS components showcase</title>
11-
<meta name="description" content="">
12-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
13-
<meta name="google-site-verification" content="_aU7ePXLFbs8nz644U2Nv1mpq2OiKnXCrwaDgZFTo-4">
14-
15-
{{content-for "head"}}
16-
17-
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
18-
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/showcase.css">
19-
20-
<link rel="shortcut icon" href="/assets/logos/favicon.png" />
21-
22-
{{content-for "head-footer"}}
23-
</head>
24-
<body class="showcase-app">
25-
{{content-for "body"}}
26-
27-
<script src="{{rootURL}}assets/vendor.js"></script>
28-
<script src="{{rootURL}}assets/showcase.js"></script>
29-
30-
{{content-for "body-footer"}}
31-
</body>
8+
9+
<head>
10+
<meta charset="utf-8">
11+
<title>HDS components showcase</title>
12+
<meta name="description" content="">
13+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
14+
<meta name="google-site-verification" content="_aU7ePXLFbs8nz644U2Nv1mpq2OiKnXCrwaDgZFTo-4">
15+
16+
{{content-for "head"}}
17+
18+
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
19+
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/showcase.css">
20+
21+
<link rel="shortcut icon" href="/assets/logos/favicon.png" />
22+
23+
<!-- IBM Carbon Web Components - Import via CDN -->
24+
<script type="module"
25+
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/badge-indicator.min.js"></script>
26+
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/tag.min.js"></script>
27+
<script type="module"
28+
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.28.0/inline-loading.min.js"></script>
29+
<!-- This contains global styles and CSS resets too! -->
30+
<!-- <link
31+
rel="stylesheet"
32+
href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" /> -->
33+
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/themes.css" />
34+
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
35+
<style type="text/css">
36+
/* manually setting the default font */
37+
/* body {
38+
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
39+
} */
40+
41+
/* Suppress custom element until styles are loaded */
42+
cds-badge-indicator:not(:defined),
43+
cds-icon:not(:defined),
44+
/* cds-icon-button:not(:defined), */
45+
cds-tag:not(:defined),
46+
cds-dismissible-tag:not(:defined),
47+
cds-operational-tag:not(:defined),
48+
cds-selectable-tag:not(:defined) {
49+
visibility: hidden;
50+
}
51+
</style>
52+
53+
{{content-for "head-footer"}}
54+
</head>
55+
56+
<body class="showcase-app">
57+
{{content-for "body"}}
58+
59+
<script src="{{rootURL}}assets/vendor.js"></script>
60+
<script src="{{rootURL}}assets/showcase.js"></script>
61+
62+
{{content-for "body-footer"}}
63+
</body>
64+
3265
</html>

‎showcase/app/styles/showcase-components/carbonization/cds-theming.scss‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,42 @@
55
// @use '@carbon/themes' as cds-themes with (
66
// $font-path: '~@ibm/plex'
77
// );
8-
@use '@carbon/themes' as cds-themes;
9-
@use '@carbon/themes/scss/themes' as *;
8+
// @use '@carbon/themes' as cds-themes;
9+
// @use '@carbon/themes/scss/themes' as *;
1010

11-
:root {
12-
@include cds-themes.theme($white);
13-
}
11+
// :root {
12+
// @include cds-themes.theme($white);
13+
// }
1414

15-
[data-carbon-theme='g0'] {
16-
@include cds-themes.theme($white);
17-
}
15+
// [data-carbon-theme='g0'] {
16+
// @include cds-themes.theme($white);
17+
// }
1818

19-
[data-carbon-theme='g10'] {
20-
@include cds-themes.theme($g10);
21-
}
19+
// [data-carbon-theme='g10'] {
20+
// @include cds-themes.theme($g10);
21+
// }
2222

23-
[data-carbon-theme='g90'] {
24-
@include cds-themes.theme($g90);
25-
}
23+
// [data-carbon-theme='g90'] {
24+
// @include cds-themes.theme($g90);
25+
// }
2626

27-
[data-carbon-theme='g100'] {
28-
@include cds-themes.theme($g100);
29-
}
27+
// [data-carbon-theme='g100'] {
28+
// @include cds-themes.theme($g100);
29+
// }
3030

3131
// TODO TEMP understand how we can set the font-family for the web components without defining it at `<body>` level
3232

33-
[data-carbon-theme='g0'],
34-
[data-carbon-theme='g10'],
35-
[data-carbon-theme='g90'],
36-
[data-carbon-theme='g100'] {
33+
// these are commented for now
34+
// [data-carbon-theme='g0'],
35+
// [data-carbon-theme='g10'],
36+
// [data-carbon-theme='g90'],
37+
// [data-carbon-theme='g100']
38+
39+
// see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes
40+
.cds-theme-zone-white,
41+
.cds-theme-zone-g10,
42+
.cds-theme-zone-g90,
43+
.cds-theme-zone-g100 {
3744
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
3845

3946
code {

0 commit comments

Comments
 (0)