From ac1479c46e8fc5ffa3b79b5512c4aa47e0b77608 Mon Sep 17 00:00:00 2001
From: Dylan Moberg <dylan.moberg@concur.com>
Date: Tue, 15 Jan 2019 18:35:24 -0800
Subject: [PATCH] finish Combobox - MegaMenu classnames

---
 src/ComboboxInput/ComboboxInput.js           |  77 +++++---
 src/DatePicker/DatePicker.js                 |  32 +++-
 src/Dropdown/Dropdown.js                     |  12 +-
 src/Forms/Forms.js                           |  95 ++++++++--
 src/Forms/__snapshots__/Forms.test.js.snap   |   2 +-
 src/Icon/Icon.js                             |  19 +-
 src/Identifier/Identifier.js                 |  37 +++-
 src/Image/Image.js                           |  13 +-
 src/InlineHelp/InlineHelp.js                 |  15 +-
 src/InputGroup/InputGroup.js                 |  84 +++++++--
 src/ListGroup/ListGroup.js                   |  20 ++-
 src/LocalizationEditor/LocalizationEditor.js | 178 +++++++++++--------
 src/MegaMenu/MegaMenu.js                     |  71 +++++---
 13 files changed, 466 insertions(+), 189 deletions(-)

diff --git a/src/ComboboxInput/ComboboxInput.js b/src/ComboboxInput/ComboboxInput.js
index 96b985acf..959ec2a79 100644
--- a/src/ComboboxInput/ComboboxInput.js
+++ b/src/ComboboxInput/ComboboxInput.js
@@ -1,43 +1,62 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Popover } from '../Popover/Popover';
 
 // ------------------------------------------- Combobox Input ------------------------------------------
 export const ComboboxInput = ({ placeholder, menu, compact, className, ...props }) => {
-  return (
-      <div className={`fd-combobox-input${className ? ' ' + className : ''}`} {...props}>
-          <Popover
-              noArrow
-              control={
-                  <div className='fd-combobox-control'>
-                      <div
-                          className={`fd-input-group fd-input-group--after${
-                compact ? ' fd-input-group--compact' : ''
-              }`}>
-                          <input
-                              type='text'
-                              className={`fd-input${compact ? ' fd-input--compact' : ''}`}
-                              id=''
-                              placeholder={placeholder} />
-                          <span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button'>
-                              <button className=' fd-button--light sap-icon--navigation-down-arrow' />
-                          </span>
-                      </div>
-                  </div>
+    const comboboxInputClasses = classnames(
+        'fd-combobox-input',
+        className
+    );
+
+    const popoverClasses = classnames(
+        'fd-input-group',
+        'fd-input-group--after',
+        {
+            'fd-input-group--compact': compact
+        }
+    );
+
+    const popoverInputClasses = classnames(
+        'fd-input',
+        {
+            'fd-input--compact': compact
         }
-              body={menu} />
-      </div>
-  );
+    );
+
+    return (
+        <div className={comboboxInputClasses} {...props}>
+            <Popover
+                noArrow
+                control={
+                    <div className='fd-combobox-control'>
+                        <div
+                            className={popoverClasses}>
+                            <input
+                                type='text'
+                                className={popoverInputClasses}
+                                id=''
+                                placeholder={placeholder} />
+                            <span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button'>
+                                <button className=' fd-button--light sap-icon--navigation-down-arrow' />
+                            </span>
+                        </div>
+                    </div>
+            }
+                body={menu} />
+        </div>
+    );
 };
 
 ComboboxInput.propTypes = {
-  menu: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  compact: PropTypes.bool,
-  placeholder: PropTypes.string
+    menu: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    compact: PropTypes.bool,
+    placeholder: PropTypes.string
 };
 
 ComboboxInput.defaultTypes = {
-  compact: false,
-  placeholder: ''
+    compact: false,
+    placeholder: ''
 };
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index df1facbfb..2515a3237 100644
--- a/src/DatePicker/DatePicker.js
+++ b/src/DatePicker/DatePicker.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Calendar } from '../Calendar/Calendar';
 
 export class DatePicker extends Component {
@@ -367,20 +368,37 @@ export class DatePicker extends Component {
 
   render() {
     const { enableRangeSelection, disableWeekends, disableBeforeDate, disableAfterDate, disableWeekday, disablePastDates, disableFutureDates, blockedDates, disabledDates, compact, className, ...props } = this.props;
+
+    const datePickerClasses = classnames(
+      'fd-date-picker',
+      className
+    );
+
+    const datePickerInputGroupClasses = classnames(
+      'fd-input-group',
+      'fd-input-group--after',
+      {
+        'fd-input-group--compact': compact
+      }
+    );
+
+    const datePickerInputClasses = classnames(
+      'fd-input',
+      {
+        'fd-input--compact': compact
+      }
+    );
+
     return (
         <div
-            className={`fd-date-picker${className ? ' ' + className : ''}`} {...props}
+            className={datePickerClasses} {...props}
             ref={component => (this.component = component)}>
             <div className='fd-popover'>
                 <div className='fd-popover__control'>
                     <div
-                        className={`fd-input-group fd-input-group--after${
-                this.props.compact ? ' fd-input-group--compact' : ''
-              }`}>
+                        className={datePickerInputGroupClasses}>
                         <input
-                            className={`fd-input${
-                  this.props.compact ? ' fd-input--compact' : ''
-                }`}
+                            className={datePickerInputClasses}
                             type='text'
                             placeholder='mm/dd/yyyy'
                             onClick={() => this.openCalendar('input')}
diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js
index 1fe661248..48181a8d2 100644
--- a/src/Dropdown/Dropdown.js
+++ b/src/Dropdown/Dropdown.js
@@ -1,10 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 export const Dropdown = props => {
     const { standard, children, className } = props;
+
+    const dropdownClasses = classnames(
+        'fd-dropdown',
+        {
+            'fd-dropdown--standard': standard
+        },
+        className
+    );
+
     return (
-        <div className={`fd-dropdown${standard ? ' fd-dropdown--standard' : ''}${className ? ' ' + className : ''}`}>
+        <div className={dropdownClasses}>
             {children}
         </div>
     );
diff --git a/src/Forms/Forms.js b/src/Forms/Forms.js
index daa1166dd..c2f6d4710 100644
--- a/src/Forms/Forms.js
+++ b/src/Forms/Forms.js
@@ -1,10 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 // ------------------------------------------------- Form Set -----------------------------------------------
 export const FormSet = ({ children, className }) => {
+  const formSetClasses = classnames(
+    'fd-form__set',
+    className
+  );
+
   return (
-      <div className={`fd-form__set${className ? ' ' + className : ''}`}>
+      <div className={formSetClasses}>
           {children}
       </div>
   );
@@ -15,11 +21,18 @@ FormSet.propTypes = {
 
 // ------------------------------------------------- Form Item -----------------------------------------------
 export const FormItem = ({ isCheck, isInline, children, className }) => {
+  const formItemClasses = classnames(
+    'fd-form__item',
+    {
+      'fd-form__item--inline': isInline,
+      'fd-form__item--check': isCheck
+    },
+    className
+  );
+
   return (
       <div
-          className={`fd-form__item${isInline ? ' fd-form__item--inline' : ''}${
-        isCheck ? ' fd-form__item--check' : ''
-      }${className ? ' ' + className : ''}`}>
+          className={formItemClasses}>
           {children}
       </div>
   );
@@ -32,11 +45,17 @@ FormItem.propTypes = {
 
 // ------------------------------------------------- Form Label ----------------------------------------------
 export const FormLabel = ({ required, children, className, ...props }) => {
+  const formLabelClasses = classnames(
+    'fd-form__label',
+    {
+      'is-required': required
+    },
+    className
+  );
+
   return (
       <label
-          className={`fd-form__label${required ? ' is-required' : ''}${
-        className ? ' ' + className : ''
-      }`}
+          className={formLabelClasses}
           {...props}>
           {children}
       </label>
@@ -49,11 +68,19 @@ FormLabel.propTypes = {
 
 // ------------------------------------------------- Form Message ----------------------------------------------
 export const FormMessage = ({ type, children, className, ...props }) => {
+  const formMessageClasses = classnames(
+    'fd-form__message',
+    {
+      'fd-form__message--error': type === 'error',
+      'fd-form__message--warning': type === 'warning',
+      'fd-form__message--help': type === 'help'
+    },
+    className
+  );
+
   return (
       <span
-          className={`fd-form__message${type ? '  fd-form__message--' + type : ''}${
-        className ? ' ' + className : ''
-      }`}
+          className={formMessageClasses}
           {...props}>
           {children}
       </span>
@@ -66,24 +93,41 @@ FormMessage.propTypes = {
 
 // ------------------------------------------------- Form Input ----------------------------------------------
 export const FormInput = ({ state, className, ...props }) => {
+  const formInputClasses = classnames(
+    'fd-form__control',
+    {
+      'is-normal': state === 'normal',
+      'is-valid': state === 'valid',
+      'is-invalid': state === 'invalid',
+      'is-warning': state === 'warning',
+      'is-help': state === 'help',
+      'is-disabled': state === 'disabled',
+      'is-readonly': state === 'readonly'
+    },
+    className
+  );
+
   return (
       <input
-          className={`fd-form__control${state ? ' is-' + state : ''}${
-        className ? ' ' + className : ''
-      }`}
+          className={formInputClasses}
           {...props} />
   );
 };
 FormInput.propTypes = {
   className: PropTypes.string,
-  state: PropTypes.string
+  state: PropTypes.oneOf(['', 'normal', 'valid', 'invalid', 'warning', 'help', 'disabled', 'readonly'])
 };
 
 // ------------------------------------------------- Form Textarea ----------------------------------------------
 export const FormTextarea = ({ children, className, ...props }) => {
+  const formTextAreaClasses = classnames(
+    'fd-form__control',
+    className
+  );
+
   return (
       <textarea
-          className={`fd-form__control${className ? ' ' + className : ''}`}
+          className={formTextAreaClasses}
           {...props}>
           {children}
       </textarea>
@@ -95,9 +139,14 @@ FormTextarea.propTypes = {
 
 // ------------------------------------------------- Form Fieldset ----------------------------------------------
 export const FormFieldset = ({ children, className, ...props }) => {
+  const formFieldsetClasses = classnames(
+    'fd-form__set',
+    className
+  );
+
   return (
       <fieldset
-          className={`fd-form__set${className ? ' ' + className : ''}`}
+          className={formFieldsetClasses}
           {...props}>
           {children}
       </fieldset>
@@ -109,9 +158,14 @@ FormFieldset.propTypes = {
 
 // ------------------------------------------------- Form Legend ----------------------------------------------
 export const FormLegend = ({ children, className, ...props }) => {
+  const formLegendClasses = classnames(
+    'fd-form__legend',
+    className
+  );
+
   return (
       <legend
-          className={`fd-form__legend${className ? ' ' + className : ''}`}
+          className={formLegendClasses}
           {...props}>
           {children}
       </legend>
@@ -123,9 +177,14 @@ FormLegend.propTypes = {
 
 // ------------------------------------------------- Form Select ----------------------------------------------
 export const FormSelect = ({ disabled, children, className, ...props }) => {
+  const formSelectClasses = classnames(
+    'fd-form__control',
+    className
+  );
+
   return (
       <select
-          className={`fd-form__control${className ? ' ' + className : ''}`}
+          className={formSelectClasses}
           {...props}
           disabled={disabled ? true : ''}>
           {children}
diff --git a/src/Forms/__snapshots__/Forms.test.js.snap b/src/Forms/__snapshots__/Forms.test.js.snap
index 5a836b711..f258c6f0c 100644
--- a/src/Forms/__snapshots__/Forms.test.js.snap
+++ b/src/Forms/__snapshots__/Forms.test.js.snap
@@ -48,7 +48,7 @@ exports[`<Forms /> create form item 1`] = `
       Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.
     </textarea>
     <span
-      className="fd-form__message  fd-form__message--help"
+      className="fd-form__message fd-form__message--help"
     >
       Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
     </span>
diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
index 92591d3b4..7df8479bc 100644
--- a/src/Icon/Icon.js
+++ b/src/Icon/Icon.js
@@ -1,10 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 export const Icon = ({ glyph, size, clickHandler, className, ...props }) => {
+  const iconClasses = classnames(
+    {
+      [`sap-icon--${glyph}`]: glyph,
+      'sap-icon--xxs': size === 'xxs',
+      'sap-icon--xs': size === 'xs',
+      'sap-icon--s': size === 's',
+      'sap-icon--m': size === 'm',
+      'sap-icon--l': size === 'l',
+      'sap-icon--xl': size === 'xl',
+      'sap-icon--xxl': size === 'xxl'
+    },
+    className
+  );
+
   return (
       <span
-          className={`${'sap-icon--' + glyph}${size ? ' sap-icon--' + size : ''}${className ? ' ' + className : ''}`}
+          className={iconClasses}
           onClick={clickHandler} {...props} />
   );
 };
@@ -17,5 +32,5 @@ Icon.propTypes = {
   glyph: PropTypes.string.isRequired,
   className: PropTypes.string,
   clickHandler: PropTypes.func,
-  size: PropTypes.string
+  size: PropTypes.oneOf(['', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl' ])
 };
diff --git a/src/Identifier/Identifier.js b/src/Identifier/Identifier.js
index 459aef458..92cf0209b 100644
--- a/src/Identifier/Identifier.js
+++ b/src/Identifier/Identifier.js
@@ -1,17 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 export const Identifier = ({ glyph, size, modifier, color, label, backgroundImageUrl, children, className, ...props }) => {
   const styles = {
     backgroundImage: `url(${backgroundImageUrl})`
   };
+
+  const identifierClasses = classnames(
+    {
+      'fd-identifier': !!size === false,
+      'fd-identifier--xxs': size === 'xxs',
+      'fd-identifier--xs': size === 'xs',
+      'fd-identifier--s': size === 's',
+      'fd-identifier--m': size === 'm',
+      'fd-identifier--l': size === 'l',
+      'fd-identifier--xl': size === 'xl',
+      'fd-identifier--xxl': size === 'xxl',
+      [`sap-icon--${glyph}`]: glyph,
+      'fd-identifier--circle': modifier === 'circle',
+      'fd-identifier--transparent': modifier === 'transparent',
+      'fd-has-background-color-accent-1': color === 1,
+      'fd-has-background-color-accent-2': color === 2,
+      'fd-has-background-color-accent-3': color === 3,
+      'fd-has-background-color-accent-4': color === 4,
+      'fd-has-background-color-accent-5': color === 5,
+      'fd-has-background-color-accent-6': color === 6,
+      'fd-has-background-color-accent-7': color === 7,
+      'fd-has-background-color-accent-8': color === 8,
+      'fd-has-background-color-accent-9': color === 9,
+      'fd-identifier--thumbnail': backgroundImageUrl
+    },
+    className
+  );
+
   return (
       <span
-          className={`${size ? 'fd-identifier--' + size : 'fd-identifier'}${
-        glyph ? ' sap-icon--' + glyph : ''
-      }${modifier ? ' fd-identifier--' + modifier : ''}${
-        color ? ' fd-has-background-color-accent-' + color : ''
-      }${backgroundImageUrl ? ' fd-identifier--thumbnail' : ''}${className ? ' ' + className : ''}`}
+          className={identifierClasses}
           style={backgroundImageUrl && styles}
           role={`${!children ? 'presentation' : ''}`}
           aria-label={label} {...props}>
@@ -27,5 +52,5 @@ Identifier.propTypes = {
   glyph: PropTypes.string,
   label: PropTypes.string,
   modifier: PropTypes.oneOf(['', 'circle', 'transparent']),
-  size: PropTypes.string
+  size: PropTypes.oneOf(['', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl' ])
 };
diff --git a/src/Image/Image.js b/src/Image/Image.js
index 38414a255..4f94a17c8 100644
--- a/src/Image/Image.js
+++ b/src/Image/Image.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 export const Image = ({ size, type, photo, className, ...props }) => {
+  const imageClasses = classnames(
+    {
+      'fd-image--s': size === 's',
+      'fd-image--m': size === 'm',
+      'fd-image--l': size === 'l',
+      'fd-image--circle': type === 'circle'
+    },
+    className
+  );
+
   return (
       <span
-          className={`${'fd-image--' + size}${type ? ' fd-image--' + type : ''}${className ? ' ' + className : ''}`}
+          className={imageClasses}
           style={{ backgroundImage: 'url(' + photo + ')' }} {...props} />
   );
 };
diff --git a/src/InlineHelp/InlineHelp.js b/src/InlineHelp/InlineHelp.js
index 759cf83b8..5c8e2c248 100644
--- a/src/InlineHelp/InlineHelp.js
+++ b/src/InlineHelp/InlineHelp.js
@@ -1,11 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 export const InlineHelp = ({ text, placement, className, ...props }) => {
+  const inlineHelpClasses = classnames(
+    'fd-inline-help__content',
+    {
+      'fd-inline-help__content--bottom-right': placement === 'bottom-right',
+      'fd-inline-help__content--bottom-left': placement === 'bottom-left',
+      'fd-inline-help__content--right': placement === 'right',
+      'fd-inline-help__content--left': placement === 'left',
+      'fd-inline-help__content--bottom-center': placement === 'bottom-center'
+    },
+    className
+  );
+
   return (
       <span className='fd-inline-help'>
           <span
-              className={`fd-inline-help__content fd-inline-help__content--${placement}${className ? ' ' + className : ''}`} {...props}>
+              className={inlineHelpClasses} {...props}>
               {text}
           </span>
       </span>
diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js
index fed1d958a..f6b883988 100644
--- a/src/InputGroup/InputGroup.js
+++ b/src/InputGroup/InputGroup.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 export const FormGroup = props => {
   const { children } = props;
@@ -67,13 +68,25 @@ export class InputGroup extends Component {
 
     switch (inputType) {
       case 'number':
+        const inputGroupNumberClasses = classnames(
+          'fd-input-group',
+          'fd-input-group--after',
+          {
+            'fd-input-group--compact': compact
+          }
+        );
+
+        const inputNumberClasses = classnames(
+          {
+            'fd-input fd-input--compact': compact
+          }
+        );
+
         return (
             <div
-                className={`fd-input-group fd-input-group--after${
-              compact ? ' fd-input-group--compact' : ''
-            }`}>
+                className={inputGroupNumberClasses}>
                 <input
-                    className={`${compact ? 'fd-input fd-input--compact' : ''}`}
+                    className={inputNumberClasses}
                     type='number'
                     id={inputId}
                     name={inputName}
@@ -93,13 +106,24 @@ export class InputGroup extends Component {
         );
 
       case 'search':
+      const inputGroupSearchClasses = classnames(
+        'fd-input-group',
+        {
+          'fd-input-group--compact': compact
+        }
+      );
+
+      const inputSearchClasses = classnames(
+        {
+          'fd-input fd-input--compact': compact
+        }
+      );
+
         return (
             <div
-                className={`fd-input-group${
-              compact ? ' fd-input-group--compact' : ''
-            }`}>
+                className={inputGroupSearchClasses}>
                 <input
-                    className={`${compact ? 'fd-input fd-input--compact' : ''}`}
+                    className={inputSearchClasses}
                     type='search'
                     id={inputId}
                     name={inputName}
@@ -117,11 +141,23 @@ export class InputGroup extends Component {
       case 'text':
       default: {
         if (addonPos === 'before') {
+          const inputGroupBeforeClasses = classnames(
+            'fd-input-group',
+            'fd-input-group--before',
+            {
+              'fd-input-group--compact': compact
+            }
+          );
+
+          const inputBeforeClasses = classnames(
+            {
+              'fd-input fd-input--compact': compact
+            }
+          );
+
           return (
               <div
-                  className={`fd-input-group fd-input-group--before${
-                compact ? ' fd-input-group--compact' : ''
-              }`}>
+                  className={inputGroupBeforeClasses}>
                   {actions ? (
                       <span className='fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--before'>
                           {children}
@@ -130,7 +166,7 @@ export class InputGroup extends Component {
                   <span className='fd-input-group__addon fd-input-group__addon--before'>
                       {glyph ? (
                           <span
-                              className={`${'sap-icon--' + glyph}`}
+                              className={`sap-icon--${glyph}`}
                               role='presentation' />
                   ) : (
                     addon
@@ -138,7 +174,7 @@ export class InputGroup extends Component {
                   </span>
               )}
                   <input
-                      className={`${compact ? 'fd-input fd-input--compact' : ''}`}
+                      className={inputBeforeClasses}
                       type='text'
                       id={inputId}
                       name={inputName}
@@ -147,13 +183,25 @@ export class InputGroup extends Component {
               </div>
           );
         } else {
+          const inputGroupAfterClasses = classnames(
+            'fd-input-group',
+            'fd-input-group--after',
+            {
+              'fd-input-group--compact': compact
+            }
+          );
+
+          const inputAfterClasses = classnames(
+            {
+              'fd-input fd-input--compact': compact
+            }
+          );
+
           return (
               <div
-                  className={`fd-input-group fd-input-group--after${
-                compact ? ' fd-input-group--compact' : ''
-              }`}>
+                  className={inputGroupAfterClasses}>
                   <input
-                      className={`${compact ? 'fd-input fd-input--compact' : ''}`}
+                      className={inputAfterClasses}
                       type='text'
                       id={inputId}
                       name={inputName}
@@ -167,7 +215,7 @@ export class InputGroup extends Component {
                   <span className='fd-input-group__addon fd-input-group__addon--after'>
                       {glyph ? (
                           <span
-                              className={`${'sap-icon--' + glyph}`}
+                              className={`sap-icon--${glyph}`}
                               role='presentation' />
                   ) : (
                     addon
diff --git a/src/ListGroup/ListGroup.js b/src/ListGroup/ListGroup.js
index 2e8f2b63e..c38de718a 100644
--- a/src/ListGroup/ListGroup.js
+++ b/src/ListGroup/ListGroup.js
@@ -1,16 +1,27 @@
 import React from 'react';
+import classnames from 'classnames';
 
 export const ListGroup = ({ children, className, ...props }) => {
+    const listGroupClasses = classnames(
+        'fd-list-group',
+        className
+    );
+
     return (
-        <ul className={`fd-list-group${className ? ' ' + className : ''}`} {...props}>
+        <ul className={listGroupClasses} {...props}>
             {children}
         </ul>
     );
 };
 
 export const ListGroupItem = ({ children, className, ...props }) => {
+    const listGroupItemClasses = classnames(
+        'fd-list-group__item',
+        className
+    );
+
     return (
-        <li className={`fd-list-group__item${className ? ' ' + className : ''}`} {...props}>
+        <li className={listGroupItemClasses} {...props}>
             {children}
         </li>
 
@@ -18,6 +29,11 @@ export const ListGroupItem = ({ children, className, ...props }) => {
 };
 
 export const ListGroupItemActions = ({ children, className, ...props }) => {
+    const listGroupItemActionsClasses = classnames(
+        'fd-list-group__action',
+        className
+    );
+
     return (
         <span className={`fd-list-group__action${className ? ' ' + className : ''}`} {...props}>
             {children}
diff --git a/src/LocalizationEditor/LocalizationEditor.js b/src/LocalizationEditor/LocalizationEditor.js
index b742235f7..0ac5cbce0 100644
--- a/src/LocalizationEditor/LocalizationEditor.js
+++ b/src/LocalizationEditor/LocalizationEditor.js
@@ -1,94 +1,120 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Popover } from '../Popover/Popover';
 
 // ------------------------------------------- Menu ------------------------------------------
 export const LocalizationEditor = ({ control, menu, id, compact, textarea, className, ...props }) => {
+    const localizationEditorClasses = classnames(
+        'fd-localization-editor',
+        className
+    );
 
-  return (
-      <div className={`fd-localization-editor${className ? ' ' + className : ''}`} {...props}>
-          <Popover
-              id={id}
-              control={
-                  <div>
-                      <label className='fd-form__label' htmlFor={id}>
-                          {control.label}
-                      </label>
-                      <div
-                          className={`fd-input-group${
-                compact && !textarea ? ' fd-input-group--compact' : ''
-              } fd-input-group--after`}>
-                          {textarea ? (
-                              <textarea />
-              ) : (
-                  <input
-                      type='text'
-                      className={compact ? 'fd-input fd-input--compact' : ''}
-                      placeholder={control.placeholder} />
-              )}
-                          <span
-                              className={`fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button${
-                  textarea ? ' fd-input-group__addon--textarea' : ''
-                }`}>
-                              <button className='fd-button--light fd-localization-editor__button'>
-                                  {control.language}
-                              </button>
-                          </span>
-                      </div>
-                  </div>
+    const localizationEditorCompactClasses = classnames(
+        'fd-input-group',
+        {
+            'fd-input-group--compact': compact && !!textarea === false
+        },
+        'fd-input-group--after'
+    );
+
+    const localizationEditorInputClasses = classnames(
+        {
+            'fd-input fd-input--compact': compact
+        }
+    );
+
+    const localizationEditorTextareaClasses = classnames(
+        'fd-input-group__addon',
+        'fd-input-group__addon--after',
+        'fd-input-group__addon--button',
+        {
+            'fd-input-group__addon--textarea': textarea
         }
-              body={
-                  <nav className='fd-menu'>
-                      <ul className='fd-menu__list fd-localization-editor__list'>
-                          {menu.map((item, index) => {
-                return (
-                    <li key={index}>
+    );
+
+    const localizationEditorAddonClasses = classnames(
+        'fd-input-group__addon',
+        'fd-input-group__addon--after',
+        {
+            'fd-input-group__addon--textarea': textarea
+        }
+    );
+
+    return (
+        <div className={localizationEditorClasses} {...props}>
+            <Popover
+                id={id}
+                control={
+                    <div>
+                        <label className='fd-form__label' htmlFor={id}>
+                            {control.label}
+                        </label>
                         <div
-                            className={`fd-input-group${
-                        compact && !textarea ? ' fd-input-group--compact' : ''
-                      } fd-input-group--after`}>
+                            className={localizationEditorCompactClasses}>
                             {textarea ? (
                                 <textarea />
-                      ) : (
-                          <input
-                              type='text'
-                              className={
-                            compact ? 'fd-input fd-input--compact' : ''
-                          }
-                              placeholder={item.placeholder} />
-                      )}
+                ) : (
+                    <input
+                        type='text'
+                        className={localizationEditorInputClasses}
+                        placeholder={control.placeholder} />
+                )}
                             <span
-                                className={`fd-input-group__addon fd-input-group__addon--after${
-                          textarea ? ' fd-input-group__addon--textarea' : ''
-                        }`}>
-                                {item.language}
+                                className={localizationEditorTextareaClasses}>
+                                <button className='fd-button--light fd-localization-editor__button'>
+                                    {control.language}
+                                </button>
                             </span>
                         </div>
-                    </li>
-                );
-              })}
-                      </ul>
-                  </nav>
-        }
-              noArrow />
-      </div>
-  );
+                    </div>
+            }
+                body={
+                    <nav className='fd-menu'>
+                        <ul className='fd-menu__list fd-localization-editor__list'>
+                            {menu.map((item, index) => {
+                    return (
+                        <li key={index}>
+                            <div
+                                className={localizationEditorCompactClasses}>
+                                {textarea ? (
+                                    <textarea />
+                        ) : (
+                            <input
+                                type='text'
+                                className={localizationEditorInputClasses}
+                                placeholder={item.placeholder} />
+                        )}
+                                <span
+                                    className={localizationEditorAddonClasses}>
+                                    {item.language}
+                                </span>
+                            </div>
+                        </li>
+                    );
+                })}
+                        </ul>
+                    </nav>
+            }
+                noArrow />
+        </div>
+    );
 };
 
 LocalizationEditor.propTypes = {
-  control: PropTypes.shape({
-    label: PropTypes.string,
-    placeholder: PropTypes.string,
-    language: PropTypes.string
-  }).isRequired,
-  menu: PropTypes.arrayOf(
-    PropTypes.shape({
-      placeholder: PropTypes.string,
-      language: PropTypes.string
-    }).isRequired
-  ).isRequired,
-  className: PropTypes.string,
-  compact: PropTypes.bool,
-  id: PropTypes.string,
-  textarea: PropTypes.bool
+    control: PropTypes.shape({
+        label: PropTypes.string,
+        placeholder: PropTypes.string,
+        language: PropTypes.string
+    }).isRequired,
+    menu: PropTypes.arrayOf(
+        PropTypes.shape({
+        placeholder: PropTypes.string,
+        language: PropTypes.string
+        }).isRequired
+    ).isRequired,
+    className: PropTypes.string,
+    compact: PropTypes.bool,
+    id: PropTypes.string,
+    textarea: PropTypes.bool
 };
diff --git a/src/MegaMenu/MegaMenu.js b/src/MegaMenu/MegaMenu.js
index c18812628..d2a713abc 100644
--- a/src/MegaMenu/MegaMenu.js
+++ b/src/MegaMenu/MegaMenu.js
@@ -1,11 +1,17 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { BrowserRouter, Link } from 'react-router-dom';
 
 export const MegaMenu = ({ children, className, ...props }) => {
+  const megaMenuClasses = classnames(
+    'fd-mega-menu',
+    className
+  );
+
   return (
       <nav
-          className={`fd-mega-menu${className ? ' ' + className : ''}`}
+          className={megaMenuClasses}
           {...props}>
           {children}
       </nav>
@@ -58,23 +64,43 @@ export class MegaMenuList extends Component {
     this.setState({ selectedItem: id });
   };
 
+  getListItemLinkClasses = ({id, hasChild}) => {
+    return classnames(
+      'fd-mega-menu__link',
+      {
+        'is-selected': this.state.selectedItem === id,
+        'has-child': hasChild,
+        'is-expanded': this.state.itemStates[id] && hasChild
+      }
+    );
+  }
+
+  getSelectedSublinkClasses = ({id}) => {
+    return classnames(
+      'fd-mega-menu__sublink',
+      {
+        'is-selected': this.state.selectedItem === id
+      }
+    );
+  }
+
   render() {
     const { items, className } = this.props;
+
+    const megaMenuListClasses = classnames(
+      'fd-mega-menu__list',
+      className
+    );
+
     return (
         <BrowserRouter>
-            <ul className={`fd-mega-menu__list${className ? ' ' + className : ''}`}>
+            <ul className={megaMenuListClasses}>
                 {items.map(item => {
             return (
                 <li className='fd-mega-menu__item' key={item.id}>
                     {item.link ? (
                         <Link
-                            className={`fd-mega-menu__link${
-                      this.state.selectedItem === item.id ? ' is-selected' : ''
-                    }${item.hasChild ? ' has-child' : ''}${
-                      this.state.itemStates[item.id] && item.hasChild
-                        ? ' is-expanded'
-                        : ''
-                    }`}
+                            className={this.getListItemLinkClasses(item)}
                             to={{ pathname: item.link }}
                             key={item.id}
                             onClick={e => this.handleSelect(e, item.id)}>
@@ -84,13 +110,7 @@ export class MegaMenuList extends Component {
 
                     {item.url ? (
                         <a
-                            className={`fd-mega-menu__link${
-                      this.state.selectedItem === item.id ? ' is-selected' : ''
-                    }${item.hasChild ? ' has-child' : ''}${
-                      this.state.itemStates[item.id] && item.hasChild
-                        ? ' is-expanded'
-                        : ''
-                    }`}
+                            className={this.getListItemLinkClasses(item)}
                             href={item.url}
                             key={item.id}
                             onClick={e => this.handleSelect(e, item.id)}>
@@ -109,11 +129,7 @@ export class MegaMenuList extends Component {
                           <li className='fd-mega-menu__subitem' key={ch.id}>
                               {ch.link ? (
                                   <Link
-                                      className={`fd-mega-menu__sublink${
-                                this.state.selectedItem === ch.id
-                                  ? ' is-selected'
-                                  : ''
-                              }`}
+                                      className={this.getSelectedSublinkClasses(ch.id)}
                                       to={{ pathname: ch.link }}
                                       key={ch.id}
                                       onClick={e => this.handleSelectChild(e, ch.id)}>
@@ -122,11 +138,7 @@ export class MegaMenuList extends Component {
                           ) : null}
                               {ch.url ? (
                                   <a
-                                      className={`fd-mega-menu__sublink${
-                                this.state.selectedItem === ch.id
-                                  ? ' is-selected'
-                                  : ''
-                              }`}
+                                      className={this.getSelectedSublinkClasses(ch.id)}
                                       href={ch.url}
                                       key={ch.id}
                                       onClick={e => this.handleSelectChild(e, ch.id)}>
@@ -152,8 +164,13 @@ MegaMenuList.propTypes = {
 };
 
 export const MegaMenuGroup = ({ title, children, className }) => {
+  const megaMenuGroupClasses = classnames(
+    'fd-mega-menu__group',
+    className
+  );
+
   return (
-      <div className={`fd-mega-menu__group${className ? ' ' + className : ''}`}>
+      <div className={megaMenuGroupClasses}>
           <h1 className='fd-mega-menu__title'>{title}</h1>
           {children}
       </div>