Skip to content

Commit a1ff2f5

Browse files
didoodidoo
committed
added foundations/theming showcase page (and a frameless demo)
1 parent c345c42 commit a1ff2f5

File tree

12 files changed

+798
-0
lines changed

12 files changed

+798
-0
lines changed

‎showcase/app/components/page-foundations/theming/code-fragments/with-theming-basic-container.gts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
interface CodeFragmentWithThemingBasicContainerSignature {
4+
Args: {
5+
text?: string;
6+
};
7+
Blocks: {
8+
default: [];
9+
};
10+
Element: HTMLDivElement;
11+
}
12+
13+
const CodeFragmentWithThemingBasicContainer: TemplateOnlyComponent<CodeFragmentWithThemingBasicContainerSignature> =
14+
<template>
15+
<div class="shw-foundation-theming-basic-container" ...attributes>
16+
{{#if @text}}
17+
{{@text}}
18+
{{else}}
19+
{{yield}}
20+
{{/if}}
21+
</div>
22+
</template>;
23+
24+
export default CodeFragmentWithThemingBasicContainer;

‎showcase/app/components/page-foundations/theming/index.gts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import { pageTitle } from 'ember-page-title';
4+
5+
import ShwTextH1 from 'showcase/components/shw/text/h1';
6+
import ShwDivider from 'showcase/components/shw/divider';
7+
8+
import SubSectionThemeSwitcher from 'showcase/components/page-foundations/theming/sub-sections/theme-switcher';
9+
import SubSectionContexts from 'showcase/components/page-foundations/theming/sub-sections/contexts';
10+
import SubSectionComponents from 'showcase/components/page-foundations/theming/sub-sections/components';
11+
import SubSectionDemo from 'showcase/components/page-foundations/theming/sub-sections/demo';
12+
13+
const ThemingIndex: TemplateOnlyComponent = <template>
14+
{{pageTitle "Theming"}}
15+
16+
<ShwTextH1>Theming</ShwTextH1>
17+
18+
<section data-test-percy>
19+
<SubSectionThemeSwitcher />
20+
<SubSectionContexts />
21+
<SubSectionComponents />
22+
</section>
23+
24+
<ShwDivider />
25+
26+
{{! For some reason, Ember tests don't play well with iframes (URL not found) so we don't snapshots them in Percy }}
27+
<section>
28+
<SubSectionDemo />
29+
</section>
30+
</template>;
31+
32+
export default ThemingIndex;

‎showcase/app/components/page-foundations/theming/sub-sections/components.gts‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
import { on } from '@ember/modifier';
3+
4+
import ShwDivider from 'showcase/components/shw/divider';
5+
import ShwFlex from 'showcase/components/shw/flex';
6+
import ShwTextH2 from 'showcase/components/shw/text/h2';
7+
import ShwTextH4 from 'showcase/components/shw/text/h4';
8+
9+
import {
10+
HdsAppFooter,
11+
HdsDropdown,
12+
HdsCodeBlock,
13+
} from '@hashicorp/design-system-components/components';
14+
15+
const SubSectionComponents: TemplateOnlyComponent = <template>
16+
<ShwTextH2>"Themed" components</ShwTextH2>
17+
18+
<ShwTextH4 @tag="h3">AppFooter</ShwTextH4>
19+
20+
<ShwFlex @direction="column" as |SF|>
21+
<SF.Item @label="theme=light">
22+
<div class="shw-foundation-theming-light-background">
23+
<HdsAppFooter @theme="light" as |AF|>
24+
<AF.ExtraBefore>
25+
<HdsDropdown as |D|>
26+
<D.ToggleButton @text="Theme" @color="secondary" @size="small" />
27+
<D.Interactive
28+
@icon="monitor"
29+
{{on "click" D.close}}
30+
>System</D.Interactive>
31+
<D.Interactive
32+
@icon="moon"
33+
{{on "click" D.close}}
34+
>Dark</D.Interactive>
35+
<D.Interactive
36+
@icon="sun"
37+
{{on "click" D.close}}
38+
>Light</D.Interactive>
39+
</HdsDropdown>
40+
</AF.ExtraBefore>
41+
<AF.StatusLink @status="operational" />
42+
<AF.Link
43+
@href="https://cloud.hashicorp.com/docs/changelog"
44+
>Changelog</AF.Link>
45+
<AF.LegalLinks />
46+
</HdsAppFooter>
47+
</div>
48+
</SF.Item>
49+
<SF.Item @label="theme=dark">
50+
<div class="shw-foundation-theming-dark-background">
51+
<HdsAppFooter @theme="dark" as |AF|>
52+
<AF.ExtraBefore>
53+
<HdsDropdown as |D|>
54+
<D.ToggleButton @text="Theme" @color="secondary" @size="small" />
55+
<D.Interactive
56+
@icon="monitor"
57+
{{on "click" D.close}}
58+
>System</D.Interactive>
59+
<D.Interactive
60+
@icon="moon"
61+
{{on "click" D.close}}
62+
>Dark</D.Interactive>
63+
<D.Interactive
64+
@icon="sun"
65+
{{on "click" D.close}}
66+
>Light</D.Interactive>
67+
</HdsDropdown>
68+
</AF.ExtraBefore>
69+
<AF.StatusLink @status="operational" />
70+
<AF.Link
71+
@href="https://cloud.hashicorp.com/docs/changelog"
72+
>Changelog</AF.Link>
73+
<AF.LegalLinks />
74+
</HdsAppFooter>
75+
</div>
76+
</SF.Item>
77+
</ShwFlex>
78+
79+
<ShwDivider @level={{2}} />
80+
81+
<ShwTextH4 @tag="h3">CodeBlock</ShwTextH4>
82+
83+
<ShwFlex @direction="column" as |SF|>
84+
<SF.Item @label="default">
85+
{{! template-lint-disable no-whitespace-for-layout }}
86+
<HdsCodeBlock
87+
@language="go"
88+
@value="package main
89+
import 'fmt'
90+
func main() {
91+
res = 'Lorem ipsum dolor sit amet'
92+
fmt.Println(res)
93+
}"
94+
@hasLineNumbers={{true}}
95+
@hasCopyButton={{true}}
96+
@highlightLines="2"
97+
as |CB|
98+
>
99+
<CB.Title>Title</CB.Title>
100+
<CB.Description>Description</CB.Description>
101+
</HdsCodeBlock>
102+
{{! template-lint-enable no-whitespace-for-layout }}
103+
</SF.Item>
104+
</ShwFlex>
105+
</template>;
106+
107+
export default SubSectionComponents;

‎showcase/app/components/page-foundations/theming/sub-sections/contexts.gts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwDivider from 'showcase/components/shw/divider';
4+
import ShwFlex from 'showcase/components/shw/flex';
5+
import ShwTextH2 from 'showcase/components/shw/text/h2';
6+
import ShwTextH4 from 'showcase/components/shw/text/h4';
7+
import CodeFragmentWithThemingBasicContainer from '../code-fragments/with-theming-basic-container';
8+
9+
const SubSectionContexts: TemplateOnlyComponent = <template>
10+
<ShwTextH2>Page-level theming</ShwTextH2>
11+
12+
<ShwFlex as |SF|>
13+
<SF.Item as |SFI|>
14+
<SFI.Label>Container with color
15+
<code>foreground-strong</code>
16+
/ background
17+
<code>surface-strong</code></SFI.Label>
18+
<CodeFragmentWithThemingBasicContainer @text="TEXT" />
19+
</SF.Item>
20+
</ShwFlex>
21+
22+
<ShwDivider />
23+
24+
<ShwTextH2>Contextual theming</ShwTextH2>
25+
26+
<ShwFlex @gap="4rem" as |SF|>
27+
<SF.Item as |SFI|>
28+
<SFI.Label><code>.hds-theme-light</code> class</SFI.Label>
29+
<div class="hds-theme-light">
30+
<CodeFragmentWithThemingBasicContainer @text="TEXT" />
31+
</div>
32+
</SF.Item>
33+
<SF.Item as |SFI|>
34+
<SFI.Label><code>.hds-theme-dark</code> class</SFI.Label>
35+
<div class="hds-theme-dark">
36+
<CodeFragmentWithThemingBasicContainer @text="TEXT" />
37+
</div>
38+
</SF.Item>
39+
</ShwFlex>
40+
41+
<ShwTextH4 @tag="h3">Nested</ShwTextH4>
42+
43+
<ShwFlex @gap="4rem" as |SF|>
44+
<SF.Item as |SFI|>
45+
<SFI.Label><code>.hds-theme-light</code>
46+
&gt;
47+
<code>.hds-theme-dark</code></SFI.Label>
48+
<div class="hds-theme-light">
49+
<CodeFragmentWithThemingBasicContainer>
50+
<div class="hds-theme-dark">
51+
<CodeFragmentWithThemingBasicContainer @text="TEXT" />
52+
</div>
53+
</CodeFragmentWithThemingBasicContainer>
54+
</div>
55+
</SF.Item>
56+
<SF.Item as |SFI|>
57+
<SFI.Label><code>.hds-theme-dark</code>
58+
&gt;
59+
<code>.hds-theme-light</code></SFI.Label>
60+
<div class="hds-theme-dark">
61+
<CodeFragmentWithThemingBasicContainer>
62+
<div class="hds-theme-light">
63+
<CodeFragmentWithThemingBasicContainer @text="TEXT" />
64+
</div>
65+
</CodeFragmentWithThemingBasicContainer>
66+
</div>
67+
</SF.Item>
68+
<SF.Item as |SFI|>
69+
<SFI.Label><code>.hds-theme-dark</code>
70+
&gt;
71+
<code>.hds-theme-light</code>
72+
&gt;
73+
<code>.hds-theme-dark</code></SFI.Label>
74+
<div class="hds-theme-dark">
75+
<CodeFragmentWithThemingBasicContainer>
76+
<div class="hds-theme-light">
77+
<CodeFragmentWithThemingBasicContainer>
78+
<div class="hds-theme-dark">
79+
<CodeFragmentWithThemingBasicContainer @text="TEXT" />
80+
</div>
81+
</CodeFragmentWithThemingBasicContainer>
82+
</div>
83+
</CodeFragmentWithThemingBasicContainer>
84+
</div>
85+
</SF.Item>
86+
</ShwFlex>
87+
</template>;
88+
89+
export default SubSectionContexts;

‎showcase/app/components/page-foundations/theming/sub-sections/demo.gts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwTextH2 from 'showcase/components/shw/text/h2';
4+
import ShwFrame from 'showcase/components/shw/frame';
5+
6+
const SubSectionDemo: TemplateOnlyComponent = <template>
7+
<ShwTextH2>Demo</ShwTextH2>
8+
9+
<ShwFrame
10+
@id="demo-application-with-theme-switcher"
11+
@src="/foundations/theming/frameless/demo-application-with-theme-switcher"
12+
@label="Demo application with theme switcher"
13+
@height="900"
14+
/>
15+
</template>;
16+
17+
export default SubSectionDemo;

‎showcase/app/components/page-foundations/theming/sub-sections/theme-switcher.gts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
import style from 'ember-style-modifier';
3+
4+
import ShwFlex from 'showcase/components/shw/flex';
5+
import ShwTextH2 from 'showcase/components/shw/text/h2';
6+
import ShwTextH4 from 'showcase/components/shw/text/h4';
7+
import ShwDivider from 'showcase/components/shw/divider';
8+
9+
import { HdsThemeSwitcher } from '@hashicorp/design-system-components/components';
10+
11+
const SubSectionThemeSwitcher: TemplateOnlyComponent = <template>
12+
<ShwTextH2>Theme switcher</ShwTextH2>
13+
14+
<ShwTextH4 @tag="h3">Size</ShwTextH4>
15+
16+
<ShwFlex @gap="2rem" as |SF|>
17+
<SF.Item @label="small (default)">
18+
<HdsThemeSwitcher />
19+
</SF.Item>
20+
<SF.Item @label="medium">
21+
<HdsThemeSwitcher @toggleSize="medium" />
22+
</SF.Item>
23+
</ShwFlex>
24+
25+
<ShwFlex as |SF|>
26+
<SF.Item @label="full-width">
27+
<div {{style width="150px"}}>
28+
<HdsThemeSwitcher @toggleIsFullWidth={{true}} />
29+
</div>
30+
</SF.Item>
31+
</ShwFlex>
32+
33+
<ShwDivider />
34+
</template>;
35+
36+
export default SubSectionThemeSwitcher;

‎showcase/app/router.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ Router.map(function () {
2323
this.route('demo-viewport-breakpoints-page-padding');
2424
});
2525
});
26+
this.route('theming', function () {
27+
this.route('frameless', function () {
28+
this.route('demo-application-with-theme-switcher');
29+
});
30+
});
2631
});
2732
this.route('page-components', { path: 'components' }, function () {
2833
this.route('accordion');

‎showcase/app/styles/app.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
@use "./showcase-pages/tabs" as showcase-tabs;
8585
@use "./showcase-pages/tag" as showcase-tag;
8686
@use "./showcase-pages/text" as showcase-text;
87+
@use "./showcase-pages/theming" as showcase-theming;
8788
@use "./showcase-pages/tooltip" as showcase-tooltip;
8889
@use "./showcase-pages/typography" as showcase-typography;
8990
// END COMPONENT PAGES IMPORTS

‎showcase/app/styles/showcase-pages/theming.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
// THEMING
7+
8+
body.page-foundations-theming {
9+
.shw-foundation-theming-light-background {
10+
padding: 8px;
11+
background: var(--shw-color-white);
12+
}
13+
14+
.shw-foundation-theming-dark-background {
15+
padding: 8px;
16+
background: var(--shw-color-black);
17+
}
18+
19+
.shw-foundation-theming-basic-container {
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
width: fit-content;
24+
min-width: 120px;
25+
min-height: 120px;
26+
padding: 50px;
27+
color: var(--token-color-foreground-strong);
28+
font-weight: bold;
29+
font-size: 10px;
30+
font-family: monaco, Consolas, "Lucida Console", monospace;
31+
line-height: 1.2;
32+
background-color: var(--token-color-surface-strong);
33+
}
34+
}

‎showcase/app/templates/index.hbs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
Breakpoints
2828
</LinkTo>
2929
</li>
30+
<li>
31+
<LinkTo @route="page-foundations.theming">
32+
Theming
33+
</LinkTo>
34+
</li>
3035
</ol>
3136

3237
<Shw::Text::H2>Internationalization</Shw::Text::H2>

0 commit comments

Comments
 (0)