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, search, and optional section links.

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

<HeaderNavigation
  menuOpen={menuOpen}
  menuClick={handleMenuClick}
  onSearchClick={handleSearchClick}
  logo={<Logo />}
  navLinks={[
    { label: 'Guides', href: '/guides' },
    { label: 'Components', href: '/components', active: true },
  ]}
/>;

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. | | onSearchClick | () => void | An optional callback function to handle events when the search button is clicked. | | logo | React.ReactNode | A React component for the logo of your site. | | logoHref | string | An optional href which sets the link for when the logo is clicked. | | navLinks | Array<{  label: string  href: string  active?: boolean}> | Optional section links shown beside search on wide screens. |