Add large prop

This commit is contained in:
Vladislav Makhov 2020-07-15 17:07:58 +03:00
parent 533935906f
commit eac05e5750
3 changed files with 10 additions and 6 deletions

View File

@ -6,7 +6,8 @@ const commonInputStyle = css`
(props.size === 'base' && '173px') ||
(props.size === 'middle' && '300px') ||
(props.size === 'big' && '350px') ||
(props.size === 'huge' && '500px')
(props.size === 'huge' && '500px') ||
(props.size === 'large' && '550px')
};
background-color: ${props => props.isDisabled ? '#F8F9F9' : '#fff'};
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};

View File

@ -37,13 +37,15 @@ const StyledInput = styled(Input).attrs((props) => ({
(props.size === 'base' && '20px') ||
(props.size === 'middle' && '20px') ||
(props.size === 'big' && '20px') ||
(props.size === 'huge' && '21px')
(props.size === 'huge' && '21px') ||
(props.size === 'large' && '21px')
};
font-size: ${props =>
(props.size === 'base' && '13px') ||
(props.size === 'middle' && '14px') ||
(props.size === 'big' && '16px') ||
(props.size === 'huge' && '18px')
(props.size === 'huge' && '18px') ||
(props.size === 'large' && '16px')
};
font-weight: ${props => props.fontWeight
@ -57,7 +59,8 @@ const StyledInput = styled(Input).attrs((props) => ({
(props.size === 'base' && '5px 7px') ||
(props.size === 'middle' && '8px 12px') ||
(props.size === 'big' && '8px 16px') ||
(props.size === 'huge' && '8px 20px')
(props.size === 'huge' && '8px 20px') ||
(props.size === 'large' && '11px 16px')
};
transition: all 0.2s ease 0s;
@ -110,7 +113,7 @@ TextInput.propTypes = {
mask: PropTypes.oneOfType([ PropTypes.array, PropTypes.func ]),
keepCharPositions: PropTypes.bool,
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']),
scale: PropTypes.bool,
onChange: PropTypes.func,

View File

@ -9,7 +9,7 @@ import TextInput from '.';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
const sizeOptions = ['base', 'middle', 'big', 'huge', 'large'];
storiesOf('Components|Input', module)
.addDecorator(withKnobs)