mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
Toggle
This commit is contained in:
parent
6f84069345
commit
49612769da
@ -1,8 +1,8 @@
|
||||
import { Baseline } from '../../../shared/composers';
|
||||
import BaseInput from '../base-input';
|
||||
import Toggle from '../toggle';
|
||||
import ToggleBase from '../toggle-base';
|
||||
|
||||
const Checkbox = Toggle({
|
||||
const Checkbox = ToggleBase({
|
||||
type: 'checkbox'
|
||||
});
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import styled from 'styled-components';
|
||||
import Toggle from '../toggle';
|
||||
import ToggleBase from '../toggle-base';
|
||||
import { Baseline } from '../../../shared/composers';
|
||||
import BaseInput from '../base-input';
|
||||
|
||||
@ -12,7 +12,7 @@ const StyledUl = styled.ul`
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
const Radio = Toggle({
|
||||
const Radio = ToggleBase({
|
||||
container: RadioItem,
|
||||
type: 'radio'
|
||||
});
|
||||
|
@ -4,15 +4,22 @@ import Legend from '../legend';
|
||||
import Radio, { RadioList } from '../radio';
|
||||
import FormGroup from '../group';
|
||||
import FormMeta from '../meta';
|
||||
import FormLabel from '../label';
|
||||
|
||||
storiesOf('Radio', module)
|
||||
.add('Default', () => (
|
||||
<FormGroup name='who-killed'>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio value='video'>Video</Radio>
|
||||
<Radio value='tv'>TV</Radio>
|
||||
<Radio value='netflix'>Netflix</Radio>
|
||||
<Radio value='video' checked>
|
||||
<FormLabel>Video</FormLabel>
|
||||
</Radio>
|
||||
<Radio value='tv'>
|
||||
<FormLabel>TV</FormLabel>
|
||||
</Radio>
|
||||
<Radio value='netflix'>
|
||||
<FormLabel>Netflix</FormLabel>
|
||||
</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
))
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { remcalc, is } from '../../shared/functions';
|
||||
import { remcalc, unitcalc, is } from '../../shared/functions';
|
||||
import { Subscriber } from 'react-broadcast';
|
||||
import { boxes, colors } from '../../shared/constants';
|
||||
import BaseInput from './base-input';
|
||||
@ -61,14 +61,12 @@ const Label = styled.label`
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: ${remcalc(8)};
|
||||
height: ${remcalc(8)};
|
||||
border-radius: ${remcalc(4)};
|
||||
background-color: ${colors.base.secondaryDark};
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
top: ${remcalc(8)};
|
||||
left: ${remcalc(8)};
|
||||
width: ${remcalc(10)};
|
||||
height: ${remcalc(10)};
|
||||
border-radius: ${remcalc(5)};
|
||||
background-color: ${colors.base.secondaryActive};
|
||||
top: ${remcalc(6)};
|
||||
left: ${remcalc(6)};
|
||||
}
|
||||
`};
|
||||
|
||||
@ -77,12 +75,12 @@ const Label = styled.label`
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: ${remcalc(9)};
|
||||
width: ${unitcalc(1.5)};
|
||||
height: ${remcalc(4)};
|
||||
background: transparent;
|
||||
top: ${remcalc(7)};
|
||||
left: ${remcalc(7)};
|
||||
border: ${remcalc(3)} solid #333;
|
||||
border: ${unitcalc(0.5)} solid ${colors.base.secondaryActive};
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-45deg);
|
||||
@ -98,14 +96,14 @@ const Label = styled.label`
|
||||
|
||||
const InnerContainer = styled.div`
|
||||
display: inline-block;
|
||||
margin-right: ${remcalc(12)}
|
||||
vertical-align: text-bottom;
|
||||
width: ${remcalc(24)};
|
||||
height: ${remcalc(24)};
|
||||
margin-right: ${unitcalc(2)};
|
||||
width: ${unitcalc(4)};
|
||||
height: ${unitcalc(4)};
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const Toggle = ({
|
||||
const ToggleBase = ({
|
||||
container = null,
|
||||
type = 'radio'
|
||||
}) => BaseInput(({
|
||||
@ -122,7 +120,7 @@ const Toggle = ({
|
||||
|
||||
const render = (value) => {
|
||||
const toggle = (
|
||||
<InnerContainer type={type}>
|
||||
<InnerContainer {...types} type={type}>
|
||||
<Input
|
||||
{...props}
|
||||
{...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 Toggle from './';
|
||||
|
||||
@ -20,4 +20,4 @@ storiesOf('Toggle', module)
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle />
|
||||
));
|
||||
));*/
|
||||
|
Loading…
Reference in New Issue
Block a user