1 | import * as React from 'react';
|
2 | import { storiesOf } from '@storybook/react';
|
3 | import styled from 'styled-components';
|
4 |
|
5 | import { Input, GlobalStyle } from '../src';
|
6 |
|
7 | const Wrapper = styled.div`
|
8 | margin: 20px;
|
9 | padding: 90px;
|
10 | background-color: white;
|
11 | border: #ebebeb 1px solid;
|
12 | `;
|
13 |
|
14 | storiesOf('Inputs', module)
|
15 | .add('Default', () => (
|
16 | <React.Fragment>
|
17 | <GlobalStyle />
|
18 | <Wrapper>
|
19 | <Input
|
20 | type='text'
|
21 | placeholder='Placeholder'
|
22 | />
|
23 | </Wrapper>
|
24 | </React.Fragment>
|
25 | ))
|
26 | .add('password', () => (
|
27 | <React.Fragment>
|
28 | <GlobalStyle />
|
29 | <Wrapper>
|
30 | <Input
|
31 | type='password'
|
32 | placeholder='Placeholder'
|
33 | passwordType
|
34 | />
|
35 | </Wrapper>
|
36 | </React.Fragment>
|
37 | ))
|
38 | .add('disabled', () => (
|
39 | <React.Fragment>
|
40 | <GlobalStyle />
|
41 | <Wrapper>
|
42 | <Input
|
43 | type='text'
|
44 | placeholder='campo desabilitado'
|
45 | disabled
|
46 | />
|
47 | </Wrapper>
|
48 | </React.Fragment>
|
49 | ))
|
50 | .add('isInvalid', () => (
|
51 | <React.Fragment>
|
52 | <GlobalStyle />
|
53 | <Wrapper>
|
54 | <Input
|
55 | type='text'
|
56 | placeholder='CPF'
|
57 | isInvalid="Insira um CPF válido"
|
58 | value='123.456.789-10'
|
59 | css={`max-width: 360px;`}
|
60 | />
|
61 | </Wrapper>
|
62 | </React.Fragment>
|
63 | ))
|
64 | .add('isWarning', () => (
|
65 | <React.Fragment>
|
66 | <GlobalStyle />
|
67 | <Wrapper>
|
68 | <Input
|
69 | type='text'
|
70 | placeholder='CPF'
|
71 | isWarning="Insira um CPF válido"
|
72 | value='123.456.789-10'
|
73 | css={`max-width: 360px;`}
|
74 | />
|
75 | </Wrapper>
|
76 | </React.Fragment>
|
77 | )); |
\ | No newline at end of file |