mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +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 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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'),
|
||||
// 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'),
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user