feat(site-status): add <rh-site-status>

.changeset/hot-spiders-prove.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-site-status>`
+
+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.
+
+```html
+<rh-site-status></rh-site-status>
+```

docs/_data/relatedItems.yaml

@@ -40,6 +40,7 @@ rh-footer:
  - rh-accordion
  - rh-popover
  - rh-tooltip
+ - rh-site-status
 rh-jump-links: 
  - rh-pagination
  - rh-progress-steps
@@ -68,6 +69,9 @@ rh-skip-link:
  - rh-navigation
  - rh-navigation-secondary
  - rh-subnav
+rh-site-status:
+ - rh-card
+ - rh-footer
 rh-spinner: 
  - form
  - search-bar

docs/_data/repoStatus.yaml

@@ -249,7 +249,21 @@
     - name: webRH
       status: Planned
     - name: Documentation
-      status: Ready  
+      status: Ready
+- name: "Site Status"
+  type: "Element"
+  overallStatus: "New"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: Responsive
+      status: Ready
+    - name: RH Elements
+      status: Ready
+    - name: webRH
+      status: Planned
+    - name: Documentation
+      status: Ready
 - name: "Spinner"
   type: "Element"
   overallStatus: "Available"

elements/rh-site-status/README.md

@@ -0,0 +1,24 @@
+# Site Status
+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
+
+## Installation
+
+If using npm/bundlers:
+
+```bash
+npm install @rhds/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@rhds/elements/rh-site-status/rh-site-status.js';
+```
+
+## Usage
+- When you need to communicate the operational status of a website or domain
+- When you need to provide users with a link to a status page where they can learn more
+
+```html
+<rh-site-status></rh-site-status>
+```

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

@@ -0,0 +1,8 @@
+<rh-context-demo>
+  <rh-site-status></rh-site-status>
+</rh-context-demo>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+</script>

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

@@ -0,0 +1,15 @@
+export function overrideFetch(ok, status, statusText, json) {
+  window.fetch = new Proxy(window.fetch, {
+    apply: (target, thisArg, args) => {
+      if (args[0] === 'https://status.redhat.com/index.json') {
+        return Promise.resolve({
+          ok,
+          status,
+          statusText,
+          json
+        });
+      }
+      return target.apply(thisArg, args);
+    }
+  });
+}

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

@@ -0,0 +1,5 @@
+<rh-site-status></rh-site-status>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+</script>

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

@@ -0,0 +1,10 @@
+<script type="module">
+  import { overrideFetch } from '../fetch-override.js';
+  overrideFetch(false, 404, 'Error: 404 Not Found');
+</script>
+
+<rh-site-status></rh-site-status>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+</script>

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

@@ -0,0 +1,15 @@
+<script type="module">
+  import { overrideFetch } from '../fetch-override.js';
+  overrideFetch(
+    true,
+    200,
+    'Critical Outage',
+    () => Promise.resolve({ status: { indicator: 'critical', description: 'Critical Outage' } })
+  );
+</script>
+
+<rh-site-status></rh-site-status>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+</script>

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

@@ -0,0 +1,15 @@
+<script type="module">
+  import { overrideFetch } from '../fetch-override.js';
+  overrideFetch(
+    true,
+    200,
+    'Maintenance',
+    () => Promise.resolve({ status: { indicator: 'maintenance', description: 'Status Maintenance' } })
+  );
+</script>
+
+<rh-site-status></rh-site-status>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+</script>

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

@@ -0,0 +1,15 @@
+<script type="module">
+  import { overrideFetch } from '../fetch-override.js';
+  overrideFetch(
+    true,
+    200,
+    'Major Outage',
+    () => Promise.resolve({ status: { indicator: 'major', description: 'Major Outage' } })
+  );
+</script>
+
+<rh-site-status></rh-site-status>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+</script>

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

@@ -0,0 +1,15 @@
+<script type="module">
+  import { overrideFetch } from '../fetch-override.js';
+  overrideFetch(
+    true,
+    200,
+    'Partially Degraded Service',
+    () => Promise.resolve({ status: { indicator: 'minor', description: 'Partially Degraded Service' } })
+  );
+</script>
+
+<rh-site-status></rh-site-status>
+
+<script type="module">
+  import '@rhds/elements/rh-site-status/rh-site-status.js';
+</script>

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

@@ -0,0 +1,25 @@
+## Overview
+
+{{ tagName | getElementDescription }}
+
+{% example palette="darkest", 
+  alt="Image of a site status element with a green checkmark and the text 'All systems operational'",
+  src="./site-status-sample.svg"
+%}
+
+{% repoStatusList %}
+
+## Sample element
+
+<rh-site-status></rh-site-status>
+
+## Demo
+
+{% playground tagName=tagName %}{% endplayground %} 
+{% cta href="./demo/", target="_blank" %}View the demo{% endcta %}
+
+## When to use
+- When you need to communicate the operational status of a website or domain
+- When you need to provide users with a link to a status page where they can learn more
+
+{% repoStatusChecklist %}

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

@@ -0,0 +1,123 @@
+<style>
+  figure {
+    margin: 0;
+  }
+  figcaption ol {
+    font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+    font-weight: var(--rh-font-weight-body-text-regular, 400);
+    line-height: var(--rh-line-height-heading, 1.3);
+    padding-inline-start: var(--rh-space-lg, 16px);
+  }
+  figure .example {
+    margin-bottom: var(--rh-space-lg, 16px);
+  }
+
+  figure .example + figcaption {
+    margin-bottom: var(--rh-space-4xl, 64px);
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--rh-space-4xl, 64px);
+  }
+
+  .grid .example {
+    width: 100%;
+  }
+
+  .grid .example + .example {
+    margin-top: unset;
+    margin-block-start: unset;
+  }
+
+  @media (min-width: 992px) {
+    .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+</style>
+
+## Styles
+
+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.
+
+### Anatomy
+
+<figure>
+  {% example palette="darkest", 
+    alt="Image of a site status element with a green checkmark and the text 'All systems operational'",
+    src="../site-status-anatomy.svg"
+  %}
+  <figcaption>
+    <ol>
+      <li>Icon</li>
+      <li>Link</li>
+      <li>Container</li>
+    </ol>
+  </figcaption>
+</figure>
+
+## Theme
+
+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).
+
+
+<div class="grid">
+{% example palette="darkest", 
+    alt="Image of a site status element with a green checkmark and the text 'All systems operational on a dark background'",
+    src="../site-status-theme.svg"
+  %}
+
+{% example palette="lightest", 
+    alt="Image of a site status element with a green checkmark and the text 'All systems operational on a light background'",
+    src="../site-status-theme.svg"
+  %}  
+</div>
+
+## Configuration
+
+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.
+
+{% example palette="darkest", 
+  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.",
+  src="../site-status-configuration.svg"
+%}
+
+## Icons
+
+Website status includes three icons that also indicate the severity of the status.
+
+{% example palette="darkest", 
+  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'.",
+  src="../site-status-icons.svg" 
+%}
+
+## Space
+
+Space values remain the same at all viewport sizes.
+
+{% example palette="darkest", 
+  alt="Image of a site status element with a green checkmark and the text 'All systems operational' with space indicators.",
+  src="../site-status-space.svg"
+%}
+
+{% example palette="none", 
+  alt="Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators.",
+  src="../site-status-footer.svg"
+%}
+
+{% example palette="none", 
+  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.",
+  src="../site-status-footer-mobile.svg"%}
+
+
+## Interaction states
+
+Only the link is selectable and it should be underlined in all interaction states.
+
+{% example palette="darkest", 
+  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.",
+  src="../site-status-interaction-states.svg"
+%}
+