chore: switch to using the StatusIcon component in meganav & footer

For the meganav this resolves the issue of invalid markup (a > a)
ably · Nov 25, 2024 · 998eb8a · 998eb8a
1 parent 2a1bbc2
commit 998eb8a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 20 deletions.
diff --git 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
@@ -175,20 +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]">
-              <span class="w-[1rem] h-[1rem] leading-[1rem] rounded-full animate-pulse bg-neutral-500">
-              </span>
+            System status
+            <span class="inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full bg-neutral-500 animate-pulse">
             </span>
           </a>
         </li>

diff --git 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>