feat(design): show the daff loading icon when loading is set to true …

…on a button (#2448)
graycoreio · Jul 6, 2023 · 6d6067f · 6d6067f
1 parent 678e8a9
commit 6d6067f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/libs/design/src/atoms/button/button.component.html b/libs/design/src/atoms/button/button.component.html
@@ -1,7 +1,8 @@
 <ng-container *ngIf="_prefix">
   <ng-content select="[daffPrefix]"></ng-content>
 </ng-container>
-<span><ng-content></ng-content></span>
+<span class="daff-button__content" *ngIf="!loading"><ng-content></ng-content></span>
+<daff-loading-icon *ngIf="loading" [diameter]="24"></daff-loading-icon>
 <ng-container *ngIf="_suffix">
   <ng-content select="[daffSuffix]"></ng-content>
 </ng-container>
diff --git a/libs/design/src/atoms/button/button.component.spec.ts b/libs/design/src/atoms/button/button.component.spec.ts
@@ -11,6 +11,8 @@ import { By } from '@angular/platform-browser';
 
 import { DaffPalette } from '../../core/colorable/public_api';
 import { DaffStatus } from '../../core/statusable/statusable';
+import { DaffLoadingIconComponent } from '../loading-icon/loading-icon.component';
+import { DaffLoadingIconModule } from '../loading-icon/loading-icon.module';
 import {
   DaffButtonComponent,
   DaffButtonSize,
@@ -53,6 +55,9 @@ describe('DaffButtonComponent', () => {
         DaffButtonComponent,
         WrapperComponent,
       ],
+      imports: [
+        DaffLoadingIconModule,
+      ],
     })
       .compileComponents();
   }));
@@ -199,6 +204,39 @@ describe('DaffButtonComponent', () => {
     });
   });
 
+  describe('using the loading property of a button', () => {
+    it('should be able to take `loading` as an input', () => {
+      expect(component.loading).toEqual(wrapper.loading);
+    });
+
+    describe('when loading is set to true', () => {
+      let loadingIcon: DaffLoadingIconComponent;
+
+      beforeEach(() => {
+        wrapper.loading = true;
+        fixture.detectChanges();
+
+        loadingIcon = fixture.debugElement.query(By.css('daff-loading-icon')).componentInstance;
+      });
+
+      it('should show the <daff-loading-icon>', () => {
+        expect(loadingIcon).toBeDefined();
+      });
+
+      it('should set the <daff-loading-icon>`s diameter to 24', () => {
+        expect(loadingIcon.diameter).toBe(24);
+      });
+    });
+
+    it('should show the `.daff-button__content` when loading is set to false', () => {
+      wrapper.loading = false;
+      fixture.detectChanges();
+
+      const buttonContent = fixture.debugElement.query(By.css('.daff-button__content')).componentInstance;
+
+      expect(buttonContent).toBeDefined();
+    });
+  });
 
   describe('when the button is disabled', () => {
     beforeEach(() => {

diff --git a/libs/design/src/atoms/button/button.module.ts b/libs/design/src/atoms/button/button.module.ts
@@ -2,13 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DaffPrefixSuffixModule } from '../../core/prefix-suffix/prefix-suffix.module';
+import { DaffLoadingIconModule } from '../loading-icon/loading-icon.module';
 import { DaffButtonComponent } from './button.component';
 
 
 @NgModule({
   imports: [
     CommonModule,
     DaffPrefixSuffixModule,
+    DaffLoadingIconModule,
   ],
   declarations: [
     DaffButtonComponent,