add standalone toggle component

package.json

@@ -159,6 +159,7 @@
     "react-router-redux": "^5.0.0-alpha.8",
     "react-sortable-hoc": "^0.6.8",
     "react-split-pane": "^0.1.66",
+    "react-toggled": "^1.1.2",
     "react-toolbox": "^2.0.0-beta.12",
     "react-topbar-progress-indicator": "^2.0.0",
     "react-transition-group": "^2.2.1",

src/components/UI/Toggle/Toggle.css

@@ -0,0 +1,31 @@
+.nc-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 40px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.nc-toggle-background {
+  width: 34px;
+  height: 14px;
+  border-radius: 10px;
+  background-color: #3a69c7;
+}
+
+.nc-toggle-switch {
+  position: absolute;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: white;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.15), 0 1px 3px 0 rgba(68,74,87,0.30);
+}
+
+.nc-toggle-active .nc-toggle-switch {
+  transform: translateX(20px);
+}

src/components/UI/Toggle/Toggle.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Toggle from 'react-toggled';
+import c from 'classnames';
+
+const Switch = () => (
+  <Toggle>
+    {({on, getElementTogglerProps}) => (
+      <span
+        className={c('nc-toggle', { 'nc-toggle-active': on })}
+        role="switch"
+        aria-checked={on.toString()}
+        {...getElementTogglerProps()}
+      >
+        <span className="nc-toggle-background"/>
+        <span className="nc-toggle-switch"/>
+      </span>
+    )}
+  </Toggle>
+);
+
+export default Switch;

src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css

@@ -1,9 +1,11 @@
 .nc-toolbar-Toolbar {
   z-index: 0;
   background-color: var(--textFieldBorderColor);
-  padding: 10px;
   border-top-right-radius: var(--borderRadius);
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   &:after {
     content: '';
@@ -22,8 +24,4 @@
 }
 
 .nc-toolbar-Toggle {
-  float: right;
-  margin-bottom: 0;
-  padding-top: 4px;
-  padding-right: 10px;
 }

src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js

@@ -2,11 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Switch from 'react-toolbox/lib/switch';
+import Switch from '../../../../UI/Toggle/Toggle';
 import ToolbarButton from './ToolbarButton';
 import ToolbarComponentsMenu from './ToolbarComponentsMenu';
 import ToolbarPluginForm from './ToolbarPluginForm';
-import { Icon } from '../../../../UI';
 
 export default class Toolbar extends React.Component {
   static propTypes = {
@@ -57,45 +56,47 @@ export default class Toolbar extends React.Component {
     const { activePlugin } = this.state;
 
     const buttonsConfig = [
-      { label: 'Bold', icon: 'bold', state: buttons.bold },
-      { label: 'Italic', icon: 'italic', state: buttons.italic },
-      { label: 'Code', icon: 'code-alt', state: buttons.code },
-      { label: 'Header 1', icon: 'h1', state: buttons.h1 },
-      { label: 'Header 2', icon: 'h2', state: buttons.h2 },
-      { label: 'Code Block', icon: 'code', state: buttons.codeBlock },
-      { label: 'Quote', icon: 'quote', state: buttons.quote },
-      { label: 'Bullet List', icon: 'list-bullet', state: buttons.list },
-      { label: 'Numbered List', icon: 'list-numbered', state: buttons.listNumbered },
-      { label: 'Link', icon: 'link', state: buttons.link },
+      { label: 'Bold', icon: 'list', state: buttons.bold },
+      { label: 'Italic', icon: 'list', state: buttons.italic },
+      { label: 'Code', icon: 'list', state: buttons.code },
+      { label: 'Header 1', icon: 'list', state: buttons.h1 },
+      { label: 'Header 2', icon: 'list', state: buttons.h2 },
+      { label: 'Code Block', icon: 'list', state: buttons.codeBlock },
+      { label: 'Quote', icon: 'list', state: buttons.quote },
+      { label: 'Bullet List', icon: 'list', state: buttons.list },
+      { label: 'Numbered List', icon: 'list', state: buttons.listNumbered },
+      { label: 'Link', icon: 'list', state: buttons.link },
     ];
 
     return (
       <div className="nc-toolbar-Toolbar nc-theme-clearfix">
-        { buttonsConfig.map((btn, i) => (
-          <ToolbarButton
-            key={i}
-            action={btn.state && btn.state.onAction || (() => {})}
-            active={btn.state && btn.state.active}
+        <div>
+          { buttonsConfig.map((btn, i) => (
+            <ToolbarButton
+              key={i}
+              action={btn.state && btn.state.onAction || (() => {})}
+              active={btn.state && btn.state.active}
+              disabled={disabled}
+              {...btn}
+            />
+          ))}
+          <ToolbarComponentsMenu
+            plugins={plugins}
+            onComponentMenuItemClick={this.handlePluginFormDisplay}
             disabled={disabled}
-            {...btn}
           />
-        ))}
-        <ToolbarComponentsMenu
-          plugins={plugins}
-          onComponentMenuItemClick={this.handlePluginFormDisplay}
-          disabled={disabled}
-        />
-        {activePlugin &&
-          <ToolbarPluginForm
-            plugin={activePlugin}
-            onSubmit={this.handlePluginFormSubmit}
-            onCancel={this.handlePluginFormCancel}
-            onAddAsset={onAddAsset}
-            onRemoveAsset={onRemoveAsset}
-            getAsset={getAsset}
-          />
-        }
-        <Switch label="Markdown" onChange={onToggleMode} checked={rawMode} className="nc-toolbar-Toggle"/>
+          {activePlugin &&
+            <ToolbarPluginForm
+              plugin={activePlugin}
+              onSubmit={this.handlePluginFormSubmit}
+              onCancel={this.handlePluginFormCancel}
+              onAddAsset={onAddAsset}
+              onRemoveAsset={onRemoveAsset}
+              getAsset={getAsset}
+            />
+          }
+        </div>
+        <Switch/>
       </div>
     );
   }

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css

@@ -1,6 +1,6 @@
 .nc-toolbarButton-button {
   display: inline-block;
-  padding: 6px;
+  padding: 8px;
   border: none;
   background-color: transparent;
   color: var(--controlLabelColor);
@@ -11,6 +11,10 @@
     cursor: auto;
     opacity: 0.5;
   }
+
+  & .nc-icon {
+    display: block;
+  }
 }
 
 .nc-toolbarButton-active {

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { Icon } from '../../../../UI';
+import Icon from '../../../../../icons/Icon';
 
 const ToolbarButton = ({ label, icon, action, active, disabled }) => (
   <button
@@ -10,7 +10,7 @@ const ToolbarButton = ({ label, icon, action, active, disabled }) => (
     title={label}
     disabled={disabled}
   >
-    { icon ? <Icon type={icon} /> : label }
+    { icon ? <Icon type={icon} size="small"/> : label }
   </button>
 );
 

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js

@@ -31,7 +31,7 @@ export default class ToolbarComponentsMenu extends React.Component {
       <div className="nc-toolbarComponentsMenu-root">
         <ToolbarButton
           label="Add Component"
-          icon="plus"
+          icon="add"
           action={this.handleComponentsMenuToggle}
           disabled={disabled}
         />

src/index.css

@@ -18,6 +18,7 @@
 @import "./components/UI/loader/Loader.css";
 @import "./components/UI/toast/Toast.css";
 @import "./components/UI/Dialog/Dialog.css";
+@import "./components/UI/Toggle/Toggle.css";
 @import "./components/UnpublishedListing/UnpublishedListing.css";
 @import "./components/UnpublishedListing/UnpublishedListingCardMeta.css";
 @import "./components/Widgets/BooleanControl.css";