1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00
This commit is contained in:
JUDIT GRESKOVITS 2017-02-24 17:10:44 +00:00 committed by Judit Greskovits
parent 6f84069345
commit 49612769da
7 changed files with 352 additions and 26 deletions

View File

@ -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'
}); });

View File

@ -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'
}); });

View File

@ -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>
)) ))

View File

@ -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;

View 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
);

View 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&#39;m a children of meta</FormMeta>
<ToggleList>
<Toggle value='video'>Video</Toggle>
<Toggle value='tv'>TV</Toggle>
<Toggle value='netflix'>Netflix</Toggle>
</ToggleList>
</FormGroup>
));

View File

@ -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 />
)); ));*/