storybook for toggle button

old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.scss

@@ -6,12 +6,17 @@
   line-height: 8px;
   font-weight: 600;
 
+  color: #005AA2;
+  text-align: center;
+  font-style: normal;
+
+  display: inline-flex;
+  padding: 10px 10px 12px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
   border-radius: 20px;
-  padding: 10px;
-  border-width: 2px;
   background: transparent;
-  margin-right: 10px;
-  margin-bottom: 10px;
 
   // Custom tooltip styling
   &[title] {
@@ -42,9 +47,14 @@
     border: solid 1px #005aa2;
     color: #005aa2;
 
+
     &.is-active {
       background: #083b7d;
       color: white;
+      &:hover {
+        color: #7FB8E7;
+        border: solid 1px #7FB8E7;
+      }
     }
   }
 
@@ -52,6 +62,10 @@
     border: solid 1px #50d494;
     color: #50d494;
 
+    &:hover {
+      color: #159256;
+      border: solid 1px #159256;
+    }
     &.is-active {
       background: #159256;
       color: white;

old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts

@@ -0,0 +1,46 @@
+import type {Meta, StoryObj} from '@storybook/angular';
+import {ToggleButton} from './toggle-button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ToggleButton> = {
+  title: 'Components/ToggleButton',
+  component: ToggleButton,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {control: 'text'},
+    icon: {control: 'text'},
+  },
+};
+
+export default meta;
+type Story = StoryObj<ToggleButton>;
+
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const LocalButton: Story = {
+  args: {
+    label: 'Button local',
+    kind: 'local',
+  },
+};
+export const LocalButtonActive: Story = {
+  args: {
+    label: 'Button local',
+    kind: 'local',
+    active: true,
+  },
+};
+
+export const OutsideButton: Story = {
+  args: {
+    label: 'Button outside',
+    kind: 'outside',
+    active: false,
+  },
+};
+export const OutsideButtonActive: Story = {
+  args: {
+    label: 'Button outside',
+    kind: 'outside',
+    active: true,
+  },
+};