Skip to content

Commit 4675684

Browse files
didoodidoo
authored
Showcase: convert AppFrame to gts (#3225)
1 parent 2208d89 commit 4675684

20 files changed

+443
-321
lines changed

‎showcase/app/components/page-layouts/app-frame/code-fragments/with-area-blocks.gts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Component from '@glimmer/component';
2+
3+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
4+
5+
import { HdsAppFrame } from '@hashicorp/design-system-components/components';
6+
7+
export interface CodeFragmentWithAreaBlocksSignature {
8+
Args: {
9+
hasHeader?: boolean;
10+
hasSidebar?: boolean;
11+
hasFooter?: boolean;
12+
hasModal?: boolean;
13+
};
14+
Blocks: {
15+
modal: [];
16+
};
17+
}
18+
19+
export default class CodeFragmentWithAreaBlocks extends Component<CodeFragmentWithAreaBlocksSignature> {
20+
hasHeader = this.args.hasHeader ?? true;
21+
hasSidebar = this.args.hasSidebar ?? true;
22+
hasFooter = this.args.hasFooter ?? true;
23+
hasModal = this.args.hasModal ?? false;
24+
25+
<template>
26+
<div class="shw-layout-app-frame-wrapper">
27+
<HdsAppFrame as |Frame|>
28+
{{#if this.hasHeader}}
29+
<Frame.Header>
30+
<ShwPlaceholder
31+
@height="60px"
32+
@text="header"
33+
@background="#e5ffd2"
34+
/>
35+
</Frame.Header>
36+
{{/if}}
37+
{{#if this.hasSidebar}}
38+
<Frame.Sidebar>
39+
<ShwPlaceholder
40+
@width="120px"
41+
@height="100%"
42+
@text="sidebar"
43+
@background="#e4c5f3"
44+
/>
45+
</Frame.Sidebar>
46+
{{/if}}
47+
<Frame.Main>
48+
<ShwPlaceholder @height="100%" @text="main" @background="#d2f4ff" />
49+
</Frame.Main>
50+
{{#if this.hasFooter}}
51+
<Frame.Footer>
52+
<ShwPlaceholder
53+
@height="60px"
54+
@text="footer"
55+
@background="#fff8d2"
56+
/>
57+
</Frame.Footer>
58+
{{/if}}
59+
{{#if this.hasModal}}
60+
<Frame.Modals>
61+
{{yield to="modal"}}
62+
</Frame.Modals>
63+
{{/if}}
64+
</HdsAppFrame>
65+
</div>
66+
</template>
67+
}

‎showcase/app/components/page-layouts/app-frame/index.gts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
7+
import SubSectionContainers from 'showcase/components/page-layouts/app-frame/sub-sections/containers';
8+
import SubSection3dVisualization from 'showcase/components/page-layouts/app-frame/sub-sections/3d-visualization';
9+
import SubSectionFramed from 'showcase/components/page-layouts/app-frame/sub-sections/framed';
10+
import SubSectionDemo from 'showcase/components/page-layouts/app-frame/sub-sections/demo';
11+
12+
const AppFrameIndex: TemplateOnlyComponent = <template>
13+
{{pageTitle "AppFrame Component"}}
14+
15+
<ShwTextH1>AppFrame</ShwTextH1>
16+
17+
<section data-test-percy>
18+
<SubSectionContainers />
19+
<SubSection3dVisualization />
20+
</section>
21+
{{! For some reason, Ember tests don't play well with iframes (URL not found) so we can't take snapshots of these examples in Percy }}
22+
<section>
23+
<SubSectionFramed />
24+
<SubSectionDemo />
25+
</section>
26+
</template>;
27+
28+
export default AppFrameIndex;

‎showcase/app/components/page-layouts/app-frame/sub-sections/3d-visualization.gts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import Component from '@glimmer/component';
2+
import { on } from '@ember/modifier';
3+
import style from 'ember-style-modifier/modifiers/style';
4+
import { tracked } from '@glimmer/tracking';
5+
6+
import ShwTextH3 from 'showcase/components/shw/text/h3';
7+
import ShwGrid from 'showcase/components/shw/grid';
8+
import ShwDivider from 'showcase/components/shw/divider';
9+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
10+
11+
import { HdsAppFrame } from '@hashicorp/design-system-components/components';
12+
13+
export default class SubSectionSubSection3dVisualization extends Component {
14+
@tracked show3DVisualization: boolean = false;
15+
16+
toggle3DVisualization = () => {
17+
this.show3DVisualization = !this.show3DVisualization;
18+
};
19+
20+
<template>
21+
<ShwTextH3>3d Visualization</ShwTextH3>
22+
23+
<button
24+
type="button"
25+
{{on "click" this.toggle3DVisualization}}
26+
{{style margin-bottom="20px"}}
27+
>
28+
{{if this.show3DVisualization "Hide" "Show"}}
29+
</button>
30+
31+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
32+
<SG.Item>
33+
<div
34+
class="shw-layout-app-frame-wrapper shw-layout-app-frame-wrapper--with-3d
35+
{{if this.show3DVisualization 'shw-is-3d' 'shw-is-flat'}}"
36+
>
37+
<HdsAppFrame as |Frame|>
38+
<Frame.Header>
39+
<ShwPlaceholder
40+
@height="60px"
41+
@text="header"
42+
@background="#e5ffd2"
43+
/>
44+
</Frame.Header>
45+
<Frame.Sidebar>
46+
<ShwPlaceholder
47+
@width="120px"
48+
@height="100%"
49+
@text="sidebar"
50+
@background="#e4c5f3"
51+
/>
52+
</Frame.Sidebar>
53+
<Frame.Main>
54+
<ShwPlaceholder
55+
@height="100%"
56+
@text="main"
57+
@background="#d2f4ff"
58+
/>
59+
</Frame.Main>
60+
<Frame.Footer>
61+
<ShwPlaceholder
62+
@height="60px"
63+
@text="footer"
64+
@background="#fff8d2"
65+
/>
66+
</Frame.Footer>
67+
<Frame.Modals>
68+
<div class="shw-layout-app-frame-fake-overlay" />
69+
<div class="shw-layout-app-frame-fake-modal">
70+
<ShwPlaceholder
71+
@width="100%"
72+
@height="100%"
73+
@text="modal"
74+
@background="#ffffffb5"
75+
/>
76+
</div>
77+
</Frame.Modals>
78+
</HdsAppFrame>
79+
</div>
80+
</SG.Item>
81+
</ShwGrid>
82+
83+
<ShwDivider @level={{2}} />
84+
</template>
85+
}

‎showcase/app/components/page-layouts/app-frame/sub-sections/containers.gts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwTextH2 from 'showcase/components/shw/text/h2';
4+
import ShwGrid from 'showcase/components/shw/grid';
5+
import ShwDivider from 'showcase/components/shw/divider';
6+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
7+
8+
import CodeFragmentWithAreaBlocks from '../code-fragments/with-area-blocks';
9+
10+
const SubSectionContainers: TemplateOnlyComponent = <template>
11+
<ShwTextH2>Containers</ShwTextH2>
12+
13+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
14+
<SG.Item @label="With header/sidebar/main/footer">
15+
<CodeFragmentWithAreaBlocks />
16+
</SG.Item>
17+
<SG.Item @label="Without header">
18+
<CodeFragmentWithAreaBlocks @hasHeader={{false}} />
19+
</SG.Item>
20+
<SG.Item @label="Without sidebar">
21+
<CodeFragmentWithAreaBlocks @hasSidebar={{false}} />
22+
</SG.Item>
23+
<SG.Item @label="Without footer">
24+
<CodeFragmentWithAreaBlocks @hasFooter={{false}} />
25+
</SG.Item>
26+
<SG.Item @label="With modal container (empty)">
27+
<CodeFragmentWithAreaBlocks @hasModal={{true}} />
28+
</SG.Item>
29+
<SG.Item @label="With modal container (with content)">
30+
<CodeFragmentWithAreaBlocks @hasModal={{true}}>
31+
<:modal>
32+
<div class="shw-layout-app-frame-fake-overlay" />
33+
<div class="shw-layout-app-frame-fake-modal">
34+
<ShwPlaceholder
35+
@width="100%"
36+
@height="100%"
37+
@text="modal"
38+
@background="#ffffffb5"
39+
/>
40+
</div>
41+
</:modal>
42+
</CodeFragmentWithAreaBlocks>
43+
</SG.Item>
44+
</ShwGrid>
45+
46+
<ShwDivider @level={{2}} />
47+
</template>;
48+
49+
export default SubSectionContainers;

‎showcase/app/components/page-layouts/app-frame/sub-sections/demo.gts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
import ShwDivider from 'showcase/components/shw/divider';
6+
7+
const SubSectionDemo: TemplateOnlyComponent = <template>
8+
<ShwDivider />
9+
10+
<ShwTextH2>Demo</ShwTextH2>
11+
12+
<ShwFrame
13+
@id="demo-full-app-frame-with-app-header-and-app-side-nav"
14+
@src="/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav"
15+
@height="780"
16+
@label="Full AppFrame with AppHeader & AppSideNav"
17+
/>
18+
19+
<ShwFrame
20+
@id="demo-full-app-frame-with-side-nav"
21+
@src="/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav"
22+
@height="780"
23+
@label="Full AppFrame with old SideNav (without AppHeader)"
24+
/>
25+
</template>;
26+
27+
export default SubSectionDemo;

‎showcase/app/components/page-layouts/app-frame/sub-sections/framed.gts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwTextH3 from 'showcase/components/shw/text/h3';
4+
import ShwFrame from 'showcase/components/shw/frame';
5+
6+
const SubSectionFramed: TemplateOnlyComponent = <template>
7+
<ShwTextH3>Framed</ShwTextH3>
8+
9+
<ShwFrame
10+
@id="demo-full-app-frame-lt-480px"
11+
@src="/layouts/app-frame/frameless/demo-full-app-frame"
12+
@label="Full app-frame (height < 480px)"
13+
@height="400"
14+
/>
15+
16+
<ShwFrame
17+
@id="demo-full-app-frame-gt-480px"
18+
@src="/layouts/app-frame/frameless/demo-full-app-frame"
19+
@label="Full app-frame (height > 480px)"
20+
@height="500"
21+
/>
22+
23+
<ShwFrame
24+
@id="demo-full-app-frame-with-modal"
25+
@src="/layouts/app-frame/frameless/demo-full-app-frame-with-modal"
26+
@label="Full app-frame with modal"
27+
/>
28+
</template>;
29+
30+
export default SubSectionFramed;

‎showcase/app/controllers/page-layouts/app-frame/index.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎showcase/app/routes/page-layouts/app-frame/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55

66
import Route from '@ember/routing/route';
77

8+
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
9+
10+
export type PageLayoutsAppFrameModel = ModelFrom<PageLayoutsAppFrameRoute>;
11+
812
export default class PageLayoutsAppFrameRoute extends Route {}

‎showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table.gts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
import { pageTitle } from 'ember-page-title';
3+
4+
import MockApp from 'showcase/components/mock/app';
5+
6+
const PageLayoutsAppFrameFramelessDemoFullAppFrameWithAdvancedTable: TemplateOnlyComponent =
7+
<template>
8+
{{pageTitle "AppFrame Component - Frameless"}}
9+
10+
<MockApp>
11+
<:main as |M|>
12+
<M.PageHeader />
13+
<M.GenericAdvancedTable />
14+
</:main>
15+
</MockApp>
16+
</template>;
17+
18+
export default PageLayoutsAppFrameFramelessDemoFullAppFrameWithAdvancedTable;

‎showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table.hbs‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)