diff --git a/my-workspace/projects/sae-lib/breadcrumbs/index/index.ts b/my-workspace/projects/sae-lib/breadcrumbs/index/index.ts index 209e02e..2ec7075 100644 --- a/my-workspace/projects/sae-lib/breadcrumbs/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/radius/index/index.ts b/my-workspace/projects/sae-lib/radius/index/index.ts index 209e02e..015b3e7 100644 --- a/my-workspace/projects/sae-lib/radius/index/index.ts +++ b/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' diff --git a/old-sae-airwatch/.storybook/main.ts b/old-sae-airwatch/.storybook/main.ts index bbf01f3..a335ccb 100644 --- a/old-sae-airwatch/.storybook/main.ts +++ b/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: {} diff --git a/old-sae-airwatch/.npmrc b/old-sae-airwatch/.storybook/preview-head.html similarity index 100% rename from old-sae-airwatch/.npmrc rename to old-sae-airwatch/.storybook/preview-head.html diff --git a/old-sae-airwatch/README.md b/old-sae-airwatch/README.md index 5a8b686..0b9438b 100644 --- a/old-sae-airwatch/README.md +++ b/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**: diff --git a/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts b/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts index 03bd53c..e69de29 100644 --- a/old-sae-airwatch/src/app/buttons/main-button/main-button.stories.ts +++ b/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 = { - 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; - -// 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: '' - }, -}; diff --git a/old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.scss b/old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.scss index b871fa3..13396a4 100644 --- a/old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.scss +++ b/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; diff --git a/old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts b/old-sae-airwatch/src/app/chatbot/toggle-button/toggle-button.stories.ts new file mode 100644 index 0000000..3123155 --- /dev/null +++ b/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 = { + title: 'Components/ToggleButton', + component: ToggleButton, + tags: ['autodocs'], + argTypes: { + label: {control: 'text'}, + icon: {control: 'text'}, + }, +}; + +export default meta; +type Story = StoryObj; + +// 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, + }, +}; diff --git a/old-sae-airwatch/src/app/logo/logo.ts b/old-sae-airwatch/src/app/logo/logo.ts index d3d570f..516d8b8 100644 --- a/old-sae-airwatch/src/app/logo/logo.ts +++ b/old-sae-airwatch/src/app/logo/logo.ts @@ -5,7 +5,7 @@ import { Component } from '@angular/core'; imports: [], template: ` `, styles: ``