Add theming capability

.babelrc

@@ -25,6 +25,14 @@
               "original": "utils/params",
               "replacement": "../../utils/params",
             },
+            {
+              "original": "utils/theming",
+              "replacement": "../../utils/theming",
+            },
+            {
+              "original": "utils/themeContext",
+              "replacement": "../../utils/themeContext",
+            },
             {
               "original": "./index.scss",
               "replacement": "./index.css"

README.md

@@ -14,6 +14,7 @@ Welcome to [kununu's](https://wwww.kununu.com) collection of [React](https://fac
 * Over 80% code coverage
 * Frequently updated
 * Wide range of form and UI components
+* Themeable
 
 <br />
 

src/components/Autocomplete/customTheme.scss

@@ -0,0 +1,58 @@
+@import '~@kununu/kununu-theme-v2/scss/base/variables';
+
+.suggestionInfo {
+  color: black;
+  font-size: 12px;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+.suggestionsContainer {
+  box-shadow: 0 2px 10px rgba($black, .2);
+  font-size: 12px;
+  width: 80%;
+
+  @media (max-width: $screen-xs-max) {
+    width: auto;
+    border-radius: 0;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.formControl {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 50px;
+  padding: 5px;
+
+  &:focus {
+    border: 1px solid $green;
+    box-shadow: inset 0 0 0 1px $green, inset 0 2px 1px rgba($black, .075);
+    outline: none;
+  }
+}
+
+.suggestionHighlighted {
+  background: black;
+  color: white;
+  cursor: pointer;
+
+  .suggestionInfo {
+    color: white;
+  }
+}
+
+.suggestionsFooter {
+  border-top: 1px solid $gray-base-03;
+  padding: 8px 12px;
+}
+
+.autocompleteContainer {
+  position: relative;
+  width: 100%;
+}

src/components/Autocomplete/index.jsx

@@ -4,17 +4,17 @@ import Autosuggest from 'react-autosuggest';
 import Scroll from 'react-scroll';
 import debounce from 'debounce';
 
+import ThemeContext from 'utils/themeContext';
+import themeable from 'utils/theming';
 import getElementPositionY from 'utils/elementPosition';
 import {queryParamsToObject} from 'utils/params';
 import isMobile from 'utils/mobileDetection';
 
-
 import Error from '../Error';
 import sharedStyles from '../index.scss';
 
 import styles from './index.scss';
 
-
 export default class Autocomplete extends React.Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
@@ -181,21 +181,6 @@ export default class Autocomplete extends React.Component {
     }
   }
 
-  /**
-   * determines which classNames should be added to the container div of
-   * the component
-   *
-   * @return {string} [list of classNames split by space]
-   */
-  get containerClassNames () {
-    const {inputStyle, requiredLabel} = this.props;
-    const classNames = [sharedStyles.formGroup, sharedStyles[inputStyle]];
-
-    if (requiredLabel) classNames.push(styles.paddingTop);
-
-    return classNames.join(' ');
-  }
-
   /**
    * determines which classNames should be added to the label of
    * the component
@@ -204,13 +189,13 @@ export default class Autocomplete extends React.Component {
    */
   get labelClassNames () {
     const {labelHidden} = this.props;
-    const classNames = [sharedStyles.controlLabel];
+    const classNames = ['controlLabel'];
 
-    if (labelHidden) classNames.push(sharedStyles.hidden);
+    if (labelHidden) classNames.push('hidden');
 
-    if (this.hasError()) classNames.push(sharedStyles.controlLabelError);
+    if (this.hasError()) classNames.push('controlLabelError');
 
-    return classNames.join(' ');
+    return classNames;
   }
 
   getSuggestions = (value) => {
@@ -332,7 +317,6 @@ export default class Autocomplete extends React.Component {
       return (
         <div
           {...containerProps}
-          className={styles.suggestionsContainer}
         >
           {children}
         </div>
@@ -355,6 +339,7 @@ export default class Autocomplete extends React.Component {
       label,
       labelHidden,
       id,
+      inputStyle,
       isRequired,
       name,
       noSuggestionText,
@@ -369,83 +354,103 @@ export default class Autocomplete extends React.Component {
       value,
     } = this.state;
 
-    const inputProps = {
-      autoFocus,
-      className: `${sharedStyles.formControl} ${this.hasError() ? sharedStyles.formControlError : ''}`,
-      disabled,
-      id,
-      name,
-      onBlur: this.onBlur,
-      onChange: this.onChange,
-      onFocus: this.onFocus,
-      placeholder,
-      required: isRequired,
-      value,
-    };
-
     return (
-      <div
-        ref={(node) => { this.node = node; }}
-        className={this.containerClassNames}
-        id={`${name}-container`}
-      >
-
-        {requiredLabel && (
-        <span className={`${sharedStyles.controlNote} ${sharedStyles.controlLabelRequired}`}>
-          {requiredLabel}
-        </span>
-        )}
+      <ThemeContext.Consumer>
+        {(context) => {
+          const allStyles = {
+            ...sharedStyles,
+            ...styles,
+            ...context,
+          };
 
-        {labelHidden && (
-        <span className={sharedStyles.srOnly}>
-          {label}
-        </span>
-        )}
+          const theme = themeable(allStyles);
 
-        <label
-          className={this.labelClassNames}
-          htmlFor={id}
-        >
-          {label}
-        </label>
-
-        <div className={styles.autoCompleteContainer}>
-          <Autosuggest
-            id={id}
-            focusFirstSuggestion
-            focusInputOnSuggestionClick={!isMobile}
-            getSuggestionValue={this.getSuggestionValue}
-            inputProps={inputProps}
-            onSuggestionSelected={this.onSuggestionSelected}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            renderSuggestion={this.renderSuggestion}
-            renderSuggestionsContainer={this.renderSuggestionsContainer}
-            suggestions={suggestions}
-            theme={styles}
-          />
-
-          {isFetching && this.getSpinner()}
-
-          {hasInitialized && showNoSuggestionsText && !isFetching && !suggestions.length && value ? (
-            <div className={styles.suggestionsContainer}>
-              <ul>
-                <li className={styles.suggestion}>
-                  {noSuggestionText}
-                </li>
-              </ul>
-            </div>
-          ) : ''
+          const classNames = ['formControl'];
+
+          if (this.hasError()) {
+            classNames.push('formControlError');
           }
 
-          {this.hasError() && (
-          <Error
-            info={error}
-            subInfo={errorSubInfo}
-          />
-          )}
-        </div>
-      </div>
+          const inputProps = {
+            autoFocus,
+            className: theme(classNames),
+            disabled,
+            id,
+            name,
+            onBlur: this.onBlur,
+            onChange: this.onChange,
+            onFocus: this.onFocus,
+            placeholder,
+            required: isRequired,
+            value,
+          };
+
+          return (
+            <div
+              ref={(node) => { this.node = node; }}
+              className={theme('formGroup', inputStyle)}
+              id={`${name}-container`}
+            >
+
+              {requiredLabel && (
+              <span className={theme('controlNote', 'controlLabelRequired')}>
+                {requiredLabel}
+              </span>
+              )}
+
+              {labelHidden && (
+              <span className={theme('srOnly')}>
+                {label}
+              </span>
+              )}
+
+              <label
+                className={theme(...this.labelClassNames)}
+                htmlFor={id}
+              >
+                {label}
+              </label>
+
+              <div className={theme('autocompleteContainer')}>
+                <Autosuggest
+                  id={id}
+                  focusFirstSuggestion
+                  focusInputOnSuggestionClick={!isMobile}
+                  getSuggestionValue={this.getSuggestionValue}
+                  inputProps={inputProps}
+                  onSuggestionSelected={this.onSuggestionSelected}
+                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                  renderSuggestion={this.renderSuggestion}
+                  renderSuggestionsContainer={this.renderSuggestionsContainer}
+                  suggestions={suggestions}
+                  theme={allStyles}
+                />
+
+                {isFetching && this.getSpinner()}
+
+                {hasInitialized && showNoSuggestionsText && !isFetching && !suggestions.length && value ? (
+                  <div className={theme('suggestionsContainer')}>
+                    <ul>
+                      <li className={theme('suggestion')}>
+                        {noSuggestionText}
+                      </li>
+                    </ul>
+                  </div>
+                ) : ''
+                }
+
+                {this.hasError() && (
+                <Error
+                  info={error}
+                  subInfo={errorSubInfo}
+                />
+                )}
+              </div>
+            </div>
+          );
+        }}
+      </ThemeContext.Consumer>
     );
   }
 }