import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as StickerSheetStories from './Spot.stickersheet.stories'
import * as SpotIllustrationStories from './Spot.stories'

<Meta of={SpotIllustrationStories} />

# Spot Illustration

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Illustration"
  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=50176%3A251125&mode=design&t=5GnjF9A8Wnd9UmHY-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060340/Illustration"

/>

<KAIOInstallation exportNames="CompanyDetails" />

## Overview

Spot illustrations gives visual context to tasks. Most illustrations on our platform are presentational and should use the default empty alt text (ie: `alt=""`) provided by the base component.

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

## API

### Enabled Aspect Ratio

When enabled this wraps the image in a `figure` tag and set the aspect ratio to 1/1.

<Canvas of={SpotIllustrationStories.EnabledAspectRatio} />

When not enabled, the `img` tag will attempt to fill a width of 100%.

## All Spot illustrations

A list of all Spot illustrations and their component names. These can be imported from the root of `@kaizen/components`, ie:

`import { CustomSurvey } from "@kaizen/components"`

<Canvas of={StickerSheetStories.StickerSheetDefault} />