import React from 'react'
import { storiesOf } from '@storybook/react'
import { Preloader, snapback } from 'features/Animations'

storiesOf('features/Animations', module)
storiesOf('features/Animations/Snapback', module).add('snapback', () => {
  const Snapback = styled.div `
    ${snapback + ''};

    background: transparent;
    transition: background 0.48s, color 0.12s, padding 0.24s, margin 0.24s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-duration: 0.48s;
    animation-direction: alternate;
    animation-fill-mode: forwards;

    &:hover {
      background: $colors-actionblue;
      color: white;
      animation-name: snapback;
    }

    color: black;
    height: 2rem;
    line-height: 2rem;
    padding: 0 $spacing;
  `

  return <Snapback children="eh" />
})

storiesOf('features/Animations/Preloader', module)
  .add('Audio', () => <Preloader breedType="audio" />)
  .add('Box', () => <Preloader breedType="box" />)
  .add('Dots', () => <Preloader breedType="preloader" />)
  .add('Circle', () => <Preloader breedType="circle" />)
  .add('Cube', () => <Preloader breedType="cube" />)
  .add('Domino', () => <Preloader breedType="domino" />)
  .add('Material Circle', () => <Preloader breedType="material-circle" />)
  .add('Material Progress', () => <Preloader breedType="material-progress" />)
  .add('Wave', () => <Preloader breedType="wave" />)