Skip to content

Commit b28c881

Browse files
zeroedinzeroedin
authored
feat(site-status): add <rh-site-status> (#1507)
* feat(site-status): add site-status * fix(site-status): add missing export * chore(site-stutus): fix comment * fix(site-status): lint * fix(site-status): add color-context * test(site-staus): fix missing semi colon * fix(site-status): remove errant import * fix(site-status): allow endpoint to be overridden * docs(site-status): add incorrect endpoint demo * docs(site-status): correct auto generated template for demo * test(site-status): improve tests * fix(site-status): lint * fix(site-status): lint * fix(site-status): ugh lint... * fix(site-status): revert customizable endpoint, add href to status page link * test(site-status): improve tests * docs(site-status): add status demos * docs(site-status): stub docs * docs(site-status): add jsdoc * docs: add site-status to related items * fix(site-status): add type guard for api response * docs(site-status): update readme * docs(site-status): imporove jsdoc * docs(site-status): add docs pages and images * chore(site-status): add changeset * chore(site-status): update changeset to include example * chore(site-status): remove unused demo files * fix(site-status): remove unused part * style(site-status): reorder type * fix(site-status): make #isApiStatus static * fix(site-status): class decorators cant be use with static private identifier * fix(site-status): move getStatus to firstUpdated, remove extraneous throw * fix(site-status): handle capitalization in css * fix(site-status): correct first letter uppercase style * fix(site-status): revert response error removal * fix(site-status): remove status as statusText includes the 404 text. * fix(site-status): correct viewbox attr * docs(site-status): add repoStatus * test(site-status): use sinon for fetch stub * test(site-status): remove unused aTimeout * fix(site-status): switch api call to a try catch * fix(site-status): remove contextProvider not used in design spec * fix(site-status): use block instead of display contents on host * fix(site-status): move restore of fetch to top describes * fix(site-status): implement loading-text slot for translations and accessibility with aria-polite and aria-busy * docs(site-status): improve demos with loading state demo * fix(site-status): add focus and hover states * docs(site-status): add if status is still loading to accessibility * fix(site-status): readding color context provider * chore(site-status): lint * fix(site-status): remove context provider add dark styles * docs(site-status): readding arg check to fetch override * chore(site-status): lint
1 parent ad54f15 commit b28c881

40 files changed

+1451
-1
lines changed

‎.changeset/hot-spiders-prove.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@rhds/elements": minor
3+
---
4+
5+
✨ Added `<rh-site-status>`
6+
7+
Website status communicates the operational status of a website or domain using a status icon and link. It is usually located in the Footer component.
8+
9+
```html
10+
<rh-site-status></rh-site-status>
11+
```

‎docs/_data/relatedItems.yaml

+4
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ rh-footer:
4040
- rh-accordion
4141
- rh-popover
4242
- rh-tooltip
43+
- rh-site-status
4344
rh-jump-links:
4445
- rh-pagination
4546
- rh-progress-steps
@@ -68,6 +69,9 @@ rh-skip-link:
6869
- rh-navigation
6970
- rh-navigation-secondary
7071
- rh-subnav
72+
rh-site-status:
73+
- rh-card
74+
- rh-footer
7175
rh-spinner:
7276
- form
7377
- search-bar

‎docs/_data/repoStatus.yaml

+15-1
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,21 @@
249249
- name: webRH
250250
status: Planned
251251
- name: Documentation
252-
status: Ready
252+
status: Ready
253+
- name: "Site Status"
254+
type: "Element"
255+
overallStatus: "New"
256+
libraries:
257+
- name: Figma library
258+
status: Ready
259+
- name: Responsive
260+
status: Ready
261+
- name: RH Elements
262+
status: Ready
263+
- name: webRH
264+
status: Planned
265+
- name: Documentation
266+
status: Ready
253267
- name: "Spinner"
254268
type: "Element"
255269
overallStatus: "Available"

‎elements/rh-site-status/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Site Status
2+
Website status communicates the operational status of a website or domain using a status icon and link. It is usually located in the Footer component
3+
4+
## Installation
5+
6+
If using npm/bundlers:
7+
8+
```bash
9+
npm install @rhds/elements
10+
```
11+
12+
Then once installed, import it to your application:
13+
14+
```js
15+
import '@rhds/elements/rh-site-status/rh-site-status.js';
16+
```
17+
18+
## Usage
19+
- When you need to communicate the operational status of a website or domain
20+
- When you need to provide users with a link to a status page where they can learn more
21+
22+
```html
23+
<rh-site-status></rh-site-status>
24+
```

‎elements/rh-site-status/demo/color-context.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<rh-context-demo>
2+
<rh-site-status></rh-site-status>
3+
</rh-context-demo>
4+
5+
<script type="module">
6+
import '@rhds/elements/rh-site-status/rh-site-status.js';
7+
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
8+
</script>

‎elements/rh-site-status/demo/fetch-override.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function overrideFetch(ok, status, statusText, json) {
2+
window.fetch = new Proxy(window.fetch, {
3+
apply: (target, thisArg, args) => {
4+
if (args[0] === 'https://status.redhat.com/index.json') {
5+
return Promise.resolve({
6+
ok,
7+
status,
8+
statusText,
9+
json
10+
});
11+
}
12+
return target.apply(thisArg, args);
13+
}
14+
});
15+
}

‎elements/rh-site-status/demo/loading.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script type="module">
2+
import { overrideFetch } from '../fetch-override.js';
3+
overrideFetch(
4+
true,
5+
200,
6+
'OK',
7+
() => new Promise(resolve => {
8+
setTimeout(() => resolve({ status: { indicator: 'none', description: 'All Systems Operational' } }), 100000);
9+
})
10+
);
11+
</script>
12+
13+
<rh-site-status></rh-site-status>
14+
15+
<p>Example of translated loading text</p>
16+
<rh-context-demo lang="fr">
17+
<rh-site-status>
18+
<span slot="loading-text">Chargement</span>
19+
</rh-site-status>
20+
</rh-context-demo>
21+
22+
<script type="module">
23+
import '@rhds/elements/rh-site-status/rh-site-status.js';
24+
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
25+
</script>
26+
27+
<style>
28+
rh-context-demo {
29+
height: unset;
30+
margin: unset;
31+
}
32+
</style>

‎elements/rh-site-status/demo/rh-site-status.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<rh-site-status></rh-site-status>
2+
3+
<script type="module">
4+
import '@rhds/elements/rh-site-status/rh-site-status.js';
5+
</script>

‎elements/rh-site-status/demo/status-404.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script type="module">
2+
import { overrideFetch } from '../fetch-override.js';
3+
overrideFetch(false, 404, 'Error: 404 Not Found');
4+
</script>
5+
6+
<rh-site-status></rh-site-status>
7+
8+
<script type="module">
9+
import '@rhds/elements/rh-site-status/rh-site-status.js';
10+
</script>

‎elements/rh-site-status/demo/status-critical.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script type="module">
2+
import { overrideFetch } from '../fetch-override.js';
3+
overrideFetch(
4+
true,
5+
200,
6+
'Critical Outage',
7+
() => Promise.resolve({ status: { indicator: 'critical', description: 'Critical Outage' } })
8+
);
9+
</script>
10+
11+
<rh-site-status></rh-site-status>
12+
13+
<script type="module">
14+
import '@rhds/elements/rh-site-status/rh-site-status.js';
15+
</script>

‎elements/rh-site-status/demo/status-maintenance.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script type="module">
2+
import { overrideFetch } from '../fetch-override.js';
3+
overrideFetch(
4+
true,
5+
200,
6+
'Maintenance',
7+
() => Promise.resolve({ status: { indicator: 'maintenance', description: 'Status Maintenance' } })
8+
);
9+
</script>
10+
11+
<rh-site-status></rh-site-status>
12+
13+
<script type="module">
14+
import '@rhds/elements/rh-site-status/rh-site-status.js';
15+
</script>

‎elements/rh-site-status/demo/status-major.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script type="module">
2+
import { overrideFetch } from '../fetch-override.js';
3+
overrideFetch(
4+
true,
5+
200,
6+
'Major Outage',
7+
() => Promise.resolve({ status: { indicator: 'major', description: 'Major Outage' } })
8+
);
9+
</script>
10+
11+
<rh-site-status></rh-site-status>
12+
13+
<script type="module">
14+
import '@rhds/elements/rh-site-status/rh-site-status.js';
15+
</script>

‎elements/rh-site-status/demo/status-minor.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script type="module">
2+
import { overrideFetch } from '../fetch-override.js';
3+
overrideFetch(
4+
true,
5+
200,
6+
'Partially Degraded Service',
7+
() => Promise.resolve({ status: { indicator: 'minor', description: 'Partially Degraded Service' } })
8+
);
9+
</script>
10+
11+
<rh-site-status></rh-site-status>
12+
13+
<script type="module">
14+
import '@rhds/elements/rh-site-status/rh-site-status.js';
15+
</script>

‎elements/rh-site-status/docs/00-overview.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
## Overview
2+
3+
{{ tagName | getElementDescription }}
4+
5+
{% example palette="darkest",
6+
alt="Image of a site status element with a green checkmark and the text 'All systems operational'",
7+
src="./site-status-sample.svg"
8+
%}
9+
10+
{% repoStatusList %}
11+
12+
## Sample element
13+
14+
<rh-site-status></rh-site-status>
15+
16+
## Demo
17+
18+
{% playground tagName=tagName %}{% endplayground %}
19+
{% cta href="./demo/", target="_blank" %}View the demo{% endcta %}
20+
21+
## When to use
22+
- When you need to communicate the operational status of a website or domain
23+
- When you need to provide users with a link to a status page where they can learn more
24+
25+
{% repoStatusChecklist %}

‎elements/rh-site-status/docs/10-style.md

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<style>
2+
figure {
3+
margin: 0;
4+
}
5+
figcaption ol {
6+
font-size: var(--rh-font-size-body-text-sm, 0.875rem);
7+
font-weight: var(--rh-font-weight-body-text-regular, 400);
8+
line-height: var(--rh-line-height-heading, 1.3);
9+
padding-inline-start: var(--rh-space-lg, 16px);
10+
}
11+
figure .example {
12+
margin-bottom: var(--rh-space-lg, 16px);
13+
}
14+
15+
figure .example + figcaption {
16+
margin-bottom: var(--rh-space-4xl, 64px);
17+
}
18+
19+
.grid {
20+
display: grid;
21+
grid-template-columns: 1fr;
22+
gap: var(--rh-space-4xl, 64px);
23+
}
24+
25+
.grid .example {
26+
width: 100%;
27+
}
28+
29+
.grid .example + .example {
30+
margin-top: unset;
31+
margin-block-start: unset;
32+
}
33+
34+
@media (min-width: 992px) {
35+
.grid {
36+
grid-template-columns: repeat(2, 1fr);
37+
}
38+
}
39+
</style>
40+
41+
## Styles
42+
43+
Website status is a combination of an icon and link within a very small card. It is designed to be understood immediately. Otherwise, a user can click on the link to learn more.
44+
45+
### Anatomy
46+
47+
<figure>
48+
{% example palette="darkest",
49+
alt="Image of a site status element with a green checkmark and the text 'All systems operational'",
50+
src="../site-status-anatomy.svg"
51+
%}
52+
<figcaption>
53+
<ol>
54+
<li>Icon</li>
55+
<li>Link</li>
56+
<li>Container</li>
57+
</ol>
58+
</figcaption>
59+
</figure>
60+
61+
## Theme
62+
63+
Currently, Website status is only available in the dark theme. You may use Website status in the light theme if necessary. If you need a separate light version designed instead, [contact us](https://github.com/RedHat-UX/red-hat-design-system/discussions).
64+
65+
66+
<div class="grid">
67+
{% example palette="darkest",
68+
alt="Image of a site status element with a green checkmark and the text 'All systems operational on a dark background'",
69+
src="../site-status-theme.svg"
70+
%}
71+
72+
{% example palette="lightest",
73+
alt="Image of a site status element with a green checkmark and the text 'All systems operational on a light background'",
74+
src="../site-status-theme.svg"
75+
%}
76+
</div>
77+
78+
## Configuration
79+
80+
Website status has a fixed height and its width changes depending on the amount of link text. The icon and link are horizontally aligned to the card as well.
81+
82+
{% example palette="darkest",
83+
alt="Image of a site status element with a green checkmark and the text 'All systems operational' with fixed height, width and horizontal alignment indicators.",
84+
src="../site-status-configuration.svg"
85+
%}
86+
87+
## Icons
88+
89+
Website status includes three icons that also indicate the severity of the status.
90+
91+
{% example palette="darkest",
92+
alt="Three images of site status elements, one with a green checkmark and the text 'All systems operational', the second with a yellow exclamation point and the text 'Partial system outage', and the third with a red exclamation point and the text 'Major system outage'.",
93+
src="../site-status-icons.svg"
94+
%}
95+
96+
## Space
97+
98+
Space values remain the same at all viewport sizes.
99+
100+
{% example palette="darkest",
101+
alt="Image of a site status element with a green checkmark and the text 'All systems operational' with space indicators.",
102+
src="../site-status-space.svg"
103+
%}
104+
105+
{% example palette="none",
106+
alt="Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators.",
107+
src="../site-status-footer.svg"
108+
%}
109+
110+
{% example palette="none",
111+
alt="Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators at a small viewport size.",
112+
src="../site-status-footer-mobile.svg"%}
113+
114+
115+
## Interaction states
116+
117+
Only the link is selectable and it should be underlined in all interaction states.
118+
119+
{% example palette="darkest",
120+
alt="Three images of a site status element with a green checkmark and the text 'All systems operational' first one displaying the mouse hover state, the second the keyboard state, the third a combination of hover and focus.",
121+
src="../site-status-interaction-states.svg"
122+
%}
123+

0 commit comments

Comments
 (0)