@braid-design-system/docs-ui

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.