Allow to have nothing selected on Select (#934)

## Default
![image](https://user-images.githubusercontent.com/4152942/45972709-d927ab00-c012-11e8-9f87-918bfbc4564f.png)

## With custom empty option text
![image](https://user-images.githubusercontent.com/4152942/45972734-e80e5d80-c012-11e8-8cb9-2f720b8c452e.png)

Fixes #925

core/components/atoms/select/select.js

@@ -19,6 +19,11 @@ const Select = ({ options, ...props }) => {
 
   return (
     <StyledSelect {...props} {...Automation('select')}>
+      {/* First option will be selected if there is no value passed as a prop */}
+      <option disabled hidden selected={!props.value} value="" {...Automation('select.option')}>
+        {props.placeholder}
+      </option>
+
       {options.map((option, index) => (
         <option key={index} value={option.value} {...Automation('select.option')}>
           {option.text}
@@ -41,11 +46,14 @@ Select.propTypes = {
   /** Value selected by default */
   value: PropTypes.any,
   /** onChange transparently passed to select */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /** String to show when the first empty choice is selected */
+  placeholder: PropTypes.string
 }
 
 Select.defaultProps = {
-  readOnly: false
+  readOnly: false,
+  placeholder: ''
 }
 
 export default Select

core/components/atoms/select/select.md

@@ -7,6 +7,7 @@
 
 ```jsx
 <Select {props}
+  placeholder="Select an option..."
   options={[
     { text: 'One', value: 1 },
     { text: 'Two', value: 2 },
@@ -32,6 +33,7 @@ You can also indicate that a `<Select>` should be read-only by setting the `read
 ```js
 <Select
   readOnly
+  value={1}
   options={[{ text: 'One', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }]}
   onChange={event => console.log(event)}
 />

core/components/atoms/select/select.story.js

@@ -37,18 +37,23 @@ storiesOf('Select').add('readonly', () => (
 storiesOf('Select').add('stressed', () => (
   <Example title="stressed - 56 characters with 300px width">
     <Select
+      value={1}
       style={{ width: 300 }}
-      options={[{
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        value: 1
-      }, {
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        value: 2
-      }, {
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        value: 3
-      }]}
+      options={[
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+          value: 1
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+          value: 2
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+          value: 3
+        }
+      ]}
       onChange={event => console.log(event)}
     />
   </Example>
-))
+))

internal/test/snapshot/__snapshots__/select.test.js.snap

@@ -35,8 +35,18 @@ exports[`Select renders with automation attribute 1`] = `
 <select
   className="c0"
   data-cosmos-key="select"
+  placeholder=""
   readOnly={false}
 >
+  <option
+    data-cosmos-key="select.option"
+    disabled={true}
+    hidden={true}
+    selected={true}
+    value=""
+  >
+    
+  </option>
   <option
     data-cosmos-key="select.option"
     value={1}

internal/test/unit/automation-attributes.test.js

@@ -84,7 +84,12 @@ describe('Automation data attributes', () => {
     const select = shallow(<Select options={[{ text: 'One', value: 1 }]} />)
 
     expect(select.prop('data-cosmos-key')).toEqual('select')
-    expect(select.children().prop('data-cosmos-key')).toEqual('select.option')
+    expect(
+      select
+        .children()
+        .first()
+        .prop('data-cosmos-key')
+    ).toEqual('select.option')
   })
 
   it('Switch', () => {