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

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

@@ -1,15 +1,13 @@
+
+const { fetch: originalFetch } = window;
+
 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);
-    }
-  });
+  window.fetch = async () => {
+    return Promise.resolve({
+      ok,
+      status,
+      statusText,
+      json
+    });
+  };
 }

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

@@ -0,0 +1,32 @@
+<script type="module">
+  import { overrideFetch } from '../fetch-override.js';
+  overrideFetch(
+    true,
+    200,
+    'OK',
+    () => new Promise((resolve) => {
+      setTimeout(() => resolve({ status: { indicator: 'none', description: 'All Systems Operational' } }), 100000);
+    })
+  );
+</script>
+
+<rh-site-status></rh-site-status>
+
+Example of translated loading text:
+<rh-context-demo lang="fr">
+  <rh-site-status>
+    <span slot="loading-text">Chargement</span>
+  </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>
+
+<style>
+  rh-context-demo {
+    height: unset;
+    margin: unset;
+  }
+</style>

elements/rh-site-status/rh-site-status.ts

@@ -48,6 +48,8 @@ const statusMap: Record<string, string> = {
  * 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.
  *
  * @summary Communicates operational status of a website or domain
+ *
+ * @slot loading-text - Text to display while loading the status defaults to "Loading"
  */
 @customElement('rh-site-status')
 export class RhSiteStatus extends LitElement {
@@ -66,7 +68,7 @@ export class RhSiteStatus extends LitElement {
 
   #logger = new Logger(this);
 
-  #text = 'Loading';
+  #text = '';
 
   #icon: TemplateResult = html``;
 
@@ -79,8 +81,8 @@ export class RhSiteStatus extends LitElement {
 
   render() {
     return html`
-      <a href="https://status.redhat.com/">
-        ${this.#isLoading ? html`<rh-spinner size="sm"></rh-spinner>` : html`
+      <a href="https://status.redhat.com/" aria-busy="${this.#isLoading ? 'true' : 'false'}" aria-live="polite">
+        ${this.#isLoading ? html`<rh-spinner size="sm" color-palette="dark"></rh-spinner><span><slot name="loading-text">Loading</slot></span>` : html`
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewbox="0 0 16 17" fill="none">
             ${this.#icon}
           </svg>