Skip to content

Commit ee98ae4

Browse files
author
shleewhite
committed
feat: convert dialog primitive demos
1 parent baea215 commit ee98ae4

File tree

5 files changed

+161
-60
lines changed

5 files changed

+161
-60
lines changed

‎website/docs/utilities/dialog-primitive/partials/code/code-snippets/dialog-primitive-basic.classic.hbs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<Hds::DialogPrimitive::Wrapper>
2+
<:header>
3+
<Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline">
4+
Title
5+
</Hds::DialogPrimitive::Header>
6+
<Hds::DialogPrimitive::Description>
7+
Description
8+
</Hds::DialogPrimitive::Description>
9+
</:header>
10+
<:body>
11+
<Hds::DialogPrimitive::Body>
12+
<p class="hds-typography-body-300 hds-foreground-primary">
13+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero culpa expedita assumenda at nisi minus unde fuga
14+
iure suscipit aut qui, odit natus eum voluptates ut molestiae! Perferendis, impedit qui? Lorem ipsum dolor sit
15+
amet?
16+
</p>
17+
</Hds::DialogPrimitive::Body>
18+
</:body>
19+
<:footer>
20+
<Hds::DialogPrimitive::Footer>
21+
<Hds::ButtonSet>
22+
<Hds::Button type="submit" @text="Primary" />
23+
<Hds::Button type="button" @text="Secondary" @color="secondary" />
24+
</Hds::ButtonSet>
25+
</Hds::DialogPrimitive::Footer>
26+
</:footer>
27+
</Hds::DialogPrimitive::Wrapper>

‎website/docs/utilities/dialog-primitive/partials/code/code-snippets/dialog-primitive-basic.gts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import {
4+
HdsDialogPrimitiveWrapper,
5+
HdsDialogPrimitiveHeader,
6+
HdsDialogPrimitiveDescription,
7+
HdsDialogPrimitiveBody,
8+
HdsDialogPrimitiveFooter,
9+
HdsButtonSet,
10+
HdsButton,
11+
} from '@hashicorp/design-system-components/components';
12+
13+
const LocalComponent: TemplateOnlyComponent = <template>
14+
<HdsDialogPrimitiveWrapper>
15+
<:header>
16+
<HdsDialogPrimitiveHeader @icon="info" @tagline="Tagline">
17+
Title
18+
</HdsDialogPrimitiveHeader>
19+
<HdsDialogPrimitiveDescription>
20+
Description
21+
</HdsDialogPrimitiveDescription>
22+
</:header>
23+
<:body>
24+
<HdsDialogPrimitiveBody>
25+
<p class="hds-typography-body-300 hds-foreground-primary">
26+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero culpa
27+
expedita assumenda at nisi minus unde fuga iure suscipit aut qui, odit
28+
natus eum voluptates ut molestiae! Perferendis, impedit qui? Lorem
29+
ipsum dolor sit amet?
30+
</p>
31+
</HdsDialogPrimitiveBody>
32+
</:body>
33+
<:footer>
34+
<HdsDialogPrimitiveFooter>
35+
<HdsButtonSet>
36+
<HdsButton type="submit" @text="Primary" />
37+
<HdsButton type="button" @text="Secondary" @color="secondary" />
38+
</HdsButtonSet>
39+
</HdsDialogPrimitiveFooter>
40+
</:footer>
41+
</HdsDialogPrimitiveWrapper>
42+
</template>;
43+
44+
export default LocalComponent;

‎website/docs/utilities/dialog-primitive/partials/code/code-snippets/dialog-primitive-title-tag.classic.hbs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="doc-dialog-primitive-grid-layout">
2+
<div class="doc-dialog-primitive-flex-layout">
3+
<Hds::Text::Display @tag="h1" @size="500">
4+
Page title
5+
</Hds::Text::Display>
6+
<Doc::Placeholder @text="Main content" @height="100%" @width="100%" @background="#eee" />
7+
</div>
8+
<Hds::DialogPrimitive::Wrapper class="doc-dialog-primitive-with-border">
9+
<:header>
10+
<Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline" @titleTag="h2">
11+
Split Window
12+
</Hds::DialogPrimitive::Header>
13+
</:header>
14+
<:body>
15+
<Hds::DialogPrimitive::Body>
16+
<Doc::Placeholder @text="Split Window content" @height="10rem" @width="100%" @background="#eee" />
17+
</Hds::DialogPrimitive::Body>
18+
</:body>
19+
<:footer>
20+
<Hds::DialogPrimitive::Footer>
21+
<Hds::ButtonSet>
22+
<Hds::Button type="submit" @text="Primary" />
23+
<Hds::Button type="button" @text="Secondary" @color="secondary" />
24+
</Hds::ButtonSet>
25+
</Hds::DialogPrimitive::Footer>
26+
</:footer>
27+
</Hds::DialogPrimitive::Wrapper>
28+
</div>

‎website/docs/utilities/dialog-primitive/partials/code/code-snippets/dialog-primitive-title-tag.gts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import {
4+
HdsDialogPrimitiveWrapper,
5+
HdsDialogPrimitiveHeader,
6+
HdsDialogPrimitiveBody,
7+
HdsDialogPrimitiveFooter,
8+
HdsButtonSet,
9+
HdsButton,
10+
HdsTextDisplay,
11+
} from '@hashicorp/design-system-components/components';
12+
13+
import DocPlaceholder from 'website/components/doc/placeholder/index.gts';
14+
15+
const LocalComponent: TemplateOnlyComponent = <template>
16+
<div class="doc-dialog-primitive-grid-layout">
17+
<div class="doc-dialog-primitive-flex-layout">
18+
<HdsTextDisplay @tag="h1" @size="500">
19+
Page title
20+
</HdsTextDisplay>
21+
<DocPlaceholder
22+
@text="Main content"
23+
@height="100%"
24+
@width="100%"
25+
@background="#eee"
26+
/>
27+
</div>
28+
<HdsDialogPrimitiveWrapper class="doc-dialog-primitive-with-border">
29+
<:header>
30+
<HdsDialogPrimitiveHeader
31+
@icon="info"
32+
@tagline="Tagline"
33+
@titleTag="h2"
34+
>
35+
Split Window
36+
</HdsDialogPrimitiveHeader>
37+
</:header>
38+
<:body>
39+
<HdsDialogPrimitiveBody>
40+
<DocPlaceholder
41+
@text="Split Window content"
42+
@height="10rem"
43+
@width="100%"
44+
@background="#eee"
45+
/>
46+
</HdsDialogPrimitiveBody>
47+
</:body>
48+
<:footer>
49+
<HdsDialogPrimitiveFooter>
50+
<HdsButtonSet>
51+
<HdsButton type="submit" @text="Primary" />
52+
<HdsButton type="button" @text="Secondary" @color="secondary" />
53+
</HdsButtonSet>
54+
</HdsDialogPrimitiveFooter>
55+
</:footer>
56+
</HdsDialogPrimitiveWrapper>
57+
</div>
58+
</template>;
59+
60+
export default LocalComponent;

‎website/docs/utilities/dialog-primitive/partials/code/how-to-use.md‎

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,7 @@ The `DialogPrimitive` serves as the foundation for dialog derived components lik
1414

1515
### Basic dialog using DialogPrimitive components
1616

17-
```handlebars
18-
<Hds::DialogPrimitive::Wrapper>
19-
<:header>
20-
<Hds::DialogPrimitive::Header
21-
@icon="info"
22-
@tagline="Tagline"
23-
>
24-
Title
25-
</Hds::DialogPrimitive::Header>
26-
<Hds::DialogPrimitive::Description>Description</Hds::DialogPrimitive::Description>
27-
</:header>
28-
<:body>
29-
<Hds::DialogPrimitive::Body>
30-
<p class="hds-typography-body-300 hds-foreground-primary">Lorem ipsum dolor sit amet consectetur
31-
adipisicing elit. Libero culpa expedita assumenda at nisi minus unde fuga iure suscipit aut qui, odit
32-
natus eum voluptates ut molestiae! Perferendis, impedit qui? Lorem ipsum dolor sit amet?</p>
33-
</Hds::DialogPrimitive::Body>
34-
</:body>
35-
<:footer>
36-
<Hds::DialogPrimitive::Footer>
37-
<Hds::ButtonSet>
38-
<Hds::Button type="submit" @text="Primary" />
39-
<Hds::Button type="button" @text="Secondary" @color="secondary" />
40-
</Hds::ButtonSet>
41-
</Hds::DialogPrimitive::Footer>
42-
</:footer>
43-
</Hds::DialogPrimitive::Wrapper>
44-
```
17+
[[code-snippets/dialog-primitive-basic]]
4518

4619
### Header title tag
4720

@@ -54,35 +27,4 @@ The `@titleTag` argument changes the HTML element that wraps the `DialogPrimitiv
5427
The default `@titleTag` value is `"div"` as the correct heading level (`h1–`h6) is dependent on the context in which it is used within a page. We strongly encourage consumers to set the appropriate `@titleTag` value to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology.
5528
!!!
5629

57-
```handlebars
58-
<div class="doc-dialog-primitive-grid-layout">
59-
<div class="doc-dialog-primitive-flex-layout">
60-
<Hds::Text::Display @tag="h1" @size="500">Page title</Hds::Text::Display>
61-
<Doc::Placeholder @text="Main content" @height="100%" @width="100%" @background="#eee" />
62-
</div>
63-
<Hds::DialogPrimitive::Wrapper class="doc-dialog-primitive-with-border">
64-
<:header>
65-
<Hds::DialogPrimitive::Header
66-
@icon="info"
67-
@tagline="Tagline"
68-
@titleTag="h2"
69-
>
70-
Split Window
71-
</Hds::DialogPrimitive::Header>
72-
</:header>
73-
<:body>
74-
<Hds::DialogPrimitive::Body>
75-
<Doc::Placeholder @text="Split Window content" @height="10rem" @width="100%" @background="#eee" />
76-
</Hds::DialogPrimitive::Body>
77-
</:body>
78-
<:footer>
79-
<Hds::DialogPrimitive::Footer>
80-
<Hds::ButtonSet>
81-
<Hds::Button type="submit" @text="Primary" />
82-
<Hds::Button type="button" @text="Secondary" @color="secondary" />
83-
</Hds::ButtonSet>
84-
</Hds::DialogPrimitive::Footer>
85-
</:footer>
86-
</Hds::DialogPrimitive::Wrapper>
87-
</div>
88-
```
30+
[[code-snippets/dialog-primitive-title-tag]]

0 commit comments

Comments
 (0)