From f0b41583027cdcd418b9e78e2f3b403513177533 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 14 Dec 2023 17:06:10 +0200 Subject: [PATCH] feat(isct-137): added loader component v4 --- .../button/v4/button.component.html | 2 +- .../button/v4/button.component.scss | 31 +----------- .../components/button/v4/button.component.ts | 3 +- .../button/v4/icon-button.component.ts | 3 +- .../common/base/loader.base.component.ts | 11 +++++ .../fusion-ui/components/loader/v4/index.ts | 1 + .../loader/v4/loader.component.html | 3 ++ .../loader/v4/loader.component.scss | 41 ++++++++++++++++ .../loader/v4/loader.component.spec.ts | 23 +++++++++ .../loader/v4/loader.component.stories.ts | 48 +++++++++++++++++++ .../components/loader/v4/loader.component.ts | 22 +++++++++ .../components/loader/v4/ng-package.json | 7 +++ .../components/loader/v4/public-api.ts | 1 + .../storybook-foundations/v4/icons/icons.mdx | 19 +++----- 14 files changed, 170 insertions(+), 45 deletions(-) create mode 100644 projects/fusion-ui/components/loader/v4/index.ts create mode 100644 projects/fusion-ui/components/loader/v4/loader.component.html create mode 100644 projects/fusion-ui/components/loader/v4/loader.component.scss create mode 100644 projects/fusion-ui/components/loader/v4/loader.component.spec.ts create mode 100644 projects/fusion-ui/components/loader/v4/loader.component.stories.ts create mode 100644 projects/fusion-ui/components/loader/v4/loader.component.ts create mode 100644 projects/fusion-ui/components/loader/v4/ng-package.json create mode 100644 projects/fusion-ui/components/loader/v4/public-api.ts diff --git a/projects/fusion-ui/components/button/v4/button.component.html b/projects/fusion-ui/components/button/v4/button.component.html index d34082fd9..01200d8ae 100644 --- a/projects/fusion-ui/components/button/v4/button.component.html +++ b/projects/fusion-ui/components/button/v4/button.component.html @@ -4,6 +4,6 @@
- +
diff --git a/projects/fusion-ui/components/button/v4/button.component.scss b/projects/fusion-ui/components/button/v4/button.component.scss index 265ded0f5..ee5aa5889 100644 --- 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 index 7dbb9e097..0d295cc6a 100644 --- 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 index 426fd64f5..52f29a7a9 100644 --- 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 index c51fc054e..d7fbb9c04 100644 --- 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 new file mode 100644 index 000000000..7e1a213e3 --- /dev/null +++ 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 new file mode 100644 index 000000000..838866415 --- /dev/null +++ b/projects/fusion-ui/components/loader/v4/loader.component.html @@ -0,0 +1,3 @@ + + + diff --git a/projects/fusion-ui/components/loader/v4/loader.component.scss b/projects/fusion-ui/components/loader/v4/loader.component.scss new file mode 100644 index 000000000..e70239e2a --- /dev/null +++ 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 new file mode 100644 index 000000000..23ef21fb7 --- /dev/null +++ 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; + + 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 new file mode 100644 index 000000000..562c01ff4 --- /dev/null +++ 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: \`\`\`\`\`\` + ` + } + }, + options: { + showPanel: true, + panelPosition: 'bottom' + } + }, + args: { + size: '100px', + strokeWidth: 2 + } +} as Meta; + +const LoaderTemplate: StoryFn = (args: LoaderComponent) => ({ + props: args, + template: `` +}); + +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 new file mode 100644 index 000000000..cc4e9cd59 --- /dev/null +++ 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 new file mode 100644 index 000000000..d9b2030ce --- /dev/null +++ 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 new file mode 100644 index 000000000..ab22584e4 --- /dev/null +++ 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 index f329c37d2..0d21c47a7 100644 --- 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.

Usage

-
Put ```import { Icon } from '@/components/icon/v4';``` in your component script block
-
and `````` in your template for use phosphor regular "palette" icon.
+
Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` in your component / module script block
+
Add it to your component (if it standalone component) or module import ```imports: [CommonModule, IconModule],```
+
and `````` in your components template.

Props

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

Note:

- - Phosphor icons default type regular, no need set it. ``````.
If you need use other type ("bold" or "fill"), set it: `````` - - 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: ``````. -

Stories