diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts b/airwatch/src/app/molecules/stories/alert-box.stories.ts similarity index 97% rename from my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts rename to airwatch/src/app/molecules/stories/alert-box.stories.ts index 4692b7d..35d1a33 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts +++ b/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 = { diff --git a/my-workspace/projects/sae-lib/breadcrumbs/index/index.ts b/my-workspace/projects/sae-lib/breadcrumbs/index/index.ts index 2ec7075..e7e85ec 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'; +import {Component} from '@angular/core'; @Component({ - selector: 'lib-breadcrumbs-sae-index', + selector: 'lib-breadcrumbs-sae-main-button', imports: [], templateUrl: './index.html', styleUrl: './index.css' diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss index 8914a83..b452636 100644 --- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss +++ b/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; diff --git a/my-workspace/projects/sae-lib/buttons/index/index.css b/my-workspace/projects/sae-lib/buttons/index/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/my-workspace/projects/sae-lib/buttons/index/index.html b/my-workspace/projects/sae-lib/buttons/index/index.html deleted file mode 100644 index f1b8608..0000000 --- a/my-workspace/projects/sae-lib/buttons/index/index.html +++ /dev/null @@ -1 +0,0 @@ -

index works!

diff --git a/my-workspace/projects/sae-lib/buttons/index/index.spec.ts b/my-workspace/projects/sae-lib/buttons/index/index.spec.ts deleted file mode 100644 index 515b434..0000000 --- a/my-workspace/projects/sae-lib/buttons/index/index.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { Index } from './index'; - -describe('Index', () => { - let component: Index; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [Index] - }) - .compileComponents(); - - fixture = TestBed.createComponent(Index); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/my-workspace/projects/sae-lib/buttons/index/index.ts b/my-workspace/projects/sae-lib/buttons/index/index.ts deleted file mode 100644 index 209e02e..0000000 --- a/my-workspace/projects/sae-lib/buttons/index/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sae-index', - imports: [], - templateUrl: './index.html', - styleUrl: './index.css' -}) -export class Index { - -} diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.html b/my-workspace/projects/sae-lib/buttons/main-button/main-button.html new file mode 100644 index 0000000..b89f300 --- /dev/null +++ b/my-workspace/projects/sae-lib/buttons/main-button/main-button.html @@ -0,0 +1,20 @@ + diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss b/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss new file mode 100644 index 0000000..123a6f1 --- /dev/null +++ b/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; + } + } + + } +} diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.spec.ts b/my-workspace/projects/sae-lib/buttons/main-button/main-button.spec.ts new file mode 100644 index 0000000..519c8d1 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MainButton] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MainButton); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts b/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts new file mode 100644 index 0000000..865e915 --- /dev/null +++ b/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 = ''; +} diff --git a/my-workspace/projects/sae-lib/colours/index/index.ts b/my-workspace/projects/sae-lib/colours/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/colours/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/effects/index/index.ts b/my-workspace/projects/sae-lib/effects/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/effects/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/icons/index/index.ts b/my-workspace/projects/sae-lib/icons/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/icons/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts b/my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/inbox/index/index.ts b/my-workspace/projects/sae-lib/inbox/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/inbox/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/inputs/index/index.ts b/my-workspace/projects/sae-lib/inputs/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/inputs/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/layouts/index/index.ts b/my-workspace/projects/sae-lib/layouts/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/layouts/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/package.json b/my-workspace/projects/sae-lib/package.json index da2bcf3..a7e3093 100644 --- a/my-workspace/projects/sae-lib/package.json +++ b/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": { diff --git a/my-workspace/projects/sae-lib/popups/index/index.ts b/my-workspace/projects/sae-lib/popups/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/popups/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/radius/index/index.ts b/my-workspace/projects/sae-lib/radius/index/index.ts index 015b3e7..3cf89f7 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'; +import {Component} from '@angular/core'; @Component({ - selector: 'lib-sae-index', + selector: 'lib-sae-main-button', imports: [], templateUrl: './index.html', styleUrl: './index.css' diff --git a/my-workspace/projects/sae-lib/strokes/index/index.ts b/my-workspace/projects/sae-lib/strokes/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/strokes/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/tabs/index/index.ts b/my-workspace/projects/sae-lib/tabs/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/tabs/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/tags/index/index.ts b/my-workspace/projects/sae-lib/tags/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/tags/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/toggles/index/index.ts b/my-workspace/projects/sae-lib/toggles/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/toggles/index/index.ts +++ b/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' diff --git a/my-workspace/projects/sae-lib/typo/index/index.ts b/my-workspace/projects/sae-lib/typo/index/index.ts index 209e02e..1d84570 100644 --- a/my-workspace/projects/sae-lib/typo/index/index.ts +++ b/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'