Skip to content

Commit c1ae554

Browse files
zamoorezamoore
committed
added test and updated docs
1 parent e78e1a2 commit c1ae554

File tree

4 files changed

+96
-60
lines changed

4 files changed

+96
-60
lines changed

‎packages/components/src/components/hds/application-state/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const ALIGNS: HdsApplicationStateAligns[] = Object.values(
2020
export interface HdsApplicationStateSignature {
2121
Args: {
2222
align?: HdsApplicationStateAligns;
23+
isAutoCentered?: boolean;
2324
};
2425
Blocks: {
2526
default: [
@@ -35,6 +36,10 @@ export interface HdsApplicationStateSignature {
3536
}
3637

3738
export default class HdsApplicationState extends Component<HdsApplicationStateSignature> {
39+
get isAutoCentered(): boolean {
40+
return this.args.isAutoCentered ?? true;
41+
}
42+
3843
get align(): HdsApplicationStateAligns {
3944
const validAlignValues: HdsApplicationStateAligns[] = Object.values(
4045
HdsApplicationStateAlignValues
@@ -56,6 +61,10 @@ export default class HdsApplicationState extends Component<HdsApplicationStateSi
5661
// add a class based on the @align argument
5762
classes.push(`hds-application-state--align-${this.align}`);
5863

64+
if (this.isAutoCentered) {
65+
classes.push('hds-application-state--is-auto-centered');
66+
}
67+
5968
return classes.join(' ');
6069
}
6170
}

‎packages/components/src/styles/components/application-state.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ $hds-application-state-content-max-width: 480px;
2525
width: auto;
2626
}
2727
}
28+
29+
&.hds-application-state--is-auto-centered {
30+
margin: 0 auto;
31+
}
2832
}
2933

3034
.hds-application-state__media {

‎showcase/tests/integration/components/hds/application-state/index-test.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,26 @@ module(
6363
.hasClass('hds-application-state--align-center');
6464
});
6565

66+
test('it should have the correct class when isAutoCentered is true', async function (assert) {
67+
this.set('isAutoCentered', true);
68+
69+
await render(hbs`
70+
<Hds::ApplicationState id="test-application-state" @isAutoCentered={{this.isAutoCentered}}>
71+
template block text
72+
</Hds::ApplicationState>
73+
`);
74+
75+
assert
76+
.dom('#test-application-state')
77+
.hasClass('hds-application-state--is-auto-centered');
78+
79+
this.set('isAutoCentered', false);
80+
81+
assert
82+
.dom('#test-application-state')
83+
.doesNotHaveClass('hds-application-state--is-auto-centered');
84+
});
85+
6686
// CONTEXTUAL COMPONENTS
6787

6888
test('it renders the contextual components', async function (assert) {

‎website/docs/components/application-state/partials/code/component-api.md‎

Lines changed: 63 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,27 @@
33
### ApplicationState
44

55
<Doc::ComponentApi as |C|>
6-
<C.Property @name="align" @type="enum" @values={{array "left" "center" }} @default="left">
7-
Sets the alignment of the Application State content.
8-
</C.Property>
9-
<C.Property @name="<[A].Media>" @type="yielded component">
10-
`ApplicationState::Media` yielded as contextual component (see below).
11-
</C.Property>
12-
<C.Property @name="<[A].Header>" @type="yielded component">
13-
`ApplicationState::Header` yielded as contextual component (see below).
14-
</C.Property>
15-
<C.Property @name="<[A].Body>" @type="yielded component">
16-
`ApplicationState::Body` yielded as contextual component (see below).
17-
</C.Property>
18-
<C.Property @name="<[A].Footer>" @type="yielded component">
19-
`ApplicationState::Footer` yielded as contextual component (see below).
20-
</C.Property>
21-
<C.Property @name="...attributes">
22-
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
23-
</C.Property>
6+
<C.Property @name="align" @type="enum" @values={{array "left" "center" }} @default="left">
7+
Sets the alignment of the Application State content.
8+
</C.Property>
9+
<C.Property @name="isAutoCentered" @default="true" @type="boolean">
10+
Horizontally centers the component within its container.
11+
</C.Property>
12+
<C.Property @name="<[A].Media>" @type="yielded component">
13+
`ApplicationState::Media` yielded as contextual component (see below).
14+
</C.Property>
15+
<C.Property @name="<[A].Header>" @type="yielded component">
16+
`ApplicationState::Header` yielded as contextual component (see below).
17+
</C.Property>
18+
<C.Property @name="<[A].Body>" @type="yielded component">
19+
`ApplicationState::Body` yielded as contextual component (see below).
20+
</C.Property>
21+
<C.Property @name="<[A].Footer>" @type="yielded component">
22+
`ApplicationState::Footer` yielded as contextual component (see below).
23+
</C.Property>
24+
<C.Property @name="...attributes">
25+
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
26+
</C.Property>
2427
</Doc::ComponentApi>
2528

2629
### Contextual components
@@ -30,67 +33,67 @@
3033
The `ApplicationState::Media` component, yielded as contextual component.
3134

3235
<Doc::ComponentApi as |C|>
33-
<C.Property @name="yield">
34-
Elements passed as children are yielded as inner content of the "media" block.
35-
</C.Property>
36-
<C.Property @name="...attributes">
37-
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
38-
</C.Property>
36+
<C.Property @name="yield">
37+
Elements passed as children are yielded as inner content of the "media" block.
38+
</C.Property>
39+
<C.Property @name="...attributes">
40+
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
41+
</C.Property>
3942
</Doc::ComponentApi>
4043

4144
#### [A].Header
4245

4346
The `ApplicationState::Header` component, yielded as contextual component.
4447

4548
<Doc::ComponentApi as |C|>
46-
<C.Property @name="errorCode" @type="string">
47-
The error code to be displayed.
48-
</C.Property>
49-
<C.Property @name="icon" @type="string">
50-
Adds a leading icon to the title. Accepts any [icon](/icons/library) name.
51-
</C.Property>
52-
<C.Property @name="title" @type="string">
53-
The text of the title
54-
</C.Property>
55-
<C.Property @name="titleTag" @type="enum" @values={{array "div" "h1" "h2" "h3" "h4" "h5" "h6"}} @default="div">
56-
The HTML tag that wraps the title text.
57-
</C.Property>
58-
<C.Property @name="...attributes">
59-
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
60-
</C.Property>
49+
<C.Property @name="errorCode" @type="string">
50+
The error code to be displayed.
51+
</C.Property>
52+
<C.Property @name="icon" @type="string">
53+
Adds a leading icon to the title. Accepts any [icon](/icons/library) name.
54+
</C.Property>
55+
<C.Property @name="title" @type="string">
56+
The text of the title
57+
</C.Property>
58+
<C.Property @name="titleTag" @type="enum" @values={{array "div" "h1" "h2" "h3" "h4" "h5" "h6"}} @default="div">
59+
The HTML tag that wraps the title text.
60+
</C.Property>
61+
<C.Property @name="...attributes">
62+
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
63+
</C.Property>
6164
</Doc::ComponentApi>
6265

6366
#### [A].Body
6467

6568
The `ApplicationState::Body` component, yielded as contextual component.
6669

6770
<Doc::ComponentApi as |C|>
68-
<C.Property @name="yield">
69-
Elements passed as children are yielded as inner content of the "body" block.
70-
</C.Property>
71-
<C.Property @name="text" @type="string">
72-
Note: use `@text` to pass directly text to the "body", with a predefined style. This component does not support `@text` on the component invocation if it is used with yielded content.
73-
</C.Property>
74-
<C.Property @name="...attributes">
75-
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
76-
</C.Property>
71+
<C.Property @name="yield">
72+
Elements passed as children are yielded as inner content of the "body" block.
73+
</C.Property>
74+
<C.Property @name="text" @type="string">
75+
Note: use `@text` to pass directly text to the "body", with a predefined style. This component does not support `@text` on the component invocation if it is used with yielded content.
76+
</C.Property>
77+
<C.Property @name="...attributes">
78+
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
79+
</C.Property>
7780
</Doc::ComponentApi>
7881

7982
#### [A].Footer
8083

8184
The `ApplicationState::Footer` component, yielded as contextual component.
8285

8386
<Doc::ComponentApi as |C|>
84-
<C.Property @name="<[F].Button>" @type="yielded component">
85-
The `Button` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Button` component](/components/button).
86-
</C.Property>
87-
<C.Property @name="<[F].Dropdown>" @type="yielded component">
88-
The `Dropdown` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Dropdown` component](/components/dropdown).
89-
</C.Property>
90-
<C.Property @name="<[F].LinkStandalone>" @type="yielded component">
91-
The `Link::Standalone` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Link::Standalone` component](/components/link/standalone).
92-
</C.Property>
93-
<C.Property @name="...attributes">
94-
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
95-
</C.Property>
87+
<C.Property @name="<[F].Button>" @type="yielded component">
88+
The `Button` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Button` component](/components/button).
89+
</C.Property>
90+
<C.Property @name="<[F].Dropdown>" @type="yielded component">
91+
The `Dropdown` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Dropdown` component](/components/dropdown).
92+
</C.Property>
93+
<C.Property @name="<[F].LinkStandalone>" @type="yielded component">
94+
The `Link::Standalone` component, yielded as contextual component inside the `"footer"` block of the ApplicationState. It exposes the same API as the [`Link::Standalone` component](/components/link/standalone).
95+
</C.Property>
96+
<C.Property @name="...attributes">
97+
This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
98+
</C.Property>
9699
</Doc::ComponentApi>

0 commit comments

Comments
 (0)