Skip to content

Commit 59418c1

Browse files
didoodidoo
committed
WIP
1 parent b1292a3 commit 59418c1

File tree

5 files changed

+211
-189
lines changed

5 files changed

+211
-189
lines changed

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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 SubSectionMain from 'showcase/components/page-foundations/theming/sub-sections/main';
14+
import SubSectionDemo from 'showcase/components/page-foundations/theming/sub-sections/demo';
15+
16+
const ThemingIndex: TemplateOnlyComponent = <template>
17+
{{pageTitle "Theming"}}
18+
19+
<ShwTextH1>Theming</ShwTextH1>
20+
21+
<section data-test-percy>
22+
<SubSectionMain />
23+
</section>
24+
25+
<ShwDivider />
26+
27+
{{! For some reason, Ember tests don't play well with iframes (URL not found) so we don't snapshots them in Percy }}
28+
<section>
29+
<SubSectionDemo />
30+
</section>
31+
</template>;
32+
33+
export default ThemingIndex;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Shw::Text::H2>Demo</Shw::Text::H2>
2+
3+
<Shw::Frame
4+
@id="demo-application-with-theme-switcher"
5+
@src="/foundations/theming/frameless/demo-application-with-theme-switcher"
6+
@label="Demo application with theme switcher"
7+
@height="900"
8+
/>

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

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<Shw::Text::H2>Theme switcher</Shw::Text::H2>
2+
3+
<Shw::Text::H4 @tag="h3">Size</Shw::Text::H4>
4+
5+
<Shw::Flex @gap="2rem" as |SF|>
6+
<SF.Item @label="small (default)">
7+
<Hds::ThemeSwitcher />
8+
</SF.Item>
9+
<SF.Item @label="medium">
10+
<Hds::ThemeSwitcher @toggleSize="medium" />
11+
</SF.Item>
12+
</Shw::Flex>
13+
14+
<Shw::Flex as |SF|>
15+
<SF.Item @label="full-width">
16+
<div {{style width="150px"}}>
17+
<Hds::ThemeSwitcher @toggleIsFullWidth={{true}} />
18+
</div>
19+
</SF.Item>
20+
</Shw::Flex>
21+
22+
<Shw::Divider />
23+
24+
<Shw::Text::H2>Page-level theming</Shw::Text::H2>
25+
26+
<Shw::Flex as |SF|>
27+
<SF.Item as |SFI|>
28+
<SFI.Label>Container with color
29+
<code>foreground-strong</code>
30+
/ background
31+
<code>surface-strong</code></SFI.Label>
32+
<Mock::Theming::BasicContainer @text="TEXT" />
33+
</SF.Item>
34+
</Shw::Flex>
35+
36+
<Shw::Divider />
37+
38+
<Shw::Text::H2>Contextual theming</Shw::Text::H2>
39+
40+
<Shw::Flex @gap="4rem" as |SF|>
41+
<SF.Item as |SFI|>
42+
<SFI.Label><code>.hds-theme-light</code> class</SFI.Label>
43+
<div class="hds-theme-light">
44+
<Mock::Theming::BasicContainer @text="TEXT" />
45+
</div>
46+
</SF.Item>
47+
<SF.Item as |SFI|>
48+
<SFI.Label><code>.hds-theme-dark</code> class</SFI.Label>
49+
<div class="hds-theme-dark">
50+
<Mock::Theming::BasicContainer @text="TEXT" />
51+
</div>
52+
</SF.Item>
53+
</Shw::Flex>
54+
55+
<Shw::Text::H4 @tag="h3">Nested</Shw::Text::H4>
56+
57+
<Shw::Flex @gap="4rem" as |SF|>
58+
<SF.Item as |SFI|>
59+
<SFI.Label><code>.hds-theme-light</code> &gt; <code>.hds-theme-dark</code></SFI.Label>
60+
<div class="hds-theme-light">
61+
<Mock::Theming::BasicContainer>
62+
<div class="hds-theme-dark">
63+
<Mock::Theming::BasicContainer @text="TEXT" />
64+
</div>
65+
</Mock::Theming::BasicContainer>
66+
</div>
67+
</SF.Item>
68+
<SF.Item as |SFI|>
69+
<SFI.Label><code>.hds-theme-dark</code> &gt; <code>.hds-theme-light</code></SFI.Label>
70+
<div class="hds-theme-dark">
71+
<Mock::Theming::BasicContainer>
72+
<div class="hds-theme-light">
73+
<Mock::Theming::BasicContainer @text="TEXT" />
74+
</div>
75+
</Mock::Theming::BasicContainer>
76+
</div>
77+
</SF.Item>
78+
<SF.Item as |SFI|>
79+
<SFI.Label><code>.hds-theme-dark</code>
80+
&gt;
81+
<code>.hds-theme-light</code>
82+
&gt;
83+
<code>.hds-theme-dark</code></SFI.Label>
84+
<div class="hds-theme-dark">
85+
<Mock::Theming::BasicContainer>
86+
<div class="hds-theme-light">
87+
<Mock::Theming::BasicContainer>
88+
<div class="hds-theme-dark">
89+
<Mock::Theming::BasicContainer @text="TEXT" />
90+
</div>
91+
</Mock::Theming::BasicContainer>
92+
</div>
93+
</Mock::Theming::BasicContainer>
94+
</div>
95+
</SF.Item>
96+
</Shw::Flex>
97+
98+
<Shw::Divider />
99+
100+
<Shw::Text::H2>"Themed" components</Shw::Text::H2>
101+
102+
<Shw::Text::H4 @tag="h3">AppFooter</Shw::Text::H4>
103+
104+
<Shw::Flex @direction="column" as |SF|>
105+
<SF.Item @label="theme=light">
106+
<div class="shw-foundation-theming-light-background">
107+
<Hds::AppFooter @theme="light" as |AF|>
108+
<AF.ExtraBefore>
109+
<Hds::Dropdown as |D|>
110+
<D.ToggleButton @text="Theme" @color="secondary" @size="small" />
111+
<D.Interactive @icon="monitor" {{on "click" D.close}}>System</D.Interactive>
112+
<D.Interactive @icon="moon" {{on "click" D.close}}>Dark</D.Interactive>
113+
<D.Interactive @icon="sun" {{on "click" D.close}}>Light</D.Interactive>
114+
</Hds::Dropdown>
115+
</AF.ExtraBefore>
116+
<AF.StatusLink @status="operational" />
117+
<AF.Link @href="https://cloud.hashicorp.com/docs/changelog">Changelog</AF.Link>
118+
<AF.LegalLinks />
119+
</Hds::AppFooter>
120+
</div>
121+
</SF.Item>
122+
<SF.Item @label="theme=dark">
123+
<div class="shw-foundation-theming-dark-background">
124+
<Hds::AppFooter @theme="dark" as |AF|>
125+
<AF.ExtraBefore>
126+
<Hds::Dropdown as |D|>
127+
<D.ToggleButton @text="Theme" @color="secondary" @size="small" />
128+
<D.Interactive @icon="monitor" {{on "click" D.close}}>System</D.Interactive>
129+
<D.Interactive @icon="moon" {{on "click" D.close}}>Dark</D.Interactive>
130+
<D.Interactive @icon="sun" {{on "click" D.close}}>Light</D.Interactive>
131+
</Hds::Dropdown>
132+
</AF.ExtraBefore>
133+
<AF.StatusLink @status="operational" />
134+
<AF.Link @href="https://cloud.hashicorp.com/docs/changelog">Changelog</AF.Link>
135+
<AF.LegalLinks />
136+
</Hds::AppFooter>
137+
</div>
138+
</SF.Item>
139+
</Shw::Flex>
140+
141+
<Shw::Divider @level={{2}} />
142+
143+
<Shw::Text::H4 @tag="h3">CodeBlock</Shw::Text::H4>
144+
145+
<Shw::Flex @direction="column" as |SF|>
146+
<SF.Item @label="default">
147+
{{! template-lint-disable no-whitespace-for-layout }}
148+
<Hds::CodeBlock
149+
@language="javascript"
150+
@value="let codeLang='JavaScript';
151+
console.log(`I am ${codeLang} code`);"
152+
@hasLineNumbers={{true}}
153+
@hasCopyButton={{true}}
154+
@highlightLines="2"
155+
as |CB|
156+
>
157+
<CB.Title>Title</CB.Title>
158+
<CB.Description>Description</CB.Description>
159+
</Hds::CodeBlock>
160+
{{! template-lint-enable no-whitespace-for-layout }}
161+
</SF.Item>
162+
</Shw::Flex>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
import ThemingIndex from 'showcase/components/page-foundations/theming/index';
3+
4+
const PageFoundationsTheming: TemplateOnlyComponent = <template>
5+
<ThemingIndex />
6+
</template>;
7+
8+
export default PageFoundationsTheming;

0 commit comments

Comments
 (0)