import React from 'react'
import { styled } from 'view-container'
import { storiesOf } from '@storybook/react'

class Component extends React.PureComponent {
  render() {
    return <div className={this.props.className}>{this.props.children}</div>
  }
}

const Eh = styled.withComponent(Component)`
  background: rebeccapurple !important;

  ${props =>
    props &&
    styled.css`
      * {
        color: hotpink !important;
      }
    `};
`

const Wow = styled.div`
  padding: 1rem;
  ${Eh.componentStyle.rules};
`

storiesOf('features/Wow', module).add('default', () => (
  <Wow children={<span>wow</span>} />
))