@braid-design-system/docs-ui NPM

docs-ui

Components for building documentation sites with a consistent user experience to the Braid Design System website.

npm install @braid-design-system/docs-ui

LinkableHeading
MenuButton
SideNavigationSection
HeaderNavigation

Usage

`LinkableHeading`

A heading wrapped in a link to a hash that is generated based on the heading content, enabling deep links within documentation pages.

Example

import { LinkableHeading } from '@braid-design-system/docs-ui';

<LinkableHeading>Section heading</LinkableHeading>;

Props

props	value	description
level	`HeadingLevel`	The heading size (defaults to `3`)
component	`string`	HTML element to render, e.g. “h1”, “h2”, etc.
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.

`MenuButton`

A hamburger button used for showing and hiding the Navigation Sidebar on mobile devices.

Example

import { MenuButton } from '@braid-design-system/docs-ui';

<MenuButton open={menuOpen} onClick={handleOnClick} />;

Props

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 manage events when the button is triggered.

`SideNavigationSection`

A navigation section containing a list of links, designed for the side bar.

import { SideNavigationSection } from '@braid-design-system/docs-ui';

<SideNavigationSection title={title} items={items} />;

Props

props	value	description
title	`string`	Title of the Navigation Section.
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.

`HeaderNavigation`

Layout for the site logo, a MenuButton on smaller screens, and an optional theme selector.

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 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.