Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Toggle

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/form/checkbox/index.js
View File

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

4
ui/src/components/form/radio/index.js
View File

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

13
ui/src/components/form/radio/story.js
View File

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

32
ui/src/components/form/toggle.js → ui/src/components/form/toggle-base.js
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 { 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
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
);

190
ui/src/components/form/toggle/story.js Normal file
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>
));

4
ui/src/components/toggle/story.js
View File

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