Add toggleProps options

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.7.10",
+  "version": "4.7.11",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/toggle/styled.js

@@ -17,39 +17,39 @@
   display: none;
 `
 
 export const StyledToggle = styled.div`
   box-sizing: border-box;
   width: 40px;
   height: 20px;
   background: ${props =>
     props.disabled ? getColor("mainBackgroundDisabled") : getColor("mainBackground")};
   border: 1px solid ${getColor("border")};
   border-radius: 100px;
   transition: ${({ withTransition }) => (withTransition ? "all 150ms" : "unset")};
 
   display: block;
   position: relative;
 
   -webkit-tap-highlight-color: transparent;
   flex-shrink: 0;
   align-self: flex-start;
   cursor: pointer;
   pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
   &:after {
     display: block;
     position: absolute;
     content: "";
     width: 16px;
     height: 16px;
     border-radius: 50%;
     left: 5%;
     top: 50%;
     transform: translateY(-50%);
     transition: ${({ withTransition }) => (withTransition ? "left 0.2s ease" : "unset")};
     opacity: ${({ disabled }) => (disabled ? "0.4" : "1")};
-    background-color: ${({ colored, checked }) => {
-      if (!colored) return getColor("controlFocused")
-      return checked ? getColor("primary") : getColor("error")
+    background-color: ${({ colored, checked, checkedColor, uncheckedColor, defaultColor }) => {
+      if (!colored) return getColor(defaultColor || "controlFocused")
+      return checked ? getColor(checkedColor || "primary") : getColor(uncheckedColor || "error")
     }};
   }
 

src/components/toggle/toggle.stories.js

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react"
+import { Toggle } from "./toggle"
+import { useCallback } from "react"
+
+export const Basic = args => {
+  const [checked, setChecked] = useState(false)
+
+  const onChange = useCallback(() => setChecked(prev => !prev), [setChecked])
+
+  useEffect(() => {
+    setChecked(args.checked)
+  }, [args.checked])
+
+  return <Toggle {...args} checked={checked} onChange={onChange} />
+}
+
+export default {
+  component: Toggle,
+  args: {
+    checked: false,
+    disabled: false,
+    colored: true,
+    labelLeft: "Left",
+    labelRight: "Right",
+  },
+  argTypes: {
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+    colored: { control: "boolean" },
+    labelLeft: { control: "text" },
+    labelRight: { control: "text" },
+    toggleProps: { control: "object" },
+  },
+}