From 6ca822fc8ad3a71d8212446e3ec7938edd50f932 Mon Sep 17 00:00:00 2001
From: Alfie Jones <alfie.jones@hotmail.co.uk>
Date: Mon, 10 Jun 2024 17:31:51 +0100
Subject: [PATCH] saving tab in localstorage

---
 .../src/components/schema/tab.astro           |  4 +-
 .../src/components/schema/tabs.astro          | 47 +++++++++++++------
 .../src/components/schema/tabs.markdoc.ts     | 11 +++--
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/apps/marketing-astro/src/components/schema/tab.astro b/apps/marketing-astro/src/components/schema/tab.astro
index 0cf6b4c9..bbe7869f 100644
--- a/apps/marketing-astro/src/components/schema/tab.astro
+++ b/apps/marketing-astro/src/components/schema/tab.astro
@@ -5,15 +5,17 @@ interface Props {
   labeledByID: string;
   id: string;
   initial?: boolean;
+  label: string;
 }
 
-const { labeledByID, id, initial } = Astro.props;
+const { labeledByID, id, initial, label } = Astro.props;
 ---
 
 <div
   role="tabpanel"
   id={id}
   aria-labelledby={labeledByID}
+  data-label={label}
   hidden={!initial}
   class="mt-2 ring-offset-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 >
diff --git a/apps/marketing-astro/src/components/schema/tabs.astro b/apps/marketing-astro/src/components/schema/tabs.astro
index 4233dd36..ccdeae08 100644
--- a/apps/marketing-astro/src/components/schema/tabs.astro
+++ b/apps/marketing-astro/src/components/schema/tabs.astro
@@ -8,9 +8,11 @@ interface Props extends HTMLAttributes<"div"> {
 }
 
 const { labels, idSuffix, ...props } = Astro.props;
+
+const group = labels.sort().toString();
 ---
 
-<div {...props} data-tabs>
+<div {...props} data-tabs data-tabs-id={group}>
   <div
     role="tablist"
     class="inline-flex relative h-10 items-center justify-center rounded-md bg-surface-container-highest dark:bg-surface-container p-1 text-on-surface-variant"
@@ -52,26 +54,41 @@ const { labels, idSuffix, ...props } = Astro.props;
         activeTrigger.getAttribute("aria-controls")!
       )!;
 
-      triggers.forEach((trigger) => {
-        trigger.addEventListener("click", () => {
-          activeTrigger.setAttribute("aria-selected", "false");
-          activeTrigger.setAttribute("tabindex", "-1");
+      const groupID = tab.getAttribute("data-tabs-id");
+
+      function setActiveTab(trigger: Element, index: number) {
+        if (trigger === activeTrigger) {
+          return;
+        }
+
+        activeTrigger.setAttribute("aria-selected", "false");
+        activeTrigger.setAttribute("tabindex", "-1");
+
+        trigger.setAttribute("aria-selected", "true");
+        trigger.setAttribute("tabindex", "0");
+
+        const tabId = trigger.getAttribute("aria-controls")!;
 
-          trigger.setAttribute("aria-selected", "true");
-          trigger.setAttribute("tabindex", "0");
+        if (activePanel) {
+          activePanel.setAttribute("hidden", "");
+        }
 
-          const tabId = trigger.getAttribute("aria-controls")!;
+        activePanel = document.getElementById(tabId)!;
+        activePanel.removeAttribute("hidden");
 
-          if (activePanel) {
-            activePanel.setAttribute("hidden", "");
-          }
+        localStorage.setItem(`tabs-${groupID}-active`, String(index));
 
-          activePanel = document.getElementById(tabId)!;
-          activePanel.removeAttribute("hidden");
+        activeTrigger = trigger;
+      }
 
-          activeTrigger = trigger;
-        });
+      triggers.forEach((trigger, i) => {
+        trigger.addEventListener("click", () => setActiveTab(trigger, i));
       });
+      const index = localStorage.getItem(`tabs-${groupID}-active`);
+      setActiveTab(
+        triggers.item(index ? parseInt(index) : 0),
+        parseInt(index || "0")
+      );
     });
   }
 
diff --git a/apps/marketing-astro/src/components/schema/tabs.markdoc.ts b/apps/marketing-astro/src/components/schema/tabs.markdoc.ts
index c992a836..03d6d4a5 100644
--- a/apps/marketing-astro/src/components/schema/tabs.markdoc.ts
+++ b/apps/marketing-astro/src/components/schema/tabs.markdoc.ts
@@ -1,6 +1,4 @@
 import Markdoc, { type Config, type Node } from "@markdoc/markdoc";
-import Tabs from "./tabs.astro";
-import Tab from "./tab.astro";
 
 export const tab = {
   attributes: {},
@@ -22,6 +20,9 @@ export const tabs = {
     const labels = node
       .transformChildren(config)
       .filter((child) => child && (child as any).name === "tab")
+      .sort((a: any, b: any) =>
+        a.attributes.label.localeCompare(b.attributes.label)
+      )
       .map((tab, i) => {
         (tab as any).attributes.id = `tab-${i}--${idSuffix}`;
         if (i === 0) {
@@ -34,7 +35,11 @@ export const tabs = {
     return new Markdoc.Tag(
       "tabs",
       { labels, idSuffix },
-      node.transformChildren(config)
+      node
+        .transformChildren(config)
+        .sort((a: any, b: any) =>
+          a.attributes.label.localeCompare(b.attributes.label)
+        )
     );
   },
 };