convert select

ui/src/components/select/index.js

@@ -1,6 +1,37 @@
-const classNames = require('classnames');
+const fns = require('../../shared/functions');
 const React = require('react');
-const styles = require('./style.css');
+const Styled = require('styled-components');
+
+const {
+  rndId
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+// TODO: this should be a constant
+const StyledLabel = styled.div`
+  color: #464646;
+`;
+
+const StyledSelect = styled.select`
+  color: #464646;
+
+  /* select[multiple] is valid CSS syntax - not added to lint library yet */
+  /* stylelint-disable */
+  &[multiple] {
+  /* stylelint-enable */
+    padding-left: 0;
+    padding-right: 0;
+
+    & :global option {
+      padding-left: 15px;
+      padding-right: 15px;
+      width: 100%;
+    }
+  }
+`;
 
 const Select = ({
   autoFocus,
@@ -8,24 +39,20 @@ const Select = ({
   className,
   disabled,
   form,
-  id,
+  id = rndId(),
   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
+    <div className={className}>
+      <StyledLabel htmlFor={id}>
+        {label}
+      </StyledLabel>
+      <StyledSelect
         autoFocus={autoFocus}
-        className={styles.select}
         disabled={disabled}
         form={form}
         id={id}
@@ -36,7 +63,7 @@ const Select = ({
         selected={selected}
       >
         {children}
-      </select>
+      </StyledSelect>
     </div>
   );
 };

ui/src/components/select/style.css

@@ -1,28 +0,0 @@
-.select {
-  composes: input from "../input/style.css";
-
-  /* select[multiple] is valid CSS syntax - not added to lint library yet */
-  /* stylelint-disable */
-  &[multiple] {
-  /* stylelint-enable */
-    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/components/tabs/tab/index.js

@@ -10,8 +10,7 @@ const {
 } = composers;
 
 const {
-  boxes,
-  colors
+  boxes
 } = constants;
 
 const {

ui/src/index.js

@@ -16,7 +16,7 @@ module.exports = {
   // RangeSlider: require('./components/range-slider'),
   Radio: require('./components/radio'),
   // RadioGroup: require('./components/radio-group'),
-  // Select: require('./components/select'),
+  Select: require('./components/select'),
   Widget: require('./components/widget'),
   // Pagination: require('./components/pagination'),
   // Modal: require('./components/modal')

ui/stories/index.js

@@ -13,6 +13,7 @@ const {
   Row,
   Column,
   Avatar,
+  Select,
   Tabs,
   Tab,
   Toggle,
@@ -142,6 +143,26 @@ storiesOf('Radio', module)
     <Radio disabled />
   ));
 
+storiesOf('Select', module)
+  .add('Default', () => (
+    <Select label='example select'>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </Select>
+  ))
+  .add('multiple', () => (
+    <Select label='example multiple select' multiple>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </Select>
+  ));
+
 storiesOf('Tabs', module)
   .add('Default', () => (
     <Tabs name='my-tab-group'>
@@ -152,7 +173,7 @@ storiesOf('Tabs', module)
         <h1>User</h1>
       </Tab>
     </Tabs>
-  ))
+  ));
 
 storiesOf('Toggle', module)
   .add('checked', () => (
@@ -166,12 +187,21 @@ storiesOf('Toggle', module)
   ))
   .add('no props', () => (
     <Toggle />
-  ))
+  ));
 
 storiesOf('Widget', module)
   .add('single', () => (
-    <Widget checked selectable='single' name='flag' value='flag_1'>
-      <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png' />
+    <Widget
+      checked
+      name='flag'
+      selectable='single'
+      value='flag_1'
+    >
+      <img
+        alt='england flag'
+        // eslint-disable-next-line max-len
+        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
+      />
       <p>Some text</p>
     </Widget>
-  ))
+  ));