Browse Source
- Reset global link styles - Support align (left, right, center) in Header component - Support label, description in Input elements - Add validation for `required` prop in Input elements - Add asterisk in label for required form inputs - Adjust icon positioning on form error messages - Ability to include logo in Modal element - Adjust size and positioning of Modal close button - Add PasswordInput - Add Span element - Coerce to string in Truncate componentnext
Tom Kirkpatrick
6 years ago
32 changed files with 535 additions and 253 deletions
@ -0,0 +1,48 @@ |
|||
/* eslint-disable react/no-multi-comp */ |
|||
|
|||
import React from 'react' |
|||
import { asField } from 'informed' |
|||
import * as yup from 'yup' |
|||
import Input from 'components/UI/Input' |
|||
|
|||
/** |
|||
* @render react |
|||
* @name PasswordInput |
|||
*/ |
|||
class PasswordInput extends React.Component { |
|||
render() { |
|||
return <Input {...this.props} type="password" /> |
|||
} |
|||
} |
|||
|
|||
const PasswordInputAsField = asField(PasswordInput) |
|||
|
|||
class WrappedPasswordInputAsField extends React.Component { |
|||
validate = value => { |
|||
const { disabled, required } = this.props |
|||
if (disabled) { |
|||
return |
|||
} |
|||
try { |
|||
let validator = yup.string().min(8) |
|||
if (required) { |
|||
validator = validator.required() |
|||
} |
|||
validator.validateSync(value) |
|||
} catch (error) { |
|||
return error.message |
|||
} |
|||
|
|||
// Run any additional validation provided by the caller.
|
|||
const { validate } = this.props |
|||
if (validate) { |
|||
return validate(value) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
return <PasswordInputAsField validate={this.validate} {...this.props} /> |
|||
} |
|||
} |
|||
|
|||
export default WrappedPasswordInputAsField |
|||
@ -0,0 +1,13 @@ |
|||
import system from '@rebass/components' |
|||
|
|||
const Span = system( |
|||
{ |
|||
as: 'span' |
|||
}, |
|||
'space', |
|||
'color', |
|||
'fontSize', |
|||
'fontWeight' |
|||
) |
|||
|
|||
export default Span |
|||
@ -1,17 +1,23 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`component.UI.Message should render correctly with default props 1`] = ` |
|||
<Styled(Styled(styled.div)) |
|||
alignItems="center" |
|||
<Styled(styled.div) |
|||
fontSize="s" |
|||
fontWeight="normal" |
|||
> |
|||
<styled.div |
|||
mr={1} |
|||
/> |
|||
<Styled(styled.div) |
|||
fontSize="s" |
|||
fontWeight="normal" |
|||
<Styled(Styled(styled.div)) |
|||
alignItems="center" |
|||
> |
|||
<styled.div |
|||
css={ |
|||
Object { |
|||
"height": "14px", |
|||
} |
|||
} |
|||
mr={1} |
|||
width="14px" |
|||
/> |
|||
A message |
|||
</Styled(styled.div)> |
|||
</Styled(Styled(styled.div))> |
|||
</Styled(Styled(styled.div))> |
|||
</Styled(styled.div)> |
|||
`; |
|||
|
|||
Loading…
Reference in new issue