UIDS 18 react select wrappers (#19)

UIDS-18 Add a wrapper to the ReactSelect and colors

This adds a wrapper to the Async component from React Select. This adds React
Select as a dependency of this library as well as brings over some styling we
had on it from the main repo. Also add a SingleSelect component to hold logic for
that style of component. This is largely meant to help us standardize styles for these
components which use CSS in JS. 

In adding input colors separated out the color palette from other semantic color
variables. This led to moving the palette to be colors in js and scss and added
separate files for the palette (which defines the base colors we should use) as
well as other files for input colors which are joined in a common color output.

Additionally brought some ESLint rules to the top level instead of just living in src.

Author: rsaris

.eslintrc

@@ -22,13 +22,6 @@
         "babel/semi": 2,
         "import/prefer-default-export": 0,
         "jsx-a11y/anchor-is-valid": 1,
-        "jsx-a11y/label-has-associated-control": [ 2, {
-          "assert": "either",
-          "controlComponents": [],
-          "depth": 25,
-          "labelAttributes": ["label"],
-          "labelComponents": []
-        }],
         "jsx-a11y/label-has-for": 0,
         "no-alert": 0,
         "react/destructuring-assignment": 0,
@@ -118,6 +111,13 @@
     "function-paren-newline": ["error", "consistent"],
     "func-names": ["error", "never"],
     "implicit-arrow-linebreak": 0,
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "assert": "either",
+      "controlComponents": ["AsyncSelect", "SingleSelect"],
+      "depth": 25,
+      "labelAttributes": ["label"],
+      "labelComponents": []
+    }],
     "linebreak-style": 0,
     "no-case-declarations": "warn",
     "no-confusing-arrow": 0,
@@ -131,6 +131,7 @@
     "prefer-destructuring": "warn",
     "quotes": ["error", "single", { "allowTemplateLiterals" : true }],
     "radix": 0,
+    "react/jsx-fragments": 0,
     "symbol-description": 0,
     "template-curly-spacing": "off",
     "indent": "off"

package.json

@@ -15,6 +15,7 @@
     "react-transition-group": "^4.3.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-popper": "^1.3.7",
+    "react-select": "^3.0.8",
     "react-tracking": "^7.3.0",
     "uuid": "^7.0.2"
   },

scss/buttons.scss

@@ -1,4 +1,4 @@
-@import './palette';
+@import './colors';
 
 .btn-link--neutral {
   color: $ux-gray-500;

scss/colors.scss

@@ -0,0 +1,2 @@
+@import './colors/inputs';
+@import './colors/palette';

scss/colors/inputs.scss

@@ -0,0 +1,4 @@
+@import './palette';
+
+$input-border-color: $ux-gray-400; // Override bootstrap default
+$input-disabled-bg: $ux-gray-300; // Override bootstrap default

scss/palette.scss renamed to scss/colors/palette.scss

@@ -1,7 +1,7 @@
 // When updating this file, please consider the values in src/Styles/palette.js
 
 $ux-black: #000000;
-$ux-blue: #337ab7;
+$ux-blue: #337AB7;
 $ux-gray: #A1A1A1;
 $ux-green: #6DBD63;
 $ux-light-blue: #7CCBF2;

scss/theme.scss

@@ -1,7 +1,7 @@
 @import './box_shadow';
 @import './buttons';
+@import './colors';
 @import './lists';
 @import './navbar';
-@import './palette';
 @import './typography';
 @import './z_stack';