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

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

# Card Usage Guidelines

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Card"
  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=1929-14084"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card"
  apiSpecification="/?path=/docs/components-card-api-specification--docs"
/>

<KAIOInstallation exportNames="Card" />

## Overview

`Card`s are used to contain related elements which can include anything from illustrations to headlines, supporting text, buttons, and lists. They have flexible layouts and dimensions based on their contents. `Card`s are elevated one or two steps above the surface.

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

## API

### Colors

<Canvas of={CardStories.Colors} />

### Elevation

<Canvas of={CardStories.Elevation} />

### isAiLoading and AI Moments

AI Moments have two visual state controlled but the `isAiLoading` prop. This will animate the Cards's border and background while `true` and remain static while `false`.

<Canvas of={CardStories.AIMoment} />

Always use this in combination with other Kaizen loading components such as `LoadingHeading`, `LoadingParagraph`, and `LoadingGraphic` to communicate loading visually.

The `Card` inherits the background color from the `color` property. Although this flexibility exists typically use should be limited to white to ensure sufficient color contrast.

#### Interactive example

<Canvas of={CardStories.InteractiveAIMoment} />