feat: add variants to buttons

Author: gregberge

src/Button.js

@@ -1,18 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import handleRef from './internal/handleRef'
 import * as defaultTheme from './style/defaultTheme'
-import { th } from './utils'
+import { th, mixin } from './utils'
 
-const ButtonComponent = ({ className, size, ...props }) => (
+const variants = [
+  'primary',
+  'secondary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'light',
+  'dark',
+]
+
+const ButtonComponent = ({ className, size, theme, variant, ...props }) => (
   <button
     {...props}
     className={classNames(
       'sui-button',
       {
         [`sui-button-${size}`]: size,
+        [`sui-button-${variant}`]: variant,
       },
       className,
     )}
@@ -26,21 +38,11 @@ const Button = styled(handleRef(ButtonComponent))`
   border-radius: ${th('borderRadius')};
   font-size: ${th('fontSizeBase')};
   line-height: ${th('lineHeightBase')};
-  background-color: ${th('btnBackgroundColor')};
   color: ${th('white')};
   border-width: ${th('btnBorderWidth')};
   cursor: pointer;
   transition: ${th('transitionBase')};
 
-  &:focus {
-    ${th('controlFocus')};
-  }
-
-  &:not(:disabled):hover,
-  &:not(:disabled):active {
-    background-color: ${th('btnHoverBackgroundColor')};
-  }
-
   &.sui-button-sm {
     padding: ${th('btnPaddingYSm')} ${th('btnPaddingXSm')};
     font-size: ${th('fontSizeSm')};
@@ -56,15 +58,25 @@ const Button = styled(handleRef(ButtonComponent))`
   &:disabled {
     opacity: ${th('btnDisabledOpacity')};
   }
+
+  ${variants.map(
+    variant => css`
+      &.sui-button-${variant} {
+        ${mixin('btnVariant', variant)};
+      }
+    `,
+  )};
 `
 
 Button.propTypes = {
-  size: PropTypes.oneOf(['sm', 'lg']),
   disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  variant: PropTypes.oneOf(variants),
   theme: PropTypes.object,
 }
 
 Button.defaultProps = {
+  variant: 'primary',
   theme: defaultTheme,
 }
 

src/Button.md

@@ -1,3 +1,36 @@
+### Variants
+
+Set sizes using `variant` prop.
+
+```js
+<div>
+  <span style={{ margin: '5px' }}>
+    <Button variant="primary">Primary</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="secondary">Secondary</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="success">Success</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="danger">Danger</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="warning">Warning</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="info">Info</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="light">Light</Button>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Button variant="dark">Dark</Button>
+  </span>
+</div>
+```
+
 ### Sizes
 
 Set sizes using `size` prop like `"sm"` or `"lg"`.

src/Checkbox.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import classNames from 'classnames'
 import InnerSwitch from './internal/InnerSwitch'
 import * as defaultTheme from './style/defaultTheme'
-import { th } from './utils'
+import { th, mixin } from './utils'
 
 const CheckboxComponent = ({ className, size, theme, ...props }) => (
   <div
@@ -69,7 +69,7 @@ const Checkbox = styled(CheckboxComponent)`
     }
 
     &.focused {
-      ${th('controlFocus')};
+      ${mixin('controlFocus')};
     }
 
     &.disabled {

src/Input.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import handleRef from './internal/handleRef'
 import * as defaultTheme from './style/defaultTheme'
-import { th } from './utils'
+import { th, mixin } from './utils'
 
 const InputComponent = ({
   className,
@@ -51,7 +51,7 @@ const Input = styled(handleRef(InputComponent))`
   }
 
   &:focus {
-    ${th('controlFocus')};
+    ${mixin('controlFocus')};
   }
 
   &[disabled] {

src/Radio.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import classNames from 'classnames'
 import * as defaultTheme from './style/defaultTheme'
 import InnerSwitch from './internal/InnerSwitch'
-import { th } from './utils'
+import { th, mixin } from './utils'
 
 const RadioComponent = ({ className, size, theme, ...props }) => (
   <div
@@ -62,7 +62,7 @@ const Radio = styled(RadioComponent)`
     }
 
     &.focused {
-      ${th('controlFocus')};
+      ${mixin('controlFocus')};
     }
 
     &.disabled {

src/Select.js

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import styled from 'styled-components'
 import handleRef from './internal/handleRef'
 import * as defaultTheme from './style/defaultTheme'
-import { th } from './utils'
+import { th, mixin } from './utils'
 
 const renderOption = option => {
   const { label, value } =
@@ -84,7 +84,7 @@ const Select = styled(handleRef(SelectComponent))`
     padding-right: 1.6rem;
 
     &:focus {
-      ${th('controlFocus')};
+      ${mixin('controlFocus')};
     }
 
     &[disabled] {

src/Switch.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import classNames from 'classnames'
 import * as defaultTheme from './style/defaultTheme'
 import InnerSwitch from './internal/InnerSwitch'
-import { th } from './utils'
+import { th, mixin } from './utils'
 
 const SwitchComponent = ({ className, labeled, theme, ...props }) => (
   <div
@@ -53,7 +53,7 @@ const Switch = styled(SwitchComponent)`
     transition: ${th('transitionBase')};
 
     &.focused {
-      ${th('controlFocus')};
+      ${mixin('controlFocus')};
     }
 
     &.checked {

src/style/defaultTheme.js

@@ -1,7 +1,13 @@
 /* eslint-disable no-unused-vars */
 import { injectGlobal, css } from 'styled-components'
-import { transparentize, lighten, modularScale, darken } from 'polished'
-import { th } from '../utils'
+import {
+  transparentize,
+  lighten,
+  modularScale,
+  darken,
+  parseToRgb,
+} from 'polished'
+import { th, mixin } from '../utils'
 
 /* eslint-disable no-unused-expressions */
 injectGlobal`
@@ -54,6 +60,9 @@ export const dark = gray800
 export const primaryLight = th('primary', c => lighten(0.3, c))
 export const secondaryLight = th('secondary', c => lighten(0.3, c))
 
+export const yikTextDark = '#111'
+export const yikTextLight = '#fff'
+
 // Borders
 
 export const borderRadius = '.25rem'
@@ -110,11 +119,6 @@ export const btnPaddingXLg = th('inputBtnPaddingXLg')
 export const btnLineHeightLg = th('inputBtnLineHeightLg')
 
 export const btnBorderWidth = 0
-
-export const btnBackgroundColor = th('primary')
-export const btnHoverBackgroundColor = th('btnBackgroundColor', color =>
-  darken(0.05, color),
-)
 export const btnDisabledOpacity = 0.8
 
 // Inputs
@@ -168,7 +172,27 @@ export const breakPoints = {
 
 // Mixins
 
-export const controlFocus = css`
+export const controlFocus = (baseColor = 'primary') => css`
   outline: 0;
-  box-shadow: 0 0 2px ${th('primary', color => transparentize(0.1, color))};
+  box-shadow: 0 0 2px ${th(baseColor, color => transparentize(0.1, color))};
 `
+
+export const btnVariant = baseColor => css`
+  color: ${props => props.theme.colorYik(th(baseColor)(props))};
+  background-color: ${th(baseColor)};
+
+  &:focus {
+    ${mixin('controlFocus', baseColor)};
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):active {
+    background-color: ${th(baseColor, color => darken(0.05, color))};
+  }
+`
+
+export const colorYik = color => {
+  const { red: r, green: g, blue: b } = parseToRgb(color)
+  const yik = (r * 299 + g * 587 + b * 114) / 1000
+  return yik >= 150 ? th('yikTextDark') : th('yikTextLight')
+}

src/utils.js

@@ -9,15 +9,17 @@ export const upTo = (breakPoint, code) => css`
     ${code};
   }
 `
-export const th = (value, modifier = x => x) => props => {
+export const th = (name, modifier = x => x) => props => {
   function run(fn) {
     const next = fn(props)
     if (typeof next === 'undefined')
-      throw new Error(`"${value}" not found in theme`)
+      throw new Error(`"${name}" not found in theme`)
     if (typeof next === 'function') return run(next)
     return next
   }
 
-  const result = run(p => p.theme[value])
+  const result = run(p => p.theme[name])
   return modifier(result)
 }
+
+export const mixin = (name, ...args) => props => props.theme[name](...args)