import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Skeleton from 'components/Skeleton';
import Typography from 'components/Typography';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

<Meta title="Components API/Skeleton" component={Skeleton} />

# Skeleton

Skeleton is a placeholder for content.

<Canvas>
  <Story name="Skeleton">
    <Skeleton width={400} height={18} />
    <Skeleton width={400} height={18} />
    <Skeleton width={400} height={18} />
  </Story>
</Canvas>

<Source code="import { Skeleton } from 'cwb-react';" />

## Usage

Skeletons are an alternative to other loading indicators. Skeleton screens create anticipation of what is to come and reduce cognitive load.

<Source
  code={
    '{item ? (\n' +
    '  <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />\n' +
    ') : (\n' +
    '  <Skeleton variant="rect" width={210} height={118} />\n' +
    ')}'
  }
/>

Skeletons rendered as children of Typography components will automatically infer their dimensions. In this case, we do not need to specify `width` and `height`.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex' }}>
        <Skeleton style={{ marginRight: '8px' }} width={150} height={36} />
        <Typography variant="h1">h1</Typography>
      </div>
      <div style={{ display: 'flex', marginTop: '8px' }}>
        <Skeleton style={{ marginRight: '8px' }} width={150} height={24} />
        <Typography variant="h3">h3</Typography>
      </div>
      <div style={{ display: 'flex', marginTop: '8px' }}>
        <Skeleton style={{ marginRight: '8px' }} width={150} height={18} />
        <Typography>body</Typography>
      </div>
      <div style={{ display: 'flex', marginTop: '8px' }}>
        <Skeleton style={{ marginRight: '8px' }} width={150} height={16} />
        <Typography variant="caption">caption</Typography>
      </div>
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        `{['h1', 'h3', 'body', 'caption'].map((variant) => (\n` +
        '  <div key={variant}>\n' +
        '    <Typography variant={variant}>\n' +
        '      <Skeleton />\n' +
        '    </Typography>\n' +
        '    <Typography variant={variant}>\n' +
        '      {variant}\n' +
        '    </Typography>\n' +
        '  </div>\n' +
        '))}'
      }
    />
  </div>
</ThemeProvider>

## Props

<ArgsTable />