web: Refactoring TextInput component:
+ Moved scale as independent parameter + Changed font-size, padding by size + Added password story + Changed README.md
This commit is contained in:
parent
b3539fa70e
commit
cc0f9e0fb4
@ -33,7 +33,9 @@ Input description
|
||||
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
||||
| `size` | `object` | | `small`, `medium`, `large`, `xlarge`, `scale` | `scale` | Horizontal size limit of the input fields. |
|
||||
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
||||
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
|
||||
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
||||
|
||||
### Main Functions and use cases are:
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import Readme from './README.md';
|
||||
import { TextInput } from 'asc-web-components';
|
||||
import Section from '../../../../.storybook/decorators/section';
|
||||
|
||||
const sizeOptions = ['base', 'middle', 'big', 'huge', 'scale'];
|
||||
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||
|
||||
storiesOf('Components|Input', module)
|
||||
.addDecorator(withKnobs)
|
||||
@ -16,7 +16,7 @@ storiesOf('Components|Input', module)
|
||||
.add('text', () => (
|
||||
<Section>
|
||||
<Value
|
||||
defaultValue=""
|
||||
defaultValue="text sample"
|
||||
render={(value, onChange) => (
|
||||
<TextInput
|
||||
id={text('id', '')}
|
||||
@ -24,7 +24,8 @@ storiesOf('Components|Input', module)
|
||||
value={text('value', value)}
|
||||
placeholder={text('placeholder', 'This is placeholder')}
|
||||
maxLength={number('maxLength', 255)}
|
||||
size={select('size', sizeOptions, 'middle')}
|
||||
size={select('size', sizeOptions, 'base')}
|
||||
scale={boolean('scale', false)}
|
||||
onChange={event => {
|
||||
action('onChange')(event);
|
||||
onChange(event.target.value);
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
# Input: TextInput
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { TextInput } from 'asc-web-components';
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
Input description
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<TextInput value="text" type="password" onChange={event => alert(event.target.value)} />;
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
||||
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
||||
| `value` | `string` | ✅ | - | - | Value of the input |
|
||||
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
|
||||
| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` |
|
||||
| `onBlur` | `func` | - | - | - | Called when field is blurred |
|
||||
| `onFocus` | `func` | - | - | - | Called when field is focused |
|
||||
| `isAutofocussed` | `bool` | - | - | - | Focus the input field on initial render |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
||||
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
|
||||
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
||||
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
||||
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
|
||||
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
||||
|
||||
|
||||
### Main Functions and use cases are:
|
||||
|
||||
- Input field for single-line strings
|
||||
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Value } from 'react-value';
|
||||
import { withKnobs, boolean, text, select, number } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import { TextInput } from 'asc-web-components';
|
||||
import Section from '../../../../.storybook/decorators/section';
|
||||
|
||||
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||
|
||||
storiesOf('Components|Input', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('password', () => (
|
||||
<Section>
|
||||
<Value
|
||||
defaultValue="password sample"
|
||||
render={(value, onChange) => (
|
||||
<TextInput
|
||||
type="password"
|
||||
id={text('id', '')}
|
||||
name={text('name', '')}
|
||||
value={text('value', value)}
|
||||
placeholder={text('placeholder', 'This is placeholder')}
|
||||
maxLength={number('maxLength', 255)}
|
||||
size={select('size', sizeOptions, 'base')}
|
||||
scale={boolean('scale', false)}
|
||||
onChange={event => {
|
||||
action('onChange')(event);
|
||||
onChange(event.target.value);
|
||||
}}
|
||||
onBlur={action('onBlur')}
|
||||
onFocus={action('onFocus')}
|
||||
isAutoFocussed={boolean('isAutoFocussed', false)}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
isReadOnly={boolean('isReadOnly', false)}
|
||||
hasError={boolean('hasError', false)}
|
||||
hasWarning={boolean('hasWarning', false)}
|
||||
autoComplete={text('autoComplete', 'off')}
|
||||
tabIndex={number('tabIndex', 1)}
|
||||
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
@ -39,7 +39,8 @@ const LoginForm = props => {
|
||||
hasError={!loginValid}
|
||||
value={login}
|
||||
placeholder={loginPlaceholder}
|
||||
size='scale'
|
||||
size='huge'
|
||||
scale={true}
|
||||
isAutoFocussed={true}
|
||||
tabIndex={1}
|
||||
onChange={event => {
|
||||
@ -57,7 +58,8 @@ const LoginForm = props => {
|
||||
hasError={!passwordValid}
|
||||
value={password}
|
||||
placeholder={passwordPlaceholder}
|
||||
size='scale'
|
||||
size='huge'
|
||||
scale={true}
|
||||
tabIndex={2}
|
||||
onChange={event => {
|
||||
setPassword(event.target.value);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledInput = styled.input.attrs((props) => ({
|
||||
id: props.id,
|
||||
@ -29,21 +29,31 @@ const StyledInput = styled.input.attrs((props) => ({
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
background-color: ${props => props.isDisabled ? '#efefef' : '#fff'};
|
||||
color: ${props => props.isDisabled ? '#666562' : '#434341'}; ;
|
||||
color: ${props => props.isDisabled ? '#666562' : '#434341'};
|
||||
display: flex;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 18px;
|
||||
font-size: ${props =>
|
||||
(props.size === 'base' && '12px') ||
|
||||
(props.size === 'middle' && '14px') ||
|
||||
(props.size === 'big' && '16px') ||
|
||||
(props.size === 'huge' && '18px')
|
||||
};
|
||||
flex: 1 1 0%;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 8px 20px;
|
||||
padding: ${props =>
|
||||
(props.size === 'base' && '4px 8px') ||
|
||||
(props.size === 'middle' && '8px 12px') ||
|
||||
(props.size === 'big' && '8px 16px') ||
|
||||
(props.size === 'huge' && '8px 20px')
|
||||
};
|
||||
transition: all 0.2s ease 0s;
|
||||
width: ${props =>
|
||||
(props.scale && '100%') ||
|
||||
(props.size === 'base' && '135px') ||
|
||||
(props.size === 'middle' && '300px') ||
|
||||
(props.size === 'big' && '350px') ||
|
||||
(props.size === 'huge' && '500px') ||
|
||||
(props.size === 'scale' && '100%')
|
||||
(props.size === 'huge' && '500px')
|
||||
};
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
@ -79,7 +89,8 @@ TextInput.propTypes = {
|
||||
placeholder: PropTypes.string,
|
||||
tabIndex: PropTypes.number,
|
||||
|
||||
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'scale']),
|
||||
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
||||
scale: PropTypes.bool,
|
||||
|
||||
onChange: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
@ -97,7 +108,8 @@ TextInput.defaultProps = {
|
||||
type: 'text',
|
||||
value: '',
|
||||
maxLength: 255,
|
||||
size: 'middle',
|
||||
size: 'base',
|
||||
scale: false,
|
||||
tabIndex: -1,
|
||||
hasError: false,
|
||||
hasWarning: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user