Skip to content

Commit a2edc9b

Browse files
zamoorezamoore
authored
CodeBlock gts conversion (#3293)
1 parent 87399cf commit a2edc9b

File tree

8 files changed

+642
-503
lines changed

8 files changed

+642
-503
lines changed

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

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+
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 SubSectionContent from 'showcase/components/page-components/code-block/sub-sections/content';
14+
import SubSectionOptions from 'showcase/components/page-components/code-block/sub-sections/options';
15+
import SubSectionBaseElements from 'showcase/components/page-components/code-block/sub-sections/base-elements';
16+
import SubSectionDemo from 'showcase/components/page-components/code-block/sub-sections/demo';
17+
18+
const CodeBlockIndex: TemplateOnlyComponent = <template>
19+
{{pageTitle "CodeBlock Component"}}
20+
21+
<ShwTextH1>CodeBlock</ShwTextH1>
22+
23+
<section data-test-percy>
24+
<SubSectionContent />
25+
<ShwDivider />
26+
<SubSectionOptions />
27+
<ShwDivider />
28+
<SubSectionBaseElements />
29+
<ShwDivider />
30+
<SubSectionDemo />
31+
</section>
32+
</template>;
33+
34+
export default CodeBlockIndex;

‎showcase/app/components/page-components/code-block/sub-sections/base-elements.gts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { capitalize } from '@ember/string';
7+
import { array } from '@ember/helper';
8+
import { modifier } from 'ember-modifier';
9+
10+
import ShwGrid from 'showcase/components/shw/grid';
11+
import ShwTextH2 from 'showcase/components/shw/text/h2';
12+
import ShwTextH3 from 'showcase/components/shw/text/h3';
13+
14+
import { HdsCodeBlockCopyButton } from '@hashicorp/design-system-components/components';
15+
import {
16+
SUCCESS_ICON,
17+
ERROR_ICON,
18+
} from '@hashicorp/design-system-components/components/hds/copy/button/index';
19+
20+
const STATES = ['default', 'hover', 'active', 'focus'];
21+
22+
export default class SubSectionBaseElements extends Component {
23+
replaceCopyStatus = modifier((container: HTMLDivElement) => {
24+
container.querySelectorAll('[mock-copy-status]').forEach((element) => {
25+
const status = element.getAttribute('mock-copy-status');
26+
element.classList.remove('hds-copy-button--status-idle');
27+
element.classList.add(`hds-copy-button--status-${status}`);
28+
29+
const icon = element.querySelector('svg use');
30+
31+
if (icon) {
32+
if (status === 'success') {
33+
// eg. href="#flight-clipboard-checked-16"
34+
icon.setAttribute('href', `#flight-${SUCCESS_ICON}-16`);
35+
} else if (status === 'error') {
36+
icon.setAttribute('href', `#flight-${ERROR_ICON}-16`);
37+
}
38+
}
39+
});
40+
});
41+
42+
<template>
43+
<ShwTextH2>CodeBlockCopyButton</ShwTextH2>
44+
45+
<ShwTextH3>States</ShwTextH3>
46+
47+
<span class="shw-component-code-block-display-none" id="test-target">Copy me</span>
48+
49+
<ShwGrid @columns={{6}} {{this.replaceCopyStatus}} as |SG|>
50+
{{#each STATES as |state|}}
51+
<SG.Item
52+
@label={{capitalize state}}
53+
class="shw-component-code-block-copy-button"
54+
>
55+
<HdsCodeBlockCopyButton
56+
mock-state-value={{state}}
57+
@targetToCopy="#test-target"
58+
class="hds-code-block--theme-dark"
59+
/>
60+
</SG.Item>
61+
{{/each}}
62+
{{#let (array "success" "error") as |statuses|}}
63+
{{#each statuses as |status|}}
64+
<SG.Item
65+
@label={{capitalize status}}
66+
class="shw-component-code-block-copy-button"
67+
>
68+
<HdsCodeBlockCopyButton
69+
mock-copy-status={{status}}
70+
@targetToCopy="#test-target"
71+
class="hds-code-block--theme-dark"
72+
/>
73+
</SG.Item>
74+
{{/each}}
75+
{{/let}}
76+
</ShwGrid>
77+
</template>
78+
}

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

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { tracked } from '@glimmer/tracking';
8+
import { on } from '@ember/modifier';
9+
10+
import ShwDivider from 'showcase/components/shw/divider';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
import ShwTextBody from 'showcase/components/shw/text/body';
13+
import ShwTextH2 from 'showcase/components/shw/text/h2';
14+
import ShwTextH3 from 'showcase/components/shw/text/h3';
15+
16+
import { HdsCodeBlock } from '@hashicorp/design-system-components/components';
17+
18+
export default class SubSectionContent extends Component {
19+
@tracked input: string | undefined = '';
20+
21+
textWithNewLine = `Vagrant.configure("2") do |config|\nconfig.vm.box "ubuntu/noble64"\nend`;
22+
23+
get codeValue() {
24+
let value = `codeLang = 'ruby';`;
25+
26+
if (this.input !== '') {
27+
value += `\n\n${this.input} = "the input is: ${this.input}"`;
28+
}
29+
30+
return value;
31+
}
32+
33+
updateCodeValue = () => {
34+
this.input = ['rand1', 'rand2', 'rand3', ''][Math.floor(Math.random() * 4)];
35+
};
36+
37+
updateInput = (event: Event) => {
38+
this.input = (event.target as HTMLInputElement).value;
39+
};
40+
41+
<template>
42+
<ShwTextH2>Content</ShwTextH2>
43+
44+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
45+
<SG.Item @label="one line">
46+
<HdsCodeBlock
47+
@language="bash"
48+
@ariaLabel="one line"
49+
@value="aws ec2 --region us-west-1 accept-vpc-peering-connection"
50+
/>
51+
</SG.Item>
52+
<SG.Item @label="multi-line">
53+
<HdsCodeBlock
54+
@language="go"
55+
@ariaLabel="multi-line"
56+
@value="package main
57+
import 'fmt'
58+
func main() {
59+
res = 'Lorem ipsum dolor sit amet'
60+
fmt.Println(res)
61+
}"
62+
/>
63+
</SG.Item>
64+
</ShwGrid>
65+
66+
<ShwTextBody>New lines handling</ShwTextBody>
67+
68+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
69+
<SG.Item @label="new lines in Handlebars" @forceMinWidth={{true}}>
70+
<HdsCodeBlock
71+
@language="go"
72+
@ariaLabel="new lines in Handlebars"
73+
@value="package main
74+
import 'fmt'
75+
func main() {
76+
res = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
77+
fmt.Println(res)
78+
}"
79+
/>
80+
</SG.Item>
81+
<SG.Item @forceMinWidth={{true}} as |SGI|>
82+
<SGI.Label>new lines with
83+
<code>\n</code>
84+
escape sequence in Ruby
85+
</SGI.Label>
86+
<HdsCodeBlock
87+
@language="ruby"
88+
@ariaLabel="new lines with escape sequence in Ruby"
89+
@value={{this.textWithNewLine}}
90+
/>
91+
</SG.Item>
92+
<SG.Item @forceMinWidth={{true}} as |SGI|>
93+
<SGI.Label><code>\n</code>
94+
in Handlebars (not interpreted as newline)
95+
</SGI.Label>
96+
<HdsCodeBlock
97+
@language="ruby"
98+
@ariaLabel="\n in Handlebars (not interpreted as newline)"
99+
@value='Vagrant.configure("2") do |config|\nconfig.vm.box "ubuntu/noble64"\nend'
100+
/>
101+
</SG.Item>
102+
<SG.Item @forceMinWidth={{true}} as |SGI|>
103+
<SGI.Label>Line numbering start changed to "5"
104+
</SGI.Label>
105+
{{! template-lint-disable no-whitespace-for-layout }}
106+
<HdsCodeBlock
107+
@language="go"
108+
@maxHeight="105px"
109+
@lineNumberStart={{5}}
110+
@ariaLabel="Line numbering start changed to 5"
111+
@value="package main
112+
import 'fmt'
113+
func main() {
114+
res = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
115+
fmt.Println(res)
116+
}"
117+
/>
118+
{{! template-lint-enable no-whitespace-for-layout }}
119+
</SG.Item>
120+
</ShwGrid>
121+
122+
<ShwDivider @level={{2}} />
123+
124+
<ShwTextH3>Title and description</ShwTextH3>
125+
126+
<ShwGrid @columns={{2}} @gap="2rem" as |SG|>
127+
<SG.Item @label="title">
128+
<HdsCodeBlock
129+
@value='Vagrant.configure("2") do |config|
130+
config.vm.box = "ubuntu/noble64"
131+
end'
132+
@language="ruby"
133+
as |CB|
134+
>
135+
<CB.Title>Title</CB.Title>
136+
</HdsCodeBlock>
137+
</SG.Item>
138+
<SG.Item @label="description">
139+
<HdsCodeBlock
140+
@value='Vagrant.configure("2") do |config|
141+
config.vm.box = "ubuntu/noble64"
142+
end'
143+
@language="ruby"
144+
@ariaLabel="description"
145+
as |CB|
146+
>
147+
<CB.Description>Description</CB.Description>
148+
</HdsCodeBlock>
149+
</SG.Item>
150+
<SG.Item @label="title and description">
151+
<HdsCodeBlock
152+
@value='Vagrant.configure("2") do |config|
153+
config.vm.box = "ubuntu/noble64"
154+
end'
155+
@language="ruby"
156+
as |CB|
157+
>
158+
<CB.Title>Title that may wrap on multiple lines if the parent
159+
container is limiting its width</CB.Title>
160+
<CB.Description>
161+
Description that could contain
162+
<a href="#">a link</a>
163+
or other basic styling such as
164+
<b>bold</b>,
165+
<i>italic</i>
166+
or even
167+
<code>code</code>.
168+
</CB.Description>
169+
</HdsCodeBlock>
170+
</SG.Item>
171+
<SG.Item @label="custom title tag">
172+
<HdsCodeBlock
173+
@value='Vagrant.configure("2") do |config|
174+
config.vm.box = "ubuntu/noble64"
175+
end'
176+
@language="ruby"
177+
as |CB|
178+
>
179+
<CB.Title @tag="h2">Title</CB.Title>
180+
</HdsCodeBlock>
181+
</SG.Item>
182+
</ShwGrid>
183+
184+
<ShwDivider @level={{2}} />
185+
186+
<ShwTextH3>Dynamic content</ShwTextH3>
187+
188+
<ShwTextBody>
189+
<button type="button" {{on "click" this.updateCodeValue}}>
190+
Update value
191+
</button>
192+
</ShwTextBody>
193+
194+
<ShwTextBody>
195+
<label for="input">Change input value:</label>
196+
<input
197+
id="input"
198+
type="text"
199+
value={{this.input}}
200+
{{on "input" this.updateInput}}
201+
/>
202+
</ShwTextBody>
203+
204+
<HdsCodeBlock
205+
@value={{this.codeValue}}
206+
@language="ruby"
207+
@hasCopyButton={{true}}
208+
@hasLineNumbers={{false}}
209+
id="code-block-with-dynamic-content"
210+
as |CB|
211+
>
212+
<CB.Title>
213+
Dynamic content
214+
</CB.Title>
215+
</HdsCodeBlock>
216+
</template>
217+
}

0 commit comments

Comments
 (0)