tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add props to main button

Browse source
This commit is contained in:
Tykayn 2025-09-10 13:00:31 +02:00 • committed by tykayn
parent 359367c4e3
commit 72e35b5582
26 changed files with 233 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

89
my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts
View file

@ -1,89 +0,0 @@
import type {Meta, StoryObj} from '@storybook/angular';
import {moduleMetadata} from '@storybook/angular';
import {AlertBox} from './alert-box';
import {CommonModule} from '@angular/common';
const meta: Meta<AlertBox> = {
title: 'Components/AlertBox',
component: AlertBox,
tags: ['autodocs'],
decorators: [
moduleMetadata({
imports: [CommonModule],
providers: []
})
],
argTypes: {
message: {
control: 'text',
description: 'Message à afficher dans l\'alerte'
},
_alertKind: {
control: 'select',
options: ['info', 'success', 'primary', 'secondary', 'warning', 'danger', 'error'],
description: 'Type d\'alerte'
}
},
};
export default meta;
type Story = StoryObj<AlertBox>;
export const Warning: Story = {
args: {
message: 'Ceci est un message d\'avertissement',
_alertKind: 'warning'
},
};
//
// export const Success: Story = {
// args: {
// message: 'Opération réussie !',
// _alertKind: 'success'
// },
// };
//
// export const Info: Story = {
// args: {
// message: 'Information importante',
// _alertKind: 'info'
// },
// };
//
// export const Primary: Story = {
// args: {
// message: 'Message principal',
// _alertKind: 'primary'
// },
// };
//
// export const Secondary: Story = {
// args: {
// message: 'Message secondaire',
// _alertKind: 'secondary'
// },
// };
//
// export const Danger: Story = {
// args: {
// message: 'Attention danger !',
// _alertKind: 'danger'
// },
// };
//
// export const ErrorState: Story = {
// args: {
// message: 'Une erreur est survenue',
// _alertKind: 'error'
// },
// };
//
// export const WithContent: Story = {
// args: {
// _alertKind: 'warning'
// },
// render: (args) => ({
// props: args,
// template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
// })
// };

4
my-workspace/projects/sae-lib/breadcrumbs/index/index.ts
View file

@ -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'

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

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

0
my-workspace/projects/sae-lib/buttons/index/index.css
View file

1
my-workspace/projects/sae-lib/buttons/index/index.html
View file

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

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

@ -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();
});
});

11
my-workspace/projects/sae-lib/buttons/index/index.ts
View file

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

20
my-workspace/projects/sae-lib/buttons/main-button/main-button.html Normal file
View file

@ -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>

132
my-workspace/projects/sae-lib/buttons/main-button/main-button.scss Normal file
View file

@ -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;
}
}
}
}

23
my-workspace/projects/sae-lib/buttons/main-button/main-button.spec.ts Normal file
View file

@ -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();
});
});

25
my-workspace/projects/sae-lib/buttons/main-button/main-button.ts Normal file
View file

@ -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 = '';
}

4
my-workspace/projects/sae-lib/colours/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/effects/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/icons/index/index.ts
View file

@ -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'

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

@ -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'

4
my-workspace/projects/sae-lib/inbox/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/inputs/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/layouts/index/index.ts
View file

@ -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'

3
my-workspace/projects/sae-lib/package.json
View file

@ -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": {

4
my-workspace/projects/sae-lib/popups/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/radius/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/strokes/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/tabs/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/tags/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/toggles/index/index.ts
View file

@ -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'

4
my-workspace/projects/sae-lib/typo/index/index.ts
View file

@ -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'