import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { FormGroup, Flexy } from '../index'
import Skeleton from './'

<Meta
  title="Components/Structural/Skeleton"
  component={Skeleton}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A10618',
    },
  }}
/>

# Skeleton

A Skeleton component is a placeholder component, typically used in loading states.

<Canvas>
  <Story name="default">
    <div style={{ width: 300 }}>
      <Flexy>
        <Flexy.Item>
          <Skeleton.Avatar size="lg" />
        </Flexy.Item>
        <Flexy.Block>
          <Skeleton.Heading width="70%" />
          <Skeleton.Text width="40%" />
        </Flexy.Block>
      </Flexy>
      <Skeleton.Paragraph />
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: customers, Beacon2

<br />
<br />

## Components

The default `export` of Skeleton is a plain JS-object, which contains a collection of Skeleton components.

### Avatar

A Skeleton.Avatar component is a placeholder component for [Avatar]

<Canvas>
  <Story name="Avatar">
    <div>
      <Skeleton.Avatar size="lg" />
      <Skeleton.Avatar size="md" />
      <Skeleton.Avatar size="sm" />
    </div>
  </Story>
</Canvas>

<ArgsTable of={Skeleton.Avatar} />

### Block

A Skeleton.Block component is the main base used to construct Skeleton component UI.

<ArgsTable of={Skeleton.Block} />

### Control

A Skeleton.Control component is a placeholder component for form/control-based UI.

<Canvas>
  <Story name="Control">
    <div style={{ width: 300 }}>
      <FormGroup>
        <Skeleton.Control size="sm" style={{ marginBottom: 5 }} />
        <Skeleton.Control size="sm" />
      </FormGroup>
      <FormGroup>
        <Skeleton.Control />
      </FormGroup>
    </div>
  </Story>
</Canvas>

<ArgsTable of={Skeleton.Control} />

### Heading

A Skeleton.Heading component is a placeholder component [Heading](../../Heading) UI.

<ArgsTable of={Skeleton.Heading} />

<Canvas>
  <Story name="Heading">
    <div>
      <Skeleton.Heading width="70%" />
    </div>
  </Story>
</Canvas>

### Image

A Skeleton.Image component is a placeholder component [Image](../../Image) UI.

<Canvas>
  <Story name="Image">
    <div style={{ width: 300 }}>
      <Skeleton.Heading />
      <Skeleton.Heading size="md" />
    </div>
  </Story>
</Canvas>

<ArgsTable of={Skeleton.Image} />

### Paragraph

A Skeleton.Paragraph component is a placeholder component for multiple [Skeleton.Text](./Text) UI.

<Canvas>
  <Story name="Paragraph">
    <div>
      <Skeleton.Paragraph />
    </div>
  </Story>
</Canvas>

<ArgsTable of={Skeleton.Paragraph} />

### Text

A Skeleton.Text component is a placeholder component [Text](../../Text) UI.

<Canvas>
  <Story name="Text">
    <div>
      <Skeleton.Text width="70%" />
    </div>
  </Story>
</Canvas>

<ArgsTable of={Skeleton.Text} />
