migrate boolean widget

packages/netlify-cms-ui-default/src/Toggle.js

@@ -1,67 +1,67 @@
 import React from 'react'
-import styled, { css, cx } from 'react-emotion';
+import styled, { css } from 'react-emotion';
 import ReactToggled from 'react-toggled';
 import { colors, colorsRaw, shadows, transitions } from './styles';
 
-const styles = {
-  switch: css`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 40px;
-    height: 20px;
-    cursor: pointer;
-  `,
-  switchHandle: css`
-    ${shadows.dropDeep};
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: ${colorsRaw.white};
-    transition: transform ${transitions.main};
-  `,
-  switchHandleActive: css`
+const ToggleContainer = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 40px;
+  height: 20px;
+  cursor: pointer;
+`
+
+const ToggleHandle = styled.span`
+  ${shadows.dropDeep};
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: ${colorsRaw.white};
+  transition: transform ${transitions.main};
+
+  ${props => props.isActive && css`
     transform: translateX(20px);
-  `,
-  switchBackground: css`
-    width: 34px;
-    height: 14px;
-    border-radius: 10px;
-    background-color: ${colors.active};
-  `,
-};
+  `}
+`
+
+const ToggleBackground = styled.span`
+  width: 34px;
+  height: 14px;
+  border-radius: 10px;
+  background-color: ${colors.active};
+`
 
 const Toggle = ({
   active,
   onChange,
-  className,
-  classNameBackground,
-  classNameSwitch,
+  renderBackground,
   onFocus,
-  onBlur
-}) =>
+  onBlur,
+  Container = ToggleContainer,
+  Background = ToggleBackground,
+  Handle = ToggleHandle,
+}) => (
   <ReactToggled on={active} onToggle={onChange}>
     {({on, getElementTogglerProps}) => (
-      <span
-        className={cx(styles.switch, className)}
+      <Container
         role="switch"
         aria-checked={on.toString()}
         onFocus={onFocus}
         onBlur={onBlur}
         {...getElementTogglerProps()}
       >
-        <span className={cx(styles.switchBackground, classNameBackground)}/>
-        <span className={cx(
-          styles.switchHandle,
-          classNameSwitch,
-          { [styles.switchHandleActive]: on },
-        )}/>
-      </span>
+        <Background isActive={on}/>
+        <Handle isActive={on}/>
+      </Container>
     )}
-  </ReactToggled>;
+  </ReactToggled>
+);
 
-export default styled(Toggle)``
+const StyledToggle = styled(Toggle)``;
+
+export { StyledToggle as default, ToggleContainer, ToggleBackground, ToggleHandle };

packages/netlify-cms-ui-default/src/index.js

@@ -2,7 +2,7 @@ export Dropdown, { DropdownItem, DropdownButton, StyledDropdownButton } from './
 export Icon from './Icon';
 export ListItemTopBar from './ListItemTopBar';
 export Loader from './Loader';
-export Toggle from './Toggle';
+export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
 export AuthenticationPage from './AuthenticationPage';
 export WidgetPreviewContainer from './WidgetPreviewContainer';
 export {