3.0.0 • Published 9 months ago

@braid-design-system/docs-ui v3.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

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

propsvaluedescription
levelHeadingLevelThe heading size (defaults to 3)
componentstringHTML element to render, e.g. h1, h2, etc.
childrenstringVisible heading content, converted to slug (e.g. section-heading) to be used as hash link.
labelstringOverride 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

propsvaluedescription
openbooleanThe Menu can either be open or closed. If open, the button will change to a close icon (defaults to false).
onClick() => voidA 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

propsvaluedescription
titlestringTitle of the Navigation Section.
hideTitlebooleanOptional to visually hide the group title.
itemsArray<{  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

propsvaluedescription
menuOpenbooleanThe Menu can either be open or closed. If open, the button will change to a close icon (defaults to false).
menuClick() => voidAn optional callback function to handle events when the menu button is clicked.
logoReact.ReactNodeA React component for the logo of your site (which should act as a link to your homepage).
logoLabelstringAn accessibility label for the logo.
logoHrefstringAn optional href which sets the link for when the logo is clicked.
themeToggleReact.ReactNodeAn optional React component for a theme selector.