Merge pull request #18 from serionist/list

List
serionist · Jan 16, 2025 · 2377e62 · 2377e62
2 parents 9b2a3a0 + 2e7e0ba
commit 2377e62
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/projects/component-library/src/lib/button/button.component.scss b/projects/component-library/src/lib/button/button.component.scss
@@ -1,4 +1,4 @@
-button {
+:host {
     -moz-user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
@@ -7,7 +7,7 @@ button {
     border-radius: 2px;
     box-sizing: border-box;
 
-    cursor: default;
+    cursor: pointer;
     font-family: inherit;
     font-size: var(--twc-font-size-body);
     font-weight: bold;
@@ -18,6 +18,13 @@ button {
     padding: 0 24px;
     user-select: none;
     width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    &:hover {
+        text-decoration: none;
+    }
     .content-wrapper {
         display: flex;
         justify-content: center;
@@ -26,8 +33,9 @@ button {
         .loader-wrapper {
             margin-left: -18px;
             margin-right: 4px;
-            margin-top: 2px;
+           // margin-top: 2px;
             visibility: hidden;
+            display: flex;
             @keyframes loading-button-spinner {
                 100% {
                     transform: rotate(360deg);
@@ -47,20 +55,20 @@ button {
     }
 
     &.primary {
-        &:not([disabled]) {
+        &:not([disabled]):not([disabled="false"]) {
             background-color: var(--twc-color-primary);
             color: var(--twc-color-on-primary);
             &:hover {
                 background-color: var(--twc-color-primary-highlight);
             }
         }
-        &[disabled] {
+        &[disabled]:not([disabled="false"]) {
             background-color: #c9c9c9 !important;
             color: #939393 !important;
         }
     }
     &.secondary {
-        &:not([disabled]) {
+        &:not([disabled]):not([disabled="false"]) {
             background-color: transparent;
             border-color: #747474;
             color: #2e2e2e;
@@ -69,25 +77,28 @@ button {
             }
 
         }
-        &[disabled] {
+        &[disabled]:not([disabled="false"]) {
             background-color: transparent !important;
             border-color: #c9c9c9 !important;
             color: #c9c9c9 !important;
         }
     }
     &.error {
-        &:not([disabled]) {
+        &:not([disabled]):not([disabled="false"]) {
             background-color: #BA0517;
             color: var(--twc-color-on-primary);
             &:hover {
                 background-color: #640103;
             }
         }
-        &[disabled] {
+        &[disabled]:not([disabled="false"]) {
             background-color: #C9C9C9 !important;
             color: #939393 !important;
         }
     }
+    &[disabled]:not([disabled="false"]) {
+        cursor: default;
+    }
     &:focus-visible,&:focus {
         box-shadow: inset 0 0 0 2px white;
         outline: 2px solid #0b5cab;

diff --git a/projects/component-library/src/lib/button/button.component.ts b/projects/component-library/src/lib/button/button.component.ts
@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ElementRef, inject, input, output, signal, ViewEncapsulation } from '@angular/core';
 
 @Component({
-    selector: 'button',
+    selector: 'button,a[button]',
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss'],
-    encapsulation: ViewEncapsulation.None, // Disable view encapsulation
+    // encapsulation: ViewEncapsulation.None, // Disable view encapsulation
     host: {
         '[attr.type]': 'type()',
         '[class]': 'color()',

diff --git a/projects/test-app/src/app/pages/buttons-page/buttons-page.component.html b/projects/test-app/src/app/pages/buttons-page/buttons-page.component.html
@@ -31,6 +31,7 @@ <h3>Examples</h3>
                 (click)="buttonClick('secondary')">Secondary</button>
                 <button color="secondary" [disabled]="true"
                 (click)="buttonClick('secondary')">Secondary disabled</button>
+
 
                 <button color="primary" [loading]="buttonsLoading.primary"
                 (click)="buttonClick('primary')">Primary</button>
@@ -41,6 +42,23 @@ <h3>Examples</h3>
                 (click)="buttonClick('error')">Error</button>
                 <button color="error" [disabled]="true"
                 (click)="buttonClick('error')">Error disabled</button>
+
+
+                <a button color="secondary" [loading]="buttonsLoading.secondary"
+                (click)="buttonClick('secondary')">Secondary as link</a>
+                <a button color="secondary" [disabled]="true"
+                (click)="buttonClick('secondary')">Secondary as link disabled</a>
+
+
+                <a button color="primary" [loading]="buttonsLoading.primary"
+                (click)="buttonClick('primary')">Primary as link</a>
+                <a button color="primary" [disabled]="true"
+                (click)="buttonClick('primary')">Primary as link disabled</a>
+
+                <a button color="error" [loading]="buttonsLoading.error"
+                (click)="buttonClick('error')">Error as link</a>
+                <a button color="error" [disabled]="true"
+                (click)="buttonClick('error')">Error as link disabled</a>
             </div>
         </div>
     </div>