Merge pull request #22 from 5rabbits/release/0.6.0

v0.6.0

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["es2015", "react", "stage-1"],
-  "plugins": ["babel-plugin-add-module-exports"]
+  "plugins": ["babel-plugin-add-module-exports", "transform-decorators-legacy"]
 }

.eslintrc

@@ -11,6 +11,7 @@
   "rules": {
     "arrow-parens": [0],
     "brace-style": [2, "stroustrup", { "allowSingleLine": false }],
+    "default-case": [0],
     "import/extensions": [0],
     "import/no-extraneous-dependencies": [0],
     "import/no-unresolved": [0],
@@ -24,6 +25,7 @@
     "react/prefer-stateless-function": [0],
     "react/prop-types": [1],
     "react/forbid-prop-types": [0],
+    "react/require-default-props": [0],
     "semi": [2, "never"]
   }
 }

docs/components/Example.js

@@ -4,6 +4,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import Playground from 'component-playground'
+import classNames from 'classnames'
 import markdown from '../helpers/markdown'
 
 const Example = ({ code, collapsible, componentName, description, expanded, inline }) =>
@@ -17,7 +18,7 @@ const Example = ({ code, collapsible, componentName, description, expanded, inli
       collapsableCode={collapsible}
       initiallyExpanded={expanded}
       noRender={inline}
-      scope={{ React, ReactDOM }}
+      scope={{ React, ReactDOM, classNames }}
       theme="material"
     />
   </div>

docs/manifest.js

@@ -40,6 +40,26 @@ export default sortBy([
       })
     }, 'SearchInput'),
   },
+  {
+    name: 'Select',
+    getComponent: callback => require.ensure([], require => {
+      callback({
+        source: require('!!docs-loader!controls/Select'),
+        examples: require('controls/Select/examples.yml'),
+      })
+    }, 'Select'),
+  },
+  {
+    name: 'Selectable',
+    getComponent: callback => require.ensure([], require => {
+      require('controls/Selectable/examples.scss')
+
+      callback({
+        source: require('!!docs-loader!controls/Selectable'),
+        examples: require('controls/Selectable/examples.yml'),
+      })
+    }, 'Selectable'),
+  },
 
   // Elements
   {

docs/theme.scss

@@ -83,6 +83,10 @@
   margin-top: $spacing-base * 10;
 }
 
+.component-example:last-child {
+  margin-bottom: 240px;
+}
+
 // Examples
 .example {
   position: absolute;
@@ -140,4 +144,4 @@
 .menu-left {
   left: auto!important;
   right: 0!important;
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portrait",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Base design for all 5Rabbits products",
   "keywords": [
     "commonjs",
@@ -45,7 +45,9 @@
     "classnames": "2.2.5",
     "font-awesome": "4.7.0",
     "i18next": "8.3.0",
-    "jquery": "3.2.1"
+    "jquery": "3.2.1",
+    "lodash": "4.17.4",
+    "tinycolor2": "1.4.1"
   },
   "devDependencies": {
     "babel": "6.23.0",
@@ -54,6 +56,7 @@
     "babel-jest": "20.0.3",
     "babel-loader": "7.0.0",
     "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-1": "6.24.1",
@@ -77,7 +80,6 @@
     "imports-loader": "0.7.1",
     "jest": "20.0.3",
     "jest-directory-named-resolver": "jsonnull/jest-directory-named-resolver",
-    "lodash": "4.17.4",
     "markdown-it": "8.3.1",
     "node-sass": "4.5.3",
     "prop-types": "15.5.10",

src/components/controls/SearchInput/SearchInput.scss

@@ -1,3 +1,6 @@
+@import '~core/variables';
+@import '~core/mixins';
+
 .SearchInput {
   position: relative;
 }
@@ -41,19 +44,18 @@
 .SearchInput--default {
   .SearchInput__input.form-control {
     background-color: #fff;
-    border-color: #CDD4DB;
+    border-color: $default-input-border-color;
     height: 36px;
     border-radius: 18px;
     padding-right: 40px;
     padding-left: 40px;
 
     &::placeholder {
-      color: #B3BDC7;
+      color: $placeholder-color;
     }
 
     &:focus {
-      border-color: rgba(102, 175, 233, .4);
-      box-shadow: 0 0 8px rgba(102, 175, 233, .6);
+      @include focus-control;
     }
   }
 
@@ -89,8 +91,7 @@
     }
 
     &:focus {
-      border-color: rgba(102, 175, 233, .4);
-      box-shadow: 0 0 8px rgba(102, 175, 233, .6);
+      @include focus-control;
     }
   }
 

src/components/controls/Select/Option.js

@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import tinycolor from 'tinycolor2'
+import cx from 'classnames'
+
+export default class Option extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    color: PropTypes.string,
+    focused: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+    onMouseEnter: PropTypes.func.isRequired,
+    option: PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.any,
+    }).isRequired,
+    optionRef: PropTypes.func.isRequired,
+    selected: PropTypes.bool,
+    style: PropTypes.object,
+  }
+
+  static defaultProps = {
+    color: undefined,
+    focused: false,
+    selected: false,
+    style: {},
+  }
+
+  handleClick = () => {
+    this.props.onClick(this.props.option)
+  }
+
+  handleMouseEnter = () => {
+    this.props.onMouseEnter(this.props.option)
+  }
+
+  optionRef = node => {
+    this.props.optionRef(this.props.option, node)
+  }
+
+  render() {
+    const { children, color, focused, selected } = this.props
+    const style = { ...this.props.style }
+
+    if (selected && color) {
+      style.backgroundColor = color
+    }
+    else if (focused && color) {
+      style.backgroundColor = tinycolor(color).lighten(35).toHexString()
+    }
+
+    if (style.backgroundColor) {
+      style.color = tinycolor.mostReadable(style.backgroundColor, ['#697D91', '#FFF'])
+    }
+
+    return (
+      <div
+        className={cx('Select__option', {
+          'Select__option--focused': focused,
+          'Select__option--selected': selected,
+        })}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        ref={this.optionRef}
+        style={style}
+        >
+        <div className="Select__option__text">
+          {children}
+        </div>
+        {selected &&
+          <div className="Select__option__icon">
+            <svg viewBox="0 0 400 400">
+              <path d="M397.692 58.953l-52.8-41.645c-1.636-1.346-3.656-2.308-5.964-2.308-2.31 0-4.425.962-6.06 2.404l-192.065 246.79s-75.5-72.613-77.615-74.73c-2.116-2.115-4.905-5.673-9.137-5.673-4.23 0-6.154 2.982-8.366 5.194-1.635 1.73-28.565 30.007-41.837 44.05-.77.865-1.25 1.346-1.923 2.02C.77 236.687 0 238.513 0 240.533c0 2.117.77 3.848 1.924 5.483l2.692 2.5S138.59 377.203 140.803 379.416c2.212 2.212 4.905 5 8.848 5 3.848 0 7.022-4.135 8.85-5.962L398.076 70.686C399.23 69.05 400 67.224 400 65.108c0-2.404-.962-4.424-2.308-6.155z" />
+            </svg>
+          </div>
+        }
+      </div>
+    )
+  }
+}