Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add HeaderNavigation component to docs-ui #1429

Merged
merged 21 commits into from
Jan 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/late-bats-sleep.md
Original file line number Diff line number Diff line change
@@ -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.
34 changes: 31 additions & 3 deletions packages/docs-ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ npm install @braid-design-system/docs-ui
- [`LinkableHeading`](#linkableheading)
- [`MenuButton`](#menubutton)
- [`SideNavigationSection`](#sidenavigationsection)
- [`HeaderNavigation`](#headernavigation)

[Braid Design System]: https://seek-oss.github.io/braid-design-system/

## Usage

Expand All @@ -36,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.<br/><br/>_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.
Expand All @@ -53,7 +58,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 manage events when the button is triggered. |

### `SideNavigationSection`

Expand All @@ -73,5 +78,28 @@ import { SideNavigationSection } from '@braid-design-system/docs-ui';
| hideTitle | `boolean` | Optional to visually hide the group title. |
| items | Array<{<br/>&nbsp;&nbsp;name: `string`<br/>&nbsp;&nbsp;path: `string`<br/>&nbsp;&nbsp;badge?: `'New' \| 'Deprecated'`<br/>&nbsp;&nbsp;onClick?: `() => void`<br/>&nbsp;&nbsp;target?: `string`<br/>&nbsp;&nbsp;active?: `boolean`<br/>}> | 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.

```tsx
import { HeaderNavigation } from '@braid-design-system/docs-ui';

<HeaderNavigation
menuOpen={menuOpen}
menuClick={handleMenuClick}
logo={<Logo />}
logoLabel={logoLabel}
themeToggle={<ThemeToggle />}
/>;
```

#### 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` | 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` | An optional React component for a theme selector. |
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
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: ReactNode;
logoLabel: string;
themeToggle?: ReactNode;
}

export const HeaderNavigation = ({
menuOpen = false,
menuClick = () => {},
logo,
logoLabel,
themeToggle = null,
}: HeaderNavigationProps) => (
<Box display="flex" alignItems="center">
<Hidden print>
<Box
paddingRight="medium"
display={{
mobile: 'flex',
wide: 'none',
}}
alignItems="center"
>
<MenuButton open={menuOpen} onClick={menuClick} />
</Box>
</Hidden>
<Box paddingRight="medium">
<Text component="div" baseline={false}>
<Link href="/" tabIndex={menuOpen ? -1 : undefined}>
{logo}
<HiddenVisually>{logoLabel}</HiddenVisually>
</Link>
</Text>
</Box>
{themeToggle}
</Box>
);
1 change: 1 addition & 0 deletions packages/docs-ui/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
40 changes: 9 additions & 31 deletions site/src/App/Navigation/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
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';
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';
Expand All @@ -29,29 +23,13 @@ const Header = ({
menuClick: () => void;
}) => (
<Box paddingY={headerSpaceY} paddingX={gutterSize}>
<Box display="flex" alignItems="center">
<Hidden print>
<Box
paddingRight="medium"
display={{
mobile: 'flex',
wide: 'none',
}}
alignItems="center"
>
<MenuButton open={menuOpen} onClick={menuClick} />
</Box>
</Hidden>
<Box paddingRight="medium">
<Text component="div" baseline={false}>
<Link href="/" tabIndex={menuOpen ? -1 : undefined}>
<Logo iconOnly height={menuButtonSize} />
<HiddenVisually>Braid Logo</HiddenVisually>
</Link>
</Text>
</Box>
<ThemeToggle />
</Box>
<HeaderNavigation
menuOpen={menuOpen}
menuClick={menuClick}
logo={<Logo iconOnly height={menuButtonSize} />}
logoLabel="Braid Logo"
themeToggle={<ThemeToggle />}
/>
</Box>
);

Expand Down