@jfrader/storybook-docs 0.7.0 → 0.8.0

package/dist/index.js

@@ -5,7 +5,7 @@ import { createRoot } from "react-dom/client";
 import { site as site3, themeCss, theme as theme2 } from "virtual:storybook-docs/site";
 
 // src/app.tsx
-import { Children, useEffect as useEffect8, useRef as useRef5, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef5, useState as useState9 } from "react";
 import { catalog as catalog3, groups as groups2 } from "virtual:storybook-docs/catalog";
 import { pages, site as site2, theme } from "virtual:storybook-docs/site";
 
@@ -1857,21 +1857,14 @@ function SearchBox() {
 import { releases as releases2 } from "virtual:storybook-docs/releases";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var routeHref = (path) => `#${hrefFor(path)}`;
-var NAV_GROUP_WINDOW = 12;
-function NavGroup({ id, title, active, activeIndex = -1, children }) {
-  const [open, setOpen] = useState9(false);
-  const [showAll, setShowAll] = useState9(false);
-  const expanded = active || open;
-  const links = Children.toArray(children);
-  const capped = active && links.length > NAV_GROUP_WINDOW;
-  const start2 = Math.min(Math.max(activeIndex - NAV_GROUP_WINDOW / 2, 0), Math.max(0, links.length - NAV_GROUP_WINDOW));
-  const visibleLinks = capped && !showAll ? links.slice(start2, start2 + NAV_GROUP_WINDOW) : links;
+function NavGroup({ id, title, active, children }) {
+  const [open, setOpen] = useState9(active);
   return /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": id, children: [
-    /* @__PURE__ */ jsx16("button", { type: "button", className: "grp", id, "aria-expanded": expanded, "aria-controls": `${id}-links`, disabled: active, onClick: () => setOpen(!open), children: title }),
-    /* @__PURE__ */ jsxs13("div", { id: `${id}-links`, hidden: !expanded, children: [
-      /* @__PURE__ */ jsx16("div", { id: `${id}-window`, children: visibleLinks }),
-      capped ? /* @__PURE__ */ jsx16("button", { type: "button", className: "nav-more", "aria-expanded": showAll, "aria-controls": `${id}-window`, onClick: () => setShowAll(!showAll), children: showAll ? "Show less" : `Show all ${links.length}` }) : null
-    ] })
+    /* @__PURE__ */ jsxs13("button", { type: "button", className: "grp", id, "aria-expanded": open, "aria-controls": `${id}-links`, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx16("span", { children: title }),
+      /* @__PURE__ */ jsx16("svg", { className: "grp-chevron", width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "m6 4 4 4-4 4" }) })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { id: `${id}-links`, hidden: !open, children })
   ] });
 }
 function parseRoute(hash) {
@@ -1999,7 +1992,7 @@ function DocsApp() {
           ]
         }
       ) : null,
-      foundations.length > 0 ? /* @__PURE__ */ jsx16(NavGroup, { id: "nav-grp-foundations", title: "Foundations", active: foundations.some((item) => route.kind === item.kind), children: foundations.map((item) => /* @__PURE__ */ jsx16(
+      foundations.length > 0 ? /* @__PURE__ */ jsx16(NavGroup, { id: "nav-grp-foundations", title: "Design tokens", active: foundations.some((item) => route.kind === item.kind), children: foundations.map((item) => /* @__PURE__ */ jsx16(
         "a",
         {
           href: item.href,
@@ -2011,8 +2004,8 @@ function DocsApp() {
       )) }, `foundations-${activeSlug ?? route.kind}`) : null,
       groups2.map((group, index) => {
         const entries = catalog3.filter((entry) => entry.group === group);
-        const activeIndex = entries.findIndex((entry) => entry.slug === activeSlug);
-        return /* @__PURE__ */ jsx16(NavGroup, { id: `nav-grp-${index}`, title: group, active: activeIndex !== -1, activeIndex, children: entries.map((entry) => /* @__PURE__ */ jsx16(
+        const active = entries.some((entry) => entry.slug === activeSlug);
+        return /* @__PURE__ */ jsx16(NavGroup, { id: `nav-grp-${index}`, title: group, active, children: entries.map((entry) => /* @__PURE__ */ jsx16(
           "a",
           {
             href: routeHref(`/components/${entry.slug}`),

package/dist/styles.css

@@ -202,8 +202,7 @@ body {
   background: var(--sd-surface);
   padding: 14px 12px 12px;
 }
-.nav a,
-.nav-more {
+.nav a {
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -214,16 +213,7 @@ body {
   font-size: 13.5px;
   text-decoration: none;
 }
-.nav-more {
-  width: 100%;
-  background: none;
-  border: 0;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-.nav a:hover,
-.nav-more:hover {
+.nav a:hover {
   background: var(--sd-surface-hover);
   color: var(--sd-text);
 }
@@ -234,23 +224,46 @@ body {
 }
 .grp {
   margin: 3px 0 2px;
-  padding: 0 10px;
+  padding: 8px 10px;
   font-size: 10.5px;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--sd-text-muted);
   font-weight: 700;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   width: 100%;
   text-align: left;
   font-family: inherit;
   background: none;
   border: 0;
+  border-radius: 8px;
   cursor: pointer;
-  min-height: 28px;
+  min-height: 36px;
+}
+.grp[aria-expanded="true"] {
+  background: var(--sd-surface-raised);
+  color: var(--sd-text);
+}
+.grp:hover {
+  background: var(--sd-surface-hover);
+  color: var(--sd-text);
+}
+.grp-chevron {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+.grp[aria-expanded="true"] .grp-chevron {
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .grp-chevron {
+    transition: none;
+  }
 }
-.grp:focus-visible,
-.nav-more:focus-visible {
+.grp:focus-visible {
   outline: 2px solid var(--sd-focus-ring);
   outline-offset: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/storybook-docs",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "A documentation front for any design system that has Storybook: navigation, live examples and API tables are generated from the story files themselves.",
   "exports": {