Merge pull request #3 from smooth-code/alerts

gregberge · web-flow · commit 28d6950aacea · 2018-04-01T11:08:32.000+02:00
Alerts
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,5 +14,7 @@ module.exports = {
     'import/prefer-default-export': 'off',
 
     'no-return-assign': 'off',
+    'no-param-reassign': 'off',
+    'no-shadow': 'off',
   },
 }
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,5 @@
 node_modules/
 build/
 styleguide/
+package.json
+CHANGELOG.json
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,15 @@
+language: node_js
+
+node_js:
+  - 8
+
+script:
+  - yarn ci
+
+notifications:
+  email: false
+
+cache:
+  yarn: true
+  directories:
+    - "node_modules"
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 </h1>
 <p align="center" style="font-size: 1.2rem;">React Components library based on Styled Components.</p>
 
-<!-- [![Build Status][build-badge]][build] -->
+[![Build Status][build-badge]][build]
 
 <!-- [![Code Coverage][coverage-badge]][coverage] -->
 
diff --git a/package.json b/package.json
@@ -13,8 +13,10 @@
     "build:lib": "cross-env BABEL_ENV=lib babel --out-dir build src",
     "build:rollup": "cross-env BABEL_ENV=rollup rollup -c",
     "build:watch": "yarn build:lib --watch",
+    "ci": "yarn lint",
     "deploy:docs": "firebase deploy",
     "dev": "styleguidist server",
+    "lint": "eslint .",
     "prebuild": "shx rm -rf dist/*",
     "release": "standard-version && conventional-github-releaser -p angular && yarn build && yarn deploy:docs"
   },
diff --git a/src/Alert.js b/src/Alert.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styled, { css } from 'styled-components'
+import handleRef from './internal/handleRef'
+import setWithComponent from './internal/setWithComponent'
+import * as defaultTheme from './style/defaultTheme'
+import { th, mixin } from './utils'
+
+const variants = [
+  'primary',
+  'secondary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'light',
+  'dark',
+]
+
+const AlertComponent = ({
+  className,
+  component: Component = 'div',
+  theme,
+  variant,
+  ...props
+}) => (
+  <Component
+    {...props}
+    className={classNames(
+      'sui-alert',
+      {
+        [`sui-alert-${variant}`]: variant,
+      },
+      className,
+    )}
+  />
+)
+
+const Alert = styled(handleRef(AlertComponent))`
+  position: relative;
+  padding: ${th('alertPaddingY')} ${th('alertPaddingX')};
+  margin-bottom: ${th('alertMarginBottom')};
+  border: 1px solid transparent;
+  border-radius: ${th('borderRadius')};
+
+  ${variants.map(
+    variant => css`
+      &.sui-alert-${variant} {
+        ${mixin('alertVariant', variant)};
+      }
+    `,
+  )};
+`
+
+Alert.propTypes = {
+  variant: PropTypes.oneOf(variants),
+  theme: PropTypes.object,
+}
+
+Alert.defaultProps = {
+  variant: 'primary',
+  theme: defaultTheme,
+}
+
+setWithComponent(Alert, AlertComponent)
+
+/** @component */
+export default Alert
diff --git a/src/Alert.md b/src/Alert.md
@@ -0,0 +1,32 @@
+### Variants
+
+Set variants using `variant` prop.
+
+```js
+<div>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="primary">This is a primary alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="secondary">This is a secondary alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="success">This is a success alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="danger">This is a danger alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="warning">This is a warning alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="info">This is a info alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="light">This is a light alert—check it out!</Alert>
+  </span>
+  <span style={{ margin: '5px' }}>
+    <Alert variant="dark">This is a dark alert—check it out!</Alert>
+  </span>
+</div>
+```
diff --git a/src/Button.md b/src/Button.md
@@ -1,6 +1,6 @@
 ### Variants
 
-Set sizes using `variant` prop.
+Set variants using `variant` prop.
 
 ```js
 <div>
diff --git a/src/ControlFeedback.js b/src/ControlFeedback.js
diff --git a/src/ControlFeedback.md b/src/ControlFeedback.md
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,11 @@
 import * as defaultTheme from './style/defaultTheme'
 
+export { default as Alert } from './Alert'
 export { default as Box } from './Box'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as Col } from './Col'
-export { default as ControlFeedBack } from './ControlFeedBack'
+export { default as ControlFeedback } from './ControlFeedback'
 export { default as FormCheck } from './FormCheck'
 export { default as FormCheckLabel } from './FormCheckLabel'
 export { default as FormGroup } from './FormGroup'
diff --git a/src/style/defaultTheme.js b/src/style/defaultTheme.js
@@ -6,6 +6,7 @@ import {
   modularScale,
   darken,
   parseToRgb,
+  mix,
 } from 'polished'
 import { th, mixin } from '../utils'
 
@@ -151,6 +152,16 @@ export const controlFocusBorderColor = th('primary', color =>
 export const controlFocusBoxShadow = color =>
   css`0 0 0 0.2rem ${th(color, c => transparentize(0.75, c))}`
 
+// Alerts
+
+export const alertPaddingY = '.75rem'
+export const alertPaddingX = '1.25rem'
+export const alertMarginBottom = '1rem'
+
+export const alertBgLevel = -10
+export const alertBorderLevel = -9
+export const alertColorLevel = 6
+
 // Z-indexes
 
 export const zIndexControl = 1
@@ -170,15 +181,20 @@ export const breakPoints = {
   xl: 1200,
 }
 
+// Color levels
+
+export const yiqContrastedThreshold = 150
+export const colorInterval = 0.08
+
 // Mixins
 
-export const controlFocus = (baseColor = 'primary') => css`
+export const controlFocus = props => (baseColor = 'primary') => css`
   outline: 0;
   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))};
+export const btnVariant = props => baseColor => css`
+  color: ${mixin('colorYik', th(baseColor))};
   background-color: ${th(baseColor)};
 
   &:focus {
@@ -191,8 +207,34 @@ export const btnVariant = baseColor => css`
   }
 `
 
-export const colorYik = color => {
+export const alertVariant = props => baseColor =>
+  css`
+    color: ${mixin('colorLevel', th(baseColor), th('alertColorLevel'))};
+    background-color: ${mixin('colorLevel', th(baseColor), th('alertBgLevel'))};
+    border-color: ${mixin('colorLevel', th(baseColor), th('alertBorderLevel'))};
+
+    hr {
+      border-top-color: ${props =>
+        darken(
+          0.05,
+          mixin('colorLevel', th(baseColor), th('alertColorLevel'))(props),
+        )};
+    }
+  `
+
+export const colorLevel = props => (color, level) => {
+  color = typeof color === 'function' ? color(props) : color
+  level = typeof level === 'function' ? level(props) : level
+  const baseColor = level > 0 ? th('black')(props) : th('white')(props)
+  const absLevel = Math.abs(level)
+  return mix(absLevel * colorInterval, baseColor, color)
+}
+
+export const colorYik = props => color => {
+  color = typeof color === 'function' ? color(props) : 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')
+  return yik >= th('yiqContrastedThreshold')(props)
+    ? th('yikTextDark')(props)
+    : th('yikTextLight')(props)
 }
diff --git a/src/utils.js b/src/utils.js
@@ -22,4 +22,5 @@ export const th = (name, modifier = x => x) => props => {
   return modifier(result)
 }
 
-export const mixin = (name, ...args) => props => props.theme[name](...args)
+export const mixin = (name, ...args) => props =>
+  props.theme[name](props)(...args)
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -37,10 +37,11 @@ module.exports = {
     {
       name: 'Components',
       components: () => [
+        path.resolve(__dirname, 'src/Alert.js'),
         path.resolve(__dirname, 'src/Box.js'),
         path.resolve(__dirname, 'src/Button.js'),
         path.resolve(__dirname, 'src/Checkbox.js'),
-        path.resolve(__dirname, 'src/ControlFeedBack.js'),
+        path.resolve(__dirname, 'src/ControlFeedback.js'),
         path.resolve(__dirname, 'src/FormCheck.js'),
         path.resolve(__dirname, 'src/FormCheckLabel.js'),
         path.resolve(__dirname, 'src/FormGroup.js'),

Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,7 @@ module.exports = {`
`14`	`14`	`'import/prefer-default-export': 'off',`
`15`	`15`
`16`	`16`	`'no-return-assign': 'off',`
	`17`	`+ 'no-param-reassign': 'off',`
	`18`	`+ 'no-shadow': 'off',`
`17`	`19`	`},`
`18`	`20`	`}`