From c766eeefde07e811792fc28721c0e29460ceb9bf Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 11:30:47 +1100 Subject: [PATCH 01/21] Add WIP HeaderNavigation component --- .../HeaderNavigation/HeaderNavigation.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx new file mode 100644 index 00000000000..2ea77e2e996 --- /dev/null +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -0,0 +1,44 @@ +import type React from 'react'; +import { Box, Hidden, HiddenVisually, Link, Text } from 'braid-design-system'; +import { MenuButton } from '../MenuButton/MenuButton'; + +interface HeaderNavigationProps { + menuOpen: boolean; + menuClick: () => void; + logo: React.ReactNode; + themeToggle: React.ReactNode; +} + +export const HeaderNavigation = ({ + menuOpen, + menuClick, + logo, + themeToggle, +}: HeaderNavigationProps) => ( + // Todo - fix padding sizes + + + + + + + + + + + {logo} + Braid Logo + + + + {themeToggle} + + +); From eed2f470340bad0f6e1c376d99d80306595ab665 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 11:38:11 +1100 Subject: [PATCH 02/21] Export HeaderNavigation component --- packages/docs-ui/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/docs-ui/src/index.ts b/packages/docs-ui/src/index.ts index cb957121892..142f19a82f2 100644 --- a/packages/docs-ui/src/index.ts +++ b/packages/docs-ui/src/index.ts @@ -1,3 +1,4 @@ export { LinkableHeading } from './components/LinkableHeading/LinkableHeading'; export { MenuButton } from './components/MenuButton/MenuButton'; export { SideNavigationSection } from './components/SideNavigation/SideNavigationSection'; +export { HeaderNavigation } from './components/HeaderNavigation/HeaderNavigation'; From 3dd9b2c089e2efc72f9af1d70394279d7838868b Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 13:53:56 +1100 Subject: [PATCH 03/21] Fix component --- .../HeaderNavigation/HeaderNavigation.tsx | 42 +++++++++---------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index 2ea77e2e996..28e7d9194c0 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -16,29 +16,27 @@ export const HeaderNavigation = ({ themeToggle, }: HeaderNavigationProps) => ( // Todo - fix padding sizes - - - - - - - - - - - {logo} - Braid Logo - - + + + + - {themeToggle} + + + + + {logo} + Braid Logo + + + {themeToggle} ); From 8e7573e11b1b8385a4d6e6c3b477c7787ab093fb Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 13:54:06 +1100 Subject: [PATCH 04/21] Consume in site --- site/src/App/Navigation/Navigation.tsx | 39 ++++++-------------------- 1 file changed, 8 insertions(+), 31 deletions(-) diff --git a/site/src/App/Navigation/Navigation.tsx b/site/src/App/Navigation/Navigation.tsx index 61e4c3f5223..162be28adf9 100644 --- a/site/src/App/Navigation/Navigation.tsx +++ b/site/src/App/Navigation/Navigation.tsx @@ -1,13 +1,7 @@ import React, { useState, useRef, useEffect, forwardRef } from 'react'; import { useLocation, Outlet } from 'react-router-dom'; import { useWindowScroll, useInterval } from 'react-use'; -import { - ContentBlock, - Text, - Link, - Hidden, - HiddenVisually, -} from 'braid-src/lib/components'; +import { ContentBlock } from 'braid-src/lib/components'; // TODO: COLORMODE RELEASE // Use public import import type { BoxProps } from 'braid-src/lib/components/Box/Box'; @@ -15,7 +9,7 @@ import { Box } from 'braid-src/lib/components/Box/Box'; import { RemoveScroll } from 'react-remove-scroll'; import { SideNavigation } from 'site/App/SideNavigation/SideNavigation'; import { useScrollLock } from '../useScrollLock/useScrollLock'; -import { MenuButton } from '@braid-design-system/docs-ui'; +import { HeaderNavigation } from '@braid-design-system/docs-ui'; import { Logo } from '../Logo/Logo'; import { gutterSize, menuButtonSize, headerSpaceY } from './navigationSizes'; import * as styles from './Navigation.css'; @@ -29,29 +23,12 @@ const Header = ({ menuClick: () => void; }) => ( - - - - - - - - - - - Braid Logo - - - - - + } + themeToggle={} + /> ); From 84c1d631b00ba2626bdae9691abc9bc976bd504e Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 13:55:17 +1100 Subject: [PATCH 05/21] Remove todo --- .../docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index 28e7d9194c0..ce7e041d1e6 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -15,7 +15,6 @@ export const HeaderNavigation = ({ logo, themeToggle, }: HeaderNavigationProps) => ( - // Todo - fix padding sizes Date: Thu, 18 Jan 2024 14:03:23 +1100 Subject: [PATCH 06/21] Changeset --- .changeset/late-bats-sleep.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/late-bats-sleep.md diff --git a/.changeset/late-bats-sleep.md b/.changeset/late-bats-sleep.md new file mode 100644 index 00000000000..4cb65620664 --- /dev/null +++ b/.changeset/late-bats-sleep.md @@ -0,0 +1,5 @@ +--- +'@braid-design-system/docs-ui': minor +--- + +Add `HeaderNavigation` component, used for showing site Logo, theme picker, and displaying the `MenuButton` component on smaller screens. \ No newline at end of file From 991643c8a2b11c192b9aa44a82586a405b169f42 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 15:28:29 +1100 Subject: [PATCH 07/21] Set menuOpen prop as optional --- .../src/components/HeaderNavigation/HeaderNavigation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index ce7e041d1e6..0759386fd9e 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -3,14 +3,14 @@ import { Box, Hidden, HiddenVisually, Link, Text } from 'braid-design-system'; import { MenuButton } from '../MenuButton/MenuButton'; interface HeaderNavigationProps { - menuOpen: boolean; + menuOpen?: boolean; menuClick: () => void; logo: React.ReactNode; themeToggle: React.ReactNode; } export const HeaderNavigation = ({ - menuOpen, + menuOpen = false, menuClick, logo, themeToggle, From ec9913474f34837763b7884300aedf59a2c89f26 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 15:29:10 +1100 Subject: [PATCH 08/21] Update readme --- packages/docs-ui/README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 8e0f4d53490..82539767a34 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -12,6 +12,7 @@ npm install @braid-design-system/docs-ui - [`LinkableHeading`](#linkableheading) - [`MenuButton`](#menubutton) - [`SideNavigationSection`](#sidenavigationsection) +- [`HeaderNavigation`](#headernavigation) ## Usage @@ -75,3 +76,25 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; [`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading [Braid Design System]: https://seek-oss.github.io/braid-design-system/ + +### `HeaderNavigation` + +A navigation section containing a list of links, designed for the side bar. + +```tsx +import { SideNavigationSection } from '@braid-design-system/docs-ui'; + +; +``` + +#### Props + +| 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` | A callback function to handle presses of the menu button (defaults to `false`). | +| logo | `React.ReactNode` | A React component slot for the logo of your site (which should act as a link to your homepage). | +| themeToggle | `React.ReactNode` | A React component slot for a theme selector. | + +[`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading +[Braid Design System]: https://seek-oss.github.io/braid-design-system/ From 9e43b80bb801d9faaa0c8214a60f96d0c778d358 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 18 Jan 2024 15:37:18 +1100 Subject: [PATCH 09/21] Update readme --- packages/docs-ui/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 82539767a34..f9add3caf81 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -93,8 +93,8 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; | ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------- | | 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` | A callback function to handle presses of the menu button (defaults to `false`). | -| logo | `React.ReactNode` | A React component slot for the logo of your site (which should act as a link to your homepage). | -| themeToggle | `React.ReactNode` | A React component slot for a theme selector. | +| logo | `React.ReactNode` | A React component for the logo of your site (which should act as a link to your homepage). | +| themeToggle | `React.ReactNode` | A React component for a theme selector. | [`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading [Braid Design System]: https://seek-oss.github.io/braid-design-system/ From ea17c98a3356fa389540bdd1e1875a028c3b8882 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:38:26 +1100 Subject: [PATCH 10/21] Add code snippet to README --- packages/docs-ui/README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index f9add3caf81..eddf208fea5 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -82,9 +82,14 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; A navigation section containing a list of links, designed for the side bar. ```tsx -import { SideNavigationSection } from '@braid-design-system/docs-ui'; - -; +import { HeaderNavigation } from '@braid-design-system/docs-ui'; + +} + themeToggle={} +/>; ``` #### Props From b68064a081fcfddd1d619c1822b7595715a0ff63 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:40:33 +1100 Subject: [PATCH 11/21] Add logo label as prop --- .../src/components/HeaderNavigation/HeaderNavigation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index 0759386fd9e..0a67441825a 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -6,6 +6,7 @@ interface HeaderNavigationProps { menuOpen?: boolean; menuClick: () => void; logo: React.ReactNode; + logoLabel: string; themeToggle: React.ReactNode; } @@ -13,6 +14,7 @@ export const HeaderNavigation = ({ menuOpen = false, menuClick, logo, + logoLabel, themeToggle, }: HeaderNavigationProps) => ( @@ -32,7 +34,7 @@ export const HeaderNavigation = ({ {logo} - Braid Logo + {logoLabel} From 7398f4343069e5230f313034fe40cd80c76b5f98 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:41:30 +1100 Subject: [PATCH 12/21] Consume new prop --- site/src/App/Navigation/Navigation.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/App/Navigation/Navigation.tsx b/site/src/App/Navigation/Navigation.tsx index 162be28adf9..310fb808bf2 100644 --- a/site/src/App/Navigation/Navigation.tsx +++ b/site/src/App/Navigation/Navigation.tsx @@ -27,6 +27,7 @@ const Header = ({ menuOpen={menuOpen} menuClick={menuClick} logo={} + logoLabel="Braid Logo" themeToggle={} /> From 075f1455178096b693c5deebf94fad09f166f456 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:47:42 +1100 Subject: [PATCH 13/21] Set menuClick to optional and update readme --- packages/docs-ui/README.md | 6 ++++-- .../src/components/HeaderNavigation/HeaderNavigation.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index eddf208fea5..ab6f8c847f2 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -54,7 +54,7 @@ import { MenuButton } from '@braid-design-system/docs-ui'; | props | value | description | | ------- | ------------ | ------------------------------------------------------------------------------------------------------------- | | open | `boolean` | The Menu can either be open or closed. If open, the button will change to a close icon (defaults to `false`). | -| onClick | `() => void` | A callback function to handle button presses (defaults to `false`). | +| onClick | `() => void` | A callback function to handle button presses. | ### `SideNavigationSection` @@ -88,6 +88,7 @@ import { HeaderNavigation } from '@braid-design-system/docs-ui'; menuOpen={menuOpen} menuClick={handleMenuClick} logo={} + logoLabel="Braid Logo" themeToggle={} />; ``` @@ -97,8 +98,9 @@ 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` | A callback function to handle presses of the menu button (defaults to `false`). | +| menuClick | `() => void` | An optional callback function to handle presses of the menu button. | | logo | `React.ReactNode` | A React component for the logo of your site (which should act as a link to your homepage). | +| logoLabel | `string` | A accessibility label for the logo. | | themeToggle | `React.ReactNode` | A React component for a theme selector. | [`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index 0a67441825a..e0a4e75e731 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -4,7 +4,7 @@ import { MenuButton } from '../MenuButton/MenuButton'; interface HeaderNavigationProps { menuOpen?: boolean; - menuClick: () => void; + menuClick?: () => void; logo: React.ReactNode; logoLabel: string; themeToggle: React.ReactNode; @@ -12,7 +12,7 @@ interface HeaderNavigationProps { export const HeaderNavigation = ({ menuOpen = false, - menuClick, + menuClick = () => {}, logo, logoLabel, themeToggle, From e95dd577a525c35969bb3b2f5f1f67aa9ddd2583 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:49:15 +1100 Subject: [PATCH 14/21] Fix readme description --- packages/docs-ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index ab6f8c847f2..02e4f17245c 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -79,7 +79,7 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; ### `HeaderNavigation` -A navigation section containing a list of links, designed for the side bar. +Header Layout for the site logo, theme selector and `MenuButton`. ```tsx import { HeaderNavigation } from '@braid-design-system/docs-ui'; From 7788c933bc8db5d03493698deba31ca4b1d8e211 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:55:57 +1100 Subject: [PATCH 15/21] Update readme --- packages/docs-ui/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 02e4f17245c..25160a132a5 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -54,7 +54,7 @@ import { MenuButton } from '@braid-design-system/docs-ui'; | props | value | description | | ------- | ------------ | ------------------------------------------------------------------------------------------------------------- | | open | `boolean` | The Menu can either be open or closed. If open, the button will change to a close icon (defaults to `false`). | -| onClick | `() => void` | A callback function to handle button presses. | +| onClick | `() => void` | A callback function to manage events when the button is triggered. | ### `SideNavigationSection` @@ -98,9 +98,9 @@ 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 presses of the menu button. | +| menuClick | `() => void` | An optional callback function to handle events when the menu button is triggered. | | logo | `React.ReactNode` | A React component for the logo of your site (which should act as a link to your homepage). | -| logoLabel | `string` | A accessibility label for the logo. | +| logoLabel | `string` | An accessibility label for the logo. | | themeToggle | `React.ReactNode` | A React component for a theme selector. | [`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading From 0cadf49829562c1b57d1fd4c18346a59255b0dc3 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:56:50 +1100 Subject: [PATCH 16/21] Update description --- packages/docs-ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 25160a132a5..ebc956ddce8 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -79,7 +79,7 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; ### `HeaderNavigation` -Header Layout for the site logo, theme selector and `MenuButton`. +Header Layout for the site logo, theme selector and a `MenuButton` on smaller screens. ```tsx import { HeaderNavigation } from '@braid-design-system/docs-ui'; From 660d9be02339c1ef51b0f1866d13bc9ba34e5ece Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 10:57:39 +1100 Subject: [PATCH 17/21] Fix description --- packages/docs-ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index ebc956ddce8..11a5e2adfb6 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -79,7 +79,7 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; ### `HeaderNavigation` -Header Layout for the site logo, theme selector and a `MenuButton` on smaller screens. +Layout for the site logo, theme selector and a `MenuButton` on smaller screens. ```tsx import { HeaderNavigation } from '@braid-design-system/docs-ui'; From c215116e39a62736bdae19f065ff8584b0e804cd Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 11:00:00 +1100 Subject: [PATCH 18/21] Update readme --- packages/docs-ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 11a5e2adfb6..84f61642513 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -88,7 +88,7 @@ import { HeaderNavigation } from '@braid-design-system/docs-ui'; menuOpen={menuOpen} menuClick={handleMenuClick} logo={} - logoLabel="Braid Logo" + logoLabel={logoLabel} themeToggle={} />; ``` From f30c949a4bdc443bf1561674a4aa93aec599eb21 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 11:17:30 +1100 Subject: [PATCH 19/21] Import ReactNode instead of React --- .../src/components/HeaderNavigation/HeaderNavigation.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index e0a4e75e731..e91f90cc8ee 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -1,13 +1,13 @@ -import type React from 'react'; +import type { ReactNode } from 'react'; import { Box, Hidden, HiddenVisually, Link, Text } from 'braid-design-system'; import { MenuButton } from '../MenuButton/MenuButton'; interface HeaderNavigationProps { menuOpen?: boolean; menuClick?: () => void; - logo: React.ReactNode; + logo: ReactNode; logoLabel: string; - themeToggle: React.ReactNode; + themeToggle: ReactNode; } export const HeaderNavigation = ({ From b8933062d3a58a312df6d7abe390cef82551d1e1 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 19 Jan 2024 11:24:46 +1100 Subject: [PATCH 20/21] Make theme toggle prop optional --- packages/docs-ui/README.md | 4 ++-- .../src/components/HeaderNavigation/HeaderNavigation.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 84f61642513..5466cbcdc4f 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -79,7 +79,7 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; ### `HeaderNavigation` -Layout for the site logo, theme selector and a `MenuButton` on smaller screens. +Layout for the site logo, a `MenuButton` on smaller screens, and an optional theme selector. ```tsx import { HeaderNavigation } from '@braid-design-system/docs-ui'; @@ -101,7 +101,7 @@ import { HeaderNavigation } from '@braid-design-system/docs-ui'; | menuClick | `() => void` | An optional callback function to handle events when the menu button is triggered. | | 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. | -| themeToggle | `React.ReactNode` | A React component for a theme selector. | +| themeToggle | `React.ReactNode` | An optional React component for a theme selector. | [`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading [Braid Design System]: https://seek-oss.github.io/braid-design-system/ diff --git a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx index e91f90cc8ee..af37f271e85 100644 --- a/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -7,7 +7,7 @@ interface HeaderNavigationProps { menuClick?: () => void; logo: ReactNode; logoLabel: string; - themeToggle: ReactNode; + themeToggle?: ReactNode; } export const HeaderNavigation = ({ @@ -15,7 +15,7 @@ export const HeaderNavigation = ({ menuClick = () => {}, logo, logoLabel, - themeToggle, + themeToggle = null, }: HeaderNavigationProps) => ( From 9b212c7928b516b8634a93e0eafd5d866921c1f6 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Tue, 23 Jan 2024 15:52:40 +1100 Subject: [PATCH 21/21] Fix markdown links in readme --- packages/docs-ui/README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/docs-ui/README.md b/packages/docs-ui/README.md index 5466cbcdc4f..093dfb9866d 100644 --- a/packages/docs-ui/README.md +++ b/packages/docs-ui/README.md @@ -14,6 +14,8 @@ npm install @braid-design-system/docs-ui - [`SideNavigationSection`](#sidenavigationsection) - [`HeaderNavigation`](#headernavigation) +[Braid Design System]: https://seek-oss.github.io/braid-design-system/ + ## Usage ### `LinkableHeading` @@ -37,6 +39,8 @@ import { LinkableHeading } from '@braid-design-system/docs-ui'; | children | `string` | Visible heading content, converted to slug (e.g. “section-heading”) to be used as hash link. | | label | `string` | Override the slug used as the hash link.

_Note: If the content of the heading is more than a simple string that can be slugified, then the `label` is required._ | +[`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading + ### `MenuButton` A hamburger button used for showing and hiding the Navigation Sidebar on mobile devices. @@ -74,9 +78,6 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui'; | hideTitle | `boolean` | Optional to visually hide the group title. | | items | Array<{
  name: `string`
  path: `string`
  badge?: `'New' \| 'Deprecated'`
  onClick?: `() => void`
  target?: `string`
  active?: `boolean`
}> | An array of items in the sidebar, each linking to a specific docs page. | -[`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading -[Braid Design System]: https://seek-oss.github.io/braid-design-system/ - ### `HeaderNavigation` Layout for the site logo, a `MenuButton` on smaller screens, and an optional theme selector. @@ -102,6 +103,3 @@ import { HeaderNavigation } from '@braid-design-system/docs-ui'; | 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. | | themeToggle | `React.ReactNode` | An optional React component for a theme selector. | - -[`HeadingLevel`]: https://seek-oss.github.io/braid-design-system/components/Heading -[Braid Design System]: https://seek-oss.github.io/braid-design-system/