feat(styled-components): add helper classes

Author: Ian Wensink

src/Date/index.jsx

@@ -295,7 +295,7 @@ class Date extends Component {
             </Overlay>
           </OverlayWrapper>
         )}
-        <ValidationIcon success={this.props.webformElement.isSuccess()} />
+        <ValidationIcon success={this.props.webformElement.isSuccess()} className='hrw-validation-icon' />
       </Wrapper>
     );
   }

src/Input/index.jsx

@@ -59,7 +59,7 @@ class Input extends Component {
   render() {
     return (
       <div>
-        <Wrapper labelDisplay={this.getLabelDisplay()}>
+        <Wrapper labelDisplay={this.getLabelDisplay()} className={`hrw-input-wrap hrw-label-display-${this.getLabelDisplay()}`}>
           <InnerWrapper>
             {this.renderTextContent('prefix')}
             <BaseInput
@@ -69,7 +69,7 @@ class Input extends Component {
             {this.renderTextContent('suffix')}
           </InnerWrapper>
         </Wrapper>
-        <ValidationIcon success={this.props.webformElement.isSuccess()} />
+        <ValidationIcon success={this.props.webformElement.isSuccess()} className='hrw-validation-icon' />
       </div>
     );
   }

src/RangeField/index.jsx

@@ -55,7 +55,7 @@ class RangeField extends Component {
           <RangeValueWrapper labelDisplay={this.getLabelPosition()}>
             <RangeValue style={{ left: `${this.getPercentageValue()}%` }}>{this.props.value}</RangeValue>
           </RangeValueWrapper>
-          <ValidationIcon success={this.props.webformElement.isSuccess()} />
+          <ValidationIcon success={this.props.webformElement.isSuccess()} className='hrw-validation-icon' />
         </Wrapper>
       </div>
     );

src/SelectField/index.jsx

@@ -66,6 +66,7 @@ class SelectField extends Component {
       <Wrapper
         labelDisplay={this.getLabelPosition()}
         success={this.props.webformElement.isValid()}
+        className='hrw-select-wrapper'
       >
         <Select
           name={this.props.field['#webform_key']}
@@ -81,7 +82,7 @@ class SelectField extends Component {
           placeholder={this.props.field['#empty_option'] || 'Selecteer...'}
           openAfterFocus
         />
-        <ValidationIcon success={this.props.webformElement.isSuccess()} />
+        <ValidationIcon success={this.props.webformElement.isSuccess()} className='hrw-validation-icon' />
       </Wrapper>
     );
   }

src/TextArea/index.jsx

@@ -53,7 +53,7 @@ class TextArea extends Component {
           required={!this.props.state.required}
           {...attrs}
         />
-        <ValidationIcon success={this.props.webformElement.isSuccess()} />
+        <ValidationIcon success={this.props.webformElement.isSuccess()} className='hrw-validation-icon' />
       </div>
     );
   }

src/WebformElement/index.jsx

@@ -250,6 +250,7 @@ class WebformElement extends Component {
           value={cssClass}
           class={addClass}
           labelDisplay={this.getLabelDisplay()}
+          className={`hrw-position-${cssClass} hrw-label-display-${this.getLabelDisplay()}`}
         >
           {Parser(template(this.props.formStore, value))}
         </TextContent>
@@ -265,7 +266,7 @@ class WebformElement extends Component {
     if(this.props.field['#title'] && show) {
       const Wrapper = getNested(() => element.class.meta.label) || Label;
       return (
-        <Wrapper labelDisplay={this.getLabelDisplay()} htmlFor={this.key} className='hrw-label'>
+        <Wrapper labelDisplay={this.getLabelDisplay()} htmlFor={this.key} className={`hrw-label hrw-label-display-${this.getLabelDisplay()}`}>
           {Parser(template(this.props.formStore, this.props.field['#title']))}
           {this.getField().required ? (<RequiredMarker>&nbsp;*</RequiredMarker>) : null}
         </Wrapper>