Added full and disabled button

matheusps · Jun 15, 2019 · 9e2945c · 9e2945c
1 parent be8bfa1
commit 9e2945c
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -7,9 +7,15 @@ import { getColor, getMeasure } from '../../helpers'
 import { Loader } from '..'
 import { getSize } from '../Loader'
 
-interface Props extends HasSkin {
+interface Props
+  extends HasSkin,
+    React.DetailedHTMLProps<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    > {
   size?: Measure
   loading?: boolean
+  full?: boolean
   kind?: 'link' | 'ghost' | 'default'
 }
 
@@ -28,37 +34,47 @@ const getPadding = (measure: Measure) =>
  * TODO: create kinds, receive button interface, loading button
  * @param param0
  */
-const Button: FC<Props> = ({ size, skin, children, loading, ...rest }) => {
+const Button: FC<Props> = ({
+  size,
+  skin,
+  children,
+  full,
+  loading,
+  disabled,
+  ...rest
+}) => {
   const { elements, colors } = useTheme()
 
   const fontSize = `${getFontSize(size!)}rem`
   const padding = getPadding(size!)
   const borderRadius = elements.roundness
 
   const buttonSkin = colors.skin[skin!]
-  const color = getColor(buttonSkin)
-  const bg = getColor(buttonSkin, 0.1)
-  const bgHover = getColor(buttonSkin, 0.2)
+  const color = getColor(buttonSkin, disabled ? 0.5 : 1)
+  const bg = getColor(buttonSkin, disabled ? 0.08 : 0.1)
+  const bgHover = getColor(buttonSkin, disabled ? 0.08 : 0.2)
   const bgActive = getColor(buttonSkin, 0.3)
 
   return (
     <button
       {...rest}
+      disabled={disabled}
       css={css`
         background-color: ${bg};
         color: ${color};
         font-size: ${fontSize};
         padding: ${padding};
         border-radius: ${borderRadius};
+        display: ${full ? 'block' : 'relative'};
+        width: ${full ? '100%' : 'auto'};
         border: none;
         box-sizing: border-box;
         font-weight: 500;
         font-stretch: normal;
         line-height: 1.4;
         margin: 0.2rem;
-        display: relative;
         overflow: hidden;
-        cursor: pointer;
+        cursor: ${disabled ? 'not-allowed' : 'pointer'};
         text-align: center;
         text-decoration: none;
         text-transform: none;
@@ -94,6 +110,7 @@ Button.defaultProps = {
   size: 'md',
   kind: 'default',
   loading: false,
+  full: false,
 }
 
 export default Button
diff --git a/src/docs/Button.mdx b/src/docs/Button.mdx
@@ -46,6 +46,43 @@ import { Button, Surface } from '../index'
   </Button>
 </Playground>
 
+## Full
+
+<Playground>
+  <Button size="sm" full>
+    Small
+  </Button>
+  <Button size="md" skin="success" full>
+    Medium
+  </Button>
+  <Button size="lg" skin="warning" full>
+    Large
+  </Button>
+  <Button size="xl" skin="danger" full>
+    XLarge
+  </Button>
+  <Button size="xl" skin="danger" loading full>
+    XLarge
+  </Button>
+</Playground>
+
+## Disabled
+
+<Playground>
+  <Button size="sm" disabled>
+    Small
+  </Button>
+  <Button size="md" disabled>
+    Medium
+  </Button>
+  <Button size="lg" disabled>
+    Large
+  </Button>
+  <Button size="xl" disabled loading>
+    XLarge
+  </Button>
+</Playground>
+
 ## Kinds
 
 ### Default