import React from 'react';
import Skeleton from './index';
import styled from 'styled-components';

export default {
  title: 'Core/Controls/Skeleton',
  component: Skeleton
};

const Template = args => <Skeleton {...args} />;

export const Simple = Template.bind({});

export const InsideATitle = Template.bind({});
InsideATitle.decorators = [
  Story => (
    <h3>
      <Story />
    </h3>
  )
];

export const Round = Template.bind({});
Round.args = {
  width: 50,
  height: 50,
  round: true
};

export const CustomSize = Template.bind({});
CustomSize.args = {
  width: 400,
  height: 150
};

export const CustomSizeAsPercentage = Template.bind({});
CustomSizeAsPercentage.args = {
  width: '50%',
  height: 50
};

const StyledSkeleton = styled(Skeleton)`
  width: 50px;
  height: 100px;
`;

export const SizeDefinedByCss = () => <StyledSkeleton />;