Spread props to elements (#227)

SAP · Jan 17, 2019 · 8c27d27 · 8c27d27
1 parent 9023e6b
commit 8c27d27
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -12,20 +12,24 @@ 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
               className={`fd-form__item fd-form__item--check${
                   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
@@ -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');
         });
     });
 });