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,27 +4,34 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const Base = require('../base');
 const Toggle = require('./');
 
 storiesOf('Toggle', module)
   .add('default', () => (
-    <Toggle checked />
+    <Base>
+      <Toggle checked />
+    </Base>
   ))
   .add('checked', () => (
-    <Toggle
-      defaultChecked
-      options={[
-        {
-          label: 'Topology',
-          checked: true
-        },
-        {
-          label: 'List',
-          checked: false
-        }
-      ]}
-    />
+    <Base>
+      <Toggle
+        defaultChecked
+        options={[
+          {
+            label: 'Topology',
+            checked: true
+          },
+          {
+            label: 'List',
+            checked: false
+          }
+        ]}
+      />
+    </Base>
   ))
   .add('no props', () => (
-    <Toggle />
+    <Base>
+      <Toggle />
+    </Base>
   ));