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

<Meta of={LoadingSpinnerStories} />

# LoadingSpinner

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LoadingSpinner"
  figma=""
  designGuidelines=""

/>

<KAIOInstallation exportNames="LoadingSpinner" />

## Overview

LoadingSpinner will inherit its color from the parent's `color` property.

That color will become the foreground, and the background will be the same
color with 10% opacity.

When inside a button, it is intended to have the same color as the label text.

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

## API

### ClassNameOverride

Override styles, such as the colour of the spinner using `classNameOverride`.

<Canvas of={LoadingSpinnerStories.ClassNameOverride} />

Below is an example of how to apply the current color tokens used in designs.

<Canvas of={LoadingSpinnerStories.Colors} />

### Size

Generally use `"md"` (default value) unless spinner is inside a form field, in which case use `sm`. The `xs` size is for buttons or content dense layouts.

<Canvas of={LoadingSpinnerStories.Size} />