sticky tab bars, synchronized tab containers

Author: josh-heyer

advocacy_docs/playground/1/tabs.mdx

@@ -2,42 +2,12 @@
 title: Tabs Tester
 ---
 
+import { Link } from "gatsby"
 
-<TabContainer>
-<Tab title="Tab One">
-
-## Tab One Content
-
-Here is where there is [markdown](https://www.markdownguide.org/cheat-sheet/) content.
-
-</Tab>
-<Tab title="Tab Two" defaultSelected="true">
-
-## Tab Two Content
-
-![Image](https://placehold.co/600x400)
-
-</Tab>
-<Tab title="Tab Three">
-
-## Tab Three Content
-
-```jsx
-<TabContainer>
-<Tab title="Hello!">
-
-Hello Tabs
-
-</Tab>
-</TabContainer>
-```
-
-</Tab>
-</TabContainer>
 
 Tabs like these are created using JSX components in Markdown:
 
-<TabContainer>
+<TabContainer syncKey="language">
 <Tab title="Markdown">
 
 **Markdown** content gets separated from the wrapping tab 
@@ -137,4 +107,63 @@ Column *Three*
 </tr>
 </tbody></table>
 </Tab>
+</TabContainer>
+
+It's also possible to set a default tab:
+
+<TabContainer syncKey="language">
+<Tab title="Tab One">
+
+## Tab One Content
+
+Here is where there is [markdown](https://www.markdownguide.org/cheat-sheet/) content.
+
+</Tab>
+<Tab title="Tab Two">
+
+## Tab Two Content
+
+![Image](https://placehold.co/600x400)
+
+</Tab>
+<Tab title="JSX" defaultSelected="true">
+
+```jsx
+<TabContainer>
+<Tab title="JSX" defaultSelected="true">
+
+Hello Tabs
+
+</Tab>
+</TabContainer>
+```
+
+</Tab>
+</TabContainer>
+
+Finally, you can sync tabs between containers by setting the `syncKey` property. 
+Can be any string, tab selection will be synchronized between all containers with the same key. 
+
+Note: no validation is done here - you can use the same key for groups with dissimilar tabs. 
+This might be appropriate in some situations (e.g. tabs for OS selection where one group doesn't apply to one or more OSes).
+...But it can also get weird, as demonstrated here (middle tab group has two dissimilar tabs, but all three containers have the same `syncKey` set).
+
+<TabContainer syncKey="language">
+<Tab title="Markdown">
+
+[A link to this page](./)
+
+```markdown
+[A link to this page](tabs)
+```
+
+</Tab>
+<Tab title="JSX">
+<p><Link to="./">A link to this page</Link></p>
+<pre><code>&lt;Link to="tabs">A link to this page&lt;/Link></code></pre>
+</Tab>
+<Tab title="HTML">
+<p><a href="./">A link to this page</a></p>
+<pre><code>&lt;a href="tabs">A link to this page&lt;/a></code></pre>
+</Tab>
 </TabContainer>

src/components/tab-container.js

@@ -3,14 +3,14 @@ import React, {
   cloneElement,
   useState,
   useId,
-  useCallback,
+  useEffect,
 } from "react";
 
-export default function TabContainer({ className, children }) {
+export default function TabContainer({ className, syncKey, children }) {
   const id = useId();
 
-  const tabs = [];
   let implicitSelected = "";
+  let tabs = [];
 
   children = Children.map(children, (child) => {
     if (child && child.props && child.props.mdxType === "Tab") {
@@ -21,7 +21,7 @@ export default function TabContainer({ className, children }) {
       }
       const tabIndex = tabs.length + 1;
       const tabId = id + "tab" + tabIndex;
-      tabs.push({ id: tabId, title, defaultSelected });
+      tabs.push({ id: tabId, title });
       if (defaultSelected || tabIndex === 1) implicitSelected = title;
       return cloneElement(child, {
         id: tabId + "panel",
@@ -32,13 +32,34 @@ export default function TabContainer({ className, children }) {
     return child;
   });
   const [selected, setSelected] = useState(implicitSelected);
+  const _tabs = JSON.stringify(tabs);
 
-  const onTabSelect = useCallback(
-    (event) => {
-      setSelected(event.target.value);
-    },
-    [setSelected],
-  );
+  useEffect(() => {
+    if (syncKey) {
+      const updateSelected = () => {
+        const newSelected = sessionStorage.getItem("selectedTab-" + syncKey);
+        if (
+          newSelected &&
+          newSelected !== selected &&
+          JSON.parse(_tabs).some((tab) => tab.title === newSelected)
+        ) {
+          setSelected(newSelected);
+        }
+      };
+
+      updateSelected();
+      window.addEventListener("tabSelected", updateSelected);
+      return () => {
+        window.removeEventListener("tabSelected", updateSelected);
+      };
+    }
+  }, [syncKey, selected, _tabs]);
+
+  const onTabSelect = (event) => {
+    setSelected(event.target.value);
+    sessionStorage.setItem("selectedTab-" + syncKey, event.target.value);
+    window.dispatchEvent(new Event("tabSelected"));
+  };
 
   // refer to https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
   // warnings disabled for jsx-a11y as they make no sense: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md

src/styles/_docs.scss

@@ -66,13 +66,22 @@ label.link-label {
   /* Scrollable contents if viewport is shorter than content. */
 }
 
+/* headers have a position: relative style added by gatsby-remark-auto-headers 
+   - this is only needed when the icon is positioned absolutely, which we don't do */
+h1, h2, h3, h4, h5, h6 {
+  position: static !important;
+}
+
 .tabs {
 
   .tabs__list {
     display: flex;
     flex-direction: row;
     margin: 0;
     padding: 0;
+    position: sticky;
+    top: 0;
+    background-color: var(--bs-body-bg);
   }
 
   >.tab-content>.tabs__content {