Merge pull request #32 in FFE/ffe-datepicker-react from feature/FFE-2…

…10-label to master

* commit '0429f62f7221b11e54d75e896ff4185481adc6df':
  Update README
  Label and id separate
  Package label data
  Move label outside of clickable input
  FFE-210 add label

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## v2.4.1
+
+* Add optional label to input field
 
 ## v2.4.0
 

README.md

@@ -22,6 +22,7 @@ export default function Form() {
     <Datepicker
         value={ this.state.date }
         onChange={ this.onChange }
+        label={ 'A label' }
         language="nb"
         minDate="01.01.2016"
         maxDate="31.12.2016"
@@ -35,6 +36,7 @@ export default function Form() {
 * onChange: will be called with the new date string, picked from the calendar. format: dd.mm.yyyy
 * inputProps: props to set on the input field.
 * ariaInvalid: signifies validation errors.
+* label: Optional. Adds a lable formated by .ffe-form-label
 
 ### <DateInput />
 Use only the input field

examples/datepicker.js

@@ -63,7 +63,8 @@ class DatepickerExample extends React.Component {
             language="nb"
             minDate="01.01.2016"
             maxDate="31.12.2018"
-            inputProps={ { className: 'customClass', id: 'custom-input-id' } }
+            inputProps={ { className: 'customClass' } }
+            label={ 'Label not attached to input.' }
           />
         </div>
 
@@ -74,7 +75,8 @@ class DatepickerExample extends React.Component {
             language="en"
             minDate="01.01.2016"
             maxDate="31.12.2018"
-            inputProps={ { className: 'customClass', id: 'custom-input-id' } }
+            inputProps={ { className: 'customClass', id: 'unique-id' } }
+            label={ 'A long label which is attached to the input' }
             ariaInvalid={ false }
             calendarAbove={ true }
           />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-datepicker-react",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "main": "lib/ffe-datepicker-react.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/.",

src/datepicker/ffe-datepicker.js

@@ -206,53 +206,64 @@ export default class FFEDatepicker extends React.Component {
         { 'ffe-calendar--datepicker--above': this.props.calendarAbove }
     );
     return (
-      <div
-        onClick={ this.clickHandler }
-        ref={ c => { this._datepickerNode = c; } }
-        className="ffe-datepicker"
-        tabIndex={ -1 }
-        role="button"
-      >
-        <DateInput
-          onFocus={ this.onInputFocus }
-          onBlur={ this.onInputBlur }
-          onChange={ (evt) => this.props.onChange(evt.target.value) }
-          onKeyDown={ this.onInputKeydown }
-          value={ this.props.value }
-          inputProps={ inputProps }
-          ref={ c => { this.dateInputRef = c; } }
-          ariaInvalid={ this.ariaInvalid() }
-        />
-
-        {
-          this.state.ariaInvalid &&
-            <div
-              id="date-input-validation"
-              className="ffe-body-text ffe-field-error-message"
-              role="alert"
-            >
-              { this.state.errorMessage }
-            </div>
-        }
-
-        {
-          this.state.displayDatePicker &&
-            <Calendar
-              onDatePicked={ this.datePickedHandler }
-              onBlurHandler={ this.blurHandler }
-              language={ this.props.language }
-              selectedDate={ this.props.value }
-              minDate={ this.props.minDate }
-              maxDate={ this.props.maxDate }
-              escKeyHandler={ this.escKeyHandler }
-              calendarClassName={ calendarClassName }
-            />
+      <div>
+        { this.props.label &&
+        <label
+          className="ffe-form-label ffe-form-label--block"
+          htmlFor={ inputProps.id }
+        >
+          { this.props.label }
+        </label>
         }
+        <div
+          onClick={ this.clickHandler }
+          ref={ c => { this._datepickerNode = c; } }
+          className="ffe-datepicker"
+          tabIndex={ -1 }
+          role="button"
+        >
+          <DateInput
+            onFocus={ this.onInputFocus }
+            onBlur={ this.onInputBlur }
+            onChange={ (evt) => this.props.onChange(evt.target.value) }
+            onKeyDown={ this.onInputKeydown }
+            value={ this.props.value }
+            inputProps={ inputProps }
+            ref={ c => { this.dateInputRef = c; } }
+            ariaInvalid={ this.ariaInvalid() }
+          />
+
+          {
+            this.state.ariaInvalid &&
+              <div
+                id="date-input-validation"
+                className="ffe-body-text ffe-field-error-message"
+                role="alert"
+              >
+                { this.state.errorMessage }
+              </div>
+          }
+
+          {
+            this.state.displayDatePicker &&
+              <Calendar
+                onDatePicked={ this.datePickedHandler }
+                onBlurHandler={ this.blurHandler }
+                language={ this.props.language }
+                selectedDate={ this.props.value }
+                minDate={ this.props.minDate }
+                maxDate={ this.props.maxDate }
+                escKeyHandler={ this.escKeyHandler }
+                calendarClassName={ calendarClassName }
+              />
+          }
+        </div>
       </div>);
   }
 }
 
 FFEDatepicker.propTypes = {
+  label:  PropTypes.string,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,

src/datepicker/ffe-datepicker.test.js

@@ -30,7 +30,7 @@ describe('<FFEDatepicker />', () => {
     });
 
     it('renders a wrapper for the datepicker components', () =>
-      expect(wrapper).to.have.className('ffe-datepicker'));
+      expect(wrapper).to.have.descendants('.ffe-datepicker'));
 
     it('contains a single DateInput component', () =>
       expect(wrapper).to.have.exactly(1).descendants(DateInput));