updating option select component

ui/src/components/select/index.js

@@ -1,11 +1,17 @@
 const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  rndId
+  rndId,
+  remcalc
 } = fns;
 
+const {
+  pseudoEl
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -15,8 +21,37 @@ const StyledLabel = styled.div`
   color: #464646;
 `;
 
+const SelectWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+
+  &:after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid black;
+
+    ${pseudoEl({
+      top: '25px',
+      right: '20px'
+    })}
+  }
+`;
+
+
 const StyledSelect = styled.select`
-  color: #464646;
+  font-size:16px;
+  min-width: ${remcalc(288)};
+  min-height: ${remcalc(54)};
+  border-radius: 4px;
+  padding-left: ${remcalc(20)};
+  background-color: #FFFFFF;
+  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+  border: solid 1px #D8D8D8;
+  -webkit-appearance: none;
+
+  &:before {
+    ${pseudoEl()}
+  }
 
   /* select[multiple] is valid CSS syntax - not added to lint library yet */
   /* stylelint-disable */
@@ -25,9 +60,9 @@ const StyledSelect = styled.select`
     padding-left: 0;
     padding-right: 0;
 
-    & :global option {
+    & option {
-      padding-left: 15px;
+      padding-left: ${remcalc(15)};
-      padding-right: 15px;
+      padding-right: ${remcalc(15)};
       width: 100%;
     }
   }
@@ -51,19 +86,22 @@ const Select = ({
       <StyledLabel htmlFor={id}>
         {label}
       </StyledLabel>
-      <StyledSelect
+
-        autoFocus={autoFocus}
+      <SelectWrapper>
-        disabled={disabled}
+        <StyledSelect
-        form={form}
+          autoFocus={autoFocus}
-        id={id}
+          disabled={disabled}
-        label={label}
+          form={form}
-        multiple={multiple}
+          id={id}
-        name={name}
+          label={label}
-        required={required}
+          multiple={multiple}
-        selected={selected}
+          name={name}
-      >
+          required={required}
-        {children}
+          selected={selected}
-      </StyledSelect>
+        >
+          {children}
+        </StyledSelect>
+      </SelectWrapper>
     </div>
   );
 };

ui/stories/index.js

@@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
 storiesOf('Select', module)
   .add('Default', () => (
     <Select label='example select'>
-      <option>1</option>
+      <option>Apple</option>
-      <option>2</option>
+      <option>Banana</option>
-      <option>3</option>
+      <option>Pear</option>
-      <option>4</option>
+      <option>Orange</option>
-      <option>5</option>
     </Select>
   ))
   .add('multiple', () => (