keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
mirlan.maksitaliev
6 years ago
parent
56e99e6291
commit
1dfc96e809
|
After Width: | Height: | Size: 695 B |
|
After Width: | Height: | Size: 696 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 853 B |
@ -0,0 +1,28 @@ |
|||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
const ArrowStyled = styled.button` |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
padding: 0; |
||||||
|
border: 1px solid transparent; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: transparent; |
||||||
|
background-position: center; |
||||||
|
outline: none; |
||||||
|
|
||||||
|
:active { |
||||||
|
background-color: rgba(117, 117, 117, 1); |
||||||
|
} |
||||||
|
|
||||||
|
:hover, :focus { |
||||||
|
background-color: rgba(117, 117, 117, 0.5); |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
export const ArrowLeft = styled(ArrowStyled)` |
||||||
|
background-image: url(/images/arrowLeft.svg); |
||||||
|
` |
||||||
|
|
||||||
|
export const ArrowRight = styled(ArrowStyled)` |
||||||
|
background-image: url(/images/arrowRight.svg); |
||||||
|
` |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
import { ArrowLeft, ArrowRight } from 'features/Components' |
||||||
|
|
||||||
|
export default { |
||||||
|
component: ArrowLeft, |
||||||
|
title: 'Arrows', |
||||||
|
} |
||||||
|
|
||||||
|
const backgroundStyles = { |
||||||
|
backgroundColor: '#333', |
||||||
|
height: '200px', |
||||||
|
padding: '20px', |
||||||
|
} |
||||||
|
|
||||||
|
export const Group = () => ( |
||||||
|
<div style={backgroundStyles}> |
||||||
|
<ArrowLeft /> |
||||||
|
<ArrowRight /> |
||||||
|
</div> |
||||||
|
) |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import React, { InputHTMLAttributes } from 'react' |
||||||
|
|
||||||
|
import { |
||||||
|
Wrapper, |
||||||
|
Input, |
||||||
|
Label, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
type TCheckbox = Pick<InputHTMLAttributes<HTMLInputElement>, ( |
||||||
|
| 'checked' |
||||||
|
| 'id' |
||||||
|
| 'name' |
||||||
|
| 'value' |
||||||
|
| 'onChange' |
||||||
|
)> & { |
||||||
|
label?: string, |
||||||
|
} |
||||||
|
|
||||||
|
export const Checkbox = ({ |
||||||
|
checked, |
||||||
|
id, |
||||||
|
label, |
||||||
|
name, |
||||||
|
onChange, |
||||||
|
value, |
||||||
|
}: TCheckbox) => ( |
||||||
|
<Wrapper> |
||||||
|
<Input |
||||||
|
id={id} |
||||||
|
type='checkbox' |
||||||
|
name={name} |
||||||
|
value={value} |
||||||
|
checked={checked} |
||||||
|
onChange={onChange} |
||||||
|
/> |
||||||
|
<Label htmlFor={id}>{label}</Label> |
||||||
|
</Wrapper> |
||||||
|
) |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
import { Checkbox } from 'features/Components' |
||||||
|
|
||||||
|
export default { |
||||||
|
component: Checkbox, |
||||||
|
title: 'Checkbox', |
||||||
|
} |
||||||
|
|
||||||
|
const backgroundStyles = { |
||||||
|
backgroundColor: '#333', |
||||||
|
height: '200px', |
||||||
|
padding: '20px', |
||||||
|
} |
||||||
|
|
||||||
|
export const Group = () => ( |
||||||
|
<div style={backgroundStyles}> |
||||||
|
<Checkbox |
||||||
|
id='primeraDivisión' |
||||||
|
label='Primera División' |
||||||
|
checked |
||||||
|
/> |
||||||
|
<Checkbox |
||||||
|
id='manchesterUnited' |
||||||
|
label='Manchester United' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
export const Wrapper = styled.div` |
||||||
|
|
||||||
|
` |
||||||
|
|
||||||
|
export const Label = styled.label` |
||||||
|
color: ${({ theme: { colors } }) => colors.text}; |
||||||
|
font-style: normal; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
` |
||||||
|
|
||||||
|
export const Input = styled.input` |
||||||
|
position: absolute; |
||||||
|
z-index: -1; |
||||||
|
opacity: 0; |
||||||
|
|
||||||
|
&+${Label} { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
&+${Label}::before { |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
margin-right: 22px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center center; |
||||||
|
background-image: url(/images/checkboxUnchecked.svg); |
||||||
|
} |
||||||
|
|
||||||
|
&:checked+${Label}::before { |
||||||
|
background-image: url(/images/checkboxChecked.svg); |
||||||
|
} |
||||||
|
` |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import React, { InputHTMLAttributes } from 'react' |
||||||
|
|
||||||
|
import { |
||||||
|
Wrapper, |
||||||
|
Input, |
||||||
|
Label, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
type TCheckbox = Pick<InputHTMLAttributes<HTMLInputElement>, ( |
||||||
|
| 'checked' |
||||||
|
| 'id' |
||||||
|
| 'name' |
||||||
|
| 'value' |
||||||
|
| 'onChange' |
||||||
|
)> & { |
||||||
|
label?: string, |
||||||
|
} |
||||||
|
|
||||||
|
export const Radio = ({ |
||||||
|
checked, |
||||||
|
id, |
||||||
|
label, |
||||||
|
name, |
||||||
|
onChange, |
||||||
|
value, |
||||||
|
}: TCheckbox) => ( |
||||||
|
<Wrapper> |
||||||
|
<Input |
||||||
|
id={id} |
||||||
|
type='radio' |
||||||
|
name={name} |
||||||
|
value={value} |
||||||
|
checked={checked} |
||||||
|
onChange={onChange} |
||||||
|
/> |
||||||
|
<Label htmlFor={id}>{label}</Label> |
||||||
|
</Wrapper> |
||||||
|
) |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
import { Radio } from 'features/Components' |
||||||
|
|
||||||
|
export default { |
||||||
|
component: Radio, |
||||||
|
title: 'Radio', |
||||||
|
} |
||||||
|
|
||||||
|
const backgroundStyles = { |
||||||
|
backgroundColor: '#333', |
||||||
|
height: '200px', |
||||||
|
padding: '20px', |
||||||
|
} |
||||||
|
|
||||||
|
export const Group = () => ( |
||||||
|
<div style={backgroundStyles}> |
||||||
|
<Radio |
||||||
|
id='primeraDivisión' |
||||||
|
label='Primera División' |
||||||
|
name='team' |
||||||
|
checked |
||||||
|
/> |
||||||
|
<Radio |
||||||
|
id='manchesterUnited' |
||||||
|
label='Manchester United' |
||||||
|
name='team' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
export const Wrapper = styled.div` |
||||||
|
|
||||||
|
` |
||||||
|
|
||||||
|
export const Label = styled.label` |
||||||
|
color: ${({ theme: { colors } }) => colors.text}; |
||||||
|
font-style: normal; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
` |
||||||
|
|
||||||
|
export const Input = styled.input` |
||||||
|
position: absolute; |
||||||
|
z-index: -1; |
||||||
|
opacity: 0; |
||||||
|
|
||||||
|
&+${Label} { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
&+${Label}::before { |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
width: 26px; |
||||||
|
height: 26px; |
||||||
|
margin-right: 22px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center center; |
||||||
|
background-image: url(/images/radioUnchecked.svg); |
||||||
|
} |
||||||
|
|
||||||
|
&:checked+${Label}::before { |
||||||
|
background-image: url(/images/radioChecked.svg); |
||||||
|
} |
||||||
|
` |
||||||
@ -1,2 +1,5 @@ |
|||||||
export * from './Input' |
export * from './Input' |
||||||
export * from './Button' |
export * from './Button' |
||||||
|
export * from './Radio' |
||||||
|
export * from './Checkbox' |
||||||
|
export * from './Arrows' |
||||||
|
|||||||
Loading…
Reference in new issue