From a42f2e89f08f4657dd5e9ae06ce7708fa849fe00 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 20 Nov 2024 22:46:40 +0200
Subject: [PATCH] Add toggleProps options (#542)

* Add toggleProps options

* v4.7.11
---
 package.json                            |  2 +-
 src/components/toggle/styled.js         |  6 ++---
 src/components/toggle/toggle.stories.js | 34 +++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/components/toggle/toggle.stories.js

diff --git a/package.json b/package.json
index 9e7237a0..3297e50f 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/toggle/styled.js b/src/components/toggle/styled.js
index 316f7f57..7db97b82 100644
--- a/src/components/toggle/styled.js
+++ b/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")
     }};
   }
 
diff --git a/src/components/toggle/toggle.stories.js b/src/components/toggle/toggle.stories.js
new file mode 100644
index 00000000..bd330491
--- /dev/null
+++ b/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" },
+  },
+}