wrapping toggle in base and removing margin on hidden label

ui/src/components/toggle/index.js

@@ -83,6 +83,13 @@ const StyledInput1 = styled.input`
   }
 `;
 
+/*
+TODO: Remove !important - it is used to overirde a global style
+ */
+const StyledLabel = styled.label`
+  margin-bottom: 0 !important;
+`;
+
 const Toggle = ({
   checked,
   className,
@@ -120,13 +127,13 @@ const Toggle = ({
         };
 
         return (
-          <label
+          <StyledLabel
             htmlFor={customProps.id}
             key={index}
           >
             {InputVarients[`input_${index}`]}
             <StyledText>{option.label}</StyledText>
-          </label>
+          </StyledLabel>
         );
       })}
     </StyledDiv>

ui/src/components/toggle/story.js

@@ -4,13 +4,17 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const Base = require('../base');
 const Toggle = require('./');
 
 storiesOf('Toggle', module)
   .add('default', () => (
+    <Base>
       <Toggle checked />
+    </Base>
   ))
   .add('checked', () => (
+    <Base>
       <Toggle
         defaultChecked
         options={[
@@ -24,7 +28,10 @@ storiesOf('Toggle', module)
           }
         ]}
       />
+    </Base>
   ))
   .add('no props', () => (
+    <Base>
       <Toggle />
+    </Base>
   ));