Skip to content

Commit 40f603c

Browse files
author
shleewhite
committed
finish accordion conversion
1 parent 82248a7 commit 40f603c

16 files changed

+392
-166
lines changed

‎website/app/components/doc/code-group/index.gts‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { tracked } from '@glimmer/tracking';
88
import { on } from '@ember/modifier';
99
import { notEq, eq } from 'ember-truth-helpers';
1010
import { guidFor } from '@ember/object/internals';
11+
import type Owner from '@ember/owner';
1112

1213
import { HdsIcon } from '@hashicorp/design-system-components/components';
1314
import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
@@ -18,8 +19,9 @@ import docClipboard from 'website/modifiers/doc-clipboard';
1819
interface DocCodeGroupSignature {
1920
Args: {
2021
filename?: string;
21-
hbsSnippet: string;
22-
gtsSnippet: string;
22+
hbsSnippet?: string;
23+
gtsSnippet?: string;
24+
jsSnippet?: string;
2325
hidePreview?: boolean;
2426
};
2527
Blocks: {
@@ -43,12 +45,38 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
4345

4446
componentId = guidFor(this);
4547

48+
constructor(owner: Owner, args: DocCodeGroupSignature['Args']) {
49+
super(owner, args);
50+
if (this.args.gtsSnippet === '' && this.args.hbsSnippet == '') {
51+
this.currentView = 'js';
52+
}
53+
}
54+
4655
get unescapedHbsSnippet() {
47-
return unescapeCode(this.args.hbsSnippet);
56+
return unescapeCode(this.args.hbsSnippet ?? '');
4857
}
4958

5059
get unescapedGtsSnippet() {
51-
return unescapeCode(this.args.gtsSnippet);
60+
return unescapeCode(this.args.gtsSnippet ?? '');
61+
}
62+
63+
get unescapedJsSnippet() {
64+
return unescapeCode(this.args.jsSnippet ?? '');
65+
}
66+
67+
get languageOptions() {
68+
const options = [];
69+
70+
if (this.args.hbsSnippet != '') {
71+
options.push({ label: '.hbs', value: 'hbs' });
72+
}
73+
if (this.args.jsSnippet != '') {
74+
options.push({ label: '.js', value: 'js' });
75+
}
76+
if (this.args.gtsSnippet != '') {
77+
options.push({ label: '.gts', value: 'gts' });
78+
}
79+
return options;
5280
}
5381

5482
get gtsSnippet() {
@@ -69,10 +97,17 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
6997
return 'gts';
7098
}
7199

100+
if (this.currentView === 'js') {
101+
return 'js';
102+
}
103+
72104
return 'hbs';
73105
}
74106

75107
get currentViewSnippet() {
108+
if (this.currentView === 'js') {
109+
return this.unescapedJsSnippet;
110+
}
76111
return this.currentView === 'hbs'
77112
? this.unescapedHbsSnippet
78113
: this.gtsSnippet;
@@ -144,28 +179,19 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
144179
class="doc-code-group__language-picker"
145180
aria-label="Code language"
146181
>
147-
<label class="doc-code-group__language-picker-option">
148-
<span>.hbs</span>
149-
<input
150-
type="radio"
151-
class="sr-only"
152-
name="language-picker-{{this.componentId}}"
153-
value="hbs"
154-
checked={{eq this.currentView "hbs"}}
155-
{{on "change" this.handleLanguageChange}}
156-
/>
157-
</label>
158-
<label class="doc-code-group__language-picker-option">
159-
<span>.gts</span>
160-
<input
161-
type="radio"
162-
class="sr-only"
163-
name="language-picker-{{this.componentId}}"
164-
value="gts"
165-
checked={{eq this.currentView "gts"}}
166-
{{on "change" this.handleLanguageChange}}
167-
/>
168-
</label>
182+
{{#each this.languageOptions as |option|}}
183+
<label class="doc-code-group__language-picker-option">
184+
<span>{{option.label}}</span>
185+
<input
186+
type="radio"
187+
class="sr-only"
188+
name="language-picker-{{this.componentId}}"
189+
value="{{option.value}}"
190+
checked={{eq this.currentView option.value}}
191+
{{on "change" this.handleLanguageChange}}
192+
/>
193+
</label>
194+
{{/each}}
169195
</fieldset>
170196
<div class="doc-code-group__secondary-actions">
171197
<div class="doc-code-group__copy-button-container">

‎website/app/shared/showdown-extensions/content-blocks.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@ export const contentBlocks = function () {
5252
);
5353

5454
const demoRegex = new RegExp(
55-
/<\?php start="demo-block" filename="(.*?)" hbs="(.*?)" gts="(.*?)" hidePreview="(.*?)" \?>\n?/,
55+
/<\?php start="demo-block" filename="(.*?)" hbs="(.*?)" gts="(.*?)" hidePreview="(.*?)" js="(.*?)" \?>\n?/,
5656
'g',
5757
);
5858

5959
text = text.replace(
6060
demoRegex,
61-
function (_match, filename, hbs, gts, hidePreview) {
62-
return `<Doc::CodeGroup @filename="${filename}" @hbsSnippet="${hbs}" @gtsSnippet="${gts}" @hidePreview="${hidePreview}">\n`;
61+
function (_match, filename, hbs, gts, hidePreview, js) {
62+
return `<Doc::CodeGroup @filename="${filename}" @hbsSnippet="${hbs}" @gtsSnippet="${gts}" @hidePreview="${hidePreview}" @jsSnippet="${js}">\n`;
6363
},
6464
);
6565

‎website/app/styles/doc-components/code-group.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,13 @@
5656
}
5757
}
5858

59+
.doc-code-group__secondary-actions {
60+
display: flex;
61+
flex-direction: row;
62+
flex-grow: 1;;
63+
justify-content: flex-end;
64+
}
65+
5966
.doc-code-group__copy-button-container {
6067
padding: 6px;
6168
border-left: 1px solid var(--doc-color-gray-400);

‎website/docs/components/accordion/partials/code/code-snippets/accordion-a11y-name-component.gts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import { HdsAccordion } from '@hashicorp/design-system-components/components';
4+
import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
5+
6+
interface AccordionA11yNameSignature {
7+
Element: HdsAccordionSignature['Element'];
8+
}
9+
10+
const AccordionA11yName: TemplateOnlyComponent<AccordionA11yNameSignature> =
11+
<template>
12+
<HdsAccordion ...attributes as |A|>
13+
<A.Item @ariaLabel="Mostrar u ocultar">
14+
<:toggle>Elemento uno</:toggle>
15+
<:content>
16+
Contenido adicional para el elemento uno
17+
</:content>
18+
</A.Item>
19+
</HdsAccordion>
20+
</template>;
21+
22+
export default AccordionA11yName;

‎website/docs/components/accordion/partials/code/code-snippets/accordion-a11y-name.hbs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Hds::Accordion as |A|>
2+
<A.Item @ariaLabel="Mostrar u ocultar">
3+
<:toggle>Elemento uno</:toggle>
4+
<:content>
5+
Contenido adicional para el elemento uno
6+
</:content>
7+
</A.Item>
8+
</Hds::Accordion>

‎website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive-2-component.gts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import {
4+
HdsAccordion,
5+
HdsAlert,
6+
HdsButton,
7+
HdsLinkStandalone,
8+
} from '@hashicorp/design-system-components/components';
9+
import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
10+
11+
interface AccordionContainsInteractive2Signature {
12+
Element: HdsAccordionSignature['Element'];
13+
}
14+
15+
const AccordionContainsInteractive2: TemplateOnlyComponent<AccordionContainsInteractive2Signature> =
16+
<template>
17+
<HdsAccordion ...attributes as |A|>
18+
<A.Item @containsInteractive={{true}}>
19+
<:toggle>
20+
<div class="doc-accordion-item-toggle-content-flex-layout">
21+
<HdsAlert @type="compact" @color="success" as |A|>
22+
<A.Title>Title</A.Title>
23+
<A.Description>Plan finished
24+
<small>22 days ago</small></A.Description>
25+
</HdsAlert>
26+
<HdsButton @text="Details" @color="secondary" @size="small" />
27+
</div>
28+
</:toggle>
29+
<:content>
30+
Additional content for item one
31+
</:content>
32+
</A.Item>
33+
<A.Item @containsInteractive={{true}}>
34+
<:toggle>
35+
<div class="doc-accordion-item-toggle-content-flex-layout">
36+
<span>Peering connection log results</span>
37+
<HdsLinkStandalone
38+
@icon="external-link"
39+
@iconPosition="trailing"
40+
@text="Details"
41+
@href="https://www.hashicorp.com/"
42+
/>
43+
</div>
44+
</:toggle>
45+
<:content>
46+
Additional content for item two
47+
</:content>
48+
</A.Item>
49+
</HdsAccordion>
50+
</template>;
51+
52+
export default AccordionContainsInteractive2;

‎website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive-2.hbs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<Hds::Accordion as |A|>
2+
<A.Item @containsInteractive={{true}}>
3+
<:toggle>
4+
<div class="doc-accordion-item-toggle-content-flex-layout">
5+
<Hds::Alert @type="compact" @color="success" as |A|>
6+
<A.Title>Title</A.Title>
7+
<A.Description>Plan finished <small>22 days ago</small></A.Description>
8+
</Hds::Alert>
9+
<Hds::Button @text="Details" @color="secondary" @size="small" />
10+
</div>
11+
</:toggle>
12+
<:content>
13+
Additional content for item one
14+
</:content>
15+
</A.Item>
16+
<A.Item @containsInteractive={{true}}>
17+
<:toggle>
18+
<div class="doc-accordion-item-toggle-content-flex-layout">
19+
<span>Peering connection log results</span>
20+
<Hds::Link::Standalone
21+
@icon="external-link"
22+
@iconPosition="trailing"
23+
@text="Details"
24+
@href="https://www.hashicorp.com/"
25+
/>
26+
</div>
27+
</:toggle>
28+
<:content>
29+
Additional content for item two
30+
</:content>
31+
</A.Item>
32+
</Hds::Accordion>

‎website/docs/components/accordion/partials/code/code-snippets/accordion-open-component.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 { HdsAccordion } from '@hashicorp/design-system-components/components';
4+
import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
5+
6+
interface AccordionOpenSignature {
7+
Element: HdsAccordionSignature['Element'];
8+
}
9+
10+
const AccordionOpen: TemplateOnlyComponent<AccordionOpenSignature> = <template>
11+
<HdsAccordion ...attributes as |A|>
12+
<A.Item @isOpen={{true}}>
13+
<:toggle>Item one</:toggle>
14+
<:content>
15+
Additional content for item one which is displayed on page load
16+
</:content>
17+
</A.Item>
18+
<A.Item>
19+
<:toggle>Item two</:toggle>
20+
<:content>
21+
Additional content for item two which is hidden on page load
22+
</:content>
23+
</A.Item>
24+
</HdsAccordion>
25+
</template>;
26+
27+
export default AccordionOpen;

‎website/docs/components/accordion/partials/code/code-snippets/accordion-open.hbs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Hds::Accordion as |A|>
2+
<A.Item @isOpen={{true}}>
3+
<:toggle>Item one</:toggle>
4+
<:content>
5+
Additional content for item one which is displayed on page load
6+
</:content>
7+
</A.Item>
8+
<A.Item>
9+
<:toggle>Item two</:toggle>
10+
<:content>
11+
Additional content for item two which is hidden on page load
12+
</:content>
13+
</A.Item>
14+
</Hds::Accordion>

‎website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/**
2-
* Copyright (c) HashiCorp, Inc.
3-
* SPDX-License-Identifier: MPL-2.0
4-
*/
5-
61
import Component from '@glimmer/component';
72
import { action } from '@ember/object';
83
import { tracked } from '@glimmer/tracking';

0 commit comments

Comments
 (0)