Add Radio Button

This commit is contained in:
Tom Gallacher 2016-12-09 15:04:06 +00:00 committed by Sérgio Ramos
parent ccb53f3783
commit fbe77515f4
4 changed files with 86 additions and 57 deletions

View File

@ -1,6 +1,69 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const constants = require('../../shared/constants');
const Styled = require('styled-components');
const {
boxes
} = constants;
const {
default: styled,
} = Styled;
const StyledInput = styled.input`
visibility: hidden;
&:checked + label::after {
opacity: 1;
}
&:disabled + label {
background-color: rgb(249, 249, 249);
}
&:disabled + label::after {
opacity: 0.3;
}
`;
const border = 1;
const StyledLabel = styled.label`
color: rgb(100, 100, 100);
position: absolute;
width: ${24 - border}px;
height: ${24 - border}px;
top: 0;
border-radius: 100%;
background-color: rgb(255, 255, 255);
box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked};
&::after {
opacity: 0;
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgb(100, 100, 100);
top: ${(23 / 2) - 4}px;
left: ${(23 / 2) - 4}px;
border-radius: 100%;
transform: rotate(-45deg);
}
&:hover {
&::after {
opacity: 0.3;
}
}
`;
const StyledDiv = styled.div`
width: 24px;
height: 24px;
position: relative;
`;
const TextLabel = styled.label`
`;
const Radio = ({
checked,
@ -20,23 +83,13 @@ const Radio = ({
tabIndex,
value
}) => {
const _label = label || children;
const _children = label && children ? children : null;
const cn = classNames(
className,
styles.radio
);
const labelledby = `${styles.label}-label`;
return (
<div className={cn}>
<label className={styles.label} htmlFor={id}>
<input
aria-labelledby={labelledby}
<TextLabel>
<StyledDiv>
<StyledInput
checked={checked}
className={styles.input}
defaultChecked={defaultChecked}
disabled={disabled}
form={form}
@ -50,14 +103,12 @@ const Radio = ({
type='radio'
value={value}
/>
<span className={styles.span} id={labelledby}>
{_label}
</span>
</label>
<StyledLabel />
</StyledDiv>
<span>
{_children}
</span>
</div>
</TextLabel>
);
};

View File

@ -1,36 +0,0 @@
@import "../../shared/mixins.css";
:root {
--radio-radius: 20px;
--radio-border-size: calc(var(--radio-radius) / 4);
--dot-color: #646464;
--border-color: #CFD1D1;
}
.radio {
cursor: pointer;
& .label {
display: block;
}
& .span {
margin-left: remcalc(30);
margin-right: remcalc(20);
@add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
border: var(--radio-border-size) solid white;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--border-color);
}
}
& .input {
display: none;
visibility: hidden;
&:checked ~ .span::before {
background: var(--dot-color);
}
}
}

View File

@ -14,7 +14,7 @@ module.exports = {
// Input: require('./components/input'),
// Icon: require('./components/icon'),
// RangeSlider: require('./components/range-slider'),
// Radio: require('./components/radio'),
Radio: require('./components/radio'),
// RadioGroup: require('./components/radio-group'),
// Select: require('./components/select'),
Widget: require('./components/widget'),

View File

@ -17,6 +17,7 @@ const {
Tab,
Toggle,
Widget
Radio,
} = require('../src/');
const styles = {
@ -128,6 +129,7 @@ storiesOf('Checkbox', module)
<Checkbox disabled />
));
<<<<<<< HEAD
storiesOf('Tabs', module)
.add('Default', () => (
<Tabs name='my-tab-group'>
@ -161,3 +163,15 @@ storiesOf('Widget', module)
<p>Some text</p>
</Widget>
))
=======
storiesOf('Radio', module)
.add('Default', () => (
<Radio />
))
.add('Checked', () => (
<Radio checked onChange={function noop() {}} />
))
.add('Disabled', () => (
<Radio disabled />
));
>>>>>>> Add Radio Button