incomplete <Select> implementation

apparently styling <option> without fallbacking to ul/li
doesn't seem to be supported, even when in `multiple` mode

ui/src/components/input/readme.md

@@ -39,7 +39,7 @@ nmodule.exports = ReactDOM.renderToString(
 
 ```js
 const React = require('react');
-const Radio = require('ui/radio');
+const Input = require('ui/input');
 
 module.exports = () => {
   return (

ui/src/components/input/style.css

@@ -9,26 +9,24 @@
   --inset-box-shadow: ~boxes.insetShaddow;
 }
 
-.input-group {
-  & .input {
-    background: var(--background-color);
-    border: 1px solid var(--border-color);
-    box-shadow: var(--inset-box-shadow);
-    border-radius: var(--border-radius);
-    height: 50px;
-    width: 100%;
-    display: block;
-    visibility: visible;
-    padding-left: 15px;
-    padding-right: 15px;
+.input {
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--inset-box-shadow);
+  border-radius: var(--border-radius);
+  height: 50px;
+  width: 100%;
+  display: block;
+  visibility: visible;
+  padding-left: 15px;
+  padding-right: 15px;
 
-    &:focus {
-      border-color: var(--border-selected-color);
-      outline: none;
-    }
-  }
-
-  & .label {
-    color: #464646;
+  &:focus {
+    border-color: var(--border-selected-color);
+    outline: none;
   }
 }
+
+.label {
+  color: #464646;
+}

ui/src/components/select/index.js

@@ -1,11 +1,58 @@
-// const classNames = require('classnames');
+const classNames = require('classnames');
 const React = require('react');
-// const styles = require('./style.css');
+const styles = require('./style.css');
 
-const Select = () => {
-  return (<div />);
+const Select = ({
+  autoFocus,
+  children,
+  className,
+  disabled,
+  form,
+  id,
+  label,
+  multiple,
+  name,
+  required,
+  selected
+}) => {
+  const cn = classNames(
+    className,
+    styles['select-group']
+  );
+
+  return (
+    <div className={cn}>
+      <label className={styles.label} htmlFor={id}>{label}</label>
+      <select
+        autoFocus={autoFocus}
+        className={styles.select}
+        disabled={disabled}
+        form={form}
+        id={id}
+        label={label}
+        multiple={multiple}
+        name={name}
+        required={required}
+        selected={selected}
+      >
+        {children}
+      </select>
+    </div>
+  );
 };
 
-Select.propTypes = {};
+Select.propTypes = {
+  autoFocus: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  label: React.PropTypes.string,
+  multiple: React.PropTypes.bool,
+  name: React.PropTypes.string,
+  required: React.PropTypes.bool,
+  selected: React.PropTypes.bool
+};
 
 module.exports = Select;

ui/src/components/select/readme.md

@@ -1 +1,60 @@
 # Select
+
+
+## demo
+
+```embed
+const  React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Select = require('./index.js');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column xs={12}>
+        <Select label='example select'>
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </Select>
+      </Column>
+    </Row>
+    <Row>
+      <Column xs={12}>
+        <Select multiple label='example multiple select'>
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </Select>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Select = require('ui/select');
+
+module.exports = () => {
+  return (
+    <Select multiple label='example select'>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </Select>
+  );
+}
+```

ui/src/components/select/style.css

@@ -0,0 +1,25 @@
+.select {
+  composes: input from '../input/style.css';
+
+  &[multiple] {
+    padding-left: 0;
+    padding-right: 0;
+
+    & :global option {
+      padding-left: 15px;
+      padding-right: 15px;
+      width: 100%;
+    }
+
+/*  this doesn't seem to work, research further
+    &:-internal-list-box :global option:checked,
+    & :global option:checked {
+      background-color: white;
+    }
+*/
+  }
+}
+
+.label {
+  composes: label from '../input/style.css';
+}

ui/src/docs.js

@@ -12,6 +12,7 @@ module.exports = {
     Input: require('./components/input/readme.md'),
     Radio: require('./components/radio/readme.md'),
     'Radio Group': require('./components/radio-group/readme.md'),
+    Select: require('./components/select/readme.md'),
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
     'Range Slider': require('./components/range-slider/readme.md'),

ui/src/index.js

@@ -13,5 +13,6 @@ module.exports = {
   'Range Slider': require('./components/range-slider/'),
   Radio: require('./components/radio'),
   RadioGroup: require('./components/radio-group'),
+  Select: require('./components/select'),
   Widget: require('./components/widget')
 };