From d194da542c7e0e8250f1e45ad0260110a7dd213a Mon Sep 17 00:00:00 2001
From: CJ Skillingstad <cj.skillingstad@sap.com>
Date: Wed, 16 Jan 2019 12:24:14 -0800
Subject: [PATCH] Spread props to elements

---
 src/Toggle/Toggle.Component.js |  5 ++++-
 src/Toggle/Toggle.js           | 10 ++++++++--
 src/Toggle/Toggle.test.js      | 16 ++++++++++++----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/Toggle/Toggle.Component.js b/src/Toggle/Toggle.Component.js
index 331c0ba7e..01081acb3 100644
--- a/src/Toggle/Toggle.Component.js
+++ b/src/Toggle/Toggle.Component.js
@@ -44,7 +44,10 @@ export const ToggleComponent = () => {
             <Properties
                 properties={[
                     { name: 'size', description: 'string - The size of the toggle.' },
-                    { name: 'id', description: 'string - The id of the toggle.' }
+                    { name: 'id', description: 'string - The id of the toggle.' },
+                    { name: 'disabled', description: 'bool - Shows a disabled toggle if set to true. Default is false.'},
+                    { name: 'inputProps', description: 'object - additional props to be spread to the Toggle component\'s input element.'},
+                    { name: 'labelProps', description: 'object - additional props to be spread to the Toggle component\'s label element.'}
                 ]}
                 type='Inputs' />
 
diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js
index 8f59772bb..75c30f6d3 100644
--- a/src/Toggle/Toggle.js
+++ b/src/Toggle/Toggle.js
@@ -12,7 +12,7 @@ export class Toggle extends React.Component {
   };
 
   render() {
-      const { size, id, disabled, children, className, ...rest } = this.props;
+      const { size, id, disabled, children, className, labelProps, inputProps, ...rest } = this.props;
 
       return (
           <div
@@ -20,12 +20,16 @@ export class Toggle extends React.Component {
                   className ? ' ' + className : ''
               }`}
               {...rest}>
-              <label className='fd-form__label' htmlFor={id}>
+              <label
+                  {...labelProps}
+                  className='fd-form__label'
+                  htmlFor={id}>
                   <span
                       className={`fd-toggle${
                           size ? ' fd-toggle--' + size : ''
                       } fd-form__control`}>
                       <input
+                          {...inputProps}
                           checked={this.state.checked}
                           disabled={disabled}
                           id={id}
@@ -44,5 +48,7 @@ Toggle.propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
     id: PropTypes.string,
+    inputProps: PropTypes.object,
+    labelProps: PropTypes.object,
     size: PropTypes.oneOf(['', 'xs', 's', 'l'])
 };
diff --git a/src/Toggle/Toggle.test.js b/src/Toggle/Toggle.test.js
index 2ebdb1ec1..37bd12f6a 100644
--- a/src/Toggle/Toggle.test.js
+++ b/src/Toggle/Toggle.test.js
@@ -62,12 +62,20 @@ describe('<Toggle />', () => {
             ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the Toggle component\'s label element', () => {
-            // TODO: placeholder for this test description once that functionality is built
+        test('should allow props to be spread to the Toggle component\'s label element', () => {
+            const element = mount(<Toggle labelProps={{'data-sample': 'Sample'}} />);
+
+            expect(
+                element.find('label').getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the Toggle component\'s input element', () => {
-            // TODO: placeholder for this test description once that functionality is built
+        test('should allow props to be spread to the Toggle component\'s input element', () => {
+            const element = mount(<Toggle inputProps={{'data-sample': 'Sample'}} />);
+
+            expect(
+                element.find('input').getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
         });
     });
 });