storybook for toggle button

my-workspace/projects/sae-lib/breadcrumbs/index/index.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'sae-index',
+  selector: 'lib-breadcrumbs-sae-index',
   imports: [],
   templateUrl: './index.html',
   styleUrl: './index.css'

my-workspace/projects/sae-lib/radius/index/index.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'sae-index',
+  selector: 'lib-sae-index',
   imports: [],
   templateUrl: './index.html',
   styleUrl: './index.css'

old-sae-airwatch/.storybook/main.ts

@@ -12,6 +12,7 @@ const config: StorybookConfig = {
     // '@storybook/addon-controls' - no longer exists in Storybook 9.0+
     // ... autres addons
   ],
+  staticDirs: ['../../my-workspace/projects/sae-lib/public'],
   framework: {
     name: '@storybook/angular',
     options: {}

old-sae-airwatch/README.md

@@ -16,6 +16,43 @@
    - Removed `@storybook/addon-controls` from `.storybook/main.ts` and `package.json`
    - Kept the backgrounds and controls configuration in `.storybook/preview.ts` as these are now part of the core Storybook functionality
 
+3. Fixed Remixicon icons not appearing in Storybook for app-source-block:
+   - Added global style imports to `.storybook/preview.ts`:
+     ```typescript
+     // Import global styles
+     import '../src/app/styles/styles.scss';
+     // Import Remixicon directly to ensure it's available in Storybook
+     import 'remixicon/fonts/remixicon.css';
+     ```
+   - This ensures that both the application's global styles (which include sae-lib styles with Remixicon) and Remixicon itself are properly loaded in Storybook
+
+4. Fixed CSS processing issues with `@font-face` declarations:
+   - Added explicit CSS loader configuration in `.storybook/main.ts`:
+     ```typescript
+     config.module.rules.push({
+       test: /\.css$/,
+       use: [
+         'style-loader',
+         {
+           loader: 'css-loader',
+           options: {
+             url: true,
+             import: true
+           }
+         }
+       ]
+     });
+     ```
+   - Enhanced font file handling to support files with query parameters:
+     ```typescript
+     config.module.rules.push({
+       test: /\.(woff|woff2|eot|ttf|otf)(\?.*)?$/,
+       type: 'asset/resource',
+       generator: {filename: 'fonts/[name].[contenthash][ext]'},
+     });
+     ```
+   - This ensures that font files referenced in `@font-face` declarations with query parameters (like `?t=1734404658139`) are properly loaded
+
 ## Remaining Issues
 
 1. **Node.js Version Compatibility**:

old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts

@@ -1,94 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/angular';
-import {MainButton} from './main-button';
-import {moduleMetadata} from '@storybook/angular';
-import {CommonModule} from '@angular/common';
-
-// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
-const meta: Meta<MainButton> = {
-  title: 'Components/MainButton',
-  component: MainButton,
-  tags: ['autodocs'],
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule],
-      providers: []
-    })
-  ],
-  argTypes: {
-    label: {control: 'text'},
-    icon: {control: 'text'},
-    kind: {
-      control: 'select',
-      options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
-      description: 'Style du bouton'
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MainButton>;
-
-// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
-export const Primary: Story = {
-  args: {
-    label: 'Button',
-    icon: 'home-line-2',
-    kind: 'primary'
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Secondary Button',
-    icon: 'settings-line',
-    kind: 'secondary'
-  },
-};
-
-export const Info: Story = {
-  args: {
-    label: 'Info Button',
-    icon: 'information-line',
-    kind: 'info'
-  },
-};
-
-export const Success: Story = {
-  args: {
-    label: 'Success Button',
-    icon: 'check-line',
-    kind: 'success'
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    label: 'Warning Button',
-    icon: 'alert-line',
-    kind: 'warning'
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    label: 'Danger Button',
-    icon: 'close-circle-line',
-    kind: 'danger'
-  },
-};
-
-export const WithoutIcon: Story = {
-  args: {
-    label: 'Button without icon',
-    icon: '',
-    kind: 'primary'
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    label: 'Button with icon',
-    icon: 'user-line',
-    kind: ''
-  },
-};

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,
+  },
+};

old-sae-airwatch/src/app/logo/logo.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   imports: [],
   template: `
     <span class="logo">
-    😎 logo  
+    <img alt="logo" src="safran_logo.svg">
     </span>
     `,
   styles: ``