Merge pull request #21 from Adslot/tab-update

Replace NavTabs with Tabs and fix url encoding issue in checkboxes
Adslot · Jan 5, 2016 · 9d633e5 · 9d633e5
2 parents 21857e9 + ebb4789
commit 9d633e5
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adslot-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Core component library. By Adslot",
   "main": "dist/adslot-ui-main.js",
   "license": "MIT",

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -2,8 +2,8 @@ import {
   Button,
   Checkbox,
   Modal,
-  Nav,
-  NavItem,
+  Tabs,
+  Tab,
   Radio,
   RadioGroup,
   Toggle,
@@ -68,14 +68,13 @@ class AppComponent extends React.Component {
 
         <h1>Tabs</h1>
         <div className="btn-panel">
-          <Nav bsStyle="tabs">
-            <NavItem active>Targeting</NavItem>
-            <NavItem>Audience</NavItem>
-            <NavItem>Billing</NavItem>
-          </Nav>
+          <Tabs defaultActiveKey="Audience" animation={false}>
+            <Tab eventKey="Targeting" title="Targeting" active>Targeting content</Tab>
+            <Tab eventKey="Audience" title="Audience">Audience content</Tab>
+            <Tab eventKey="Billing" title="Billing" disabled>Billing content</Tab>
+          </Tabs>
         </div>
 
-
         <h1>Modal</h1>
         <div className="btn-panel">
           <Button onClick={this.toggleSimpleModal.bind(this)}>

diff --git a/src/components/distributionEntry.js b/src/components/distributionEntry.js
@@ -7,10 +7,10 @@ require('styles/_react-toggle-custom.scss');
 import Button from 'react-bootstrap/lib/Button';
 import Checkbox from 'react-icheck/lib/Checkbox';
 import Modal from 'react-bootstrap/lib/Modal';
-import Nav from 'react-bootstrap/lib/Nav';
-import NavItem from 'react-bootstrap/lib/NavItem';
 import Radio from 'react-icheck/lib/Radio';
 import RadioGroup from 'react-icheck/lib/RadioGroup';
+import Tab from 'react-bootstrap/lib/Tab';
+import Tabs from 'react-bootstrap/lib/Tabs';
 import Toggle from 'react-toggle';
 
 import {
@@ -34,11 +34,11 @@ module.exports = {
   GridCell,
   GridRow,
   Modal,
-  Nav,
-  NavItem,
   Radio,
   RadioGroup,
   Search,
   Slicey,
+  Tab,
+  Tabs,
   Toggle,
 };
diff --git a/src/styles/_bootstrap-custom.scss b/src/styles/_bootstrap-custom.scss
@@ -58,6 +58,7 @@
 @import './bootstrapOverrides/Nav';
 
 b,
-strong {
+strong,
+label {
   font-weight: $font-weight-bold;
 }
diff --git a/src/styles/_icheck-custom.scss b/src/styles/_icheck-custom.scss
@@ -15,50 +15,50 @@
 }
 
 .icheckbox {
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect y="0" fill="none" width="16" height="16"/><path fill="#FFFFFF" d="M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z"/><path fill="#D3D3D3" d="M12 2c1.1 0 2 0.9 2 2v8c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H12M12 1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4C15 2.3 13.7 1 12 1L12 1z"/></svg>');
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect y="0" fill="none" width="16" height="16"/><path fill="%23FFFFFF" d="M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z"/><path fill="%23D3D3D3" d="M12 2c1.1 0 2 0.9 2 2v8c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H12M12 1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4C15 2.3 13.7 1 12 1L12 1z"/></svg>');
 
   &.hover {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="#4AAFCD" d="M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z"/></svg>');
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="%234AAFCD" d="M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z"/></svg>');
   }
 
   &.checked {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="#4AAFCD" d="M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z"/><path fill="#FFF" d="M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z"/></svg>');
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="%234AAFCD" d="M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z"/><path fill="%23FFF" d="M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z"/></svg>');
   }
 
   &.disabled {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="#FFF" d="M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z"/><path fill="#F1F2F2" d="M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z"/></svg>');
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="%23FFF" d="M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z"/><path fill="%23F1F2F2" d="M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z"/></svg>');
 
     &,
     &.checked {
       cursor: default;
     }
 
     &.checked {
-      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#F1F2F2" d="M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z"/><path fill="#E6E7E8" d="M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z"/></svg>');
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23F1F2F2" d="M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z"/><path fill="%23E6E7E8" d="M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z"/></svg>');
     }
   }
 }
 
 .iradio {
   &,
   &.hover {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="#D3D3D3" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/></svg>');
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="%23D3D3D3" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/></svg>');
   }
 
   &.checked {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="#4AAFCD" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/><path fill="#4AAFCD" d="M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z"/></svg>');
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="%234AAFCD" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/><path fill="%234AAFCD" d="M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z"/></svg>');
   }
 
   &.disabled {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16"/><circle fill="#D3D3D3" cx="8" cy="8" r="6.6"/></svg>');
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16"/><circle fill="%23D3D3D3" cx="8" cy="8" r="6.6"/></svg>');
 
     &,
     &.checked {
       cursor: default;
     }
 
     &.checked {
-      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="#D3D3D3" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/><path fill="#D3D3D3" d="M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z"/></svg>');
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="%23D3D3D3" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/><path fill="%23D3D3D3" d="M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z"/></svg>');
     }
   }
 }