feat(isct-137): added loader component v4

ironSource · Dec 14, 2023 · f0b4158 · f0b4158
1 parent 5d0dc50
commit f0b4158
Show file tree

Hide file tree

Showing 14 changed files with 170 additions and 45 deletions.
diff --git a/projects/fusion-ui/components/button/v4/button.component.html b/projects/fusion-ui/components/button/v4/button.component.html
@@ -4,6 +4,6 @@
     <div *ngIf="!iconName" class="fu-button-content"><ng-content></ng-content></div>
     <fusion-icon *ngIf="endIconName" class="fu-button-end-icon" [name]="endIconName"></fusion-icon>
     <div class="fu-button-loading">
-        <svg class="fu-circle-svg" width="16" height="16" style="padding: 2px;"><circle cx="50%" cy="50%" r="43.75%" style="stroke-width: 2;"></circle></svg>
+        <fusion-loader style="width: 16px; height: 16px"></fusion-loader>
     </div>
 </button>
diff --git a/projects/fusion-ui/components/button/v4/button.component.scss b/projects/fusion-ui/components/button/v4/button.component.scss
@@ -3,8 +3,6 @@
 @import '../../../src/style/scss/v4/border-radius';
 @import '../../../src/style/scss/v4/vars/fonts';
 
-$pi: 3.14159265358979;
-
 :host {
     margin: 0;
     padding: 0;
@@ -299,36 +297,9 @@ $pi: 3.14159265358979;
             .fu-button-content {
                 visibility: hidden;
             }
-            .fu-button-loading{
+            .fu-button-loading {
                 display: block;
                 position: absolute;
-                // region loading spinner
-                .fu-circle-svg{
-                    margin: 0 auto;
-                    box-sizing: content-box;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    circle {
-                        stroke: currentColor;
-                        fill: transparent;
-                        transform-origin: center;
-                        stroke-dasharray: 314.159265359%;
-                        animation: spinner 1.4s linear 0s infinite normal none running;
-                    }
-                }
-                @keyframes spinner {
-                    from {
-                        stroke-dashoffset: calc($pi * 50% * 2);
-                        transform: rotateZ(0deg);
-                    }
-                    to {
-                        stroke-dashoffset: calc(calc($pi * 50% * 2) * -1);
-                        transform: rotateZ(390deg);
-                    }
-                }
-                // endregion
             }
             .fu-button-start-icon,
             .fu-button-end-icon,

diff --git a/projects/fusion-ui/components/button/v4/button.component.ts b/projects/fusion-ui/components/button/v4/button.component.ts
@@ -2,11 +2,12 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {ButtonBaseComponent} from '@ironsource/fusion-ui/components/button/v4/button.base.component';
+import {LoaderComponent} from '@ironsource/fusion-ui/components/loader/v4';
 
 @Component({
     selector: 'fusion-button',
     standalone: true,
-    imports: [CommonModule, IconModule],
+    imports: [CommonModule, IconModule, LoaderComponent],
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss'],
     host: {class: 'fusion-v4'},

diff --git a/projects/fusion-ui/components/button/v4/icon-button.component.ts b/projects/fusion-ui/components/button/v4/icon-button.component.ts
@@ -3,11 +3,12 @@ import {CommonModule} from '@angular/common';
 import {ButtonBaseComponent} from '@ironsource/fusion-ui/components/button/v4/button.base.component';
 import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {IconButtonVariant} from '@ironsource/fusion-ui/components/button/v4/button.entities';
+import {LoaderComponent} from '@ironsource/fusion-ui/components/loader/v4';
 
 @Component({
     selector: 'fusion-icon-button',
     standalone: true,
-    imports: [CommonModule, IconModule],
+    imports: [CommonModule, IconModule, LoaderComponent],
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss', './icon-button.component.scss'],
     host: {class: 'fusion-v4'},

diff --git a/projects/fusion-ui/components/loader/common/base/loader.base.component.ts b/projects/fusion-ui/components/loader/common/base/loader.base.component.ts
@@ -5,24 +5,35 @@ import {IconData} from '@ironsource/fusion-ui/components/icon/v1';
 
 @Directive()
 export abstract class LoaderBaseComponent implements AfterViewInit {
+    /** @internal */
     @ViewChild('customLoader', {read: ElementRef}) customLoader: ElementRef;
 
+    /** @internal */
     @Input() height: number; // has position static, with min-height
+    /** @internal */
     @Input() status: boolean;
+    /** @internal */
     @Input() text: string;
+    /** @internal */
     @Input() position: LoaderPosition = 'center';
+    /** @internal */
     @Input() size: LoaderSize = 'large';
+    /** @internal */
     @Input() color: LoaderColor = 'grey';
+    /** @internal */
     @HostBinding('style.top.px') top: number; // distance from top
 
+    /** @internal */
     public get loaderPosition() {
         return `position-${this.position}`;
     }
+    /** @internal */
     public loaderIconName: IconData;
 
     constructor(
         private elementRef: ElementRef,
         private renderer: Renderer2,
+        /** @internal */
         @Optional() @Inject(LOADER_COMPONENT_TYPE_TOKEN) public componentType
     ) {
         this.size = this.size || 'large';

diff --git a/projects/fusion-ui/components/loader/v4/index.ts b/projects/fusion-ui/components/loader/v4/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/projects/fusion-ui/components/loader/v4/loader.component.html b/projects/fusion-ui/components/loader/v4/loader.component.html
@@ -0,0 +1,3 @@
+<svg class="fu-circle-svg" width="100%" height="100%">
+    <circle cx="50%" cy="50%" r="43.75%" [style.stroke-width]="strokeWidth" [style.animation-duration]="animationSpeed + 's'"/>
+</svg>
diff --git a/projects/fusion-ui/components/loader/v4/loader.component.scss b/projects/fusion-ui/components/loader/v4/loader.component.scss
@@ -0,0 +1,41 @@
+$pi: 3.14159265358979;
+
+:host {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+
+    box-sizing: border-box;
+    position: relative;
+    color: #ccc;
+
+    .fu-circle-svg {
+        margin: 0 auto;
+        box-sizing: content-box;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .fu-circle-svg circle {
+        stroke: currentColor;
+        fill: transparent;
+        transform-origin: center;
+        stroke-dasharray: calc($pi * 50% * 2);
+        animation: spinner linear 0s infinite normal none running;
+        animation-duration: 1.4s
+    }
+
+    @keyframes spinner {
+        from {
+            stroke-dashoffset: calc($pi * 50% * 2);
+            transform: rotateZ(0deg);
+        }
+        to {
+            stroke-dashoffset: calc(calc($pi * 50% * 2) * -1);
+            transform: rotateZ(390deg);
+        }
+    }
+}
diff --git a/projects/fusion-ui/components/loader/v4/loader.component.spec.ts b/projects/fusion-ui/components/loader/v4/loader.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ LoaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/fusion-ui/components/loader/v4/loader.component.stories.ts b/projects/fusion-ui/components/loader/v4/loader.component.stories.ts
@@ -0,0 +1,48 @@
+import {StoryFn, Meta} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
+import {dedent} from 'ts-dedent';
+import {CommonModule} from '@angular/common';
+import {LoaderComponent} from '@ironsource/fusion-ui/components/loader/v4';
+
+export default {
+    title: 'V4/Components/Loader',
+    component: LoaderComponent,
+    decorators: [
+        moduleMetadata({
+            declarations: [],
+            imports: [CommonModule]
+        })
+    ],
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: dedent`
+A loader web component is a visual element designed to indicate that content or data is being loaded or processed on a webpage. The loader informs users that the system is working in the background to fetch or process information, preventing confusion or frustration during brief delays. Loader web components enhance user experience by providing a clear visual cue of ongoing activity, allowing users to understand that their request is being handled.
+
+##Usage
+- Put \`\`\`import { LoaderComponent } from '@ironsource/fusion-ui/components/loader/v4';\`\`\` in your component script block
+- Add it to your component (if it standalone component) or module import  \`\`\`imports: [CommonModule, LoaderComponent],\`\`\`
+- And use it in component template: \`\`\`<fusion-loader [style.width]="size" [style.height]="size" [strokeWidth]="strokeWidth"></fusion-loader>\`\`\`
+                `
+            }
+        },
+        options: {
+            showPanel: true,
+            panelPosition: 'bottom'
+        }
+    },
+    args: {
+        size: '100px',
+        strokeWidth: 2
+    }
+} as Meta<LoaderComponent>;
+
+const LoaderTemplate: StoryFn<LoaderComponent> = (args: LoaderComponent) => ({
+    props: args,
+    template: `<fusion-loader [style.width]="size" [style.height]="size" [strokeWidth]="strokeWidth"></fusion-loader>`
+});
+
+export const Basic = {
+    render: LoaderTemplate
+};
diff --git a/projects/fusion-ui/components/loader/v4/loader.component.ts b/projects/fusion-ui/components/loader/v4/loader.component.ts
@@ -0,0 +1,22 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+@Component({
+    selector: 'fusion-loader',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './loader.component.html',
+    styleUrls: ['./loader.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoaderComponent {
+    @Input() set strokeWidth(value: number) {
+        this._strokeWidth = value;
+    }
+
+    get strokeWidth(): number {
+        return this._strokeWidth ?? 2;
+    }
+
+    private _strokeWidth: number;
+}
diff --git a/projects/fusion-ui/components/loader/v4/ng-package.json b/projects/fusion-ui/components/loader/v4/ng-package.json
@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    },
+    "allowedNonPeerDependencies": ["."]
+}
diff --git a/projects/fusion-ui/components/loader/v4/public-api.ts b/projects/fusion-ui/components/loader/v4/public-api.ts
@@ -0,0 +1 @@
+export * from './loader.component';
diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx
@@ -139,21 +139,16 @@ ul li{
 When used correctly, UI icons can speed up user interactions by being immediately recognizable, and they can also add style and visual interest to your user interface designs.
 
 <h1 class="subtitle-border-bottom">Usage</h1>
-<div class="text-block">Put ```import { Icon } from '@/components/icon/v4';``` in your component script block</div>
-<div class="text-block">and ```<Icon name="palette" size="16px" color="blue" />``` in your template for use phosphor regular "palette" icon.</div>
+<div class="text-block">Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` in your component / module script block</div>
+<div class="text-block">Add it to your component (if it standalone component) or module import  ```imports: [CommonModule, IconModule],```</div>
+<div class="text-block">and ```<fusion-icon [name]="iconName"></fusion-icon>``` in your components template.</div>
 
 <h1 class="subtitle-border-bottom">Props</h1>
-- name (string) - icon name;
-- size (string) - icon size;
-- color (string) - icon color *("currentColor" by default)*;
-- type ('regular' | 'bold'  | 'fill' | 'branded' | 'ad-unit' | 'ab-test') - icon type (phosphor "regular" by default);
+- name (string) - icon name with icon type as prefix of name property (e.g. 'ph/regular/arrow-left' or 'v4/branded/ironsource');
+    - types('ph/regular' | 'ph/bold'  | 'ph/fill' | 'v4/branded' | 'v4/ad-unit' | 'v4ab-test');
+- size you can set as style property
+- color icon get as currentColor from wrapper component
 
-<div class="info-block">
-    <h4>Note:</h4>
-    - Phosphor icons default type regular, no need set it. ```<Icon name="calendar" size="16px" />```. <br/> If you need use other type ("bold" or "fill"), set it: ```<Icon type="bold" name="calendar" size="16px" />```
-    - Monochrome icons get current color of element-wrapper by default, or use "color" property to set it.
-    - Colored icons, like on A/B test section, don't put "color" property to component: ```<Icon type="ab-test" name="ab" />```.
-</div>
 
 <h1 class="subtitle-border-bottom">Stories</h1>