Merge pull request #2 from smooth-code/refactor-theme

feat: flatten theme & utils

Author: gregberge

package.json

@@ -53,7 +53,6 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "object.omit": "^3.0.0",
     "polished": "^1.9.2",
     "prop-types": "^15.6.0",
     "recompact": "^3.2.1"

src/Box.js

@@ -2,8 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import omit from 'object.omit'
-import defaultTheme from './style/defaultTheme'
+import * as defaultTheme from './style/defaultTheme'
 import handleRef from './internal/handleRef'
 
 const addProp = (propName, attribute, transform = x => x) => props =>
@@ -13,23 +12,21 @@ const addProp = (propName, attribute, transform = x => x) => props =>
       `
     : null
 
-const BoxComponent = ({ className, component: Component, ...props }) => (
-  <Component
-    className={classNames('sui-box', className)}
-    {...omit(props, [
-      'flex',
-      'theme',
-      'direction',
-      'wrap',
-      'alignItems',
-      'alignContent',
-      'alignSelf',
-      'justifyContent',
-      'padding',
-      'margin',
-    ])}
-  />
-)
+const BoxComponent = ({
+  className,
+  component: Component,
+  flex,
+  theme,
+  direction,
+  wrap,
+  alignItems,
+  alignContent,
+  alignSelf,
+  justifyContent,
+  padding,
+  margin,
+  ...props
+}) => <Component className={classNames('sui-box', className)} {...props} />
 
 /** @component */
 const Box = styled(handleRef(BoxComponent))`

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 { darken } from 'polished'
+import styled, { css } from 'styled-components'
 import handleRef from './internal/handleRef'
-import defaultTheme from './style/defaultTheme'
+import * as defaultTheme from './style/defaultTheme'
+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,
     )}
@@ -21,50 +33,50 @@ const ButtonComponent = ({ className, size, ...props }) => (
 
 const Button = styled(handleRef(ButtonComponent))`
   display: inline-block;
-  padding: ${props => props.theme.textControlPadding.sm};
-  z-index: ${props => props.theme.zIndexes.control};
-  border-radius: ${props => props.theme.borderRadius.md};
-  font-size: 1rem;
-  line-height: 1.5;
-  background-color: ${props => props.theme.colors.primary};
-  color: ${props => props.theme.colors.white};
-  border: 0;
+  padding: ${th('btnPaddingY')} ${th('btnPaddingX')};
+  z-index: ${th('zIndexControl')};
+  border-radius: ${th('borderRadius')};
+  font-size: ${th('fontSizeBase')};
+  line-height: ${th('lineHeightBase')};
+  color: ${th('white')};
+  border-width: ${th('btnBorderWidth')};
   cursor: pointer;
-  transition: background-color 300ms;
-
-  &:focus {
-    ${props => props.theme.mixins.controlFocus};
-  }
+  transition: ${th('transitionBase')};
 
-  &:not(:disabled):hover,
-  &:not(:disabled):active {
-    background-color: ${props => darken(0.05, props.theme.colors.primary)};
+  &.sui-button-sm {
+    padding: ${th('btnPaddingYSm')} ${th('btnPaddingXSm')};
+    font-size: ${th('fontSizeSm')};
+    border-radius: ${th('borderRadiusSm')};
   }
 
   &.sui-button-lg {
-    padding: ${props => props.theme.textControlPadding.lg};
-    font-size: ${props => props.theme.controlFontSize.lg};
-    border-radius: ${props => props.theme.borderRadius.lg};
-  }
-
-  &.sui-button-sm {
-    padding: ${props => props.theme.textControlPadding.sm};
-    font-size: ${props => props.theme.controlFontSize.sm};
-    border-radius: ${props => props.theme.borderRadius.sm};
+    padding: ${th('btnPaddingYLg')} ${th('btnPaddingXLg')};
+    font-size: ${th('fontSizeLg')};
+    border-radius: ${th('borderRadiusLg')};
   }
 
   &:disabled {
-    opacity: 0.8;
+    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

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import classNames from 'classnames'
 import InnerSwitch from './internal/InnerSwitch'
-import defaultTheme from './style/defaultTheme'
+import * as defaultTheme from './style/defaultTheme'
+import { th, mixin } from './utils'
 
-const CheckboxComponent = ({ className, size, ...props }) => (
+const CheckboxComponent = ({ className, size, theme, ...props }) => (
   <div
     className={classNames(
       'sui-checkbox',
@@ -43,23 +44,23 @@ const Checkbox = styled(CheckboxComponent)`
   position: relative;
   width: 1.5rem;
   height: 1.5rem;
-  z-index: ${props => props.theme.zIndexes.control};
+  z-index: ${th('zIndexControl')};
 
   .sui-checkbox-content {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 1rem;
     height: 1rem;
-    background-color: ${props => props.theme.colors.white};
-    border-radius: ${props => props.theme.borderRadius.md};
-    border: 1px solid ${props => props.theme.colors.controlBorder};
-    transition: border-color ${props => props.theme.transition.time},
-      background-color ${props => props.theme.transition.time},
-      box-shadow ${props => props.theme.transition.time};
+    background-color: ${th('inputBgColor')};
+    border-radius: ${th('borderRadius')};
+    border-style: solid;
+    border-width: ${th('inputBorderWidth')};
+    border-color: ${th('inputBorderColor')};
+    transition: ${th('transitionBase')};
 
     &.checked {
-      background-color: ${props => props.theme.colors.primary};
+      background-color: ${th('primary')};
       border-color: transparent;
 
       svg {
@@ -68,24 +69,24 @@ const Checkbox = styled(CheckboxComponent)`
     }
 
     &.focused {
-      ${props => props.theme.mixins.controlFocus};
+      ${mixin('controlFocus')};
     }
 
     &.disabled {
-      background-color: ${props => props.theme.colors.disabledControlBg};
+      background-color: ${th('inputDisabledBgColor')};
     }
   }
 
   svg {
     width: 0.75rem;
     pointer-events: none;
     transform: scale(0);
-    transition: transform ${props => props.theme.transition.time};
+    transition: ${th('transitionBase')};
   }
 
   &.sui-checkbox-sm {
     .sui-checkbox-content {
-      border-radius: ${props => props.theme.borderRadius.sm};
+      border-radius: ${th('borderRadiusSm')};
       width: 0.875rem;
       height: 0.875rem;
     }
@@ -97,7 +98,7 @@ const Checkbox = styled(CheckboxComponent)`
 
   &.sui-checkbox-lg {
     .sui-checkbox-content {
-      border-radius: ${props => props.theme.borderRadius.lg};
+      border-radius: ${th('borderRadiusLg')};
       width: 1.25rem;
       height: 1.25rem;
     }

src/Col.js

@@ -2,8 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import omit from 'object.omit'
-import defaultTheme from './style/defaultTheme'
+import * as defaultTheme from './style/defaultTheme'
 import handleRef from './internal/handleRef'
 
 const GRID_SIZES = [true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto']
@@ -49,7 +48,7 @@ function generateBreakPoint(breakpoint) {
   `
 }
 
-const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
+const ColComponent = ({ className, xs, sm, md, lg, xl, theme, ...props }) => (
   <div
     className={classNames(
       'sui-col',
@@ -67,7 +66,7 @@ const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
       },
       className,
     )}
-    {...omit(props, ['theme'])}
+    {...props}
   />
 )
 

src/ControlFeedBack.js

@@ -2,9 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import defaultTheme from './style/defaultTheme'
+import * as defaultTheme from './style/defaultTheme'
+import { th } from './utils'
 
-const ControlFeedbackComponent = ({ className, valid, ...props }) => (
+const ControlFeedbackComponent = ({ className, theme, valid, ...props }) => (
   <div
     className={classNames(
       'sui-control-feedback',
@@ -24,11 +25,11 @@ const ControlFeedback = styled(ControlFeedbackComponent)`
   font-size: 80%;
 
   &.sui-is-valid {
-    color: ${props => props.theme.colors.success};
+    color: ${th('success')};
   }
 
   &.sui-is-invalid {
-    color: ${props => props.theme.colors.danger};
+    color: ${th('danger')};
   }
 `
 

src/FormCheck.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-const FormCheckComponent = ({ className, inline, ...props }) => (
+const FormCheckComponent = ({ className, inline, theme, ...props }) => (
   <div
     className={classNames(
       'sui-form-check',

src/FormCheckLabel.js

@@ -3,17 +3,18 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import defaultTheme from './style/defaultTheme'
+import * as defaultTheme from './style/defaultTheme'
+import { th } from './utils'
 
-const FormCheckLabelComponent = ({ className, ...props }) => (
+const FormCheckLabelComponent = ({ className, theme, ...props }) => (
   <label className={classNames('sui-form-check-label', className)} {...props} />
 )
 
 const FormCheckLabel = styled(FormCheckLabelComponent)`
   padding-left: 0.25rem;
 
   [class*='disabled'] ~ & {
-    color: ${props => props.theme.colors.disabledControlText};
+    color: ${th('inputDisabledText')};
   }
 `
 

src/FormGroup.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-const FormGroupComponent = ({ className, ...props }) => (
+const FormGroupComponent = ({ className, theme, ...props }) => (
   <div className={classNames('sui-form-group', className)} {...props} />
 )