@braid-design-system/docs-ui
v3.0.0
Published
<img src="https://raw.githubusercontent.com/seek-oss/braid-design-system/HEAD/packages/docs-ui/images/braid-docs-ui-logo.svg#gh-light-mode-only" alt="Braid Docs UI" title="Braid Docs UI" width="80px"> <img src="https://raw.githubusercontent.com/seek-oss/b
Downloads
107
Readme
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
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. |