add props to main button

airwatch/src/app/molecules/stories/alert-box.stories.ts

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/angular';
 import {moduleMetadata} from '@storybook/angular';
-import {AlertBox} from './alert-box';
+import {AlertBox} from 'sae-lib/alert-box/alert-box';
 import {CommonModule} from '@angular/common';
 
 const meta: Meta<AlertBox> = {

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

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

my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss

@@ -13,7 +13,7 @@
   //position: fixed;
   //right: 0;
   //top: 240px;
-  //z-index: 100;
+  //z-main-button: 100;
 
   &:hover {
     background: #d9e8f6;

my-workspace/projects/sae-lib/buttons/index/index.html

@@ -1 +0,0 @@
-<p>index works!</p>

my-workspace/projects/sae-lib/buttons/index/index.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sae-index',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}

my-workspace/projects/sae-lib/buttons/main-button/main-button.html

@@ -0,0 +1,20 @@
+<button
+  [ngClass]="{
+  'is-disabled': disabled
+  }"
+  class="sae-main-button is-{{kind}} is-size-{{size}}"
+>
+
+  @if (icon && inconPosition !== "right") {
+    <i class="ri ri-{{icon}}"></i>
+  }
+  <span class="label">
+    {{ label }}
+  </span>
+  @if (divider) {
+    <span class="pipe">|</span>
+  }
+  @if (icon && inconPosition == "right") {
+    <i class="ri ri-{{icon}}"></i>
+  }
+</button>

my-workspace/projects/sae-lib/buttons/main-button/main-button.scss

@@ -0,0 +1,132 @@
+@use "sae-lib/src/styles/shadows.scss";
+@use "sae-lib/src/styles/states.scss";
+@use "sae-lib/src/styles/variables.scss";
+@use "sass:color";
+
+
+:host {
+  display: inline-block;
+  font-family: Barlow;
+
+  button {
+    background: shadows.$primary-color;
+    color: shadows.$neutral-white;
+    border-radius: shadows.$radius-main;
+    padding: 1rem 2rem;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    border: 0;
+    width: 100%;
+    margin-top: 8px;
+
+    i {
+      margin-right: 1rem;
+    }
+
+    &:hover, &:active, &:focus {
+      transition: all 0.25s ease;
+    }
+
+    &:hover {
+      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+    }
+
+    &.is-size {
+      &-large {
+        padding: 17px 24px;
+
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 26px;
+      }
+
+      &-medium {
+        padding: 14px 18px;
+        border-radius: var(--radius-2, 8px);
+
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+
+      &-small {
+        padding: 14px 10px;
+        border-radius: var(--radius-2, 8px);
+
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+
+      }
+
+      &-extrasm {
+        padding: 10px 10px;
+        border-radius: var(--radius-2, 4px);
+        color: var(--Colors-Blanc, #FFF);
+
+
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 18px;
+      }
+    }
+
+    &.is-primary {
+      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+      color: variables.$neutral-white;
+      border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
+
+      &:hover {
+        background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
+      }
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: white;
+      }
+    }
+
+    &.is-secondary {
+      background-color: variables.$neutral-white;
+      color: variables.$neutral-white;
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: white;
+      }
+    }
+
+    &.is-ghost {
+      background: variables.$neutral-white;
+      color: #255B8E;
+      border: 0;
+
+      &:focus {
+        background: variables.$neutral-white;
+      }
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: #BED7EE;
+      }
+
+    }
+
+    &.is-link {
+      background: variables.$neutral-white;
+      color: #255B8E;
+      border: 0;
+
+      .label {
+        text-decoration: underline;
+        text-decoration-color: variables.$primary-color;
+      }
+
+      &.is-disabled {
+        background-color: #BED7EE;
+        color: #BED7EE;
+      }
+    }
+
+  }
+}

my-workspace/projects/sae-lib/buttons/main-button/main-button.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MainButton} from './main-button';
+
+
+describe('MainButton', () => {
+  let component: MainButton;
+  let fixture: ComponentFixture<MainButton>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MainButton]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(MainButton);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

my-workspace/projects/sae-lib/buttons/main-button/main-button.ts

@@ -0,0 +1,25 @@
+import {Component, Input} from '@angular/core';
+import {NgClass} from '@angular/common';
+
+export type ButtonKindType = '' | 'primary' | 'secondary' | 'ghost' | 'link';
+export type ButtonSizeType = '' | 'large' | 'medium' | 'small' | 'extrasm';
+export type inconPositionKindType = '' | 'left' | 'right';
+
+@Component({
+  selector: 'sae-main-button',
+  standalone: true,
+  imports: [
+    NgClass
+  ],
+  templateUrl: './main-button.html',
+  styleUrl: './main-button.scss'
+})
+export class MainButton {
+  @Input() disabled: boolean = false;
+  @Input() divider: boolean = false;
+  @Input() label: string = '';
+  @Input() icon: string = '';
+  @Input() inconPosition: inconPositionKindType = 'left';
+  @Input() size: ButtonSizeType = '';
+  @Input() kind: ButtonKindType = '';
+}

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

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

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

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

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

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

my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts

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

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

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

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

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

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

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

my-workspace/projects/sae-lib/package.json

@@ -9,11 +9,10 @@
     "@ngrx/store-devtools": "^20.0.0",
     "bulma": "^1.0.4",
     "remixicon": "^4.6.0",
+    "tslib": "^2.3.0",
     "shepherd.js": "^14.5.1"
   },
   "dependencies": {
-    "@storybook/angular": "^9.1.5",
-    "tslib": "^2.3.0"
   },
   "sideEffects": false,
   "exports": {

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

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'sae-index',
+  selector: 'sae-main-button',
   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';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'lib-sae-index',
+  selector: 'lib-sae-main-button',
   imports: [],
   templateUrl: './index.html',
   styleUrl: './index.css'

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

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

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

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

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

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

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

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

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

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