Refactor button style

src/components/base/Button/index.js

@@ -9,36 +9,88 @@ import { darken, lighten } from 'styles/helpers'
 
 import fontFamily from 'styles/styled/fontFamily'
 
+const buttonStyles = {
+  primary: {
+    default: p => `
+      background: ${p.disabled ? lighten(p.theme.colors.wallet, 0.1) : p.theme.colors.wallet};
+      color: white;
+    `,
+    hover: p => `
+      background: ${lighten(p.theme.colors.wallet, 0.05)};
+    `,
+    active: p => `
+      background: ${darken(p.theme.colors.wallet, 0.1)};
+    `,
+  },
+  danger: {
+    default: p => `
+      background: ${p.disabled ? lighten(p.theme.colors.alertRed, 0.3) : p.theme.colors.alertRed};
+      color: white;
+    `,
+    hover: p => `
+      background: ${lighten(p.theme.colors.alertRed, 0.1)};
+    `,
+    active: p => `
+      background: ${darken(p.theme.colors.alertRed, 0.1)};
+    `,
+  },
+  outline: {
+    default: p => `
+      background: transparent;
+      border: 1px solid ${p.theme.colors.wallet};
+      color: ${p.theme.colors.wallet};
+    `,
+    active: p => `
+      color: ${darken(p.theme.colors.wallet, 0.1)};
+      border-color: ${darken(p.theme.colors.wallet, 0.1)};
+    `,
+  },
+  icon: {
+    default: () => `
+      font-size: ${fontSize[3]}px;
+      padding-left: ${space[1]}px;
+      padding-right: ${space[1]}px;
+    `,
+  },
+}
+
+function getStyles(props, state) {
+  let output = ``
+  for (const s in buttonStyles) {
+    if (buttonStyles.hasOwnProperty(s) && props[s] === true) {
+      const style = buttonStyles[s][state]
+      if (style) {
+        output += style(props)
+      }
+    }
+  }
+  return output
+}
+
 const Base = styled.button.attrs({
   ff: 'Museo Sans|Regular',
   fontSize: p => p.fontSize || 3,
-  px: p => (p.primary ? (p.small ? 2 : 3) : 2),
+  px: 2,
+  color: 'grey',
 })`
   ${space};
   ${color};
   ${fontSize};
   ${fontWeight};
   ${fontFamily};
+  border: none;
   border-radius: ${p => p.theme.radii[1]}px;
-  border: ${p => (p.outline ? `1px solid ${p.theme.colors.wallet}` : 'none')};
-  color: ${p => (p.outline ? p.theme.colors.wallet : '')};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: ${p => (p.small ? 30 : 36)}px;
+  pointer-events: ${p => (p.disabled ? 'none' : '')};
   outline: none;
 
+  ${p => getStyles(p, 'default')};
   &:hover {
-    background: ${p => (p.disabled ? '' : p.primary ? lighten(p.theme.colors.wallet, 0.05) : '')};
+    ${p => getStyles(p, 'hover')};
   }
-
   &:active {
-    color: ${p =>
-      p.primary
-        ? ''
-        : p.outline
-          ? darken(p.theme.colors.wallet, 0.1)
-          : darken(p.theme.colors.grey, 0.2)};
-    border-color: ${p => (p.outline ? darken(p.theme.colors.wallet, 0.1) : '')};
-    background: ${p => (p.primary ? darken(p.theme.colors.wallet, 0.1) : '')};
+    ${p => getStyles(p, 'active')};
   }
 `
 
@@ -46,54 +98,17 @@ type Props = {
   children?: any,
   icon?: string,
   primary?: boolean,
+  danger?: boolean,
   disabled?: boolean,
   onClick?: Function,
   small?: boolean,
 }
 
-function getProps({ disabled, icon, primary }: Object) {
-  const props = (predicate, props, defaults = {}) => (predicate ? props : defaults)
-
-  return {
-    color: 'grey',
-    ...props(
-      icon,
-      {
-        fontSize: 3,
-        px: 1,
-      },
-      {
-        fontSize: 4,
-        px: 3,
-      },
-    ),
-    ...props(
-      primary,
-      {
-        color: 'white',
-        bg: 'wallet',
-      },
-      {
-        bg: 'transparent',
-      },
-    ),
-    ...props(disabled, {
-      color: 'grey',
-      bg: 'lightFog',
-    }),
-  }
-}
-
 const Button = (props: Props) => {
-  const { onClick, children, primary, disabled } = props
+  const { onClick, children, disabled } = props
 
   return (
-    <Base
-      {...getProps({ primary, disabled })}
-      {...props}
-      disabled={disabled}
-      onClick={disabled ? undefined : onClick}
-    >
+    <Base {...props} onClick={disabled ? undefined : onClick}>
       {children}
     </Base>
   )
@@ -106,6 +121,7 @@ Button.defaultProps = {
   onClick: noop,
   primary: false,
   small: false,
+  danger: false,
 }
 
 export default Button

src/components/base/Button/stories.js

@@ -47,6 +47,17 @@ stories.add('Button', () => (
           </Button>
         </Td>
       </tr>
+      <tr>
+        <Td>danger</Td>
+        <Td>
+          <Button danger>Danger button</Button>
+        </Td>
+        <Td>
+          <Button danger disabled>
+            Danger button
+          </Button>
+        </Td>
+      </tr>
       <tr>
         <Td>outline</Td>
         <Td>