@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

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 handle button presses (defaults to false).