Skip to content

Commit 2df7cb6

Browse files
author
shleewhite
committed
rebase
1 parent 624507d commit 2df7cb6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1632
-1082
lines changed

website/app/components/doc/badge/index.js renamed to website/app/components/doc/badge/index.gts

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,31 @@ export const TYPES = [
2121
'outlined-inverted',
2222
];
2323

24-
export default class DocBadgeComponent extends Component {
25-
constructor() {
26-
super(...arguments);
24+
type BadgeType = (typeof TYPES)[number];
25+
26+
interface DocBadgeSignature {
27+
Args: {
28+
type?: BadgeType;
29+
size?: 'large' | 'medium';
30+
};
31+
Blocks: {
32+
default: [];
33+
};
34+
Element: HTMLDivElement;
35+
}
36+
37+
export default class DocBadge extends Component<DocBadgeSignature> {
38+
get type() {
39+
const type = this.args.type ?? 'neutral';
40+
2741
assert(
2842
`@type for "Doc::Badge" must be one of the following: ${TYPES.join(
2943
', ',
3044
)}; received: ${this.args.type}`,
31-
TYPES.includes(this.args.type),
45+
TYPES.includes(type),
3246
);
33-
}
3447

35-
get type() {
36-
return this.args.type ?? 'neutral';
48+
return type;
3749
}
3850

3951
get size() {
@@ -43,12 +55,15 @@ export default class DocBadgeComponent extends Component {
4355
get classNames() {
4456
let classes = ['doc-badge'];
4557

46-
// add a class based on the @type argument
4758
classes.push(`doc-badge--type-${this.type}`);
48-
49-
// add a class based on the @size argument
5059
classes.push(`doc-badge--size-${this.size}`);
5160

5261
return classes.join(' ');
5362
}
63+
64+
<template>
65+
<div class={{this.classNames}} ...attributes>
66+
{{yield}}
67+
</div>
68+
</template>
5469
}

‎website/app/components/doc/badge/index.hbs‎

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

website/app/components/doc/banner/index.js renamed to website/app/components/doc/banner/index.gts

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55

66
import Component from '@glimmer/component';
77
import { assert } from '@ember/debug';
8+
import type Owner from '@ember/owner';
9+
10+
import { HdsIcon } from '@hashicorp/design-system-components/components';
11+
import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
812

913
export const TYPES = [
1014
'info',
@@ -16,9 +20,21 @@ export const TYPES = [
1620
'callout',
1721
];
1822

19-
export default class DocBannerComponent extends Component {
20-
constructor() {
21-
super(...arguments);
23+
type BannerTypes = (typeof TYPES)[number];
24+
25+
interface DocBannerComponentSignature {
26+
Args: {
27+
type: BannerTypes;
28+
};
29+
Blocks: {
30+
default: [];
31+
};
32+
Element: HTMLDivElement;
33+
}
34+
35+
export default class DocBanner extends Component<DocBannerComponentSignature> {
36+
constructor(owner: Owner, args: DocBannerComponentSignature['Args']) {
37+
super(owner, args);
2238
assert(
2339
`@type for "Doc::Banner" must be one of the following: ${TYPES.join(
2440
', ',
@@ -27,7 +43,7 @@ export default class DocBannerComponent extends Component {
2743
);
2844
}
2945

30-
get icon() {
46+
get icon(): HdsIconSignature['Args']['name'] | undefined {
3147
let icon;
3248
switch (this.args.type) {
3349
case 'info':
@@ -60,4 +76,15 @@ export default class DocBannerComponent extends Component {
6076

6177
return classes.join(' ');
6278
}
79+
80+
<template>
81+
<div class={{this.classNames}} ...attributes>
82+
{{#if this.icon}}
83+
<HdsIcon class="doc-banner__icon" @name={{this.icon}} @size="24" />
84+
{{/if}}
85+
<div class="doc-banner__content">
86+
{{yield}}
87+
</div>
88+
</div>
89+
</template>
6390
}

‎website/app/components/doc/banner/index.hbs‎

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

‎website/app/components/doc/cards/card.gts‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { LinkTo } from '@ember/routing';
8+
9+
import DocBadge from 'website/components/doc/badge';
10+
11+
export interface DocCardsCardSignature {
12+
Args: {
13+
image?: string;
14+
title: string;
15+
caption?: string;
16+
status?: string;
17+
route?: string;
18+
model?: unknown;
19+
href?: string;
20+
layout?: 'vertical' | 'horizontal';
21+
};
22+
Blocks: {
23+
default: [];
24+
};
25+
Element: HTMLLIElement;
26+
}
27+
28+
export default class DocCardsCard extends Component<DocCardsCardSignature> {
29+
get classNames() {
30+
const classes = ['doc-cards-card'];
31+
const layout = this.args.layout ?? 'vertical';
32+
33+
// add a class based on the @layout argument, default = 'vertical'
34+
classes.push(`doc-cards-card--layout-${layout}`);
35+
36+
return classes.join(' ');
37+
}
38+
39+
<template>
40+
<li class={{this.classNames}} ...attributes>
41+
{{#if @route}}
42+
<LinkTo
43+
class="doc-cards-card__link"
44+
@route={{@route}}
45+
@model={{@model}}
46+
>
47+
<img
48+
class="doc-cards-card__image"
49+
src={{@image}}
50+
alt=""
51+
role="presentation"
52+
/>
53+
<div class="doc-cards-card__details">
54+
<p class="doc-cards-card__title">{{@title}}</p>
55+
{{#if @status.deprecated}}
56+
<DocBadge
57+
class="doc-cards-card__badge"
58+
@type="warning-inverted"
59+
@size="medium"
60+
>Deprecated</DocBadge>
61+
{{else if @status.updated}}
62+
<DocBadge
63+
class="doc-cards-card__badge"
64+
@type="neutral-inverted"
65+
@size="medium"
66+
>Updated</DocBadge>
67+
{{else if @status.added}}
68+
<DocBadge
69+
class="doc-cards-card__badge"
70+
@type="information-inverted"
71+
@size="medium"
72+
>Added</DocBadge>
73+
{{/if}}
74+
<p class="doc-cards-card_description">{{@caption}}</p>
75+
</div>
76+
</LinkTo>
77+
{{/if}}
78+
{{#if @href}}
79+
<a class="doc-cards-card__link" href={{@href}}>
80+
<img
81+
class="doc-cards-card__image"
82+
src={{@image}}
83+
alt=""
84+
role="presentation"
85+
/>
86+
<div class="doc-cards-card__details">
87+
<p class="doc-cards-card__title">{{@title}}</p>
88+
{{#if @status.deprecated}}
89+
<DocBadge
90+
class="doc-cards-card__badge"
91+
@type="warning-inverted"
92+
@size="medium"
93+
>Deprecated</DocBadge>
94+
{{else if @status.updated}}
95+
<DocBadge
96+
class="doc-cards-card__badge"
97+
@type="neutral-inverted"
98+
@size="medium"
99+
>Updated</DocBadge>
100+
{{else if @status.added}}
101+
<DocBadge
102+
class="doc-cards-card__badge"
103+
@type="information-inverted"
104+
@size="medium"
105+
>Added</DocBadge>
106+
{{/if}}
107+
<p class="doc-cards-card_description">{{@caption}}</p>
108+
</div>
109+
</a>
110+
{{/if}}
111+
</li>
112+
</template>
113+
}

‎website/app/components/doc/cards/card.hbs‎

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

‎website/app/components/doc/cards/card.js‎

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

‎website/app/components/doc/cards/deck.gts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
8+
import DocCardsCard from 'website/components/doc/cards/card';
9+
import type { DocCardsCardSignature } from 'website/components/doc/cards/card';
10+
11+
interface DocCardsDeckSignature {
12+
Args: {
13+
cards?: DocCardsCardSignature['Args'][];
14+
cols?: '2' | '3' | '4';
15+
layout?: 'vertical' | 'horizontal';
16+
};
17+
Blocks: {
18+
default: [];
19+
};
20+
Element: HTMLUListElement;
21+
}
22+
23+
export default class DocCardsDeck extends Component<DocCardsDeckSignature> {
24+
get cols() {
25+
return this.args.cols ?? '2';
26+
}
27+
get classNames() {
28+
let classes = ['doc-cards-deck'];
29+
30+
classes.push(`doc-cards-deck--layout-${this.cols}cols`);
31+
32+
return classes.join(' ');
33+
}
34+
35+
<template>
36+
<ul class={{this.classNames}} ...attributes role="list">
37+
{{#if @cards}}
38+
{{#each @cards as |card|}}
39+
<DocCardsCard
40+
@image={{card.image}}
41+
@title={{card.title}}
42+
@caption={{card.caption}}
43+
@status={{card.status}}
44+
@route={{card.route}}
45+
@model={{card.model}}
46+
@href={{card.href}}
47+
@layout={{@layout}}
48+
/>
49+
{{/each}}
50+
{{else}}
51+
{{yield}}
52+
{{/if}}
53+
</ul>
54+
</template>
55+
}

‎website/app/components/doc/cards/deck.hbs‎

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

0 commit comments

Comments
 (0)