import { Canvas, DocsStory, Meta, Controls } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
import * as TitleBlockStories from './TitleBlock.stories'

<Meta title="Components/TitleBlock/Usage Guidelines" />

# TitleBlock

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TitleBlock"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082095695/TitleBlockZen"
  apiSpecification="/?path=/docs/components-titleblock-api-specification--docs"
/>

<KAIOInstallation exportNames={'TitleBlock'} />

## Overview

A consistent pattern to allow users to navigate and complete tasks easily.

<Canvas of={TitleBlockStories.Playground} />

<Controls
  of={TitleBlockStories.Playground}
  include={['avatar', 'defaultAction', 'navigationTabs', 'primaryAction', 'title']}
/>

## Examples

### Viewports

<Canvas of={TitleBlockStories.Viewports} />

### Long titles

<Canvas of={TitleBlockStories.HasLongTitle} />

### Light Variant

<Canvas of={TitleBlockStories.LightVariant} />

### Admin Variant

<Canvas of={TitleBlockStories.AdminVariant} />

### Education Variant

<Canvas of={TitleBlockStories.EducationVariant} />