Skip to content

Commit 87399cf

Browse files
shleewhitedchyun
shleewhite
and
dchyun
authored
Showcase: convert Code Editor page to gts (#3321)
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
1 parent fe4ac16 commit 87399cf

File tree

10 files changed

+499
-359
lines changed

10 files changed

+499
-359
lines changed

‎showcase/app/components/page-components/code-editor/index.gts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import { pageTitle } from 'ember-page-title';
7+
8+
import ShwTextH1 from 'showcase/components/shw/text/h1';
9+
10+
import SubSectionContent from 'showcase/components/page-components/code-editor/sub-sections/content';
11+
import SubSectionStandalone from 'showcase/components/page-components/code-editor/sub-sections/standalone';
12+
import SubSectionHeader from 'showcase/components/page-components/code-editor/sub-sections/header';
13+
import SubSectionSyntaxHighlighting from 'showcase/components/page-components/code-editor/sub-sections/syntax-highlighting';
14+
import SubSectionLinting from 'showcase/components/page-components/code-editor/sub-sections/linting';
15+
import SubSectionStandaloneModifier from 'showcase/components/page-components/code-editor/sub-sections/standalone-modifier';
16+
17+
const CodeEditorIndex: TemplateOnlyComponent = <template>
18+
{{pageTitle "CodeEditor Component"}}
19+
20+
<ShwTextH1>CodeEditor</ShwTextH1>
21+
22+
<section data-test-percy>
23+
<SubSectionContent />
24+
<SubSectionStandalone />
25+
<SubSectionHeader />
26+
<SubSectionSyntaxHighlighting />
27+
<SubSectionLinting />
28+
<SubSectionStandaloneModifier />
29+
</section>
30+
</template>;
31+
32+
export default CodeEditorIndex;

‎showcase/app/components/page-components/code-editor/sub-sections/content.gts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
7+
import ShwTextH2 from 'showcase/components/shw/text/h2';
8+
import ShwFlex from 'showcase/components/shw/flex';
9+
10+
import { HdsCodeEditor } from '@hashicorp/design-system-components/components';
11+
12+
const DEMO_CODE =
13+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
14+
15+
const SubSectionContent: TemplateOnlyComponent = <template>
16+
<ShwTextH2>Content</ShwTextH2>
17+
<ShwFlex @direction="column" as |SF|>
18+
<SF.Item @label="No content">
19+
<HdsCodeEditor @ariaLabel="No content" />
20+
</SF.Item>
21+
<SF.Item @label="With initial content">
22+
<HdsCodeEditor @ariaLabel="With initial content" @value={{DEMO_CODE}} />
23+
</SF.Item>
24+
</ShwFlex>
25+
</template>;
26+
27+
export default SubSectionContent;

‎showcase/app/components/page-components/code-editor/sub-sections/header.gts‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
7+
import ShwTextH2 from 'showcase/components/shw/text/h2';
8+
import ShwTextH3 from 'showcase/components/shw/text/h3';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
import ShwGrid from 'showcase/components/shw/grid';
11+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
12+
13+
import {
14+
HdsCodeEditor,
15+
HdsButton,
16+
} from '@hashicorp/design-system-components/components';
17+
18+
const SubSectionHeader: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Header</ShwTextH2>
20+
21+
<ShwTextH3>Title and description</ShwTextH3>
22+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
23+
<SG.Item @label="With title">
24+
<HdsCodeEditor as |CE|>
25+
<CE.Title>Code editor with title</CE.Title>
26+
</HdsCodeEditor>
27+
</SG.Item>
28+
<SG.Item @label="With description">
29+
<HdsCodeEditor @ariaLabel="With description" as |CE|>
30+
<CE.Description>This is a code editor with a description</CE.Description>
31+
</HdsCodeEditor>
32+
</SG.Item>
33+
<SG.Item @label="With title and description">
34+
<HdsCodeEditor as |CE|>
35+
<CE.Title>Code editor with title</CE.Title>
36+
<CE.Description>This is a code editor with a description</CE.Description>
37+
</HdsCodeEditor>
38+
</SG.Item>
39+
</ShwGrid>
40+
41+
<ShwTextH3>Custom content</ShwTextH3>
42+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
43+
<SG.Item @label="With custom content">
44+
<HdsCodeEditor @ariaLabel="With custom content" as |CE|>
45+
<CE.Generic>
46+
<ShwPlaceholder @text="generic content" @height="24" />
47+
</CE.Generic>
48+
</HdsCodeEditor>
49+
</SG.Item>
50+
<SG.Item @label="With custom content and title">
51+
<HdsCodeEditor as |CE|>
52+
<CE.Title>Code editor with custom content and title</CE.Title>
53+
<CE.Generic>
54+
<ShwPlaceholder @text="generic content" @height="24" />
55+
</CE.Generic>
56+
</HdsCodeEditor>
57+
</SG.Item>
58+
<SG.Item @label="With custom content and description">
59+
<HdsCodeEditor @ariaLabel="With custom content and description" as |CE|>
60+
<CE.Description>Description for code editor with custom content and
61+
description</CE.Description>
62+
<CE.Generic>
63+
<ShwPlaceholder @text="generic content" @height="24" />
64+
</CE.Generic>
65+
</HdsCodeEditor>
66+
</SG.Item>
67+
<SG.Item @label="With custom content, title, and description">
68+
<HdsCodeEditor as |CE|>
69+
<CE.Title>Code editor with custom content, title, and description</CE.Title>
70+
<CE.Description>Description for code editor with custom content, title,
71+
and description</CE.Description>
72+
<CE.Generic>
73+
<ShwPlaceholder @text="generic content" @height="24" />
74+
</CE.Generic>
75+
</HdsCodeEditor>
76+
</SG.Item>
77+
</ShwGrid>
78+
79+
<ShwTextH3>Actions</ShwTextH3>
80+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
81+
<SG.Item @label="Fullscreen toggle">
82+
<HdsCodeEditor
83+
@ariaLabel="Fullscreen toggle"
84+
@hasFullScreenButton={{true}}
85+
/>
86+
</SG.Item>
87+
<SG.Item @label="Copy button">
88+
<HdsCodeEditor
89+
@ariaLabel="Copy button"
90+
@value="Copy me!"
91+
@hasCopyButton={{true}}
92+
/>
93+
</SG.Item>
94+
<SG.Item @label="Fullscreen toggle and copy button">
95+
<HdsCodeEditor
96+
@ariaLabel="Fullscreen toggle and copy button"
97+
@hasFullScreenButton={{true}}
98+
@hasCopyButton={{true}}
99+
/>
100+
</SG.Item>
101+
</ShwGrid>
102+
103+
<ShwTextH3>Complex example</ShwTextH3>
104+
<ShwFlex @direction="column" as |SF|>
105+
<SF.Item
106+
@label="With title, description, internal actions, and custom content"
107+
>
108+
<HdsCodeEditor
109+
@hasFullScreenButton={{true}}
110+
@hasCopyButton={{true}}
111+
as |CE|
112+
>
113+
<CE.Title>Code editor with title</CE.Title>
114+
<CE.Description>This is a code editor with a description</CE.Description>
115+
<CE.Generic class="my-code-editor-custom-content">
116+
<HdsButton @text="Custom action" @size="small" />
117+
<HdsButton
118+
@text="Search"
119+
@icon="search"
120+
@isIconOnly={{true}}
121+
@size="small"
122+
/>
123+
</CE.Generic>
124+
</HdsCodeEditor>
125+
</SF.Item>
126+
</ShwFlex>
127+
</template>;
128+
129+
export default SubSectionHeader;

‎showcase/app/components/page-components/code-editor/sub-sections/linting.gts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import type { Diagnostic as DiagnosticType } from '@codemirror/lint';
7+
8+
import ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
11+
import { HdsCodeEditor } from '@hashicorp/design-system-components/components';
12+
13+
const BAD_JSON_CODE = `{
14+
message: "Hello, world!",
15+
: "success"
16+
"data": null,
17+
}`;
18+
19+
export default class SubSectionLinting extends Component {
20+
handleLint = (diagnostics: DiagnosticType[], value: string) => {
21+
console.group('Linting Results');
22+
console.log('Diagnostics:', diagnostics);
23+
console.log('Value:', value);
24+
console.groupEnd();
25+
};
26+
27+
<template>
28+
<ShwTextH2>Linting</ShwTextH2>
29+
<ShwFlex @direction="column" as |SF|>
30+
<SF.Item @label="JSON with linting">
31+
<HdsCodeEditor
32+
@language="json"
33+
@value={{BAD_JSON_CODE}}
34+
@isLintingEnabled={{true}}
35+
@hasFullScreenButton={{true}}
36+
@onLint={{this.handleLint}}
37+
as |CE|
38+
>
39+
<CE.Title>JSON with linting</CE.Title>
40+
</HdsCodeEditor>
41+
</SF.Item>
42+
</ShwFlex>
43+
</template>
44+
}

‎showcase/app/components/page-components/code-editor/sub-sections/standalone-modifier.gts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { on } from '@ember/modifier';
7+
import { tracked } from '@glimmer/tracking';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
12+
import { HdsFormCheckboxField } from '@hashicorp/design-system-components/components';
13+
14+
import hdsCodeEditor from '@hashicorp/design-system-components/modifiers/hds-code-editor';
15+
16+
const DEMO_CODE =
17+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
18+
19+
export default class SubSectionStandaloneModifier extends Component {
20+
@tracked hasLineWrapping = true;
21+
@tracked lineWrappingDemoValue = DEMO_CODE;
22+
23+
toggleLineWrapping = (event: Event) => {
24+
this.hasLineWrapping = (event.target as HTMLInputElement).checked;
25+
};
26+
27+
setLineWrappingDemoValue = (value: string) => {
28+
this.lineWrappingDemoValue = value;
29+
};
30+
31+
<template>
32+
<ShwTextH2>Standalone modifier usage</ShwTextH2>
33+
<ShwFlex @direction="column" as |SF|>
34+
<SF.Item @label="div element with hds-code-editor modifier">
35+
<div
36+
{{hdsCodeEditor
37+
ariaLabel="Standalone modifier usage"
38+
value=DEMO_CODE
39+
}}
40+
/>
41+
</SF.Item>
42+
</ShwFlex>
43+
44+
<ShwFlex @direction="column" as |SF|>
45+
<SF.Item @label="toggle line wrapping">
46+
<HdsFormCheckboxField
47+
name="enable-line-wrapping"
48+
checked={{this.hasLineWrapping}}
49+
class="hds-code-editor-line-wrapper-controls"
50+
{{on "change" this.toggleLineWrapping}}
51+
as |F|
52+
>
53+
<F.Label>Line wrapping:
54+
{{if this.hasLineWrapping "Enabled" "Disabled"}}</F.Label>
55+
</HdsFormCheckboxField>
56+
<div
57+
{{hdsCodeEditor
58+
ariaLabel="Standalone modifier usage"
59+
value=this.lineWrappingDemoValue
60+
hasLineWrapping=this.hasLineWrapping
61+
onInput=this.setLineWrappingDemoValue
62+
}}
63+
/>
64+
</SF.Item>
65+
</ShwFlex>
66+
</template>
67+
}

‎showcase/app/components/page-components/code-editor/sub-sections/standalone.gts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
7+
import ShwTextH2 from 'showcase/components/shw/text/h2';
8+
import ShwFlex from 'showcase/components/shw/flex';
9+
10+
import { HdsCodeEditor } from '@hashicorp/design-system-components/components';
11+
12+
const SubSectionStandalone: TemplateOnlyComponent = <template>
13+
<ShwTextH2>Standalone</ShwTextH2>
14+
<ShwFlex @direction="column" as |SF|>
15+
<SF.Item @label="Standalone editor (default)">
16+
<HdsCodeEditor @ariaLabel="Standalone editor (default)" />
17+
</SF.Item>
18+
<SF.Item @label="Not standalone editor">
19+
<HdsCodeEditor
20+
@ariaLabel="Not standalone editor"
21+
@isStandalone={{false}}
22+
/>
23+
</SF.Item>
24+
</ShwFlex>
25+
</template>;
26+
27+
export default SubSectionStandalone;

0 commit comments

Comments
 (0)