mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 22:20:06 +02:00
Add Radio Button
This commit is contained in:
parent
ccb53f3783
commit
fbe77515f4
@ -1,6 +1,69 @@
|
|||||||
const classNames = require('classnames');
|
|
||||||
const React = require('react');
|
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 = ({
|
const Radio = ({
|
||||||
checked,
|
checked,
|
||||||
@ -20,23 +83,13 @@ const Radio = ({
|
|||||||
tabIndex,
|
tabIndex,
|
||||||
value
|
value
|
||||||
}) => {
|
}) => {
|
||||||
const _label = label || children;
|
|
||||||
const _children = label && children ? children : null;
|
const _children = label && children ? children : null;
|
||||||
|
|
||||||
const cn = classNames(
|
|
||||||
className,
|
|
||||||
styles.radio
|
|
||||||
);
|
|
||||||
|
|
||||||
const labelledby = `${styles.label}-label`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn}>
|
<TextLabel>
|
||||||
<label className={styles.label} htmlFor={id}>
|
<StyledDiv>
|
||||||
<input
|
<StyledInput
|
||||||
aria-labelledby={labelledby}
|
|
||||||
checked={checked}
|
checked={checked}
|
||||||
className={styles.input}
|
|
||||||
defaultChecked={defaultChecked}
|
defaultChecked={defaultChecked}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
form={form}
|
form={form}
|
||||||
@ -50,14 +103,12 @@ const Radio = ({
|
|||||||
type='radio'
|
type='radio'
|
||||||
value={value}
|
value={value}
|
||||||
/>
|
/>
|
||||||
<span className={styles.span} id={labelledby}>
|
<StyledLabel />
|
||||||
{_label}
|
</StyledDiv>
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<span>
|
<span>
|
||||||
{_children}
|
{_children}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</TextLabel>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -14,7 +14,7 @@ module.exports = {
|
|||||||
// Input: require('./components/input'),
|
// Input: require('./components/input'),
|
||||||
// Icon: require('./components/icon'),
|
// Icon: require('./components/icon'),
|
||||||
// RangeSlider: require('./components/range-slider'),
|
// RangeSlider: require('./components/range-slider'),
|
||||||
// Radio: require('./components/radio'),
|
Radio: require('./components/radio'),
|
||||||
// RadioGroup: require('./components/radio-group'),
|
// RadioGroup: require('./components/radio-group'),
|
||||||
// Select: require('./components/select'),
|
// Select: require('./components/select'),
|
||||||
Widget: require('./components/widget'),
|
Widget: require('./components/widget'),
|
||||||
|
@ -17,6 +17,7 @@ const {
|
|||||||
Tab,
|
Tab,
|
||||||
Toggle,
|
Toggle,
|
||||||
Widget
|
Widget
|
||||||
|
Radio,
|
||||||
} = require('../src/');
|
} = require('../src/');
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
@ -128,6 +129,7 @@ storiesOf('Checkbox', module)
|
|||||||
<Checkbox disabled />
|
<Checkbox disabled />
|
||||||
));
|
));
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
storiesOf('Tabs', module)
|
storiesOf('Tabs', module)
|
||||||
.add('Default', () => (
|
.add('Default', () => (
|
||||||
<Tabs name='my-tab-group'>
|
<Tabs name='my-tab-group'>
|
||||||
@ -161,3 +163,15 @@ storiesOf('Widget', module)
|
|||||||
<p>Some text</p>
|
<p>Some text</p>
|
||||||
</Widget>
|
</Widget>
|
||||||
))
|
))
|
||||||
|
=======
|
||||||
|
storiesOf('Radio', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Radio />
|
||||||
|
))
|
||||||
|
.add('Checked', () => (
|
||||||
|
<Radio checked onChange={function noop() {}} />
|
||||||
|
))
|
||||||
|
.add('Disabled', () => (
|
||||||
|
<Radio disabled />
|
||||||
|
));
|
||||||
|
>>>>>>> Add Radio Button
|
||||||
|
Loading…
Reference in New Issue
Block a user