Toggle
This commit is contained in:
JUDIT GRESKOVITS
Judit Greskovits
parent
6f84069345
commit
49612769da
@ -1,8 +1,8 @@
|
|||||||
import { Baseline } from '../../../shared/composers';
|
import { Baseline } from '../../../shared/composers';
|
||||||
import BaseInput from '../base-input';
|
import BaseInput from '../base-input';
|
||||||
import Toggle from '../toggle';
|
import ToggleBase from '../toggle-base';
|
||||||
|
|
||||||
const Checkbox = Toggle({
|
const Checkbox = ToggleBase({
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Toggle from '../toggle';
|
import ToggleBase from '../toggle-base';
|
||||||
import { Baseline } from '../../../shared/composers';
|
import { Baseline } from '../../../shared/composers';
|
||||||
import BaseInput from '../base-input';
|
import BaseInput from '../base-input';
|
||||||
|
|
||||||
@ -12,7 +12,7 @@ const StyledUl = styled.ul`
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Radio = Toggle({
|
const Radio = ToggleBase({
|
||||||
container: RadioItem,
|
container: RadioItem,
|
||||||
type: 'radio'
|
type: 'radio'
|
||||||
});
|
});
|
||||||
|
|||||||
@ -4,15 +4,22 @@ import Legend from '../legend';
|
|||||||
import Radio, { RadioList } from '../radio';
|
import Radio, { RadioList } from '../radio';
|
||||||
import FormGroup from '../group';
|
import FormGroup from '../group';
|
||||||
import FormMeta from '../meta';
|
import FormMeta from '../meta';
|
||||||
|
import FormLabel from '../label';
|
||||||
|
|
||||||
storiesOf('Radio', module)
|
storiesOf('Radio', module)
|
||||||
.add('Default', () => (
|
.add('Default', () => (
|
||||||
<FormGroup name='who-killed'>
|
<FormGroup name='who-killed'>
|
||||||
<Legend>Who killed the radio star?</Legend>
|
<Legend>Who killed the radio star?</Legend>
|
||||||
<RadioList>
|
<RadioList>
|
||||||
<Radio value='video'>Video</Radio>
|
<Radio value='video' checked>
|
||||||
<Radio value='tv'>TV</Radio>
|
<FormLabel>Video</FormLabel>
|
||||||
<Radio value='netflix'>Netflix</Radio>
|
</Radio>
|
||||||
|
<Radio value='tv'>
|
||||||
|
<FormLabel>TV</FormLabel>
|
||||||
|
</Radio>
|
||||||
|
<Radio value='netflix'>
|
||||||
|
<FormLabel>Netflix</FormLabel>
|
||||||
|
</Radio>
|
||||||
</RadioList>
|
</RadioList>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
))
|
))
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { remcalc, is } from '../../shared/functions';
|
import { remcalc, unitcalc, is } from '../../shared/functions';
|
||||||
import { Subscriber } from 'react-broadcast';
|
import { Subscriber } from 'react-broadcast';
|
||||||
import { boxes, colors } from '../../shared/constants';
|
import { boxes, colors } from '../../shared/constants';
|
||||||
import BaseInput from './base-input';
|
import BaseInput from './base-input';
|
||||||
@ -61,14 +61,12 @@ const Label = styled.label`
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: ${remcalc(8)};
|
width: ${remcalc(10)};
|
||||||
height: ${remcalc(8)};
|
height: ${remcalc(10)};
|
||||||
border-radius: ${remcalc(4)};
|
border-radius: ${remcalc(5)};
|
||||||
background-color: ${colors.base.secondaryDark};
|
background-color: ${colors.base.secondaryActive};
|
||||||
border-top: none;
|
top: ${remcalc(6)};
|
||||||
border-right: none;
|
left: ${remcalc(6)};
|
||||||
top: ${remcalc(8)};
|
|
||||||
left: ${remcalc(8)};
|
|
||||||
}
|
}
|
||||||
`};
|
`};
|
||||||
|
|
||||||
@ -77,12 +75,12 @@ const Label = styled.label`
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: ${remcalc(9)};
|
width: ${unitcalc(1.5)};
|
||||||
height: ${remcalc(4)};
|
height: ${remcalc(4)};
|
||||||
background: transparent;
|
background: transparent;
|
||||||
top: ${remcalc(7)};
|
top: ${remcalc(7)};
|
||||||
left: ${remcalc(7)};
|
left: ${remcalc(7)};
|
||||||
border: ${remcalc(3)} solid #333;
|
border: ${unitcalc(0.5)} solid ${colors.base.secondaryActive};
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
@ -98,14 +96,14 @@ const Label = styled.label`
|
|||||||
|
|
||||||
const InnerContainer = styled.div`
|
const InnerContainer = styled.div`
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: ${remcalc(12)}
|
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
width: ${remcalc(24)};
|
margin-right: ${unitcalc(2)};
|
||||||
height: ${remcalc(24)};
|
width: ${unitcalc(4)};
|
||||||
|
height: ${unitcalc(4)};
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Toggle = ({
|
const ToggleBase = ({
|
||||||
container = null,
|
container = null,
|
||||||
type = 'radio'
|
type = 'radio'
|
||||||
}) => BaseInput(({
|
}) => BaseInput(({
|
||||||
@ -122,7 +120,7 @@ const Toggle = ({
|
|||||||
|
|
||||||
const render = (value) => {
|
const render = (value) => {
|
||||||
const toggle = (
|
const toggle = (
|
||||||
<InnerContainer type={type}>
|
<InnerContainer {...types} type={type}>
|
||||||
<Input
|
<Input
|
||||||
{...props}
|
{...props}
|
||||||
{...value}
|
{...value}
|
||||||
@ -156,4 +154,4 @@ const Toggle = ({
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export default Toggle;
|
export default ToggleBase;
|
||||||
131
ui/src/components/form/toggle/index.js
Normal file
131
ui/src/components/form/toggle/index.js
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { remcalc, unitcalc, is } from '../../../shared/functions';
|
||||||
|
import { Subscriber } from 'react-broadcast';
|
||||||
|
import { Baseline } from '../../../shared/composers';
|
||||||
|
import BaseInput from '../base-input';
|
||||||
|
import { boxes, colors } from '../../../shared/constants';
|
||||||
|
|
||||||
|
const Input = styled.input`
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:checked + label {
|
||||||
|
border-radius: ${remcalc(4)};
|
||||||
|
background-color: ${colors.base.white};
|
||||||
|
box-shadow: ${boxes.bottomShaddow};
|
||||||
|
color: ${colors.base.secondary};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:selected + label {
|
||||||
|
border-radius: ${remcalc(4)};
|
||||||
|
background-color: ${colors.base.white};
|
||||||
|
box-shadow: ${boxes.bottomShaddow};
|
||||||
|
color: ${colors.base.secondary};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled + label {
|
||||||
|
color: ${colors.base.grey};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Label = styled.label`
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: ${unitcalc(20)};
|
||||||
|
height: ${unitcalc(8)};
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: ${unitcalc(2)};
|
||||||
|
color: ${colors.base.text};
|
||||||
|
|
||||||
|
${is('error')`
|
||||||
|
border-color: ${colors.inputError}
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('warning')`
|
||||||
|
border-color: ${colors.inputWarning}
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('success')`
|
||||||
|
border-color: ${colors.base.green}
|
||||||
|
`};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${colors.base.secondaryHover};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InputContainer = styled.div`
|
||||||
|
position: relative;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
width: ${unitcalc(20)};
|
||||||
|
height: ${unitcalc(8)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledLi = BaseInput(styled.li`
|
||||||
|
display: inline-block;
|
||||||
|
list-style-type: none;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
border-top: ${boxes.border.unchecked};
|
||||||
|
border-bottom: ${boxes.border.unchecked};
|
||||||
|
border-left: ${boxes.border.unchecked};
|
||||||
|
&:first-of-type {
|
||||||
|
border-radius: ${boxes.borderRadius} 0 0 ${boxes.borderRadius};
|
||||||
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
border-radius: 0 ${boxes.borderRadius} ${boxes.borderRadius} 0;
|
||||||
|
border-right: ${boxes.border.unchecked};
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const StyledUl = styled.ul`
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: ${boxes.bottomShaddow};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Toggle = BaseInput(({
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const render = (value) => {
|
||||||
|
return (
|
||||||
|
<StyledLi>
|
||||||
|
<InputContainer>
|
||||||
|
<Input
|
||||||
|
{...props}
|
||||||
|
{...value}
|
||||||
|
type='radio'
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor={value.id}
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
error={props.error}
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
warning={props.warning}
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
success={props.success}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Label>
|
||||||
|
</InputContainer>
|
||||||
|
</StyledLi>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Subscriber channel='input-group'>
|
||||||
|
{render}
|
||||||
|
</Subscriber>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Baseline(
|
||||||
|
Toggle
|
||||||
|
);
|
||||||
|
|
||||||
|
export const ToggleList = Baseline(
|
||||||
|
StyledUl
|
||||||
|
);
|
||||||
190
ui/src/components/form/toggle/story.js
Normal file
190
ui/src/components/form/toggle/story.js
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
import { storiesOf } from '@kadira/storybook';
|
||||||
|
import React from 'react';
|
||||||
|
import Legend from '../legend';
|
||||||
|
import Toggle, { ToggleList } from '../toggle';
|
||||||
|
import FormGroup from '../group';
|
||||||
|
import FormMeta from '../meta';
|
||||||
|
|
||||||
|
storiesOf('Toggle', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
))
|
||||||
|
.add('Selected', () => (
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video' checked>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
))
|
||||||
|
.add('Two items', () => (
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='tv' checked>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
))
|
||||||
|
.add('Disabled', () => (
|
||||||
|
<FormGroup name='who-killed' disabled>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
))
|
||||||
|
.add('Error', () => (
|
||||||
|
<div>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta error='Unexpected inline error!' left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed' error='Unexpected group error!'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
{/* eslint-disable object-curly-newline */}
|
||||||
|
<FormGroup name='who-killed' meta={{error: 'Unexpected meta error!'}}>
|
||||||
|
{/* eslint-enable object-curly-newline */}
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta error left>
|
||||||
|
Unexpected children error!
|
||||||
|
</FormMeta>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
.add('Warning', () => (
|
||||||
|
<div>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta warning='Unexpected inline warning!' left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed' warning='Unexpected group warning!'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
{/* eslint-disable object-curly-newline */}
|
||||||
|
<FormGroup name='who-killed' meta={{warning: 'Unexpected meta warning!'}}>
|
||||||
|
{/* eslint-enable object-curly-newline */}
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left warning>
|
||||||
|
Unexpected children warning!
|
||||||
|
</FormMeta>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
.add('Success', () => (
|
||||||
|
<div>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta success='Unexpected inline success!' left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed' success='Unexpected group success!'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
{/* eslint-disable object-curly-newline */}
|
||||||
|
<FormGroup name='who-killed' meta={{success: 'Unexpected meta success!'}}>
|
||||||
|
{/* eslint-enable object-curly-newline */}
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left />
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left success>
|
||||||
|
Unexpected children success!
|
||||||
|
</FormMeta>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
.add('Base meta', () => (
|
||||||
|
<FormGroup name='who-killed'>
|
||||||
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
<FormMeta left>I'm a children of meta</FormMeta>
|
||||||
|
<ToggleList>
|
||||||
|
<Toggle value='video'>Video</Toggle>
|
||||||
|
<Toggle value='tv'>TV</Toggle>
|
||||||
|
<Toggle value='netflix'>Netflix</Toggle>
|
||||||
|
</ToggleList>
|
||||||
|
</FormGroup>
|
||||||
|
));
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
/*import React from 'react';
|
||||||
import { storiesOf } from '@kadira/storybook';
|
import { storiesOf } from '@kadira/storybook';
|
||||||
import Toggle from './';
|
import Toggle from './';
|
||||||
|
|
||||||
@ -20,4 +20,4 @@ storiesOf('Toggle', module)
|
|||||||
))
|
))
|
||||||
.add('no props', () => (
|
.add('no props', () => (
|
||||||
<Toggle />
|
<Toggle />
|
||||||
));
|
));*/
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user