| 1 | import React from 'react'
|
| 2 | import { storiesOf } from '@storybook/react'
|
| 3 | import { action, decorateAction } from '@storybook/addon-actions'
|
| 4 | import { LoginComp } from '../src'
|
| 5 | import styled from 'styled-components'
|
| 6 |
|
| 7 | const Container = styled.div`
|
| 8 | display: flex;
|
| 9 | align-items: center;
|
| 10 | justify-content: center;
|
| 11 | width: 100vw;
|
| 12 | height: 100vh;
|
| 13 | `
|
| 14 |
|
| 15 | const StyledLogin = styled(LoginComp)`
|
| 16 | width: 450px;
|
| 17 | `
|
| 18 |
|
| 19 | const firstArgAction = decorateAction([arg => [JSON.stringify(arg[0])]])
|
| 20 |
|
| 21 | storiesOf('Login Component', module)
|
| 22 | .add('Standalone login', () => <LoginComp doLogin={firstArgAction('login triggered with')} />)
|
| 23 | .add('In Screen', () => (
|
| 24 | <Container>
|
| 25 | <StyledLogin doLogin={firstArgAction('login triggered with')} />
|
| 26 | </Container>
|
| 27 | ))
|
| 28 | .add('In Screen reset', () => (
|
| 29 | <Container>
|
| 30 | <StyledLogin userName="some user" reset doLogin={firstArgAction('login triggered with')} />
|
| 31 | </Container>
|
| 32 | ))
|