From 24f416b3f9c012931d6aeecbaeebd85573487753 Mon Sep 17 00:00:00 2001
From: Kenneth Kalmer <kenneth.kalmer@ably.com>
Date: Mon, 25 Nov 2024 15:12:50 +0000
Subject: [PATCH] chore: switch to using the StatusIcon component in meganav &
 footer

For the meganav this resolves the issue of invalid markup (a > a)
---
 src/core/Footer.tsx                                  | 10 ++++++----
 .../Footer/__snapshots__/Footer.stories.tsx.snap     | 12 ++++--------
 src/core/MeganavContentDevelopers.tsx                |  9 +++------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/core/Footer.tsx b/src/core/Footer.tsx
index a6b754f21..ab4936f63 100644
--- a/src/core/Footer.tsx
+++ b/src/core/Footer.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
-import Status from "./Status.js";
+import { StatusIcon } from "./Status.js";
 
 type FooterProps = {
   paths: {
@@ -209,14 +209,16 @@ const Footer = ({ paths, urlBase, statusUrl }: FooterProps) => {
                 SDKs
               </a>
             </li>
-            <li className="p-menu-row-snug flex items-center -mt-4">
+            <li className="p-menu-row-snug">
               <a
-                className="pr-8 ui-footer-menu-row-link"
+                className="ui-footer-menu-row-link flex items-center gap-4"
                 href="https://status.ably.com/"
+                target="_blank"
+                rel="noreferrer"
               >
                 System status
+                <StatusIcon statusUrl={statusUrl} />
               </a>
-              <Status statusUrl={statusUrl} />
             </li>
           </ul>
         </div>
diff --git a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
index 82fb910c2..cb612222c 100644
--- a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
+++ b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
@@ -175,18 +175,14 @@ exports[`Components/Footer Default smoke-test 1`] = `
             SDKs
           </a>
         </li>
-        <li class="p-menu-row-snug flex items-center -mt-4">
-          <a class="pr-8 ui-footer-menu-row-link"
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link flex items-center gap-4"
              href="https://status.ably.com/"
-          >
-            System status
-          </a>
-          <a href="https://status.ably.com"
-             class="inline-block undefined"
              target="_blank"
              rel="noreferrer"
           >
-            <span class="flex items-center h-[1.5rem] p-[0.25rem]">
+            System status
+            <span class="inline-flex items-center h-[1.5rem] p-[0.25rem]">
               <span class="w-[1rem] h-[1rem] leading-[1rem] rounded-full animate-pulse bg-neutral-500">
               </span>
             </span>
diff --git a/src/core/MeganavContentDevelopers.tsx b/src/core/MeganavContentDevelopers.tsx
index 226e297e3..31ca9d96e 100644
--- a/src/core/MeganavContentDevelopers.tsx
+++ b/src/core/MeganavContentDevelopers.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import Icon from "./Icon";
 import { AbsUrl } from "./Meganav";
-import Status from "./Status";
+import { StatusIcon } from "./Status";
 
 const MeganavContentDevelopers = ({
   absUrl,
@@ -186,12 +186,9 @@ const MeganavContentDevelopers = ({
               href="https://status.ably.com/"
               className="group ui-meganav-media py-12"
             >
-              <p className="ui-meganav-media-heading">
+              <p className="ui-meganav-media-heading flex items-center gap-4">
                 Status
-                <Status
-                  statusUrl={statusUrl}
-                  additionalCSS="ml-4 align-middle"
-                />
+                <StatusIcon statusUrl={statusUrl} />
               </p>
             </a>
           </li>