Add logoHref prop to HeaderNavigation

seek-oss · Jan 24, 2024 · 8b1b791 · 8b1b791
1 parent 5118b2a
commit 8b1b791
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/swift-emus-fry.md b/.changeset/swift-emus-fry.md
@@ -0,0 +1,6 @@
+---
+'@braid-design-system/docs-ui': minor
+---
+
+
+Add optional `logoHref` prop to `HeaderNavigation`, which allows you to customise the route when clicking the `Logo`.
diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md
@@ -99,7 +99,8 @@ import { HeaderNavigation } from '@braid-design-system/docs-ui';
 | props       | value             | description                                                                                                   |
 | ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------- |
 | menuOpen    | `boolean`         | The Menu can either be open or closed. If open, the button will change to a close icon (defaults to `false`). |
-| menuClick   | `() => void`      | An optional callback function to handle events when the menu button is triggered.                             |
+| menuClick   | `() => void`      | An optional callback function to handle events when the menu button is clicked.                               |
 | logo        | `React.ReactNode` | A React component for the logo of your site (which should act as a link to your homepage).                    |
 | logoLabel   | `string`          | An accessibility label for the logo.                                                                          |
+| logoHref    | `string`          | An optional href which sets the link for when the logo is clicked.                                            |
 | themeToggle | `React.ReactNode` | An optional React component for a theme selector.                                                             |
diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx
@@ -7,6 +7,7 @@ interface HeaderNavigationProps {
   menuClick?: () => void;
   logo: ReactNode;
   logoLabel: string;
+  logoHref?: string;
   themeToggle?: ReactNode;
 }
 
@@ -15,6 +16,7 @@ export const HeaderNavigation = ({
   menuClick = () => {},
   logo,
   logoLabel,
+  logoHref = '/',
   themeToggle = null,
 }: HeaderNavigationProps) => (
   <Box display="flex" alignItems="center">
@@ -32,7 +34,7 @@ export const HeaderNavigation = ({
     </Hidden>
     <Box paddingRight="medium">
       <Text component="div" baseline={false}>
-        <Link href="/" tabIndex={menuOpen ? -1 : undefined}>
+        <Link href={logoHref} tabIndex={menuOpen ? -1 : undefined}>
           {logo}
           <HiddenVisually>{logoLabel}</HiddenVisually>
         </Link>