diff --git a/.changeset/orange-countries-divide.md b/.changeset/orange-countries-divide.md new file mode 100644 index 00000000000..931ac834ddf --- /dev/null +++ b/.changeset/orange-countries-divide.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/core": minor +--- + +`NavigationItem`: add `linkProps` prop to allow extending `HTMLAnchorElement`'s functionality (eg. when using `NavigationItem` with other third-party navigation libraries). diff --git a/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx b/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx index e67007d18c4..e5b8dd59cbd 100644 --- a/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx @@ -17,7 +17,24 @@ describe("GIVEN a NavItem", () => { }); }); - describe("AND `href` is NOT passed", () => { + describe("AND `href` is NOT passed AND `linkProps` is passed", () => { + it("should render a link using linkProps", () => { + cy.mount( + + Navigation Item + + ); + cy.findByRole("link").should( + "have.attr", + "href", + "https://www.saltdesignsystem.com" + ); + }); + }); + + describe("AND `href` is NOT passed AND `linkProps` is NOT passed", () => { it("should render a button", () => { cy.mount(Navigation Item); cy.findByRole("button").should("exist"); diff --git a/packages/core/src/navigation-item/ConditionalWrapper.tsx b/packages/core/src/navigation-item/ConditionalWrapper.tsx index 8aa4f7c9d86..e4adfa24017 100644 --- a/packages/core/src/navigation-item/ConditionalWrapper.tsx +++ b/packages/core/src/navigation-item/ConditionalWrapper.tsx @@ -4,7 +4,13 @@ import { NavigationItemProps } from "./NavigationItem"; interface ConditionalWrapperProps extends Pick< NavigationItemProps, - "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick" + | "parent" + | "expanded" + | "onExpand" + | "active" + | "href" + | "onClick" + | "linkProps" > { children: ReactNode; className: string; @@ -18,13 +24,14 @@ export const ConditionalWrapper = ({ onExpand, active, href, + linkProps, }: ConditionalWrapperProps) => { const handleExpand = (event: MouseEvent) => { event.stopPropagation(); onExpand?.(event); }; - return parent || href === undefined ? ( + return parent || (href === undefined && linkProps === undefined) ? (