feat: write styles for input component

example/src/App.tsx

@@ -77,31 +77,55 @@ const App = () => {
         </div>
         <hr />
         <div className='input-group'>
-          <Input
-            placeholder='Something new'
-            onChange={(e) => setValue(e.target.value)}
-            value={inputValue}
-            variant='fill'
-          />
-          <Input
-            placeholder='Something new'
-            onChange={(e) => setValue(e.target.value)}
-            value={inputValue}
-            variant='outline'
-          />
-          <Input
-            placeholder='Something new'
-            onChange={(e) => setValue(e.target.value)}
-            value={inputValue}
-            variant='unstyled'
-          />
-          <Input
-            placeholder='Something new'
-            onChange={(e) => setValue(e.target.value)}
-            value={inputValue}
-            variant='unstyled'
-            disabled
-          />
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              console.log(inputValue)
+            }}
+          >
+            <Input
+              placeholder='Something new'
+              onChange={(e) => setValue(e.target.value)}
+              value={inputValue}
+              variant='fill'
+              inputSize='md'
+              borderRadius='curve'
+            />
+            <Input
+              placeholder='Something new'
+              onChange={(e) => setValue(e.target.value)}
+              value={inputValue}
+              required
+              inputSize='md'
+              borderRadius='curve'
+            />
+            <Input
+              placeholder='Something new'
+              onChange={(e) => setValue(e.target.value)}
+              value={inputValue}
+              variant='fill'
+              fullWidth
+              borderRadius='round'
+              type='password'
+              disabled
+            />
+            <Input
+              placeholder='Something new'
+              onChange={(e) => setValue(e.target.value)}
+              value={inputValue}
+              variant='unstyled'
+              inputSize='sm'
+              borderRadius='square'
+            />
+            <Input
+              placeholder='Something new'
+              onChange={(e) => setValue(e.target.value)}
+              value={inputValue}
+              disabled
+              inputSize='sm'
+            />
+            <Button>Submit</Button>
+          </form>
         </div>
       </div>
     </ThemeProvider>

src/components/button/button.tsx

@@ -112,8 +112,6 @@ const BaseButton = ({ shape, size, loading, disabled }: ButtonProps) => css`
   display: inline-flex;
   align-items: center;
 
-  
-
   .btn-icon--left,   
   .btn-icon--right {
     height: 15px;

src/components/input/Readme.md

@@ -32,13 +32,13 @@ const App: FC = () => (
 
 ## Todo
 
-- [ ] variant
-- [ ] fullWidth
+- [x] variant
+- [x] fullWidth
 - [ ] required
 - [ ] prefix & suffix icons
-- [ ] disabled
-- [ ] inputSize
-- [ ] borderRadius
+- [x] disabled
+- [x] inputSize
+- [x] borderRadius
 
 ## Test Suites
 

src/components/input/input.tsx

@@ -3,13 +3,17 @@ import styled from '@emotion/styled'
 import { css } from '@emotion/react'
 import { theme } from '../theme'
 import { Size } from '../button'
+import { getBorderRadius } from '../../utils/input'
+
+const { inputTheme } = theme.components
 
 const Input: FC<Input> = ({ size, ...props }) => {
+  if (props.variant === 'unstyled') return <input {...props} />
   return <StyledInput {...props} />
 }
 
 type Variant = 'fill' | 'outline' | 'unstyled'
-type BorderRadius = 'curve' | 'square' | 'round'
+export type BorderRadius = 'curve' | 'square' | 'round'
 
 interface Input extends InputHTMLAttributes<HTMLInputElement> {
   /**
@@ -43,12 +47,22 @@ interface Input extends InputHTMLAttributes<HTMLInputElement> {
   borderRadius?: BorderRadius
 }
 
-const StyledBaseInput = ({ disabled }: Input) => css`
+const StyledBaseInput = ({
+  disabled,
+  inputSize,
+  borderRadius,
+  fullWidth
+}: Input) => css`
   border: 1px solid ${theme.colors.gray[5]};
   font: inherit;
-  padding: ${theme.spacing.small} ${theme.spacing.medium};
-  transition: border-color;
+  font-size: ${inputSize === 'sm' && '14px'};
+  padding: ${inputSize && inputTheme.size[inputSize].verticalPadding}
+    ${inputSize && inputTheme.size[inputSize].horizontalPadding};
+  transition: border-color, background;
   transition-duration: 0.25s;
+  border-radius: ${borderRadius && getBorderRadius(borderRadius)};
+  width: ${fullWidth ? '100%' : 'auto'};
+
   transition-timing-function: ease-out;
 
   &:hover {
@@ -64,15 +78,35 @@ const StyledBaseInput = ({ disabled }: Input) => css`
     cursor: not-allowed;
     background: ${theme.colors.gray[3]};
     border: none;
+    user-select: none;
   }
 `
 
+const StyledFilledInput = ({ variant, disabled }: Input) =>
+  variant === 'fill' &&
+  css`
+    border: none;
+    background: ${theme.colors.gray[4]};
+    border: 1px solid transparent;
+
+    &:hover {
+      border: none;
+      border: ${!disabled && `1px solid ${theme.colors.gray[5]}`};
+    }
+
+    &:active,
+    &:focus {
+      background: ${!disabled && `inherit`};
+    }
+  `
+
 const StyledOutlineInput = ({ variant }: Input) =>
   variant === 'outline' && css``
 
 const StyledInput = styled.input<Input>`
-  ${StyledBaseInput}
-  ${StyledOutlineInput}
+  ${StyledBaseInput};
+  ${StyledFilledInput};
+  ${StyledOutlineInput};
 `
 
 Input.defaultProps = {

src/components/theme/components/index.ts

@@ -1 +1,2 @@
 export * from './button.theme'
+export * from './input.theme'

src/components/theme/index.ts

@@ -1,14 +1,15 @@
 import colors from './colors'
 import borders from './borders'
 import spacing from './spacing'
-import { buttonTheme } from './components'
+import { buttonTheme, inputTheme } from './components'
 
 const theme = {
   colors,
   borders,
   spacing,
   components: {
-    buttonTheme
+    buttonTheme,
+    inputTheme
   }
 }
 

src/utils/input.ts

@@ -0,0 +1,18 @@
+import { BorderRadius } from '../components/input'
+import borders from '../components/theme/borders'
+
+export const getBorderRadius = (borderRadius: BorderRadius) => {
+  switch (borderRadius) {
+    case 'curve':
+      return borders.full
+
+    case 'round':
+      return borders.sm
+
+    case 'square':
+      return `none`
+
+    default:
+      throw new Error('Please pass in a borderRadius')
+  }
+}