Feature/issue#93 spreading props

src/ActionBar/ActionBar.Component.js

@@ -4,7 +4,7 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties
 
 export const ActionBarComponent = () => {
     const actionBarBackBtnCode = `<ActionBar>
-    <ActionBarBack onclick={clickBackBtn}/>
+    <ActionBarBack onClick={clickBackBtn}/>
     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
     <ActionBarActions>
         <Button>Button</Button>
@@ -115,7 +115,7 @@ const clickBackBtn = () => {
                         description: 'string - Action bar description. Specified in ActionBarHeader.'
                     },
                     {
-                        name: 'onclick',
+                        name: 'onClick',
                         description: 'func - The function that is executed when the back button is clicked.'
                     }
                 ]} />
@@ -125,7 +125,7 @@ const clickBackBtn = () => {
             <h2>Action bar with back button, description and action buttons.</h2>
             <DocsTile>
                 <ActionBar>
-                    <ActionBarBack onclick={clickBackBtn} />
+                    <ActionBarBack onClick={clickBackBtn} />
                     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
                     <ActionBarActions>
                         <Button>Button</Button>

src/ActionBar/ActionBar.js

@@ -1,56 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const ActionBar = props => {
-    const { mobile, width, children } = props;
+export const ActionBar = ({ mobile, width, children, className, ...props }) => {
 
     return (
         <React.Fragment>
             {mobile ? (
                 <div style={{ width: width ? width : '319px' }}>
-                    <div className='fd-action-bar'>{children}</div>
+                    <div className={`fd-action-bar${className ? ' ' + className : ''}`} {...props}>{children}</div>
                 </div>
             ) : (
-                <div className='fd-action-bar'>{children}</div>
+                <div className={`fd-action-bar${className ? ' ' + className : ''}`} {...props}>{children}</div>
             )}
         </React.Fragment>
     );
 };
 
 ActionBar.propTypes = {
+    className: PropTypes.string,
     mobile: PropTypes.bool,
     width: PropTypes.string
 };
 
-export const ActionBarBack = props => {
-    const { onclick } = props;
+export const ActionBarBack = ({ onClick, className, ...props }) => {
+
     return (
-        <div className='fd-action-bar__back'>
-            <button className='fd-button--light fd-button--compact sap-icon--nav-back' onClick={onclick} />
+        <div className={`fd-action-bar__back${className ? ' ' + className : ''}`} {...props}>
+            <button className='fd-button--light fd-button--compact sap-icon--nav-back' onClick={onClick} />
         </div>
     );
 };
 
 ActionBarBack.propTypes = {
-    onclick: PropTypes.func
+    className: PropTypes.string,
+    onClick: PropTypes.func
 };
 
-export const ActionBarHeader = props => {
-    const { title, description } = props;
+export const ActionBarHeader = ({ title, description, className, ...props }) => {
     return (
-        <div className='fd-action-bar__header'>
+        <div className={`fd-action-bar__header${className ? ' ' + className : ''}`} {...props}>
             <h1 className='fd-action-bar__title'>{title}</h1>
             <p className='fd-action-bar__description'>{description} </p>
         </div>
     );
 };
 
 ActionBarHeader.propTypes = {
+    className: PropTypes.string,
     description: PropTypes.string,
     title: PropTypes.string
 };
 
-export const ActionBarActions = props => {
-    const { children } = props;
-    return <div className='fd-action-bar__actions'>{children}</div>;
+export const ActionBarActions = ({ children, className, ...props }) => {
+    return <div className={`fd-action-bar__actions${className ? ' ' + className : ''}`} {...props}>{children}</div>;
 };

src/Alert/Alert.js

@@ -16,16 +16,16 @@ export class Alert extends Component {
     }
 
     render() {
-        const { type, link, linkText, dismissable, children } = this.props;
+        const { type, link, linkText, dismissable, children, className, ...props } = this.props;
         return (
             <div>
                 {this.state.isActive && (
                     <div
                         className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${
                             type ? ' fd-alert--' + type : ''
-                        }`}
+                        }${className ? ' ' + className : ''}`}
                         role='alert'
-                        id='j2ALl423'>
+                        {...props}>
                         {dismissable ? (
                             <button
                                 className='fd-alert__close'
@@ -49,6 +49,7 @@ export class Alert extends Component {
 }
 
 Alert.propTypes = {
+    className: PropTypes.string,
     dismissable: PropTypes.bool,
     link: PropTypes.string,
     linkText: PropTypes.string,

src/Alert/__snapshots__/Alert.test.js.snap

@@ -4,7 +4,6 @@ exports[`<Alert /> create basic alert 1`] = `
 <div>
   <div
     className="fd-alert fd-alert--dismissible"
-    id="j2ALl423"
     role="alert"
   >
     <button
@@ -32,7 +31,6 @@ exports[`<Alert /> create basic alert 2`] = `
 <div>
   <div
     className="fd-alert fd-alert--dismissible fd-alert--error"
-    id="j2ALl423"
     role="alert"
   >
     <button
@@ -50,7 +48,6 @@ exports[`<Alert /> create non-dismissable alert 1`] = `
 <div>
   <div
     className="fd-alert"
-    id="j2ALl423"
     role="alert"
   >
     Default alert that cannot be dismissed

src/Badge/Badge.js

@@ -1,52 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Badge = props => {
-    const { type, modifier, children } = props;
+export const Badge = ({ type, modifier, children, className, ...props }) => {
     return (
-        <span className={`fd-badge${type ? ' fd-badge--' + type : ''}${modifier ? ' fd-badge--' + modifier : ''}`}>
+        <span className={`fd-badge${type ? ' fd-badge--' + type : ''}${modifier ? ' fd-badge--' + modifier : ''}${className ? ' ' + className : ''}`} {...props}>
             {children}
         </span>
     );
 };
 
 Badge.propTypes = {
+    className: PropTypes.string,
     modifier: PropTypes.oneOf(['', 'pill', 'filled']),
     type: PropTypes.oneOf(['', 'success', 'warning', 'error'])
 };
 
-export const Label = props => {
-    const { type, children } = props;
-    return <span className={`fd-label${type ? ' fd-label--' + type : ''}`}>{children}</span>;
+export const Label = ({ type, children, className, ...props }) => {
+    return <span className={`fd-label${type ? ' fd-label--' + type : ''}${className ? ' ' + className : ''}`} {...props}>{children}</span>;
 };
 
 Label.propTypes = {
+    className: PropTypes.string,
     type: PropTypes.oneOf(['', 'success', 'warning', 'error'])
 };
 
-export const Status = props => {
-    const { type, glyph, children } = props;
+export const Status = ({ type, glyph, children, className, ...props } ) => {
     return (
         <span
-            className={`fd-status-label${type ? ' fd-status-label--' + type : ''}${glyph ? ' sap-icon--' + glyph : ''}`}>
+            className={`fd-status-label${type ? ' fd-status-label--' + type : ''}${glyph ? ' sap-icon--' + glyph : ''}${className ? ' ' + className : ''}`} {...props}>
             {children}
         </span>
     );
 };
 Status.propTypes = {
+    className: PropTypes.string,
     glyph: PropTypes.string,
     type: PropTypes.oneOf(['', 'success', 'warning', 'error', 'available', 'away', 'busy', 'offline'])
 };
 
-export const Counter = props => {
-    const { notification, children } = props;
+export const Counter = ({ notification, children, className, ...props }) => {
     return (
-        <span className={`fd-counter${notification ? ' fd-counter--notification' : ''}`} aria-label='Unread count'>
+        <span className={`fd-counter${notification ? ' fd-counter--notification' : ''}${className ? ' ' + className : ''}`} aria-label='Unread count'
+            {...props}>
             {children}
         </span>
     );
 };
 
 Counter.propTypes = {
+    className: PropTypes.string,
     notification: PropTypes.bool
 };

src/Breadcrumb/Breadcrumb.js

@@ -7,30 +7,14 @@ export const Breadcrumb = props => {
     return <ul className='fd-breadcrumb'>{children}</ul>;
 };
 
-export const BreadcrumbItem = props => {
-    const { url, link, name } = props;
+export const BreadcrumbItem = ({ url, link, name, className, ...props }) => {
     return (
-        <React.Fragment>
-            {link ? (
-                <BrowserRouter>
-                    <li className='fd-breadcrumb__item'>
-                        <Link className='fd-breadcrumb__link' to={{ pathname: link }}>
-                            {name}
-                        </Link>
-                    </li>
-                </BrowserRouter>
-            ) : null}
-
-            {url ? (
-                <BrowserRouter>
-                    <li className='fd-breadcrumb__item'>
-                        <a className='fd-breadcrumb__link' href={url}>
-                            {name}
-                        </a>
-                    </li>
-                </BrowserRouter>
-            ) : null}
-        </React.Fragment>
+        <BrowserRouter>
+            <li className={`fd-breadcrumb__item${className ? ' ' + className : ''}`} {...props}>
+                {link && <Link className='fd-breadcrumb__link' to={{ pathname: link }}>{name}</Link>}
+                {url && <a className='fd-breadcrumb__link' href={url}>{name}</a>}
+            </li>
+        </BrowserRouter>
     );
 };
 

src/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap

@@ -4,6 +4,9 @@ exports[`<Breadcrumb /> create breadcrumbs using router links 1`] = `
 <ul
   className="fd-breadcrumb"
 >
+  <li
+    className="fd-breadcrumb__item"
+  />
   <li
     className="fd-breadcrumb__item"
   >
@@ -53,5 +56,8 @@ exports[`<Breadcrumb /> create default breadcrumbs 1`] = `
       Link Text
     </a>
   </li>
+  <li
+    className="fd-breadcrumb__item"
+  />
 </ul>
 `;

src/Button/Button.Component.js

@@ -3,11 +3,11 @@ import { Button, ButtonGroup } from '../';
 import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
 
 export const ButtonComponent = () => {
-    const buttonOptionsCode = `<Button option="emphasized" onclick={() => clickBtnHandler('Emphasized')}>
+    const buttonOptionsCode = `<Button option="emphasized" onClick={() => clickBtnHandler('Emphasized')}>
     Emphasized Button
 </Button>
-<Button onclick={() => clickBtnHandler('Regular')}>Regular Button</Button>
-<Button option="light" onclick={() => clickBtnHandler('Light')}>Light Button</Button>
+<Button onClick={() => clickBtnHandler('Regular')}>Regular Button</Button>
+<Button option="light" onClick={() => clickBtnHandler('Light')}>Light Button</Button>
 
 const clickBtnHandler = btn => {
     alert(\`You clicked the \${btn} Button\`);
@@ -155,7 +155,7 @@ const clickBtnHandler = btn => {
                         description:
                             'bool - selected state of the button. Enabled by setting selected property to true.'
                     },
-                    { name: 'onclick', description: 'func - The function that is executed when the button is clicked.' }
+                    { name: 'onClick', description: 'func - The function that is executed when the button is clicked.' }
                 ]} />
             <Separator />
 
@@ -171,11 +171,11 @@ const clickBtnHandler = btn => {
             </Description>
             <DocsTile centered>
                 <div className='fd-doc__margin--button'>
-                    <Button option='emphasized' onclick={() => clickBtnHandler('Emphasized')}>
+                    <Button option='emphasized' onClick={() => clickBtnHandler('Emphasized')}>
                         Emphasized Button
                     </Button>
-                    <Button onclick={() => clickBtnHandler('Regular')}>Regular Button</Button>
-                    <Button option='light' onclick={() => clickBtnHandler('Light')}>Light Button</Button>
+                    <Button onClick={() => clickBtnHandler('Regular')}>Regular Button</Button>
+                    <Button option='light' onClick={() => clickBtnHandler('Light')}>Light Button</Button>
                 </div>
             </DocsTile>
             <DocsText>{buttonOptionsCode}</DocsText>

src/Button/Button.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Button = props => {
-  const {
-    option,
-    type,
-    compact,
-    glyph,
-    dropdown,
-    navbar,
-    selected,
-    disabled,
-    typeAttr,
-    onclick,
-    children
-  } = props;
+export const Button = ({
+  option,
+  type,
+  compact,
+  glyph,
+  dropdown,
+  navbar,
+  selected,
+  disabled,
+  typeAttr,
+  onClick,
+  children,
+  className,
+  ...props
+}) => {
   return (
       <button
           className={`${option ? 'fd-button--' + option : ' fd-button'}${
@@ -23,11 +24,11 @@ export const Button = props => {
         compact ? ' fd-button--compact' : ''
       }${glyph ? ' sap-icon--' + glyph : ''}${
         navbar ? ' fd-global-nav__btn' : ''
-      }${selected ? ' is-selected' : ''}${disabled ? ' is-disabled' : ''}`}
+      }${selected ? ' is-selected' : ''}${disabled ? ' is-disabled' : ''}${className ? ' ' + className : ''}`} {...props}
           selected={selected ? selected : false}
           disabled={disabled ? disabled : false}
           type={typeAttr}
-          onClick={onclick}>
+          onClick={onClick}>
           {children}
       </button>
   );
@@ -39,11 +40,11 @@ Button.propTypes = {
   dropdown: PropTypes.bool,
   glyph: PropTypes.string,
   navbar: PropTypes.bool,
-  onclick: PropTypes.func,
   option: PropTypes.oneOf(['', 'emphasized', 'light', 'shell']),
   selected: PropTypes.bool,
   type: PropTypes.oneOf(['', 'standard', 'positive', 'negative', 'medium']),
-  typeAttr: PropTypes.string
+  typeAttr: PropTypes.string,
+  onClick: PropTypes.func
 };
 
 export const ButtonGroup = props => {

src/Calendar/Calendar.js

@@ -510,8 +510,9 @@ export class Calendar extends Component {
 
 
       render() {
+        const { className, ...props } = this.props;
         return (
-            <div className='fd-calendar'>
+            <div className={`fd-calendar${className ? ' ' + className : ''}`} {...props}>
                 {this.generateNavigation()}
                 <div className='fd-calendar__content'>
                     {

src/Calendar/Calendar.test.js

@@ -135,7 +135,7 @@ describe('<Calendar />', () => {
 
     // check that April was selected
     const currentDateDisplayed = wrapper.state('currentDateDisplayed');
-    expect(currentDateDisplayed.getFullYear()).toEqual(2021);
+    expect(currentDateDisplayed.getFullYear()).toEqual(2022);
   });
 
   test('click previous button', () => {