import React from 'react';
import { Skeleton } from '../..';
import { Display } from '../../common/Display';
export default {
  title: 'Atoms / Skeleton',
  parameters: {
    component: Skeleton
  }
};
export var DefaultStory = {
  render: function render() {
    return React.createElement(Skeleton, {
      variant: "text",
      width: "300px"
    });
  },
  name: 'Default'
};
export var Variants = {
  render: function render() {
    return React.createElement(Display, {
      title: "Skeleton variants",
      items: [{
        title: 'Text',
        component: React.createElement(Skeleton, {
          variant: "text",
          width: "200px"
        })
      }, {
        title: 'Rect',
        component: React.createElement(Skeleton, {
          variant: "rect",
          width: "100px",
          height: 25
        })
      }, {
        title: 'Circle',
        component: React.createElement(Skeleton, {
          variant: "circle",
          width: 16,
          height: 16
        })
      }]
    });
  },
  name: 'Different variants'
};
export var Delay = {
  render: function render() {
    return React.createElement(Display, {
      title: "Skeleton with delay",
      items: [{
        title: 'Without delay',
        component: React.createElement(Skeleton, {
          variant: "rect",
          width: "100px",
          height: 25
        })
      }, {
        title: 'With default delay',
        component: React.createElement(Skeleton, {
          variant: "rect",
          width: "100px",
          height: 25,
          delay: true
        })
      }, {
        title: 'With custom delay',
        component: React.createElement(Skeleton, {
          variant: "rect",
          width: "100px",
          height: 25,
          delay: 3000
        })
      }]
    });
  },
  name: 'Skeleton with delay'
};