From 84bcee481a6e013b08bb7cfddc6ba20a5a135c0a Mon Sep 17 00:00:00 2001
From: Hartorn <bazirehoussin@gmail.com>
Date: Fri, 14 Apr 2017 17:44:08 +0200
Subject: [PATCH] Adding error handling on select-radio Adding style for the
 error

---
 src/components/input/select-radio/index.js    | 20 ++++++++++---------
 .../select-radio/style/select-radio.scss      | 14 +++++++++++--
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/input/select-radio/index.js b/src/components/input/select-radio/index.js
index 0d9204efb..22a04e237 100644
--- a/src/components/input/select-radio/index.js
+++ b/src/components/input/select-radio/index.js
@@ -1,6 +1,6 @@
-import React, {Component, PropTypes} from 'react';
+import React, { Component, PropTypes } from 'react';
 import Radio from '../radio';
-import {uniqueId} from 'lodash/utility';
+import { uniqueId } from 'lodash/utility';
 import Translation from '../../../behaviours/translation';
 
 @Translation
@@ -27,14 +27,14 @@ class SelectRadio extends Component {
     };
 
     componentWillReceiveProps(newProps) {
-        this.setState({value: newProps.value});
+        this.setState({ value: newProps.value });
     }
 
     /**
      * Get the value from the select in the DOM.
      * @return {string, number} selected value
      */
-    getValue () {
+    getValue() {
         return this.state.value;
     }
 
@@ -43,13 +43,13 @@ class SelectRadio extends Component {
     * @param {object} event - the click event
     */
     _handleRadioChange(newValue) {
-        const {onChange} = this.props;
-        if(onChange) {
+        const { onChange } = this.props;
+        if (onChange) {
             onChange(newValue);
             return;
         }
         //Set the state then call the change handler.
-        this.setState({value: newValue});
+        this.setState({ value: newValue });
     }
 
     /**
@@ -68,7 +68,7 @@ class SelectRadio extends Component {
     * @return {XML} the different radio values
     */
     renderSelectRadios() {
-        const {uniqueName} = this.state;
+        const { uniqueName } = this.state;
         return this.props.values.map((val, idx) => {
             const value = val[this.props.valueKey];
             const label = val[this.props.labelKey];
@@ -81,9 +81,11 @@ class SelectRadio extends Component {
     }
 
     render() {
+        const { error, style } = this.props;
         return (
-            <div data-focus='select-radio' >
+            <div data-focus='select-radio' data-valid={!error} style={style} >
                 {this.renderSelectRadios()}
+                {error && <div className='label-error'>{error}</div>}
             </div>
         );
     }
diff --git a/src/components/input/select-radio/style/select-radio.scss b/src/components/input/select-radio/style/select-radio.scss
index d04d94ca3..b76a34ee2 100644
--- a/src/components/input/select-radio/style/select-radio.scss
+++ b/src/components/input/select-radio/style/select-radio.scss
@@ -1,4 +1,14 @@
-
+$select-radio-error-color: rgb(222, 50, 38);
 [data-focus="select-radio"] {
-    
+    &[data-valid="false"] {
+        .mdl-radio__label {
+            color:$select-radio-error-color
+        }
+        .mdl-radio .mdl-radio__outer-circle {
+            border-color:$select-radio-error-color;
+        }
+        .mdl-radio__inner-circle {
+            background: $select-radio-error-color;
+        }
+    }
 }