keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
mirlan.maksitaliev
6 years ago
parent
9ea4b9ef13
commit
56e99e6291
@ -1,19 +0,0 @@ |
||||
import React, { ReactNode } from 'react' |
||||
|
||||
type ButtonProps = { |
||||
children: ReactNode, |
||||
|
||||
/** |
||||
* Simple click handler |
||||
*/ |
||||
onClick?: () => void, |
||||
} |
||||
|
||||
/** |
||||
* The world's most _basic_ button |
||||
*/ |
||||
export const Button = ({ children, onClick }: ButtonProps) => ( |
||||
<button onClick={onClick} type='button'> |
||||
{children} |
||||
</button> |
||||
) |
||||
@ -1,20 +0,0 @@ |
||||
import React from 'react' |
||||
|
||||
import { action } from '@storybook/addon-actions' |
||||
|
||||
import { Button } from 'features/Button' |
||||
|
||||
export default { |
||||
component: Button, |
||||
title: 'Button', |
||||
} |
||||
|
||||
export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button> |
||||
|
||||
export const Emoji = () => ( |
||||
<Button onClick={action('clicked')}> |
||||
<span role='img' aria-label='so cool'> |
||||
😀 😎 👍 💯 |
||||
</span> |
||||
</Button> |
||||
) |
||||
@ -0,0 +1 @@ |
||||
export * from './styled' |
||||
@ -0,0 +1,21 @@ |
||||
import React from 'react' |
||||
|
||||
import { action } from '@storybook/addon-actions' |
||||
|
||||
import { ButtonOutline, ButtonSolid } from 'features/Components' |
||||
|
||||
export default { |
||||
title: 'Button', |
||||
} |
||||
|
||||
export const Solid = () => ( |
||||
<ButtonSolid onClick={action('clicked')}> |
||||
Solid |
||||
</ButtonSolid> |
||||
) |
||||
|
||||
export const Outline = () => ( |
||||
<ButtonOutline onClick={action('clicked')}> |
||||
Outline |
||||
</ButtonOutline> |
||||
) |
||||
@ -0,0 +1,44 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
const baseButtonStyles = css` |
||||
width: 272px; |
||||
height: 48px; |
||||
border-width: 0.7px; |
||||
border-style: solid; |
||||
border-radius: 2px; |
||||
padding: 0 12px; |
||||
|
||||
font-style: normal; |
||||
font-size: 20px; |
||||
outline-color: white; |
||||
` |
||||
|
||||
export const outlineButtonStyles = css` |
||||
${baseButtonStyles} |
||||
|
||||
padding-top: 8.6px; |
||||
padding-bottom: 10.6px; |
||||
color: ${({ theme: { colors } }) => colors.secondary}; |
||||
font-weight: normal; |
||||
border-color: ${({ theme: { colors } }) => colors.secondary}; |
||||
background: transparent; |
||||
` |
||||
|
||||
export const solidButtonStyles = css` |
||||
${baseButtonStyles} |
||||
|
||||
padding-top: 18.5px; |
||||
padding-bottom: 13px; |
||||
color: #FFFFFF; |
||||
font-weight: bold; |
||||
border-color: transparent; |
||||
background: ${({ theme: { colors } }) => colors.primary}; |
||||
` |
||||
|
||||
export const ButtonSolid = styled.button` |
||||
${solidButtonStyles} |
||||
` |
||||
|
||||
export const ButtonOutline = styled.button` |
||||
${outlineButtonStyles} |
||||
` |
||||
@ -0,0 +1,58 @@ |
||||
import React from 'react' |
||||
|
||||
import { |
||||
TInputWrapper, |
||||
InputWrapper, |
||||
InputStyled, |
||||
Label, |
||||
} from './styled' |
||||
|
||||
type TInput = { |
||||
defaultValue?: string, |
||||
id: string, |
||||
inputWidth?: number, |
||||
label: string, |
||||
labelWidth?: number, |
||||
maxLength?: number, |
||||
onChange?: () => void, |
||||
required?: boolean, |
||||
type?: string, |
||||
value?: string, |
||||
} & TInputWrapper |
||||
|
||||
export const Input = ({ |
||||
defaultValue, |
||||
id, |
||||
inputWidth, |
||||
label, |
||||
labelWidth, |
||||
maxLength, |
||||
onChange, |
||||
px, |
||||
required, |
||||
type, |
||||
value, |
||||
wrapperWidth, |
||||
}: TInput) => ( |
||||
<InputWrapper |
||||
wrapperWidth={wrapperWidth} |
||||
px={px} |
||||
> |
||||
<Label |
||||
htmlFor={id} |
||||
labelWidth={labelWidth} |
||||
> |
||||
{label} |
||||
</Label> |
||||
<InputStyled |
||||
id={id} |
||||
type={type} |
||||
required={required} |
||||
value={value} |
||||
defaultValue={defaultValue} |
||||
onChange={onChange} |
||||
maxLength={maxLength} |
||||
inputWidth={inputWidth} |
||||
/> |
||||
</InputWrapper> |
||||
) |
||||
@ -0,0 +1,35 @@ |
||||
import React, { Fragment } from 'react' |
||||
|
||||
import { Input } from 'features/Components' |
||||
|
||||
export default { |
||||
component: Input, |
||||
title: 'Input', |
||||
} |
||||
|
||||
export const Empty = () => ( |
||||
<Input |
||||
id='email' |
||||
type='email' |
||||
label='Email' |
||||
/> |
||||
) |
||||
|
||||
export const EmailPassword = () => ( |
||||
<Fragment> |
||||
<Input |
||||
id='email' |
||||
type='email' |
||||
label='Email' |
||||
labelWidth={72} |
||||
defaultValue='someveeeeeeeeerylooooooooong@email.com' |
||||
/> |
||||
<Input |
||||
id='password' |
||||
type='password' |
||||
label='Password' |
||||
labelWidth={72} |
||||
defaultValue='abcdefgh' |
||||
/> |
||||
</Fragment> |
||||
) |
||||
@ -0,0 +1,70 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
export type TInputWrapper = { |
||||
px?: number, |
||||
wrapperWidth?: number, |
||||
} |
||||
|
||||
export const InputWrapper = styled.div<TInputWrapper>` |
||||
width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')}; |
||||
height: 48px; |
||||
margin: 20px 0; |
||||
padding-left: ${({ px = 24 }) => (px ? `${px}px` : '')}; |
||||
padding-right: ${({ px = 24 }) => (px ? `${px}px` : '')}; |
||||
padding-top: 13px; |
||||
padding-bottom: 11px; |
||||
display: flex; |
||||
align-items: center; |
||||
background-color: #3F3F3F; |
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); |
||||
border-radius: 2px; |
||||
` |
||||
|
||||
type TLabel = { |
||||
labelWidth?: number, |
||||
} |
||||
|
||||
export const Label = styled.label<TLabel>` |
||||
font-style: normal; |
||||
font-weight: normal; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
letter-spacing: -0.01em; |
||||
padding-top: 2px; |
||||
color: ${({ theme: { colors } }) => colors.secondary}; |
||||
width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; |
||||
` |
||||
|
||||
type TInputStyled = { |
||||
inputWidth?: number, |
||||
} |
||||
|
||||
export const InputStyled = styled.input<TInputStyled>` |
||||
flex-grow: 1; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
width: ${({ inputWidth }) => (inputWidth ? `${inputWidth}px` : '')}; |
||||
background-color: transparent; |
||||
border: transparent; |
||||
margin-left: 24px; |
||||
color: ${({ theme: { colors } }) => colors.text}; |
||||
|
||||
&[type='password'] { |
||||
letter-spacing: 6px; |
||||
} |
||||
|
||||
:focus { |
||||
border-color: transparent; |
||||
outline: none; |
||||
} |
||||
|
||||
:-webkit-autofill, |
||||
:-webkit-autofill:hover, |
||||
:-webkit-autofill:focus, |
||||
:-webkit-autofill:active { |
||||
box-shadow: 0 0 0 30px #3F3F3F inset; |
||||
caret-color: ${({ theme: { colors } }) => colors.text}; |
||||
-webkit-text-fill-color: ${({ theme: { colors } }) => colors.text}; |
||||
} |
||||
` |
||||
@ -0,0 +1,2 @@ |
||||
export * from './Input' |
||||
export * from './Button' |
||||
@ -0,0 +1,46 @@ |
||||
import { createGlobalStyle } from 'styled-components/macro' |
||||
|
||||
export const GlobalStyles = createGlobalStyle` |
||||
*, *:before, *:after { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
min-height: 100vh; |
||||
margin: 0; |
||||
padding: 0; |
||||
font-family: Montserrat, Tahoma, sans-serif; |
||||
font-size: 12px; |
||||
line-height: 12px; |
||||
color: #000; |
||||
} |
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, li { |
||||
margin: 0; |
||||
padding: 0; |
||||
font-size: 12px; |
||||
line-height: 12px; |
||||
} |
||||
|
||||
ul, li { |
||||
list-style: none; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
color: #000; |
||||
} |
||||
|
||||
fieldset { |
||||
margin: 0; |
||||
min-width: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
} |
||||
|
||||
button, input, select, textarea { |
||||
font-family: inherit; |
||||
font-size: inherit; |
||||
line-height: inherit; |
||||
} |
||||
` |
||||
Loading…
Reference in new issue