Merge 0e23995 into 87df4c8

SAP · Jan 16, 2019 · d5d8ddb · d5d8ddb
2 parents 87df4c8 + 0e23995
commit d5d8ddb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js
@@ -116,6 +116,18 @@ const clickBackBtn = () => {
                     {
                         name: 'onClick',
                         description: 'func - The function that is executed when the back button is clicked.'
+                    },
+                    {
+                        name: 'buttonProps',
+                        description: 'object - additional props to be spread to the ActionBarBack\'s button.'
+                    },
+                    {
+                        name: 'descriptionProps',
+                        description: 'object - additional props to be spread to the ActionBarHeader\'s description.'
+                    },
+                    {
+                        name: 'titleProps',
+                        description: 'object - additional props to be spread to the ActionBarHeader\'s title.'
                     }
                 ]}
                 type='Inputs' />

diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
@@ -22,33 +22,43 @@ ActionBar.propTypes = {
     width: PropTypes.string
 };
 
-export const ActionBarBack = ({ onClick, className, ...props }) => {
+export const ActionBarBack = ({ onClick, className, buttonProps, ...props }) => {
 
     return (
         <div className={`fd-action-bar__back${className ? ' ' + className : ''}`} {...props}>
-            <button className='fd-button--light fd-button--compact sap-icon--nav-back' onClick={onClick} />
+            <button
+                {...buttonProps}
+                className='fd-button--light fd-button--compact sap-icon--nav-back'
+                onClick={onClick} />
         </div>
     );
 };
 
 ActionBarBack.propTypes = {
+    buttonProps: PropTypes.object,
     className: PropTypes.string,
     onClick: PropTypes.func
 };
 
-export const ActionBarHeader = ({ title, description, className, ...props }) => {
+export const ActionBarHeader = ({ className, description, descriptionProps, title, titleProps, ...props }) => {
     return (
         <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>
+            <h1
+                {...titleProps}
+                className='fd-action-bar__title'>{title}</h1>
+            <p
+                {...descriptionProps}
+                className='fd-action-bar__description'>{description} </p>
         </div>
     );
 };
 
 ActionBarHeader.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
-    title: PropTypes.string
+    descriptionProps: PropTypes.object,
+    title: PropTypes.string,
+    titleProps: PropTypes.object
 };
 
 export const ActionBarActions = ({ children, className, ...props }) => {

diff --git a/src/ActionBar/ActionBar.test.js b/src/ActionBar/ActionBar.test.js
@@ -104,8 +104,13 @@ describe('<ActionBar />', () => {
             ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the ActionBarBack component\'s button element', () => {
-            // TODO: placeholder for this test description once that functionality is built
+        test('should allow props to be spread to the ActionBarBack component\'s button element', () => {
+
+            const element = mount(<ActionBarBack buttonProps={{'data-sample': 'Sample'}} />);
+
+            expect(
+                element.find('button').getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ActionBarHeader component', () => {
@@ -116,12 +121,20 @@ describe('<ActionBar />', () => {
             ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
-            // TODO: placeholder for this test description once that functionality is built
+        test('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
+            const element = mount(<ActionBarHeader titleProps={{'data-sample': 'Sample'}} />);
+
+            expect(
+                element.find('h1').getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the ActionBarHeader component\'s p element', () => {
-            // TODO: placeholder for this test description once that functionality is built
+        test('should allow props to be spread to the ActionBarHeader component\'s p element', () => {
+            const element = mount(<ActionBarHeader descriptionProps={{'data-sample': 'Sample'}} />);
+
+            expect(
+                element.find('p').getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ActionBarActions component', () => {