diff --git a/packages/propel/src/components/navigation-menu/index.tsx b/packages/propel/src/components/navigation-menu/index.tsx index 2360a7e0..a64e7554 100644 --- a/packages/propel/src/components/navigation-menu/index.tsx +++ b/packages/propel/src/components/navigation-menu/index.tsx @@ -7,16 +7,24 @@ export { type NavigationMenuArrowProps, NavigationMenuContent, type NavigationMenuContentProps, + NavigationMenuContentList, + type NavigationMenuContentListProps, NavigationMenuIcon, type NavigationMenuIconProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, + NavigationMenuLinkDescription, + type NavigationMenuLinkDescriptionProps, + NavigationMenuLinkTitle, + type NavigationMenuLinkTitleProps, NavigationMenuList, type NavigationMenuListProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, + NavigationMenuTriggerLabel, + type NavigationMenuTriggerLabelProps, NavigationMenuViewport, type NavigationMenuViewportProps, } from "../../ui/navigation-menu"; diff --git a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx index 8e2ceb22..e1c0955b 100644 --- a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx +++ b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx @@ -6,12 +6,16 @@ import { expect, waitFor } from "storybook/test"; import { NavigationMenu, NavigationMenuContent, + NavigationMenuContentList, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, + NavigationMenuLinkDescription, + NavigationMenuLinkTitle, NavigationMenuList, NavigationMenuPanel, NavigationMenuTrigger, + NavigationMenuTriggerLabel, NavigationMenuViewport, } from "./index"; @@ -24,8 +28,14 @@ const meta = { subcomponents: { NavigationMenuList, NavigationMenuItem, + NavigationMenuTrigger, + NavigationMenuTriggerLabel, + NavigationMenuIcon, NavigationMenuContent, + NavigationMenuContentList, NavigationMenuLink, + NavigationMenuLinkTitle, + NavigationMenuLinkDescription, NavigationMenuPanel, }, parameters: { @@ -80,7 +90,31 @@ const RESOURCE_LINKS = [ // navigates the page, tears down the iframe, and fails unrelated stories. const cancelNavigation = (event: React.MouseEvent) => event.preventDefault(); -/** Two dropdown items plus a bare top-level link, opening into the shared `NavigationMenuPanel`. */ +/** A rich content link pairing a title with a description, wrapped in its list item. */ +function ContentLink({ href, title, description }: (typeof PRODUCT_LINKS)[number]) { + return ( +
  • + }> + {title} + {description} + +
    • + ); +} + +/** A trigger row that pairs the label with the rotating disclosure caret. */ +function TriggerRow({ children }: { children: React.ReactNode }) { + return ( + + {children} + + + + + ); +} + +/** Two menu items plus a bare top-level link, opening into the shared `NavigationMenuPanel`. */ export const Default: Story = { render: () => ( @@ -90,12 +124,7 @@ export const Default: Story = { @@ -104,21 +133,19 @@ export const Default: Story = { Resources -
      + {RESOURCE_LINKS.map((item) => ( -
    • - }> - {item.title} - {item.description} - -
      • + ))} -
    +     - }> + } + > Pricing @@ -160,15 +187,18 @@ export const OpenContent: Story = { Product -
      + {PRODUCT_LINKS.map((item) => (
    • - }> - {item.title} + } + > + {item.title}
      • ))} -
    +     @@ -190,15 +220,3 @@ export const OpenContent: Story = { }); }, }; - -/** A trigger row that pairs the label with the rotating disclosure caret. */ -function TriggerRow({ children }: { children: React.ReactNode }) { - return ( - - {children} - - - - - ); -} diff --git a/packages/propel/src/ui/navigation-menu/index.tsx b/packages/propel/src/ui/navigation-menu/index.tsx index 3662af1e..91ce357d 100644 --- a/packages/propel/src/ui/navigation-menu/index.tsx +++ b/packages/propel/src/ui/navigation-menu/index.tsx @@ -5,9 +5,21 @@ export { type NavigationMenuBackdropProps, } from "./navigation-menu-backdrop"; export { NavigationMenuContent, type NavigationMenuContentProps } from "./navigation-menu-content"; +export { + NavigationMenuContentList, + type NavigationMenuContentListProps, +} from "./navigation-menu-content-list"; export { NavigationMenuIcon, type NavigationMenuIconProps } from "./navigation-menu-icon"; export { NavigationMenuItem, type NavigationMenuItemProps } from "./navigation-menu-item"; export { NavigationMenuLink, type NavigationMenuLinkProps } from "./navigation-menu-link"; +export { + NavigationMenuLinkDescription, + type NavigationMenuLinkDescriptionProps, +} from "./navigation-menu-link-description"; +export { + NavigationMenuLinkTitle, + type NavigationMenuLinkTitleProps, +} from "./navigation-menu-link-title"; export { NavigationMenuList, type NavigationMenuListProps } from "./navigation-menu-list"; export { NavigationMenuPopup, type NavigationMenuPopupProps } from "./navigation-menu-popup"; export { NavigationMenuPortal, type NavigationMenuPortalProps } from "./navigation-menu-portal"; @@ -16,6 +28,10 @@ export { type NavigationMenuPositionerProps, } from "./navigation-menu-positioner"; export { NavigationMenuTrigger, type NavigationMenuTriggerProps } from "./navigation-menu-trigger"; +export { + NavigationMenuTriggerLabel, + type NavigationMenuTriggerLabelProps, +} from "./navigation-menu-trigger-label"; export { NavigationMenuViewport, type NavigationMenuViewportProps, diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-content-list.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-content-list.tsx new file mode 100644 index 00000000..c3472f6c --- /dev/null +++ b/packages/propel/src/ui/navigation-menu/navigation-menu-content-list.tsx @@ -0,0 +1,17 @@ +import type * as React from "react"; + +import { navigationMenuContentListVariants } from "./variants"; + +export type NavigationMenuContentListProps = Omit< + React.ComponentPropsWithoutRef<"ul">, + "className" | "style" +>; + +/** + * The vertical list of links inside a `NavigationMenuContent` panel. Stacks its items with a + * consistent gap; the surrounding `NavigationMenuPopup` owns the padding. Renders a `