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 |
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
exports[`component.UI.Message should render correctly with default props 1`] = ` |
exports[`component.UI.Message should render correctly with default props 1`] = ` |
||||
<Styled(Styled(styled.div)) |
<Styled(styled.div) |
||||
alignItems="center" |
fontSize="s" |
||||
|
fontWeight="normal" |
||||
> |
> |
||||
<styled.div |
<Styled(Styled(styled.div)) |
||||
mr={1} |
alignItems="center" |
||||
/> |
|
||||
<Styled(styled.div) |
|
||||
fontSize="s" |
|
||||
fontWeight="normal" |
|
||||
> |
> |
||||
|
<styled.div |
||||
|
css={ |
||||
|
Object { |
||||
|
"height": "14px", |
||||
|
} |
||||
|
} |
||||
|
mr={1} |
||||
|
width="14px" |
||||
|
/> |
||||
A message |
A message |
||||
</Styled(styled.div)> |
</Styled(Styled(styled.div))> |
||||
</Styled(Styled(styled.div))> |
</Styled(styled.div)> |
||||
`; |
`; |
||||
|
|||||
Loading…
Reference in new issue