Add toggleProps options (#542)

* Add toggleProps options

* v4.7.11

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

@@ -47,9 +47,9 @@ export const StyledToggle = styled.div`
     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" },
+  },
+}