import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as GuidanceBlockStories from './GuidanceBlock.stories'

<Meta of={GuidanceBlockStories} />

# GuidanceBlock

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/GuidanceBlock"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=622%3A149926&t=P1w10jr2cpPuaayw-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block"

/>

<KAIOInstallation exportNames="GuidanceBlock" />

## Overview

A Guidance Block provides a familiar layout that is visually prominent to draw attention to related content.
It guides people to new actions they haven't done before or connects them to relevant content they can view on another page.

<Canvas of={GuidanceBlockStories.Playground} />
<Controls of={GuidanceBlockStories.Playground} />

## API

### actionsSlot

The `actionsSlot` slot is used to render the GuidanceBlock's primary and secondary action. This supersedes the deprecated `actions` prop and should be used with [LinkButton](https://cultureamp.design/?path=/docs/components-linkbutton-api-specification--docs) or [Button](https://cultureamp.design/?path=/docs/components-button-button-next-api-specification--docs) component.

<Canvas of={GuidanceBlockStories.ActionsSlot} />

It is recommended that the primary and secondary actions use their respective variants (`secondary` and `tertiary`) within the Button component to ensure continuity in designs.

#### actionsSlot with tooltip

The new actionsSlot allows use to use the modern Tooltip. Refer to the [docs here](https://cultureamp.design/?path=/docs/components-tooltip-tooltip-next-api-specification--docs) for more tooltip configuration options.

<Canvas of={GuidanceBlockStories.ActionsSlotWithTooltips} />

### actions (deprecated)

The actions prop is deprecated. Use the [actionsSlot](#actionsslot) slot instead with the `LinkButton` or `Button` component instead.

<Canvas of={GuidanceBlockStories.Actions} />

#### actions (deprecated) with tooltip

<Canvas of={GuidanceBlockStories.Tooltip} />

### Custom content

<Canvas of={GuidanceBlockStories.CustomContent} />

### Stacked

<Canvas of={GuidanceBlockStories.Stacked} />

### Scene Illustrations

<Canvas of={GuidanceBlockStories.SceneExample} />

### Variants

<Canvas of={GuidanceBlockStories.Variants} />
```