diff --git a/public/images/arrowLeft.svg b/public/images/arrowLeft.svg new file mode 100644 index 00000000..dfa7c5d0 --- /dev/null +++ b/public/images/arrowLeft.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/public/images/arrowRight.svg b/public/images/arrowRight.svg new file mode 100644 index 00000000..7875155b --- /dev/null +++ b/public/images/arrowRight.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/public/images/checkboxChecked.svg b/public/images/checkboxChecked.svg new file mode 100644 index 00000000..bcf8ad02 --- /dev/null +++ b/public/images/checkboxChecked.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/checkboxUnchecked.svg b/public/images/checkboxUnchecked.svg new file mode 100644 index 00000000..e69c317e --- /dev/null +++ b/public/images/checkboxUnchecked.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + diff --git a/public/images/radioChecked.svg b/public/images/radioChecked.svg new file mode 100644 index 00000000..27cf636c --- /dev/null +++ b/public/images/radioChecked.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/radioUnchecked.svg b/public/images/radioUnchecked.svg new file mode 100644 index 00000000..e14a682f --- /dev/null +++ b/public/images/radioUnchecked.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + diff --git a/src/features/Components/Arrows/index.tsx b/src/features/Components/Arrows/index.tsx new file mode 100644 index 00000000..4302a0c0 --- /dev/null +++ b/src/features/Components/Arrows/index.tsx @@ -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); +` diff --git a/src/features/Components/Arrows/stories.tsx b/src/features/Components/Arrows/stories.tsx new file mode 100644 index 00000000..fa8af4b3 --- /dev/null +++ b/src/features/Components/Arrows/stories.tsx @@ -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 = () => ( +
+ + +
+) diff --git a/src/features/Components/Checkbox/index.tsx b/src/features/Components/Checkbox/index.tsx new file mode 100644 index 00000000..b3c80f67 --- /dev/null +++ b/src/features/Components/Checkbox/index.tsx @@ -0,0 +1,38 @@ +import React, { InputHTMLAttributes } from 'react' + +import { + Wrapper, + Input, + Label, +} from './styled' + +type TCheckbox = Pick, ( + | 'checked' + | 'id' + | 'name' + | 'value' + | 'onChange' +)> & { + label?: string, +} + +export const Checkbox = ({ + checked, + id, + label, + name, + onChange, + value, +}: TCheckbox) => ( + + + + +) diff --git a/src/features/Components/Checkbox/stories.tsx b/src/features/Components/Checkbox/stories.tsx new file mode 100644 index 00000000..1675a0fe --- /dev/null +++ b/src/features/Components/Checkbox/stories.tsx @@ -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 = () => ( +
+ + +
+) diff --git a/src/features/Components/Checkbox/styled.tsx b/src/features/Components/Checkbox/styled.tsx new file mode 100644 index 00000000..6c62dff1 --- /dev/null +++ b/src/features/Components/Checkbox/styled.tsx @@ -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); + } +` diff --git a/src/features/Components/Radio/index.tsx b/src/features/Components/Radio/index.tsx new file mode 100644 index 00000000..7ef499cf --- /dev/null +++ b/src/features/Components/Radio/index.tsx @@ -0,0 +1,38 @@ +import React, { InputHTMLAttributes } from 'react' + +import { + Wrapper, + Input, + Label, +} from './styled' + +type TCheckbox = Pick, ( + | 'checked' + | 'id' + | 'name' + | 'value' + | 'onChange' +)> & { + label?: string, +} + +export const Radio = ({ + checked, + id, + label, + name, + onChange, + value, +}: TCheckbox) => ( + + + + +) diff --git a/src/features/Components/Radio/stories.tsx b/src/features/Components/Radio/stories.tsx new file mode 100644 index 00000000..71d3df58 --- /dev/null +++ b/src/features/Components/Radio/stories.tsx @@ -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 = () => ( +
+ + +
+) diff --git a/src/features/Components/Radio/styled.tsx b/src/features/Components/Radio/styled.tsx new file mode 100644 index 00000000..9a98a8e6 --- /dev/null +++ b/src/features/Components/Radio/styled.tsx @@ -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); + } +` diff --git a/src/features/Components/index.tsx b/src/features/Components/index.tsx index 492b3b01..7161a69c 100644 --- a/src/features/Components/index.tsx +++ b/src/features/Components/index.tsx @@ -1,2 +1,5 @@ export * from './Input' export * from './Button' +export * from './Radio' +export * from './Checkbox' +export * from './Arrows'