Add EuiColorPicker. Upgrade Jest to 22.0.6.

package.json

@@ -36,12 +36,12 @@
     "uuid": "^3.1.0"
   },
   "devDependencies": {
-    "@elastic/eslint-config-kibana": "^0.13.0",
+    "@elastic/eslint-config-kibana": "^0.15.0",
     "@types/react": "^16.0.31",
     "autoprefixer": "^7.1.5",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.0.1",
-    "babel-jest": "^21.0.0",
+    "babel-jest": "^22.0.6",
     "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-inline-react-svg": "^0.5.2",
@@ -51,6 +51,7 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "chokidar": "^1.7.0",
+    "eslint-plugin-jest": "^21.6.2",
     "circular-dependency-plugin": "^4.3.0",
     "css-loader": "^0.28.7",
     "enzyme": "^3.1.0",
@@ -67,8 +68,8 @@
     "file-loader": "^1.1.5",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
-    "jest": "^21.2.1",
-    "jest-cli": "^21.2.1",
+    "jest": "^22.0.6",
+    "jest-cli": "^22.0.6",
     "lodash": "^4.17.4",
     "node-sass": "^4.5.3",
     "npm-run": "^4.1.2",
@@ -78,6 +79,7 @@
     "pre-commit": "^1.2.2",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",
+    "react-color": "^2.13.8",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",

scripts/jest/config.json

@@ -17,8 +17,8 @@
     "\\.(css|less|scss)$": "<rootDir>/scripts/jest/mocks/style_mock.js"
   },
   "setupFiles": [
-    "<rootDir>/scripts/jest/setup/request_animation_frame_polyfill.js",
-    "<rootDir>/scripts/jest/setup/enzyme.js"
+    "<rootDir>/scripts/jest/setup/enzyme.js",
+    "<rootDir>/scripts/jest/setup/throw_on_console_error.js"
   ],
   "coverageDirectory": "<rootDir>/reports/jest-coverage",
   "coverageReporters": [

scripts/jest/setup/throw_on_console_error.js

@@ -0,0 +1,5 @@
+// Fail if a test ends up `console.error`-ing, e.g. if React logs because of a
+// failed prop types check.
+console.error = message => {
+  throw new Error(message);
+};

src-docs/src/routes.js

@@ -50,6 +50,9 @@ import { CodeEditorExample }
 import { CodeExample }
   from './views/code/code_example';
 
+import { ColorPickerExample }
+  from './views/color_picker/color_picker_example';
+
 import { ContextMenuExample }
   from './views/context_menu/context_menu_example';
 
@@ -198,6 +201,7 @@ const components = [
   CallOutExample,
   CodeEditorExample,
   CodeExample,
+  ColorPickerExample,
   ContextMenuExample,
   DescriptionListExample,
   ErrorBoundaryExample,

src-docs/src/views/color_picker/color_picker.js

@@ -0,0 +1,22 @@
+import React, {
+  Component,
+} from 'react';
+
+import { EuiColorPicker } from '../../../../src/components';
+
+export class ColorPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: '#ffffff'
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  render() {
+    return <EuiColorPicker onChange={this.handleChange} color={this.state.color}/>;
+  }
+}

src-docs/src/views/color_picker/color_picker_clear.js

@@ -0,0 +1,56 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiColorPicker,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiKeyboardAccessible,
+} from '../../../../src/components';
+
+export class ColorPickerLabelAndClear extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: null
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  resetColor = () => {
+    this.setState({ color: null });
+  };
+
+  render() {
+    return (
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <label className="kuiLabel">
+            Background color
+          </label>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiColorPicker
+            onChange={this.handleChange}
+            color={this.state.color}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <p className="kuiText">
+            <EuiKeyboardAccessible>
+              <a className="kuiLink" onClick={this.resetColor}>
+                Reset
+              </a>
+            </EuiKeyboardAccessible>
+          </p>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+}

src-docs/src/views/color_picker/color_picker_example.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import { ColorPicker } from './color_picker';
+const colorPickerSource = require('!!raw-loader!./color_picker');
+const colorPickerHtml = renderToHtml(ColorPicker);
+
+import { ColorPickerLabelAndClear } from './color_picker_clear';
+const colorPickerClearSource = require('!!raw-loader!./color_picker_clear');
+const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear);
+
+import { ColorPickerNoColorLabel } from './color_picker_no_color_label';
+const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label');
+const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel);
+
+export const ColorPickerExample = {
+  title: 'Color Picker',
+  sections: [{
+    title: 'Color Picker',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: colorPickerSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: colorPickerHtml,
+    }],
+    demo: <ColorPicker />,
+  }, {
+    title: 'Color Picker with label and reset link',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: colorPickerClearSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: colorPickerClearHtml,
+    }],
+    demo: <ColorPickerLabelAndClear />,
+  }, {
+    title: 'Color Picker without a color labe',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: colorPickerNoColorLabelSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: colorPickerNoColorLabelHtml,
+    }],
+    demo: <ColorPickerNoColorLabel />,
+  }],
+};

src-docs/src/views/color_picker/color_picker_no_color_label.js

@@ -0,0 +1,42 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiColorPicker,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export class ColorPickerNoColorLabel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: '#00FFFF'
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  render() {
+    return (
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <label className="kuiLabel">
+            Foreground color
+          </label>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiColorPicker
+            onChange={this.handleChange}
+            color={this.state.color}
+            showColorLabel={false}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+}

src/components/color_picker/__snapshots__/color_picker.test.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders EuiColorPicker 1`] = `
+<div
+  class="euiColorPicker testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiColorPicker__preview"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiColorPicker__swatch"
+      data-test-subj="colorSwatch"
+      style="background:#ffeedd"
+    />
+    <div
+      aria-label="Color selection is #ffeedd"
+      class="euiColorPicker__label"
+    >
+      #ffeedd
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
+<div
+  class="euiColorPicker testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiColorPicker__preview"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiColorPicker__swatch euiColorPicker__emptySwatch"
+      data-test-subj="colorSwatch"
+      style="background:"
+    >
+      <svg>
+        <line
+          x1="0"
+          x2="100%"
+          y1="100%"
+          y2="0"
+        />
+      </svg>
+    </div>
+    <div
+      aria-label="Color selection is (transparent)"
+      class="euiColorPicker__label"
+    >
+      (transparent)
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders EuiColorPicker without a color label when showColorLabel is false 1`] = `
+<div
+  class="euiColorPicker testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiColorPicker__preview"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiColorPicker__swatch"
+      data-test-subj="colorSwatch"
+      style="background:#ffffff"
+    />
+  </div>
+</div>
+`;

src/components/color_picker/_color_picker.scss

@@ -0,0 +1,43 @@
+.euiColorPicker {
+  cursor: pointer;
+}
+
+  .euiColorPicker__preview {
+    display: flex;
+    align-items: center;
+  }
+
+  .euiColorPicker__swatch {
+    width: $colorPickerSize;
+    height: $colorPickerSize;
+    border-radius: $euiBorderRadius;
+    box-shadow: inset 0 0 0 1px rgba(#000, 0.2);
+    display: inline-block;
+  }
+
+  .euiColorPicker__emptySwatch {
+    svg {
+      position: absolute;
+      width: $colorPickerSize;
+      height: $colorPickerSize;
+    }
+
+    svg line {
+      stroke: rgb(255, 0, 0);
+      stroke-width: 2;
+    }
+  }
+
+  .euiColorPicker__label {
+    font-size: $euiFontSize;
+    line-height: $euiLineHeight;
+    margin-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+.euiColorPickerPopUp {
+  position: absolute;
+  z-index: 10;
+}
+

src/components/color_picker/_index.scss

@@ -0,0 +1,3 @@
+$colorPickerSize: 20px;
+
+@import "color_picker";