Add hover/focus style to Timepicker and Datepicker

Author: donnieberg

components/date-picker/index.jsx

@@ -207,15 +207,17 @@ module.exports = React.createClass({
             <input
               id={this.inputRefName()}
               ref='date'
-              className='slds-input'
+              className='slds-input slds-button--neutral slds-text-align--left'
               type='text'
               placeholder={this.props.placeholder}
               value={this.state.strValue}
               onKeyDown={this.handleKeyDown}
               onChange={this.handleInputChange}
               onClick={this.handleClick}
               onBlur={this.handleBlur}
-              onFocus={this.handleFocus}/>
+              onFocus={this.handleFocus}
+              style={{cursor: 'pointer'}}
+            />
           </div>
         </div>
         {this.popover()}

components/time-picker/index.jsx

@@ -255,15 +255,17 @@ module.exports = React.createClass({
             <input
               name='date'
               ref='date'
-              className='slds-input'
+              className='slds-input slds-button--neutral slds-text-align--left'
               type='text'
               placeholder={this.props.placeholder}
               value={this.state.strValue}
               onKeyDown={this.handleKeyDown}
               onChange={this.handleInputChange}
               onClick={this.handleClick}
               onBlur={this.handleBlur}
-              onFocus={this.handleFocus}/>
+              onFocus={this.handleFocus}
+              style={{cursor: 'pointer'}}
+            />
           </div>
         </div>
         {this.props.modal?this.getModalPopover():this.getSimplePopover()}

stories/date-picker/index.jsx

@@ -0,0 +1,20 @@
+/* eslint-disable indent */
+
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import { DATE_PICKER } from '../../utilities/constants';
+import Datepicker from '../../components/date-picker';
+
+const getDatepicker = props => (
+	<Datepicker {...props} />
+);
+
+const handleDateChange = (date) => {
+  console.log('>>> onDateChange ', date);
+}
+
+storiesOf(DATE_PICKER, module)
+	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
+	.add('Base', () => getDatepicker({ onDateChange: handleDateChange }))
+

stories/index.js

@@ -5,7 +5,9 @@ export default from './button';
 export default from './card';
 export default from './context-bar';
 export default from './data-table';
+export default from './date-picker';
 export default from './forms/input';
 export default from './forms/input/inline';
 export default from './icon';
 export default from './spinner';
+export default from './time-picker';

stories/time-picker/index.jsx

@@ -0,0 +1,20 @@
+/* eslint-disable indent */
+
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import { TIME_PICKER } from '../../utilities/constants';
+import Timepicker from '../../components/time-picker';
+
+const getTimepicker = props => (
+	<Timepicker {...props} />
+);
+
+const handleDateChange = (date, inputStr) => {
+  console.log('>>> onDateChange ', date, ' inputStr: ',inputStr);
+}
+
+storiesOf(TIME_PICKER, module)
+	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
+	.add('Base', () => getTimepicker({ stepInMinutes: 30, onDateChange: handleDateChange }))
+

utilities/constants.js

@@ -34,3 +34,4 @@ export const LOOKUP = 'SLDSLookup';
 export const MEDIA_OBJECT = 'SLDSMediaObject';
 export const MENU_DROPDOWN = 'SLDSMenuDropdown';
 export const SPINNER = 'SLDSSpinner';
+export const TIME_PICKER = 'SLDSTimepicker';