From 2d6e16f5d09635ecabe3ce80a8223c94e2ad676c Mon Sep 17 00:00:00 2001
From: Zebastian <zebbjo@chalmers.se>
Date: Sat, 28 Sep 2024 17:52:23 +0200
Subject: [PATCH 1/3] Create files for ZUIToggleButton

---
 src/zui/ZUIToggleButton/index.stories.tsx | 0
 src/zui/ZUIToggleButton/index.tsx         | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/zui/ZUIToggleButton/index.stories.tsx
 create mode 100644 src/zui/ZUIToggleButton/index.tsx

diff --git a/src/zui/ZUIToggleButton/index.stories.tsx b/src/zui/ZUIToggleButton/index.stories.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/zui/ZUIToggleButton/index.tsx b/src/zui/ZUIToggleButton/index.tsx
new file mode 100644
index 0000000000..e69de29bb2

From 06741981b051613818977c9179c587217de3d1a6 Mon Sep 17 00:00:00 2001
From: Zebastian <zebbjo@chalmers.se>
Date: Sun, 29 Sep 2024 13:05:47 +0200
Subject: [PATCH 2/3] Create ZUIToggleButton

---
 src/zui/ZUIToggleButton/index.tsx | 47 +++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/zui/ZUIToggleButton/index.tsx b/src/zui/ZUIToggleButton/index.tsx
index e69de29bb2..6976c03623 100644
--- a/src/zui/ZUIToggleButton/index.tsx
+++ b/src/zui/ZUIToggleButton/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+
+interface Buttons {
+  value: string;
+  label: string;
+}
+
+interface ZUIToggleButtonProps {
+  buttons: Buttons[];
+  onChange: (event: React.MouseEvent<HTMLElement>, newValue: string) => void;
+  value: string;
+  orientation?: 'vertical' | 'horizontal';
+  size?: 'small' | 'medium' | 'large';
+}
+
+const ZUIToggleButton: React.FC<ZUIToggleButtonProps> = ({
+  buttons,
+  onChange,
+  value,
+  orientation = 'horizontal',
+  size = 'medium',
+}) => {
+  return (
+    <ToggleButtonGroup
+      exclusive
+      onChange={onChange}
+      orientation={orientation}
+      size={size}
+      value={value}
+    >
+      {buttons.map((buttons) => (
+        <ToggleButton
+          key={buttons.value}
+          onClick={(event) => {
+            onChange(event, buttons.value);
+          }}
+          value={buttons.value}
+        >
+          {buttons.label}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+};
+
+export default ZUIToggleButton;

From d2d1c3738ffed107fa54eb560735d45405f80c27 Mon Sep 17 00:00:00 2001
From: Zebastian <zebbjo@chalmers.se>
Date: Sun, 29 Sep 2024 13:12:49 +0200
Subject: [PATCH 3/3] Add example usecase in comment

---
 src/zui/ZUIToggleButton/index.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/zui/ZUIToggleButton/index.tsx b/src/zui/ZUIToggleButton/index.tsx
index 6976c03623..c57d77d48e 100644
--- a/src/zui/ZUIToggleButton/index.tsx
+++ b/src/zui/ZUIToggleButton/index.tsx
@@ -15,6 +15,27 @@ interface ZUIToggleButtonProps {
 }
 
 const ZUIToggleButton: React.FC<ZUIToggleButtonProps> = ({
+  /****
+     *Example usecase:
+
+    *   <ZUIToggleButton
+          buttons={[
+            { label: 'Day', value: 'day' },
+            { label: 'Week', value: 'week' },
+            { label: 'Month', value: 'month' },
+          ]}
+          onChange={(event, newTimeScale) => {
+            // Check if the newTimeScale is valid before calling the function
+            if (newTimeScale) {
+              onChangeTimeScale(newTimeScale as TimeScale); // Type assertion to TimeScale
+            }
+          }}
+          orientation="horizontal"
+          size="medium"
+          value={timeScale}
+        />
+     *  
+    ***/
   buttons,
   onChange,
   value,