finish Combobox - MegaMenu classnames

SAP · Jan 16, 2019 · ac1479c · ac1479c
1 parent 806962a
commit ac1479c
Show file tree

Hide file tree

Showing 13 changed files with 466 additions and 189 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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' ])
 };