import { Spinner } from './Spinner';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { FONT_COLOR_OPTIONS } from '../../lib/tokens';
import { Box } from '../Box/Box';

<Meta title="Components/Spinner/Overview" component={Spinner} />

# Spinner

Spinners are used to communicate a loading state to the user.
They may be used in buttons, forms, containers, pages,
and anywhere else a loading state is necessary.

<Canvas isExpanded>
  <Spinner />
</Canvas>

## Props

<ArgsTable of={Spinner} />

## Colors

Set the color variations of the spinner

<Canvas>
  <Story name="Colors">
    <Box display="block" childGap="md">
      <Box direction="row" gap="sm">
        <Spinner color="body-primary" />
        <div>body-primary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="body-secondary" />
        <div>body-secondary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="body-tertiary" />
        <div>body-tertiary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="contrast" />
        <div>contrast</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="inverse-primary" />
        <div>inverse-primary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="inverse-secondary" />
        <div>inverse-secondary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="primary" />
        <div>primary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="success" />
        <div>success</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="info" />
        <div>info</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="disabled" />
        <div>disabled</div>
      </Box>
    </Box>
  </Story>
</Canvas>

## Sizes

Use the `size` prop on your Spinner based on what's a best fit for your layout

<Canvas>
  <Story name="Sizes">
    <Box direction="row" gap="md">
      <Box direction="row" gap="sm">
        <Spinner size="sm" />
        <div>sm</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner size="md" />
        <div>md</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner size="lg" />
        <div>lg</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner size="xl" />
        <div>xl</div>
      </Box>
    </Box>
  </Story>
</Canvas>
