diff --git a/app/components/Input.mdx b/app/components/Input.mdx new file mode 100644 index 0000000..5111f62 --- /dev/null +++ b/app/components/Input.mdx @@ -0,0 +1,26 @@ +--- +name: Input +--- + +import { Playground, PropsTable } from 'docz' + +import { InputComponent } from './input.js' +import { DoczWrapper } from '../theme.js' + +# Input + + + +## Text Input + + + {() => } + + +## Textarea + + + + {() => } + + diff --git a/app/components/input.js b/app/components/input.js new file mode 100644 index 0000000..459ae30 --- /dev/null +++ b/app/components/input.js @@ -0,0 +1,53 @@ +// @flow +import React from 'react'; + +import styled from 'styled-components'; + +// TODO: Missing styles + +const defaultStyles = ` + padding: 10px; + width: 100%; + outline: none; + font-family: ${props => props.theme.fontFamily} +`; + +const Input = styled.input.attrs({ + type: 'text', +})` + ${defaultStyles}; +`; + +const Textarea = styled.textarea` + ${defaultStyles}; +`; + +type Props = { + inputType?: 'input' | 'textarea' | 'dropdown', + value: string, + onChange: string => void, + rows?: number, + disabled?: boolean, + type?: string, +}; + +export const InputComponent = ({ inputType, onChange, ...props }: Props) => { + const inputTypes = { + input: () => onChange(evt.target.value)} {...props} />, + textarea: () =>