From 0cde6bf5137e96ffeba318dddc36a6318b511042 Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Thu, 29 Aug 2024 21:55:19 -0400 Subject: [PATCH] tweaks and update tests --- src/components/Navigation/Navigation.astro | 2 +- src/components/Navigation/SideNav.tsx | 29 +++++++++++-------- .../Navigation/transform-nav-groups.test.ts | 23 +++++++++++++++ .../Navigation/transform-nav-groups.ts | 1 + src/components/Navigation/types.ts | 8 ++++- 5 files changed, 49 insertions(+), 14 deletions(-) diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro index 01638895..25a522e6 100644 --- a/src/components/Navigation/Navigation.astro +++ b/src/components/Navigation/Navigation.astro @@ -41,6 +41,6 @@ const navGroups = navItems ? transformNavGroups(navItems) : []; - + diff --git a/src/components/Navigation/SideNav.tsx b/src/components/Navigation/SideNav.tsx index 0f948cfa..372b413e 100644 --- a/src/components/Navigation/SideNav.tsx +++ b/src/components/Navigation/SideNav.tsx @@ -9,6 +9,11 @@ import { minMd, } from "@chromatic-com/tetra"; import type { CollectionEntry } from "astro:content"; +import { + isNestedTransformedGroup, + type TransformedNavGroup, + type TransformedNavGroupItem, +} from "./types"; const Trigger = styled(Collapsible.Trigger)` all: unset; @@ -147,7 +152,7 @@ export interface SidebarItem { interface SideNavProps { url?: string; - sidebarItems?: SidebarItem[]; + sidebarGroups?: TransformedNavGroup[]; } const withBase = (url: string) => @@ -165,20 +170,19 @@ const CollapsibleItem = ({ timeline, isHome, }: { - item: Item; + item: TransformedNavGroupItem; url?: string; timeline?: boolean; isHome?: boolean; }) => { - const isActive = - isHome && item.data.isHome ? true : withBase(item.slug) === url; + const isActive = isHome && item.isHome ? true : withBase(item.slug) === url; return ( {!!timeline && } - {item.data.sidebar.label} + {item.label} @@ -190,12 +194,12 @@ const CollapsibleGroup = ({ url, isHome, }: { - group: SidebarItem; + group: TransformedNavGroup; url?: string; isHome?: boolean; }) => { const isSomeActive = group.items.some((item) => { - if (isNestedItem(item)) { + if (isNestedTransformedGroup(item)) { return item.items.some((nestedItem) => withBase(nestedItem.slug) === url); } else { return withBase(item.slug) === url; @@ -214,13 +218,14 @@ const CollapsibleGroup = ({ {group.items.map((item, j) => { if (isNestedItem(item)) { return ( - + ); } return ( { +export const SideNav = ({ url, sidebarGroups }: SideNavProps) => { const isHome = url === homeUrl; return ( - {sidebarItems && - sidebarItems.map((group, i) => { + {sidebarGroups && + sidebarGroups.map((group, i) => { return ( - + ); })} diff --git a/src/components/Navigation/transform-nav-groups.test.ts b/src/components/Navigation/transform-nav-groups.test.ts index 8f4b475a..3bd0c2b3 100644 --- a/src/components/Navigation/transform-nav-groups.test.ts +++ b/src/components/Navigation/transform-nav-groups.test.ts @@ -236,6 +236,7 @@ describe("transformNavGroups", () => { label: "UI Tests", order: 2, slug: "test", + isHome: false, }, ], }, @@ -258,6 +259,7 @@ describe("transformNavGroups", () => { order: 2, hide: false, }, + isHome: false, }, }, ], @@ -272,6 +274,7 @@ describe("transformNavGroups", () => { label: "Test", order: 2, slug: "test", + isHome: false, }, ], }, @@ -310,6 +313,7 @@ describe("transformNavGroups", () => { label: "Introduction", order: 1, slug: "", + isHome: true, }, ], }, @@ -346,6 +350,7 @@ describe("transformNavGroups", () => { label: "UI Tests", order: 999, slug: "test", + isHome: false, }, ], }, @@ -392,6 +397,7 @@ describe("transformNavGroups", () => { label: "Story Modes", order: 999, slug: "modes", + isHome: false, }, ], }, @@ -430,6 +436,7 @@ describe("transformNavGroups", () => { label: "UI Tests", order: 2, slug: "test", + isHome: false, }, ], }, @@ -475,6 +482,7 @@ describe("transformNavGroups", () => { label: "Story Modes", order: 999, slug: "modes", + isHome: false, }, ], }, @@ -493,30 +501,35 @@ describe("transformNavGroups", () => { label: "Introduction", order: 1, slug: "", + isHome: true, }, { hide: false, label: "UI Tests", order: 2, slug: "test", + isHome: false, }, { hide: false, label: "UI Review", order: 3, slug: "review", + isHome: false, }, { hide: false, label: "Automate with CI", order: 4, slug: "ci", + isHome: false, }, { hide: false, label: "Diff Inspector", order: 5, slug: "diff-inspector", + isHome: false, }, ], }, @@ -581,12 +594,14 @@ describe("transformNavGroups", () => { label: "Introduction", order: 1, slug: "", + isHome: true, }, { hide: false, label: "Diff Inspector", order: 5, slug: "diff-inspector", + isHome: false, }, ], }, @@ -603,24 +618,28 @@ describe("transformNavGroups", () => { label: "Setup", order: 1, slug: "storybook", + isHome: false, }, { hide: false, label: "Interaction tests", order: 2, slug: "interactions", + isHome: false, }, { hide: false, label: "Publish", order: 3, slug: "storybook/publish", + isHome: false, }, { hide: false, label: "Composition", order: 4, slug: "composition", + isHome: false, }, { hide: false, @@ -630,24 +649,28 @@ describe("transformNavGroups", () => { label: "Story Modes", order: 1, slug: "modes", + isHome: false, }, { hide: false, label: "Themes", order: 3, slug: "themes", + isHome: false, }, { hide: false, label: "Custom decorators", order: 4, slug: "custom-decorators", + isHome: false, }, { hide: false, label: "Viewports (legacy)", order: 5, slug: "legacy-viewports", + isHome: false, }, ], order: 999, diff --git a/src/components/Navigation/transform-nav-groups.ts b/src/components/Navigation/transform-nav-groups.ts index c85996f5..3fed479d 100644 --- a/src/components/Navigation/transform-nav-groups.ts +++ b/src/components/Navigation/transform-nav-groups.ts @@ -20,6 +20,7 @@ export function transformNavItem(item: NavGroupItem): TransformedNavGroupItem { slug: item.data?.isHome ? "" : item.slug, order: item.data?.sidebar?.order || 999, hide: item.data?.sidebar?.hide || false, + isHome: item.data?.isHome || false, }; } diff --git a/src/components/Navigation/types.ts b/src/components/Navigation/types.ts index c19a190e..8e22c718 100644 --- a/src/components/Navigation/types.ts +++ b/src/components/Navigation/types.ts @@ -38,7 +38,7 @@ export type TransformedNavGroupItem = slug: string; order: number; hide: boolean; - items?: TransformedNavGroupItem[]; + isHome?: boolean; } | TransformedNavGroup; @@ -50,3 +50,9 @@ export interface TransformedNavGroup { order: number; hide: boolean; } + +export function isNestedTransformedGroup( + item: TransformedNavGroupItem, +): item is TransformedNavGroup { + return (item as TransformedNavGroup).items !== undefined; +}