chore(docz-example-basic): improve button component

examples/basic/src/components/Button.jsx

@@ -17,24 +17,43 @@ const scales = {
   `,
 }
 
-const kinds = {
-  primary: `
-    background: #1FB6FF;
-    color: white;
-  `,
-  secondary: `
-    background: #592DEA;
-    color: white;
-  `,
+const kind = outline => (bg, color) => {
+  const boxShadowColor = outline ? bg : 'transparent'
+  const backgroundColor = outline ? 'transparent' : bg
+
+  return `
+    background: ${backgroundColor};
+    box-shadow: inset 0 0 0 1px ${boxShadowColor};
+    color: ${outline ? bg : color};
+    transition: all .3s;
+
+    &:hover {
+      box-shadow: inset 0 0 0 1000px ${boxShadowColor};
+      color: white;
+    }
+  `
 }
 
+const kinds = outline => {
+  const get = kind(outline)
+
+  return {
+    primary: get('#1FB6FF', 'white'),
+    secondary: get('#592DEA', 'white'),
+    cancel: get('#FF4949', 'white'),
+  }
+}
+
+const getScale = ({ scale = 'normal' }) => scales[scale]
+const getKind = ({ kind = 'primary', outline = false }) => kinds(outline)[kind]
+
 const ButtonStyled = styled('button')`
+  ${getKind};
+  ${getScale};
   cursor: pointer;
   margin: 3px 5px;
   border: none;
   border-radius: 3px;
-  ${({ scale = 'normal' }) => scales[scale]};
-  ${({ kind = 'info' }) => kinds[kind]};
 `
 
 const Button = ({ children, ...props }) => (
@@ -43,12 +62,14 @@ const Button = ({ children, ...props }) => (
 
 Button.propTypes = {
   scales: t.oneOf(['small', 'normal', 'big']),
-  kind: t.oneOf(['primary', 'secondary']),
+  kind: t.oneOf(['primary', 'secondary', 'cancel']),
+  outline: t.bool,
 }
 
 Button.defaultProps = {
   scales: 'normal',
   kind: 'primary',
+  outline: false,
 }
 
 export default Button

examples/basic/src/components/Button.mdx

@@ -30,3 +30,20 @@ Buttons make common actions more obvious and help users more easily perform them
   <Button scale="normal">Click me</Button>
   <Button scale="big">Click me</Button>
 </Playground>
+
+## With different colors
+
+<Playground>
+  <Button kind="primary">Click me</Button>
+  <Button kind="secondary">Click me</Button>
+  <Button kind="cancel">Click me</Button>
+</Playground>
+
+## Outlined
+
+<Playground>
+  <Button kind="primary" outline>Click me</Button>
+  <Button kind="secondary" outline>Click me</Button>
+  <Button kind="cancel" outline>Click me</Button>
+</Playground>
+