diff --git a/sb/package-lock.json b/sb/package-lock.json index acfc230..a729dd6 100644 --- a/sb/package-lock.json +++ b/sb/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "angular-latest", "version": "0.0.0", + "workspaces": [ + "../my-workspace/*" + ], "dependencies": { "@angular/animations": "^20.3.0", "@angular/common": "^20.3.0", diff --git a/sb/src/app/composants/badges/badges.ts b/sb/src/app/composants/badges/badges.ts new file mode 100644 index 0000000..91364db --- /dev/null +++ b/sb/src/app/composants/badges/badges.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-badges', + imports: [], + template: ` +

+ badges works! +

+ `, + styles: `` +}) +export class Badges { + +} diff --git a/sb/src/app/composants/boutons/boutons.ts b/sb/src/app/composants/boutons/boutons.ts new file mode 100644 index 0000000..a7ab6cd --- /dev/null +++ b/sb/src/app/composants/boutons/boutons.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-boutons', + imports: [], + template: ` +

+ boutons works! +

+ `, + styles: `` +}) +export class Boutons { + +} diff --git a/sb/src/app/composants/checkboxes/checkboxes.ts b/sb/src/app/composants/checkboxes/checkboxes.ts new file mode 100644 index 0000000..ce815c0 --- /dev/null +++ b/sb/src/app/composants/checkboxes/checkboxes.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-checkboxes', + imports: [], + template: ` +

+ checkboxes works! +

+ `, + styles: `` +}) +export class Checkboxes { + +} diff --git a/sb/src/app/composants/dropdown/dropdown.ts b/sb/src/app/composants/dropdown/dropdown.ts new file mode 100644 index 0000000..94ad3db --- /dev/null +++ b/sb/src/app/composants/dropdown/dropdown.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-dropdown', + imports: [], + template: ` +

+ dropdown works! +

+ `, + styles: `` +}) +export class Dropdown { + +} diff --git a/sb/src/app/composants/infobulles/infobulles.ts b/sb/src/app/composants/infobulles/infobulles.ts new file mode 100644 index 0000000..9b71edf --- /dev/null +++ b/sb/src/app/composants/infobulles/infobulles.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-infobulles', + imports: [], + template: ` +

+ infobulles works! +

+ `, + styles: `` +}) +export class Infobulles { + +} diff --git a/sb/src/app/composants/inputs/inputs.ts b/sb/src/app/composants/inputs/inputs.ts new file mode 100644 index 0000000..4c0419c --- /dev/null +++ b/sb/src/app/composants/inputs/inputs.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-inputs', + imports: [], + template: ` +

+ inputs works! +

+ `, + styles: `` +}) +export class Inputs { + +} diff --git a/sb/src/app/composants/radio/radio.ts b/sb/src/app/composants/radio/radio.ts new file mode 100644 index 0000000..3feb02d --- /dev/null +++ b/sb/src/app/composants/radio/radio.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-radio', + imports: [], + template: ` +

+ radio works! +

+ `, + styles: `` +}) +export class Radio { + +} diff --git a/sb/src/app/composants/steppers/steppers.ts b/sb/src/app/composants/steppers/steppers.ts new file mode 100644 index 0000000..0a6bbee --- /dev/null +++ b/sb/src/app/composants/steppers/steppers.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-steppers', + imports: [], + template: ` +

+ steppers works! +

+ `, + styles: `` +}) +export class Steppers { + +} diff --git a/sb/src/app/composants/tabulations/tabulations.ts b/sb/src/app/composants/tabulations/tabulations.ts new file mode 100644 index 0000000..f6119ee --- /dev/null +++ b/sb/src/app/composants/tabulations/tabulations.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-tabulations', + imports: [], + template: ` +

+ tabulations works! +

+ `, + styles: `` +}) +export class Tabulations { + +} diff --git a/sb/src/app/composants/tags-chips/tags-chips.ts b/sb/src/app/composants/tags-chips/tags-chips.ts new file mode 100644 index 0000000..43ab810 --- /dev/null +++ b/sb/src/app/composants/tags-chips/tags-chips.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-tags-chips', + imports: [], + template: ` +

+ tags-chips works! +

+ `, + styles: `` +}) +export class TagsChips { + +} diff --git a/sb/src/app/composants/textarea/textarea.ts b/sb/src/app/composants/textarea/textarea.ts new file mode 100644 index 0000000..c244e55 --- /dev/null +++ b/sb/src/app/composants/textarea/textarea.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-textarea', + imports: [], + template: ` +

+ textarea works! +

+ `, + styles: `` +}) +export class Textarea { + +} diff --git a/sb/src/app/composants/toggle-switch/toggle-switch.ts b/sb/src/app/composants/toggle-switch/toggle-switch.ts new file mode 100644 index 0000000..9d191c7 --- /dev/null +++ b/sb/src/app/composants/toggle-switch/toggle-switch.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-toggle-switch', + imports: [], + template: ` +

+ toggle-switch works! +

+ `, + styles: `` +}) +export class ToggleSwitch { + +} diff --git a/sb/src/app/foundations/charte/charte.ts b/sb/src/app/foundations/charte/charte.ts new file mode 100644 index 0000000..3fdc58e --- /dev/null +++ b/sb/src/app/foundations/charte/charte.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-charte', + imports: [], + template: ` +

+ charte works! +

+ `, + styles: `` +}) +export class Charte { + +} diff --git a/sb/src/app/foundations/couleurs/couleurs.ts b/sb/src/app/foundations/couleurs/couleurs.ts new file mode 100644 index 0000000..ea0787f --- /dev/null +++ b/sb/src/app/foundations/couleurs/couleurs.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-couleurs', + imports: [], + template: ` +

+ couleurs works! +

+ `, + styles: `` +}) +export class Couleurs { + +} diff --git a/sb/src/app/foundations/effets/effets.ts b/sb/src/app/foundations/effets/effets.ts new file mode 100644 index 0000000..9ba07a7 --- /dev/null +++ b/sb/src/app/foundations/effets/effets.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-effets', + imports: [], + template: ` +

+ effets works! +

+ `, + styles: `` +}) +export class Effets { + +} diff --git a/sb/src/app/foundations/icones/icones.ts b/sb/src/app/foundations/icones/icones.ts new file mode 100644 index 0000000..6c0fa6d --- /dev/null +++ b/sb/src/app/foundations/icones/icones.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-icones', + imports: [], + template: ` +

+ icones works! +

+ `, + styles: `` +}) +export class Icones { + +} diff --git a/sb/src/app/foundations/layout/layout.ts b/sb/src/app/foundations/layout/layout.ts new file mode 100644 index 0000000..d30e3db --- /dev/null +++ b/sb/src/app/foundations/layout/layout.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-layout', + imports: [], + template: ` +

+ layout works! +

+ `, + styles: `` +}) +export class Layout { + +} diff --git a/sb/src/app/foundations/radius/radius.ts b/sb/src/app/foundations/radius/radius.ts new file mode 100644 index 0000000..c3769bc --- /dev/null +++ b/sb/src/app/foundations/radius/radius.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-radius', + imports: [], + template: ` +

+ radius works! +

+ `, + styles: `` +}) +export class Radius { + +} diff --git a/sb/src/app/foundations/strokes/strokes.ts b/sb/src/app/foundations/strokes/strokes.ts new file mode 100644 index 0000000..7f94aee --- /dev/null +++ b/sb/src/app/foundations/strokes/strokes.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-strokes', + imports: [], + template: ` +

+ strokes works! +

+ `, + styles: `` +}) +export class Strokes { + +} diff --git a/sb/src/app/foundations/typographies/typographies.ts b/sb/src/app/foundations/typographies/typographies.ts new file mode 100644 index 0000000..a8a542a --- /dev/null +++ b/sb/src/app/foundations/typographies/typographies.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-typographies', + imports: [], + template: ` +

+ typographies works! +

+ `, + styles: `` +}) +export class Typographies { + +} diff --git a/sb/src/app/m-button/m-button.ts b/sb/src/app/m-button/m-button.ts new file mode 100644 index 0000000..5119566 --- /dev/null +++ b/sb/src/app/m-button/m-button.ts @@ -0,0 +1,203 @@ +import { Component, Input } from '@angular/core'; +import { ButtonKindType, ButtonSizeType, inconPositionKindType } from '../../../../my-workspace/projects/sae-lib/buttons/main-button/main-button'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-m-button', + imports: [CommonModule], + template: ` + + `, + styles: ` + @use "../../../../my-workspace/projects/sae-lib/src/styles/shadows.scss"; +@use "../../../../my-workspace/projects/sae-lib/src/styles/states.scss"; +@use "../../../../my-workspace/projects/sae-lib/src/styles/variables.scss"; +@use "sass:color"; + +:host { + display: inline-block; + font-family: Barlow; + + + .pipe { + margin-left: 10px; + margin-right: 10px; + } + + button { + + background: transparent; + color: shadows.$neutral-white; + border-radius: shadows.$radius-main; + padding: 17px 24px; + cursor: pointer; + transition: all 0.25s ease; + border: 0; + width: 100%; + margin-top: 8px; + font-size: 18px; + + i { + width: 16px; + height: 16px; + } + + //&: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-disabled { + background-color: #BED7EE; + color: white; + } + + &.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%)); + } + + &:focus { + outline: 3px solid var(--Colors-Principal-100, #96BEE4); + background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); + } + + &.is-disabled { + background-color: #BED7EE !important; + color: white; + } + } + + + &.is-secondary { + //background: variables.$neutral-white; + background: white; + border: solid 1px #255B8E; + color: variables.$neutral-white; + color: #255B8E; + + &.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; + } + + &:hover { + background: #dedede; + } + + } + + &.is-link { + background: variables.$neutral-white; + color: #255B8E; + border: 0; + + &:hover { + background: #dedede; + } + + + .label { + text-decoration: underline; + text-decoration-color: variables.$primary-color; + } + + &.is-disabled { + background-color: #BED7EE; + color: #BED7EE; + } + } + + + } +} +` +}) +export class MButton { + @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/sb/src/app/patterns/breadcrumb/breadcrumb.ts b/sb/src/app/patterns/breadcrumb/breadcrumb.ts new file mode 100644 index 0000000..840d614 --- /dev/null +++ b/sb/src/app/patterns/breadcrumb/breadcrumb.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-breadcrumb', + imports: [], + template: ` +

+ breadcrumb works! +

+ `, + styles: `` +}) +export class Breadcrumb { + +} diff --git a/sb/src/app/patterns/chat-message/chat-message.ts b/sb/src/app/patterns/chat-message/chat-message.ts new file mode 100644 index 0000000..6d551e9 --- /dev/null +++ b/sb/src/app/patterns/chat-message/chat-message.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-chat-message', + imports: [], + template: ` +

+ chat-message works! +

+ `, + styles: `` +}) +export class ChatMessage { + +} diff --git a/sb/src/app/patterns/error-message/error-message.ts b/sb/src/app/patterns/error-message/error-message.ts new file mode 100644 index 0000000..1fcd088 --- /dev/null +++ b/sb/src/app/patterns/error-message/error-message.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-error-message', + imports: [], + template: ` +

+ error-message works! +

+ `, + styles: `` +}) +export class ErrorMessage { + +} diff --git a/sb/src/app/patterns/feedack/feedack.ts b/sb/src/app/patterns/feedack/feedack.ts new file mode 100644 index 0000000..d5485bd --- /dev/null +++ b/sb/src/app/patterns/feedack/feedack.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-feedack', + imports: [], + template: ` +

+ feedack works! +

+ `, + styles: `` +}) +export class Feedack { + +} diff --git a/sb/src/app/patterns/fileuploader/fileuploader.ts b/sb/src/app/patterns/fileuploader/fileuploader.ts new file mode 100644 index 0000000..e0d8521 --- /dev/null +++ b/sb/src/app/patterns/fileuploader/fileuploader.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-fileuploader', + imports: [], + template: ` +

+ fileuploader works! +

+ `, + styles: `` +}) +export class Fileuploader { + +} diff --git a/sb/src/app/patterns/footer/footer.ts b/sb/src/app/patterns/footer/footer.ts new file mode 100644 index 0000000..ee76a53 --- /dev/null +++ b/sb/src/app/patterns/footer/footer.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-footer', + imports: [], + template: ` +

+ footer works! +

+ `, + styles: `` +}) +export class Footer { + +} diff --git a/sb/src/app/patterns/header/header.ts b/sb/src/app/patterns/header/header.ts new file mode 100644 index 0000000..03c2445 --- /dev/null +++ b/sb/src/app/patterns/header/header.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-header', + imports: [], + template: ` +

+ header works! +

+ `, + styles: `` +}) +export class Header { + +} diff --git a/sb/src/app/patterns/navbar/navbar.ts b/sb/src/app/patterns/navbar/navbar.ts new file mode 100644 index 0000000..54e7baf --- /dev/null +++ b/sb/src/app/patterns/navbar/navbar.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-navbar', + imports: [], + template: ` +

+ navbar works! +

+ `, + styles: `` +}) +export class Navbar { + +} diff --git a/sb/src/app/patterns/pagination/pagination.ts b/sb/src/app/patterns/pagination/pagination.ts new file mode 100644 index 0000000..3a72162 --- /dev/null +++ b/sb/src/app/patterns/pagination/pagination.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-pagination', + imports: [], + template: ` +

+ pagination works! +

+ `, + styles: `` +}) +export class Pagination { + +} diff --git a/sb/src/app/patterns/rgpd/rgpd.ts b/sb/src/app/patterns/rgpd/rgpd.ts new file mode 100644 index 0000000..5cb4e05 --- /dev/null +++ b/sb/src/app/patterns/rgpd/rgpd.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-rgpd', + imports: [], + template: ` +

+ rgpd works! +

+ `, + styles: `` +}) +export class Rgpd { + +} diff --git a/sb/src/app/patterns/table/table.ts b/sb/src/app/patterns/table/table.ts new file mode 100644 index 0000000..8906e7a --- /dev/null +++ b/sb/src/app/patterns/table/table.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-table', + imports: [], + template: ` +

+ table works! +

+ `, + styles: `` +}) +export class Table { + +} diff --git a/sb/src/assets/fonts/Barlow/Barlow-Black.ttf b/sb/src/assets/fonts/Barlow/Barlow-Black.ttf new file mode 100644 index 0000000..9675b8a Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Black.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-BlackItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-BlackItalic.ttf new file mode 100644 index 0000000..2314595 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-BlackItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-Bold.ttf b/sb/src/assets/fonts/Barlow/Barlow-Bold.ttf new file mode 100644 index 0000000..28f2d3a Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Bold.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-BoldItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-BoldItalic.ttf new file mode 100644 index 0000000..9dc16ad Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-BoldItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-ExtraBold.ttf b/sb/src/assets/fonts/Barlow/Barlow-ExtraBold.ttf new file mode 100644 index 0000000..2290111 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-ExtraBold.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-ExtraBoldItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-ExtraBoldItalic.ttf new file mode 100644 index 0000000..9e30cef Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-ExtraBoldItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-ExtraLight.ttf b/sb/src/assets/fonts/Barlow/Barlow-ExtraLight.ttf new file mode 100644 index 0000000..34f0251 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-ExtraLight.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-ExtraLightItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-ExtraLightItalic.ttf new file mode 100644 index 0000000..14f2370 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-ExtraLightItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-Italic.ttf b/sb/src/assets/fonts/Barlow/Barlow-Italic.ttf new file mode 100644 index 0000000..dc46deb Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Italic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-Light.ttf b/sb/src/assets/fonts/Barlow/Barlow-Light.ttf new file mode 100644 index 0000000..f3c5b70 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Light.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-LightItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-LightItalic.ttf new file mode 100644 index 0000000..bf78286 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-LightItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-Medium.ttf b/sb/src/assets/fonts/Barlow/Barlow-Medium.ttf new file mode 100644 index 0000000..11d4ab2 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Medium.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-MediumItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-MediumItalic.ttf new file mode 100644 index 0000000..62a4fb2 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-MediumItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-Regular.ttf b/sb/src/assets/fonts/Barlow/Barlow-Regular.ttf new file mode 100644 index 0000000..d39c293 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Regular.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-SemiBold.ttf b/sb/src/assets/fonts/Barlow/Barlow-SemiBold.ttf new file mode 100644 index 0000000..58a6430 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-SemiBold.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-SemiBoldItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-SemiBoldItalic.ttf new file mode 100644 index 0000000..8cbb7bf Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-SemiBoldItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-Thin.ttf b/sb/src/assets/fonts/Barlow/Barlow-Thin.ttf new file mode 100644 index 0000000..a9d7cb9 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-Thin.ttf differ diff --git a/sb/src/assets/fonts/Barlow/Barlow-ThinItalic.ttf b/sb/src/assets/fonts/Barlow/Barlow-ThinItalic.ttf new file mode 100644 index 0000000..8678b99 Binary files /dev/null and b/sb/src/assets/fonts/Barlow/Barlow-ThinItalic.ttf differ diff --git a/sb/src/assets/fonts/Barlow/OFL.txt b/sb/src/assets/fonts/Barlow/OFL.txt new file mode 100644 index 0000000..500b734 --- /dev/null +++ b/sb/src/assets/fonts/Barlow/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/sb/src/preview-head.html b/sb/src/preview-head.html new file mode 100644 index 0000000..0218fde --- /dev/null +++ b/sb/src/preview-head.html @@ -0,0 +1,136 @@ + diff --git a/sb/src/stories/button.stories.ts b/sb/src/stories/button.stories.ts index 510bc3c..f891fcb 100644 --- a/sb/src/stories/button.stories.ts +++ b/sb/src/stories/button.stories.ts @@ -2,20 +2,29 @@ import { applicationConfig } from '@storybook/angular'; import type { Meta, StoryObj } from '@storybook/angular'; import { provideAnimations } from '@angular/platform-browser/animations'; -import { MainButton } from '../../../my-workspace/projects/sae-lib/buttons/main-button/main-button'; +import { MButton } from '../app/m-button/m-button'; -const meta: Meta = { - title: 'SAE/Main Button', - component: MainButton, +const meta: Meta = { + title: 'Components/Buttons/Main Button', + component: MButton, decorators: [ applicationConfig({ providers: [provideAnimations()] }) ], - tags: ['autodocs'] + tags: ['autodocs'], + argTypes: { + kind: { control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'link'] }, + size: { control: 'select', options: ['', 'large', 'medium', 'small', 'extrasm'] }, + inconPosition: { control: 'inline-radio', options: ['', 'left', 'right'] }, + label: { control: 'text' }, + icon: { control: 'text' }, + divider: { control: 'boolean' }, + disabled: { control: 'boolean' } + } }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Primary: Story = { render: (args) => ({ props: args }), @@ -28,3 +37,126 @@ export const Primary: Story = { disabled: false } }; + +export const Secondary: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Annuler', + kind: 'secondary', + size: 'medium', + icon: '', + divider: false, + disabled: false + } +}; + +export const Ghost: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Option', + kind: 'ghost', + size: 'medium', + icon: '', + divider: false, + disabled: false + } +}; + +export const Link: Story = { + render: (args) => ({ props: args }), + args: { + label: 'En savoir plus', + kind: 'link', + size: 'medium', + icon: '', + divider: false, + disabled: false + } +}; + +export const Disabled: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Indisponible', + kind: 'primary', + size: 'medium', + icon: '', + divider: false, + disabled: true + } +}; + +export const Large: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Valider', + kind: 'primary', + size: 'large', + icon: '', + divider: false, + disabled: false + } +}; + +export const Small: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Valider', + kind: 'primary', + size: 'small', + icon: '', + divider: false, + disabled: false + } +}; + +export const ExtraSmall: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Valider', + kind: 'primary', + size: 'extrasm', + icon: '', + divider: false, + disabled: false + } +}; + +export const WithIconLeft: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Télécharger', + kind: 'primary', + size: 'medium', + icon: 'download-2-line', + inconPosition: 'left', + divider: false, + disabled: false + } +}; + +export const WithIconRight: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Suivant', + kind: 'primary', + size: 'medium', + icon: 'arrow-right-line', + inconPosition: 'right', + divider: false, + disabled: false + } +}; + +export const WithDivider: Story = { + render: (args) => ({ props: args }), + args: { + label: 'Exporter', + kind: 'secondary', + size: 'medium', + icon: 'download-2-line', + inconPosition: 'left', + divider: true, + disabled: false + } +};