Added loading button

src/components/Button/index.tsx

@@ -4,14 +4,17 @@ import { jsx, css } from '@emotion/core'
 
 import useTheme from '../../hooks/useTheme'
 import { getColor, getMeasure } from '../../helpers'
+import { Loader } from '..'
+import { getSize } from '../Loader'
 
 interface Props extends HasSkin {
   size?: Measure
+  loading?: boolean
   kind?: 'link' | 'ghost' | 'default'
 }
 
 const getFontSize = (measure: Measure) =>
-  getMeasure(measure, ['0.8rem', '1rem', '1.25rem', '1.50rem'])
+  getMeasure(measure, [0.8, 1, 1.25, 1.5])
 
 const getPadding = (measure: Measure) =>
   getMeasure(measure, [
@@ -25,10 +28,10 @@ const getPadding = (measure: Measure) =>
  * TODO: create kinds, receive button interface, loading button
  * @param param0
  */
-const Button: FC<Props> = ({ size, skin, children, ...rest }) => {
+const Button: FC<Props> = ({ size, skin, children, loading, ...rest }) => {
   const { elements, colors } = useTheme()
 
-  const fontSize = getFontSize(size!)
+  const fontSize = `${getFontSize(size!)}rem`
   const padding = getPadding(size!)
   const borderRadius = elements.roundness
 
@@ -81,7 +84,7 @@ const Button: FC<Props> = ({ size, skin, children, ...rest }) => {
         }
       `}
     >
-      {children}
+      {loading ? <Loader size={getFontSize(size!)} skin={skin} /> : children}
     </button>
   )
 }
@@ -90,6 +93,7 @@ Button.defaultProps = {
   skin: 'primary',
   size: 'md',
   kind: 'default',
+  loading: false,
 }
 
 export default Button

src/components/Loader/index.tsx

@@ -9,7 +9,7 @@ interface Props extends HasSkin {
   readonly speed?: Speed
   readonly gap?: Measure
   readonly thickness?: Measure
-  readonly size?: Measure
+  readonly size?: Measure | number
 }
 
 const infiniteSpin = keyframes`
@@ -21,11 +21,12 @@ export const getSpeed = (speed: Speed) =>
   speed === 'fast' ? 600 : speed === 'slow' ? 900 : 750
 
 export const getThickness = (thickness: Measure) =>
-  getMeasure(thickness, [2, 4, 6, 8])
+  getMeasure(thickness, [2, 4, 6, 7])
 
-export const getSize = (size: Measure) => getMeasure(size, [2, 4, 6, 8])
+export const getSize = (size: Measure | number) =>
+  typeof size === 'number' ? size : getMeasure(size, [1.5, 2, 3, 4])
 
-export const getGap = (gap: Measure) => getMeasure(gap, [1, 3, 4, 5])
+export const getGap = (gap: Measure) => getMeasure(gap, [1.5, 2, 3, 4])
 
 const Loader: FC<Props> = ({ thickness, size, speed, gap, skin }) => {
   const { colors } = useTheme()

src/docs/Button.mdx

@@ -26,6 +26,26 @@ import { Button, Surface } from '../index'
   <Button skin="danger">Danger</Button>
 </Playground>
 
+## Loading
+
+<Playground>
+  <Button size="sm" skin="primary" loading>
+    Primary
+  </Button>
+  <Button size="md" skin="secondary" loading>
+    Secondary
+  </Button>
+  <Button size="lg" skin="success" loading>
+    Success
+  </Button>
+  <Button size="xl" skin="warning" loading>
+    Warning
+  </Button>
+  <Button size="xl" skin="danger" loading>
+    Danger
+  </Button>
+</Playground>
+
 ## Kinds
 
 ### Default