Tom Kirkpatrick
6 years ago
21 changed files with 1224 additions and 2 deletions
@ -0,0 +1,43 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { Box, Flex } from 'rebass' |
||||
|
import SystemSuccess from 'components/Icon/SystemSuccess' |
||||
|
import SystemWarning from 'components/Icon/SystemWarning' |
||||
|
import SystemError from 'components/Icon/SystemError' |
||||
|
|
||||
|
import styled from 'styled-components' |
||||
|
import { variant } from 'styled-system' |
||||
|
|
||||
|
const messageStyle = variant({ key: 'messages' }) |
||||
|
const Message = styled(Flex)(messageStyle) |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name FormFieldMessage |
||||
|
* @example |
||||
|
* <FormFieldMessage message="Error message" /> |
||||
|
*/ |
||||
|
class FormFieldMessage extends React.Component { |
||||
|
static displayName = 'FormFieldMessage' |
||||
|
|
||||
|
static propTypes = { |
||||
|
variant: PropTypes.string, |
||||
|
children: PropTypes.node |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { children, variant } = this.props |
||||
|
return ( |
||||
|
<Message {...this.props} variant={variant}> |
||||
|
<Box mr={1}> |
||||
|
{variant === 'success' && <SystemSuccess />} |
||||
|
{variant === 'warning' && <SystemWarning />} |
||||
|
{variant === 'error' && <SystemError />} |
||||
|
</Box> |
||||
|
{children} |
||||
|
</Message> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default FormFieldMessage |
||||
@ -0,0 +1,90 @@ |
|||||
|
import React from 'react' |
||||
|
import { asField } from 'informed' |
||||
|
import { Input as Base } from 'styled-system-html' |
||||
|
import { withTheme } from 'styled-components' |
||||
|
import { Flex } from 'rebass' |
||||
|
import FormFieldMessage from 'components/UI/FormFieldMessage' |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name Input |
||||
|
* @example |
||||
|
* <Input /> |
||||
|
*/ |
||||
|
class Input extends React.PureComponent { |
||||
|
static displayName = 'Input' |
||||
|
|
||||
|
render() { |
||||
|
const { |
||||
|
onChange, |
||||
|
onBlur, |
||||
|
initialValue, |
||||
|
field, |
||||
|
forwardedRef, |
||||
|
theme, |
||||
|
fieldApi, |
||||
|
fieldState, |
||||
|
justifyContent, |
||||
|
...rest |
||||
|
} = this.props |
||||
|
const { setValue, setTouched } = fieldApi |
||||
|
const { value } = fieldState |
||||
|
|
||||
|
let borderColor |
||||
|
|
||||
|
if (fieldState.touched) { |
||||
|
if (fieldState.error) { |
||||
|
borderColor = theme.colors.superRed |
||||
|
} else if (value && !fieldState.error) { |
||||
|
borderColor = theme.colors.superGreen |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Flex flexDirection="column" justifyContent={justifyContent}> |
||||
|
<Base |
||||
|
outline="none" |
||||
|
borderRadius="5px" |
||||
|
borderColor={borderColor || theme.colors.white} |
||||
|
border="1px solid white" |
||||
|
bg="transparent" |
||||
|
color="white" |
||||
|
p={3} |
||||
|
type="text" |
||||
|
fontSize="m" |
||||
|
width={1} |
||||
|
css={{ |
||||
|
'&:focus': { |
||||
|
outline: 'none', |
||||
|
border: `1px solid ${borderColor || theme.colors.lightningOrange} }` |
||||
|
} |
||||
|
}} |
||||
|
{...rest} |
||||
|
value={!value && value !== 0 ? '' : value} |
||||
|
name={field} |
||||
|
ref={forwardedRef} |
||||
|
onChange={e => { |
||||
|
setValue(e.target.value) |
||||
|
if (onChange) { |
||||
|
onChange(e) |
||||
|
} |
||||
|
}} |
||||
|
onBlur={e => { |
||||
|
setTouched() |
||||
|
if (onBlur) { |
||||
|
onBlur(e) |
||||
|
} |
||||
|
}} |
||||
|
error={fieldState.error} |
||||
|
/> |
||||
|
{fieldState.error && ( |
||||
|
<FormFieldMessage variant="error" justifyContent={justifyContent}> |
||||
|
{fieldState.error} |
||||
|
</FormFieldMessage> |
||||
|
)} |
||||
|
</Flex> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default asField(withTheme(Input)) |
||||
@ -0,0 +1,20 @@ |
|||||
|
import React from 'react' |
||||
|
import { Label as Base } from 'styled-system-html' |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name Label |
||||
|
* @example |
||||
|
* <Label /> |
||||
|
*/ |
||||
|
class Label extends React.Component { |
||||
|
static displayName = 'Label' |
||||
|
|
||||
|
render() { |
||||
|
return ( |
||||
|
<Base css={{ display: 'block' }} color="white" fontWeight="bold" mb={1} {...this.props} /> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Label |
||||
@ -0,0 +1,57 @@ |
|||||
|
import React from 'react' |
||||
|
import { asField } from 'informed' |
||||
|
import styled, { withTheme } from 'styled-components' |
||||
|
|
||||
|
const Input = styled.input` |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
appearance: none; |
||||
|
outline: none; |
||||
|
|
||||
|
::-webkit-slider-runnable-track { |
||||
|
height: 8px; |
||||
|
appearance: none; |
||||
|
background-color: ${props => props.theme.colors.gray}; |
||||
|
margin-top: -1px; |
||||
|
} |
||||
|
|
||||
|
::-webkit-slider-thumb { |
||||
|
width: 8px; |
||||
|
appearance: none; |
||||
|
height: 8px; |
||||
|
cursor: ew-resize; |
||||
|
background: ${props => props.theme.colors.white}; |
||||
|
box-shadow: -1000px 0 0 1000px orange; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const Range = asField(({ fieldState, fieldApi, ...props }) => { |
||||
|
const { value } = fieldState |
||||
|
const { setValue, setTouched } = fieldApi |
||||
|
const { onChange, onBlur, initialValue, forwardedRef, ...rest } = props |
||||
|
return ( |
||||
|
<Input |
||||
|
{...rest} |
||||
|
type="range" |
||||
|
min={0} |
||||
|
max={100} |
||||
|
step={1} |
||||
|
ref={forwardedRef} |
||||
|
value={value || initialValue || '0'} |
||||
|
onChange={e => { |
||||
|
setValue(e.target.value) |
||||
|
if (onChange) { |
||||
|
onChange(e) |
||||
|
} |
||||
|
}} |
||||
|
onBlur={e => { |
||||
|
setTouched() |
||||
|
if (onBlur) { |
||||
|
onBlur(e) |
||||
|
} |
||||
|
}} |
||||
|
/> |
||||
|
) |
||||
|
}) |
||||
|
|
||||
|
export default withTheme(Range) |
||||
@ -0,0 +1,156 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { asField } from 'informed' |
||||
|
import Input from 'components/UI/Input' |
||||
|
import styled, { withTheme } from 'styled-components' |
||||
|
import Downshift from 'downshift' |
||||
|
import { Box } from 'rebass' |
||||
|
import system from '@rebass/components' |
||||
|
|
||||
|
const SelectOptionList = styled.ul` |
||||
|
padding: 0; |
||||
|
margin-top: 0; |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
width: 100%; |
||||
|
max-height: 20rem; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
outline: 0; |
||||
|
transition: opacity 0.1s ease; |
||||
|
border: ${props => (props.isOpen ? null : 'none')}; |
||||
|
background-color: ${props => props.theme.colors.lightestBackground}; |
||||
|
` |
||||
|
|
||||
|
const SelectOptionItem = styled( |
||||
|
system( |
||||
|
{ |
||||
|
extend: Box, |
||||
|
as: 'li', |
||||
|
p: 3, |
||||
|
backgroundColor: 'lightestBackground' |
||||
|
}, |
||||
|
'space', |
||||
|
'color' |
||||
|
) |
||||
|
)` |
||||
|
outline: none; |
||||
|
cursor: pointer; |
||||
|
` |
||||
|
|
||||
|
const ControllerButton = styled('button')({ |
||||
|
backgroundColor: 'transparent', |
||||
|
border: 'none', |
||||
|
position: 'absolute', |
||||
|
right: '5px', |
||||
|
top: 0, |
||||
|
cursor: 'pointer', |
||||
|
width: '47px', |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
height: '50px', |
||||
|
justifyContent: 'center', |
||||
|
alignItems: 'center', |
||||
|
outline: 'none' |
||||
|
}) |
||||
|
|
||||
|
const ArrowIcon = ({ isOpen }) => ( |
||||
|
<svg |
||||
|
viewBox="0 0 20 20" |
||||
|
preserveAspectRatio="none" |
||||
|
width={16} |
||||
|
fill="transparent" |
||||
|
stroke="#979797" |
||||
|
strokeWidth="1.1px" |
||||
|
transform={isOpen ? 'rotate(180)' : null} |
||||
|
> |
||||
|
<path d="M1,6 L10,15 L19,6" /> |
||||
|
</svg> |
||||
|
) |
||||
|
ArrowIcon.propTypes = { |
||||
|
isOpen: PropTypes.bool |
||||
|
} |
||||
|
|
||||
|
const itemToString = item => (item ? item.value : '') |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name Select |
||||
|
*/ |
||||
|
class Select extends React.PureComponent { |
||||
|
static displayName = 'Select' |
||||
|
|
||||
|
static defaultProps = { |
||||
|
items: [] |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { fieldApi, items, theme, ...rest } = this.props |
||||
|
return ( |
||||
|
<Downshift |
||||
|
itemToString={itemToString} |
||||
|
// When an item is selected, set the item in the Informed form state.
|
||||
|
onSelect={item => fieldApi.setValue(item.value)} |
||||
|
// If an invalid value has been typed into the input, set it back to the currently slected item.
|
||||
|
onInputValueChange={(inputValue, stateAndHelpers) => { |
||||
|
if (inputValue && inputValue !== itemToString(stateAndHelpers.selectedItem)) { |
||||
|
fieldApi.setValue(itemToString(stateAndHelpers.selectedItem)) |
||||
|
} |
||||
|
}} |
||||
|
> |
||||
|
{({ |
||||
|
getInputProps, |
||||
|
getItemProps, |
||||
|
getMenuProps, |
||||
|
getToggleButtonProps, |
||||
|
isOpen, |
||||
|
highlightedIndex, |
||||
|
selectedItem, |
||||
|
openMenu, |
||||
|
closeMenu, |
||||
|
toggleMenu |
||||
|
}) => ( |
||||
|
<div style={{ position: 'relative' }}> |
||||
|
<div style={{ position: 'relative' }}> |
||||
|
<ControllerButton {...getToggleButtonProps()}> |
||||
|
<ArrowIcon isOpen={isOpen} /> |
||||
|
</ControllerButton> |
||||
|
<Input |
||||
|
placeholder="Please select" |
||||
|
{...rest} |
||||
|
{...getInputProps({ |
||||
|
onBlur: closeMenu, |
||||
|
onFocus: openMenu, |
||||
|
onMouseDown: toggleMenu |
||||
|
})} |
||||
|
/> |
||||
|
</div> |
||||
|
<SelectOptionList {...getMenuProps()}> |
||||
|
{isOpen |
||||
|
? items.map((item, index) => ( |
||||
|
<SelectOptionItem |
||||
|
key="" |
||||
|
{...getItemProps({ |
||||
|
key: item.value, |
||||
|
index, |
||||
|
item |
||||
|
})} |
||||
|
style={{ |
||||
|
backgroundColor: |
||||
|
highlightedIndex === index ? theme.colors.lightningOrange : null, |
||||
|
fontWeight: selectedItem === item ? 'bold' : 'normal' |
||||
|
}} |
||||
|
> |
||||
|
{item.label || item.value} |
||||
|
</SelectOptionItem> |
||||
|
)) |
||||
|
: null} |
||||
|
</SelectOptionList> |
||||
|
</div> |
||||
|
)} |
||||
|
</Downshift> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default withTheme(asField(Select)) |
||||
@ -0,0 +1,86 @@ |
|||||
|
import React from 'react' |
||||
|
import { asField } from 'informed' |
||||
|
import { TextArea as Base } from 'styled-system-html' |
||||
|
import { withTheme } from 'styled-components' |
||||
|
import { Flex } from 'rebass' |
||||
|
import FormFieldMessage from 'components/UI/FormFieldMessage' |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name TextArea |
||||
|
* @example |
||||
|
* <TextArea /> |
||||
|
*/ |
||||
|
class TextArea extends React.PureComponent { |
||||
|
static displayName = 'TextArea' |
||||
|
|
||||
|
render() { |
||||
|
const { |
||||
|
onChange, |
||||
|
onBlur, |
||||
|
initialValue, |
||||
|
forwardedRef, |
||||
|
theme, |
||||
|
fieldApi, |
||||
|
fieldState, |
||||
|
justifyContent, |
||||
|
...rest |
||||
|
} = this.props |
||||
|
const { setValue, setTouched } = fieldApi |
||||
|
const { value } = fieldState |
||||
|
|
||||
|
let borderColor |
||||
|
if (fieldState.error) { |
||||
|
borderColor = theme.colors.superRed |
||||
|
} else if (value && !fieldState.error) { |
||||
|
borderColor = theme.colors.superGreen |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Flex flexDirection="column" justifyContent={justifyContent}> |
||||
|
<Base |
||||
|
outline="none" |
||||
|
borderRadius="5px" |
||||
|
borderColor={borderColor || theme.colors.white} |
||||
|
border="1px solid white" |
||||
|
bg="transparent" |
||||
|
color="white" |
||||
|
p={3} |
||||
|
type="text" |
||||
|
fontSize="m" |
||||
|
width={1} |
||||
|
rows="5" |
||||
|
css={{ |
||||
|
'&:focus': { |
||||
|
outline: 'none', |
||||
|
border: `1px solid ${borderColor || theme.colors.lightningOrange} }` |
||||
|
} |
||||
|
}} |
||||
|
{...rest} |
||||
|
ref={forwardedRef} |
||||
|
value={!value && value !== 0 ? '' : value} |
||||
|
onChange={e => { |
||||
|
setValue(e.target.value) |
||||
|
if (onChange) { |
||||
|
onChange(e) |
||||
|
} |
||||
|
}} |
||||
|
onBlur={e => { |
||||
|
setTouched() |
||||
|
if (onBlur) { |
||||
|
onBlur(e) |
||||
|
} |
||||
|
}} |
||||
|
error={fieldState.error} |
||||
|
/> |
||||
|
{fieldState.error && ( |
||||
|
<FormFieldMessage variant="error" justifyContent={justifyContent}> |
||||
|
{fieldState.error} |
||||
|
</FormFieldMessage> |
||||
|
)} |
||||
|
</Flex> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default asField(withTheme(TextArea)) |
||||
@ -0,0 +1,70 @@ |
|||||
|
import React from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
import { Checkbox, asField } from 'informed' |
||||
|
|
||||
|
const Wrapper = styled.div` |
||||
|
position: relative; |
||||
|
|
||||
|
.switch { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: 35px; |
||||
|
height: 22px; |
||||
|
} |
||||
|
|
||||
|
.switch input { |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
.slider { |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: ${props => props.theme.colors.gray}; |
||||
|
transition: 0.4s; |
||||
|
border-radius: 34px; |
||||
|
} |
||||
|
|
||||
|
.slider:before { |
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
height: 20px; |
||||
|
width: 20px; |
||||
|
left: 1px; |
||||
|
bottom: 1px; |
||||
|
background-color: white; |
||||
|
transition: 0.4s; |
||||
|
border-radius: 50%; |
||||
|
box-shadow: 1px 1px 3px ${props => props.theme.colors.invisibleGray}; |
||||
|
} |
||||
|
|
||||
|
input:checked + .slider { |
||||
|
background-color: ${props => props.theme.colors.superGreen}; |
||||
|
} |
||||
|
|
||||
|
input:focus + .slider { |
||||
|
box-shadow: 0 0 1px #2196f3; |
||||
|
} |
||||
|
|
||||
|
input:checked + .slider:before { |
||||
|
transform: translateX(13px); |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const Toggle = ({ fieldState, ...props }) => ( |
||||
|
<Wrapper> |
||||
|
<label // eslint-disable-line jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control
|
||||
|
className="switch" |
||||
|
> |
||||
|
<Checkbox type="checkbox" fieldState={fieldState} {...props} /> |
||||
|
<span className="slider round" /> |
||||
|
</label> |
||||
|
</Wrapper> |
||||
|
) |
||||
|
|
||||
|
export default asField(Toggle) |
||||
@ -0,0 +1,140 @@ |
|||||
|
import React from 'react' |
||||
|
import { storiesOf } from '@storybook/react' |
||||
|
import { action } from '@storybook/addon-actions' |
||||
|
import { Box } from 'rebass' |
||||
|
import Page from 'components/UI/Page' |
||||
|
import MainContent from 'components/UI/MainContent' |
||||
|
import Input from 'components/UI/Input' |
||||
|
import Label from 'components/UI/Label' |
||||
|
import Select from 'components/UI/Select' |
||||
|
import TextArea from 'components/UI/TextArea' |
||||
|
import Button from 'components/UI/Button' |
||||
|
import Toggle from 'components/UI/Toggle' |
||||
|
import Range from 'components/UI/Range' |
||||
|
import { Form } from 'informed' |
||||
|
|
||||
|
const validate = value => { |
||||
|
return !value || value.length < 5 ? 'Field must be at least five characters' : null |
||||
|
} |
||||
|
|
||||
|
const selectItems = [ |
||||
|
{ label: '- Please select -', value: '' }, |
||||
|
{ label: 'Apple', value: 'apple' }, |
||||
|
{ value: 'pear' }, |
||||
|
{ value: 'orange' }, |
||||
|
{ value: 'grape' }, |
||||
|
{ value: 'banana' } |
||||
|
] |
||||
|
|
||||
|
storiesOf('Components.Form', module) |
||||
|
.add('Input', () => ( |
||||
|
<Form> |
||||
|
<Input field="fieldName" id="field-name" /> |
||||
|
</Form> |
||||
|
)) |
||||
|
.add('Label', () => ( |
||||
|
<Form> |
||||
|
<Label htmlFor="id">Label</Label> |
||||
|
</Form> |
||||
|
)) |
||||
|
.add('TextArea', () => ( |
||||
|
<Form> |
||||
|
<TextArea field="fieldName" placeholder="Type here" /> |
||||
|
</Form> |
||||
|
)) |
||||
|
.add('Select', () => ( |
||||
|
<Form> |
||||
|
<Select field="fieldName" items={selectItems} /> |
||||
|
</Form> |
||||
|
)) |
||||
|
.add('Toggle', () => ( |
||||
|
<Form> |
||||
|
<Toggle field="checkbox" /> |
||||
|
</Form> |
||||
|
)) |
||||
|
.add('Range', () => ( |
||||
|
<Form> |
||||
|
<Range field="range" /> |
||||
|
</Form> |
||||
|
)) |
||||
|
.add('Example form', () => ( |
||||
|
<Page> |
||||
|
<MainContent> |
||||
|
<Form> |
||||
|
{({ formState }) => ( |
||||
|
<React.Fragment> |
||||
|
<Box mb={3}> |
||||
|
<Box> |
||||
|
<Label htmlFor="input1">Example Field</Label> |
||||
|
</Box> |
||||
|
<Box> |
||||
|
<Input |
||||
|
field="input1" |
||||
|
id="field-name" |
||||
|
placeholder="Type here" |
||||
|
validate={validate} |
||||
|
validateOnBlur |
||||
|
/> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
|
||||
|
<Box mb={3}> |
||||
|
<Box> |
||||
|
<Label htmlFor="textarea1">Example Textarea</Label> |
||||
|
</Box> |
||||
|
<Box> |
||||
|
<TextArea |
||||
|
field="textarea1" |
||||
|
placeholder="Type here" |
||||
|
validate={validate} |
||||
|
validateOnBlur |
||||
|
/> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
|
||||
|
<Box mb={3}> |
||||
|
<Box> |
||||
|
<Label htmlFor="selectfield1">Example Select</Label> |
||||
|
</Box> |
||||
|
<Box> |
||||
|
<Select |
||||
|
field="selectfield1" |
||||
|
items={selectItems} |
||||
|
onChange={action('change')} |
||||
|
validate={validate} |
||||
|
validateOnBlur |
||||
|
/> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
|
||||
|
<Box mb={3}> |
||||
|
<Box> |
||||
|
<Label htmlFor="checkbox1">Example Toggle</Label> |
||||
|
</Box> |
||||
|
<Box> |
||||
|
<Toggle field="checkbox1" onChange={action('change')} /> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
|
||||
|
<Box mb={3}> |
||||
|
<Box> |
||||
|
<Label htmlFor="slider1">Example Range</Label> |
||||
|
</Box> |
||||
|
<Box> |
||||
|
<Range field="slider1" onChange={action('change')} /> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
|
||||
|
<Box mb={3}> |
||||
|
<Button>Submit</Button> |
||||
|
</Box> |
||||
|
|
||||
|
<Box bg="lightestBackground"> |
||||
|
<pre>{JSON.stringify(formState, null, 2)}</pre> |
||||
|
</Box> |
||||
|
</React.Fragment> |
||||
|
)} |
||||
|
</Form> |
||||
|
</MainContent> |
||||
|
</Page> |
||||
|
)) |
||||
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
import { Form } from 'informed' |
||||
|
import Input from 'components/UI/Input' |
||||
|
import renderer from 'react-test-renderer' |
||||
|
import { dark } from 'themes' |
||||
|
import { ThemeProvider } from 'styled-components' |
||||
|
|
||||
|
describe('component.UI.Input', () => { |
||||
|
it('should render correctly', () => { |
||||
|
const tree = renderer |
||||
|
.create( |
||||
|
<ThemeProvider theme={dark}> |
||||
|
<Form> |
||||
|
<Input field="name" theme={dark} /> |
||||
|
</Form> |
||||
|
</ThemeProvider> |
||||
|
) |
||||
|
.toJSON() |
||||
|
expect(tree).toMatchSnapshot() |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
import { Form } from 'informed' |
||||
|
import Range from 'components/UI/Range' |
||||
|
import renderer from 'react-test-renderer' |
||||
|
import { dark } from 'themes' |
||||
|
import { ThemeProvider } from 'styled-components' |
||||
|
|
||||
|
describe('component.UI.Range', () => { |
||||
|
it('should render correctly', () => { |
||||
|
const tree = renderer |
||||
|
.create( |
||||
|
<ThemeProvider theme={dark}> |
||||
|
<Form> |
||||
|
<Range field="name" /> |
||||
|
</Form> |
||||
|
</ThemeProvider> |
||||
|
) |
||||
|
.toJSON() |
||||
|
expect(tree).toMatchSnapshot() |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,29 @@ |
|||||
|
import React from 'react' |
||||
|
import { Form } from 'informed' |
||||
|
import Select from 'components/UI/Select' |
||||
|
import renderer from 'react-test-renderer' |
||||
|
import { dark } from 'themes' |
||||
|
import { ThemeProvider } from 'styled-components' |
||||
|
|
||||
|
describe('component.UI.Toggle', () => { |
||||
|
it('should render correctly', () => { |
||||
|
const selectItems = [ |
||||
|
{ label: '- Please select -', value: '' }, |
||||
|
{ label: 'Apple', value: 'apple' }, |
||||
|
{ value: 'pear' }, |
||||
|
{ value: 'orange' }, |
||||
|
{ value: 'grape' }, |
||||
|
{ value: 'banana' } |
||||
|
] |
||||
|
const tree = renderer |
||||
|
.create( |
||||
|
<ThemeProvider theme={dark}> |
||||
|
<Form> |
||||
|
<Select field="name" items={selectItems} /> |
||||
|
</Form> |
||||
|
</ThemeProvider> |
||||
|
) |
||||
|
.toJSON() |
||||
|
expect(tree).toMatchSnapshot() |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
import { Form } from 'informed' |
||||
|
import Input from 'components/UI/Input' |
||||
|
import renderer from 'react-test-renderer' |
||||
|
import { dark } from 'themes' |
||||
|
import { ThemeProvider } from 'styled-components' |
||||
|
|
||||
|
describe('component.UI.Input', () => { |
||||
|
it('should render correctly', () => { |
||||
|
const tree = renderer |
||||
|
.create( |
||||
|
<ThemeProvider theme={dark}> |
||||
|
<Form> |
||||
|
<Input field="name" /> |
||||
|
</Form> |
||||
|
</ThemeProvider> |
||||
|
) |
||||
|
.toJSON() |
||||
|
expect(tree).toMatchSnapshot() |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,21 @@ |
|||||
|
import React from 'react' |
||||
|
import { Form } from 'informed' |
||||
|
import Toggle from 'components/UI/Toggle' |
||||
|
import renderer from 'react-test-renderer' |
||||
|
import { dark } from 'themes' |
||||
|
import { ThemeProvider } from 'styled-components' |
||||
|
|
||||
|
describe('component.UI.Toggle', () => { |
||||
|
it('should render correctly', () => { |
||||
|
const tree = renderer |
||||
|
.create( |
||||
|
<ThemeProvider theme={dark}> |
||||
|
<Form> |
||||
|
<Toggle field="name" /> |
||||
|
</Form> |
||||
|
</ThemeProvider> |
||||
|
) |
||||
|
.toJSON() |
||||
|
expect(tree).toMatchSnapshot() |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,51 @@ |
|||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
|
exports[`component.UI.Input should render correctly 1`] = ` |
||||
|
.c1 { |
||||
|
padding: 16px; |
||||
|
width: 100%; |
||||
|
font-size: 13px; |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
border: 1px solid white; |
||||
|
border: 1px solid white; |
||||
|
border-color: #ffffff; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.c1:focus { |
||||
|
outline: none; |
||||
|
border: 1px solid #fd9800; |
||||
|
} |
||||
|
|
||||
|
.c0 { |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-flex-direction: column; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
<form |
||||
|
onReset={[Function]} |
||||
|
onSubmit={[Function]} |
||||
|
> |
||||
|
<div |
||||
|
className="c0" |
||||
|
> |
||||
|
<input |
||||
|
className="c1" |
||||
|
name="name" |
||||
|
onBlur={[Function]} |
||||
|
onChange={[Function]} |
||||
|
outline="none" |
||||
|
type="text" |
||||
|
value="" |
||||
|
/> |
||||
|
</div> |
||||
|
</form> |
||||
|
`; |
||||
@ -0,0 +1,48 @@ |
|||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
|
exports[`component.UI.Range should render correctly 1`] = ` |
||||
|
.c0 { |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.c0::-webkit-slider-runnable-track { |
||||
|
height: 8px; |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
background-color: #959595; |
||||
|
margin-top: -1px; |
||||
|
} |
||||
|
|
||||
|
.c0::-webkit-slider-thumb { |
||||
|
width: 8px; |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
height: 8px; |
||||
|
cursor: ew-resize; |
||||
|
background: #ffffff; |
||||
|
box-shadow: -1000px 0 0 1000px orange; |
||||
|
} |
||||
|
|
||||
|
<form |
||||
|
onReset={[Function]} |
||||
|
onSubmit={[Function]} |
||||
|
> |
||||
|
<input |
||||
|
className="c0" |
||||
|
max={100} |
||||
|
min={0} |
||||
|
onBlur={[Function]} |
||||
|
onChange={[Function]} |
||||
|
step={1} |
||||
|
type="range" |
||||
|
value="0" |
||||
|
/> |
||||
|
</form> |
||||
|
`; |
||||
@ -0,0 +1,157 @@ |
|||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
|
exports[`component.UI.Toggle should render correctly 1`] = ` |
||||
|
.c2 { |
||||
|
padding: 16px; |
||||
|
width: 100%; |
||||
|
font-size: 13px; |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
border: 1px solid white; |
||||
|
border: 1px solid white; |
||||
|
border-color: #ffffff; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.c2:focus { |
||||
|
outline: none; |
||||
|
border: 1px solid #fd9800; |
||||
|
} |
||||
|
|
||||
|
.c1 { |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-flex-direction: column; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.c3 { |
||||
|
padding: 0; |
||||
|
margin-top: 0; |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
width: 100%; |
||||
|
max-height: 20rem; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
outline: 0; |
||||
|
-webkit-transition: opacity 0.1s ease; |
||||
|
transition: opacity 0.1s ease; |
||||
|
border: none; |
||||
|
background-color: #373947; |
||||
|
} |
||||
|
|
||||
|
.c0 { |
||||
|
background-color: transparent; |
||||
|
border: none; |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
top: 0; |
||||
|
cursor: pointer; |
||||
|
width: 47px; |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-flex-direction: column; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
height: 50px; |
||||
|
-webkit-box-pack: center; |
||||
|
-webkit-justify-content: center; |
||||
|
-ms-flex-pack: center; |
||||
|
justify-content: center; |
||||
|
-webkit-align-items: center; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
<form |
||||
|
onReset={[Function]} |
||||
|
onSubmit={[Function]} |
||||
|
> |
||||
|
<div |
||||
|
aria-expanded={false} |
||||
|
aria-haspopup="listbox" |
||||
|
aria-labelledby="downshift-0-label" |
||||
|
aria-owns={null} |
||||
|
role="combobox" |
||||
|
style={ |
||||
|
Object { |
||||
|
"position": "relative", |
||||
|
} |
||||
|
} |
||||
|
> |
||||
|
<div |
||||
|
style={ |
||||
|
Object { |
||||
|
"position": "relative", |
||||
|
} |
||||
|
} |
||||
|
> |
||||
|
<button |
||||
|
aria-haspopup={true} |
||||
|
aria-label="open menu" |
||||
|
className="c0" |
||||
|
data-toggle={true} |
||||
|
onBlur={[Function]} |
||||
|
onClick={[Function]} |
||||
|
onKeyDown={[Function]} |
||||
|
onKeyUp={[Function]} |
||||
|
role="button" |
||||
|
type="button" |
||||
|
> |
||||
|
<svg |
||||
|
fill="transparent" |
||||
|
preserveAspectRatio="none" |
||||
|
stroke="#979797" |
||||
|
strokeWidth="1.1px" |
||||
|
transform={null} |
||||
|
viewBox="0 0 20 20" |
||||
|
width={16} |
||||
|
> |
||||
|
<path |
||||
|
d="M1,6 L10,15 L19,6" |
||||
|
/> |
||||
|
</svg> |
||||
|
</button> |
||||
|
<div |
||||
|
className="c1" |
||||
|
> |
||||
|
<input |
||||
|
aria-activedescendant={null} |
||||
|
aria-autocomplete="list" |
||||
|
aria-controls={null} |
||||
|
aria-labelledby="downshift-0-label" |
||||
|
autoComplete="off" |
||||
|
className="c2" |
||||
|
id="downshift-0-input" |
||||
|
name="name" |
||||
|
onBlur={[Function]} |
||||
|
onChange={[Function]} |
||||
|
onFocus={[Function]} |
||||
|
onKeyDown={[Function]} |
||||
|
onMouseDown={[Function]} |
||||
|
outline="none" |
||||
|
placeholder="Please select" |
||||
|
type="text" |
||||
|
value="" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ul |
||||
|
aria-labelledby="downshift-0-label" |
||||
|
className="c3" |
||||
|
id="downshift-0-menu" |
||||
|
role="listbox" |
||||
|
/> |
||||
|
</div> |
||||
|
</form> |
||||
|
`; |
||||
@ -0,0 +1,51 @@ |
|||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
|
exports[`component.UI.Input should render correctly 1`] = ` |
||||
|
.c1 { |
||||
|
padding: 16px; |
||||
|
width: 100%; |
||||
|
font-size: 13px; |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
border: 1px solid white; |
||||
|
border: 1px solid white; |
||||
|
border-color: #ffffff; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.c1:focus { |
||||
|
outline: none; |
||||
|
border: 1px solid #fd9800; |
||||
|
} |
||||
|
|
||||
|
.c0 { |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-flex-direction: column; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
<form |
||||
|
onReset={[Function]} |
||||
|
onSubmit={[Function]} |
||||
|
> |
||||
|
<div |
||||
|
className="c0" |
||||
|
> |
||||
|
<input |
||||
|
className="c1" |
||||
|
name="name" |
||||
|
onBlur={[Function]} |
||||
|
onChange={[Function]} |
||||
|
outline="none" |
||||
|
type="text" |
||||
|
value="" |
||||
|
/> |
||||
|
</div> |
||||
|
</form> |
||||
|
`; |
||||
@ -0,0 +1,85 @@ |
|||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
|
exports[`component.UI.Toggle should render correctly 1`] = ` |
||||
|
.c0 { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.c0 .switch { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: 35px; |
||||
|
height: 22px; |
||||
|
} |
||||
|
|
||||
|
.c0 .switch input { |
||||
|
opacity: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
.c0 .slider { |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: #959595; |
||||
|
-webkit-transition: 0.4s; |
||||
|
transition: 0.4s; |
||||
|
border-radius: 34px; |
||||
|
} |
||||
|
|
||||
|
.c0 .slider:before { |
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
height: 20px; |
||||
|
width: 20px; |
||||
|
left: 1px; |
||||
|
bottom: 1px; |
||||
|
background-color: white; |
||||
|
-webkit-transition: 0.4s; |
||||
|
transition: 0.4s; |
||||
|
border-radius: 50%; |
||||
|
box-shadow: 1px 1px 3px #555; |
||||
|
} |
||||
|
|
||||
|
.c0 input:checked + .slider { |
||||
|
background-color: #39e673; |
||||
|
} |
||||
|
|
||||
|
.c0 input:focus + .slider { |
||||
|
box-shadow: 0 0 1px #2196f3; |
||||
|
} |
||||
|
|
||||
|
.c0 input:checked + .slider:before { |
||||
|
-webkit-transform: translateX(13px); |
||||
|
-ms-transform: translateX(13px); |
||||
|
transform: translateX(13px); |
||||
|
} |
||||
|
|
||||
|
<form |
||||
|
onReset={[Function]} |
||||
|
onSubmit={[Function]} |
||||
|
> |
||||
|
<div |
||||
|
className="c0" |
||||
|
> |
||||
|
<label |
||||
|
className="switch" |
||||
|
> |
||||
|
<input |
||||
|
checked={false} |
||||
|
name="name" |
||||
|
onBlur={[Function]} |
||||
|
onChange={[Function]} |
||||
|
type="checkbox" |
||||
|
/> |
||||
|
<span |
||||
|
className="slider round" |
||||
|
/> |
||||
|
</label> |
||||
|
</div> |
||||
|
</form> |
||||
|
`; |
||||
Loading…
Reference in new issue