fix: CORUI-6120: Add required and default props

src/ActionBar/ActionBar.js

@@ -11,7 +11,7 @@ export const ActionBar = ({ mobile, width, children, className, ...props }) => {
     return (
         <React.Fragment>
             {mobile ? (
-                <div style={{ width: width ? width : '319px' }}>
+                <div style={{width}}>
                     <div {...props} className={actionBarClasses}>{children}</div>
                 </div>
             ) : (
@@ -27,6 +27,10 @@ ActionBar.propTypes = {
     width: PropTypes.string
 };
 
+ActionBar.defaultProps = {
+    width: '319px'
+};
+
 ActionBar.propDescriptions = {
     mobile: 'Set to **true** for mobile view of the Action Bar.',
     width: 'The width of the Action Bar in mobile view.'
@@ -65,18 +69,20 @@ export const ActionBarHeader = ({ className, description, descriptionProps, titl
             <h1
                 {...titleProps}
                 className='fd-action-bar__title'>{title}</h1>
-            <p
-                {...descriptionProps}
-                className='fd-action-bar__description'>{description} </p>
+            {description &&
+                <p
+                    {...descriptionProps}
+                    className='fd-action-bar__description'>{description}</p>
+            }
         </div>
     );
 };
 
 ActionBarHeader.propTypes = {
+    title: PropTypes.string.isRequired,
     className: PropTypes.string,
     description: PropTypes.string,
     descriptionProps: PropTypes.object,
-    title: PropTypes.string,
     titleProps: PropTypes.object
 };
 

src/ActionBar/ActionBar.test.js

@@ -114,23 +114,38 @@ describe('<ActionBar />', () => {
         });
 
         test('should allow props to be spread to the ActionBarHeader component', () => {
-            const element = mount(<ActionBarHeader data-sample='Sample' />);
+            const element = mount(
+                <ActionBarHeader
+                    data-sample='Sample'
+                    description=''
+                    title='' />
+            );
 
             expect(
                 element.getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
-            const element = mount(<ActionBarHeader titleProps={{'data-sample': 'Sample'}} />);
+            const element = mount(
+                <ActionBarHeader
+                    description=''
+                    title=''
+                    titleProps={{'data-sample': 'Sample'}} />
+            );
 
             expect(
                 element.find('h1').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ActionBarHeader component\'s p element', () => {
-            const element = mount(<ActionBarHeader descriptionProps={{'data-sample': 'Sample'}} />);
+            const element = mount(
+                <ActionBarHeader
+                    description='Sample Description'
+                    descriptionProps={{'data-sample': 'Sample'}}
+                    title='' />
+            );
 
             expect(
                 element.find('p').getDOMNode().attributes['data-sample'].value

src/ActionBar/__snapshots__/ActionBar.test.js.snap

@@ -23,7 +23,6 @@ exports[`<ActionBar /> create basic Action Bar 1`] = `
       className="fd-action-bar__description"
     >
       Action Bar Description
-
     </p>
   </div>
   <div
@@ -59,7 +58,6 @@ exports[`<ActionBar /> create basic Action Bar 2`] = `
       className="fd-action-bar__description"
     >
       Action Bar Description
-
     </p>
   </div>
   <div
@@ -102,7 +100,6 @@ exports[`<ActionBar /> create basic mobile Action Bar 1`] = `
         className="fd-action-bar__description"
       >
         Action Bar Description
-
       </p>
     </div>
     <div
@@ -146,7 +143,6 @@ exports[`<ActionBar /> create basic mobile Action Bar 2`] = `
         className="fd-action-bar__description"
       >
         Action Bar Description
-
       </p>
     </div>
     <div

src/Alert/Alert.Component.js

@@ -135,7 +135,7 @@ export const AlertComponent = () => {
                     }
                 ]}>
                 <Alert dismissible={false} link='#'
-                    linkText='link' type=''>
+                    linkText='link'>
                     Default alert with a{' '}
                 </Alert>
             </Playground>

src/Badge/Badge.js

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {BADGE_TYPES, LABEL_TYPES, STATUS_TYPES} from '../utils/constants';
+import {BADGE_MODIFIERS, BADGE_TYPES, LABEL_TYPES, STATUS_TYPES} from '../utils/constants';
 
 
 export const Badge = ({ type, modifier, children, className, ...props }) => {
@@ -23,7 +23,7 @@ export const Badge = ({ type, modifier, children, className, ...props }) => {
 
 Badge.propTypes = {
     className: PropTypes.string,
-    modifier: PropTypes.oneOf(['', 'pill', 'filled']),
+    modifier: PropTypes.oneOf(BADGE_MODIFIERS),
     type: PropTypes.oneOf(BADGE_TYPES)
 };
 

src/Button/Button.js

@@ -34,13 +34,15 @@ export const Button = ({
     );
 
     return (<button {...props} className={buttonClasses}
-        disabled={disabled ? disabled : false} onClick={onClick}
-        selected={selected ? selected : false} type={typeAttr}>
+        disabled={disabled} onClick={onClick}
+        selected={selected} type={typeAttr}>
         {children}
     </button>);
 };
 
 Button.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
     compact: PropTypes.bool,
     disabled: PropTypes.bool,
     dropdown: PropTypes.bool,

src/Button/__snapshots__/Button.test.js.snap

@@ -8,27 +8,20 @@ exports[`<Button /> create button group 1`] = `
 >
   <button
     className="fd-button sap-icon--survey blue"
-    disabled={false}
-    selected={false}
   />
   <button
     className="fd-button sap-icon--pie-chart is-selected"
-    disabled={false}
     selected={true}
   />
   <button
     className="fd-button sap-icon--pool"
-    disabled={false}
-    selected={false}
   />
 </div>
 `;
 
 exports[`<Button /> create buttons 1`] = `
 <button
   className="fd-button"
-  disabled={false}
-  selected={false}
 >
   Regular Button
 </button>
@@ -37,8 +30,6 @@ exports[`<Button /> create buttons 1`] = `
 exports[`<Button /> create buttons 2`] = `
 <button
   className="fd-button--emphasized"
-  disabled={false}
-  selected={false}
 >
   Emphasized Button
 </button>
@@ -47,8 +38,6 @@ exports[`<Button /> create buttons 2`] = `
 exports[`<Button /> create buttons 3`] = `
 <button
   className="fd-button fd-button--positive"
-  disabled={false}
-  selected={false}
 >
   Positive Button
 </button>
@@ -57,8 +46,6 @@ exports[`<Button /> create buttons 3`] = `
 exports[`<Button /> create buttons 4`] = `
 <button
   className="fd-button sap-icon--cart"
-  disabled={false}
-  selected={false}
 >
   Icon Button
 </button>
@@ -67,8 +54,6 @@ exports[`<Button /> create buttons 4`] = `
 exports[`<Button /> create buttons 5`] = `
 <button
   className="fd-button fd-button--compact"
-  disabled={false}
-  selected={false}
 >
   Compact
 </button>
@@ -77,7 +62,6 @@ exports[`<Button /> create buttons 5`] = `
 exports[`<Button /> create buttons 6`] = `
 <button
   className="fd-button--emphasized is-selected"
-  disabled={false}
   selected={true}
 >
   Selected State
@@ -88,7 +72,6 @@ exports[`<Button /> create buttons 7`] = `
 <button
   className="fd-button--emphasized is-disabled"
   disabled={true}
-  selected={false}
 >
   Disabled State
 </button>
@@ -97,8 +80,6 @@ exports[`<Button /> create buttons 7`] = `
 exports[`<Button /> create buttons 8`] = `
 <button
   className="fd-button fd-dropdown__control"
-  disabled={false}
-  selected={false}
 >
   Dropdown Button
 </button>
@@ -107,8 +88,6 @@ exports[`<Button /> create buttons 8`] = `
 exports[`<Button /> create buttons 9`] = `
 <button
   className="fd-button fd-global-nav__btn"
-  disabled={false}
-  selected={false}
 >
   Navbar button
 </button>

src/Calendar/Calendar.js

@@ -373,13 +373,7 @@ export class Calendar extends Component {
     }
 
     returnDateSelected = (dates) => {
-        if (typeof this.props.onChange !== 'undefined') {
-            if (this.props.enableRangeSelection === true) {
-                this.props.onChange(dates);
-            } else {
-                this.props.onChange(dates);
-            }
-        }
+        this.props.onChange(dates);
     }
 
     generateNavigation = () => {
@@ -559,7 +553,12 @@ Calendar.propTypes = {
     tableBodyProps: PropTypes.object,
     tableHeaderProps: PropTypes.object,
     tableProps: PropTypes.object,
-    yearListProps: PropTypes.object
+    yearListProps: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+Calendar.defaultProps = {
+    onChange: () => {}
 };
 
 Calendar.propDescriptions = {

src/ComboboxInput/ComboboxInput.js

@@ -60,11 +60,6 @@ ComboboxInput.propTypes = {
     popoverProps: PropTypes.object
 };
 
-ComboboxInput.defaultTypes = {
-    compact: false,
-    placeholder: ''
-};
-
 ComboboxInput.propDescriptions = {
     menu: 'An object containing a `Menu` component.'
 };

src/DatePicker/DatePicker.js

@@ -439,7 +439,6 @@ export class DatePicker extends Component {
 
 DatePicker.propTypes = {
     ...Calendar.basePropTypes,
-
     buttonProps: PropTypes.object,
     compact: PropTypes.bool,
     enableRangeSelection: PropTypes.bool,

src/Dropdown/__snapshots__/Dropdown.test.js.snap

@@ -14,8 +14,6 @@ exports[`<Dropdown /> create dropdown component 1`] = `
     >
       <button
         className="fd-button fd-dropdown__control"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -83,8 +81,6 @@ exports[`<Dropdown /> create dropdown component 2`] = `
     >
       <button
         className="fd-button fd-dropdown__control fd-button--compact"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -152,8 +148,6 @@ exports[`<Dropdown /> create dropdown component 3`] = `
     >
       <button
         className="fd-button fd-button--standard fd-dropdown__control"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -222,8 +216,6 @@ exports[`<Dropdown /> create dropdown component 4`] = `
     >
       <button
         className="fd-button fd-dropdown__control sap-icon--filter"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -295,7 +287,6 @@ exports[`<Dropdown /> create dropdown component 5`] = `
       <button
         className="fd-button fd-dropdown__control sap-icon--filter is-disabled"
         disabled={true}
-        selected={false}
       >
         Select
       </button>