From c291698bd56c4b6261a5384e0dce547668a6bed2 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Mon, 30 Dec 2024 16:44:32 +0200 Subject: [PATCH 01/15] DS-248: WIP Spinner component boilerplate --- ngx-fudis/.storybook/preview.js | 1 + .../components/spinner/spinner.component.html | 8 ++++++ .../components/spinner/spinner.component.scss | 0 .../spinner/spinner.component.spec.ts | 23 ++++++++++++++++ .../components/spinner/spinner.component.ts | 10 +++++++ .../src/lib/components/spinner/spinner.mdx | 1 + .../lib/components/spinner/spinner.stories.ts | 27 +++++++++++++++++++ .../projects/ngx-fudis/src/public-api.ts | 1 + 8 files changed, 71 insertions(+) create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts diff --git a/ngx-fudis/.storybook/preview.js b/ngx-fudis/.storybook/preview.js index bd340bff4..65c370859 100644 --- a/ngx-fudis/.storybook/preview.js +++ b/ngx-fudis/.storybook/preview.js @@ -106,6 +106,7 @@ const preview = { "Link", "Notification", "Section", + "Spinner", "Typography", ], "Directives", diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html new file mode 100644 index 000000000..7dcabcc18 --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html @@ -0,0 +1,8 @@ + + + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts new file mode 100644 index 000000000..ff46315ec --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SpinnerComponent } from './spinner.component'; + +describe('SpinnerComponent', () => { + let component: SpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SpinnerComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts new file mode 100644 index 000000000..55fa543bf --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'fudis-spinner', + standalone: true, + imports: [], + templateUrl: './spinner.component.html', + styleUrl: './spinner.component.scss', +}) +export class SpinnerComponent {} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx new file mode 100644 index 000000000..52755da3e --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx @@ -0,0 +1 @@ +# Spinner Component diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts new file mode 100644 index 000000000..6e98892bf --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts @@ -0,0 +1,27 @@ +import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; +import docs from './spinner.mdx'; +import { SpinnerComponent } from './spinner.component'; + +export default { + title: 'Components/Spinner', + component: SpinnerComponent, + decorators: [ + moduleMetadata({ + imports: [SpinnerComponent], + providers: [], + declarations: [], + }), + ], + parameters: { + docs: { + page: docs, + }, + }, +} as Meta; + +const html = String.raw; + +export const Example: StoryFn = (args) => ({ + ...args, + template: html` `, +}); diff --git a/ngx-fudis/projects/ngx-fudis/src/public-api.ts b/ngx-fudis/projects/ngx-fudis/src/public-api.ts index 3734437c7..17a813d49 100644 --- a/ngx-fudis/projects/ngx-fudis/src/public-api.ts +++ b/ngx-fudis/projects/ngx-fudis/src/public-api.ts @@ -87,6 +87,7 @@ export { SelectComponent } from './lib/components/form/select/select/select.comp export { SelectGroupComponent } from './lib/components/form/select/common/select-group/select-group.component'; export { SelectOptionComponent } from './lib/components/form/select/select/select-option/select-option.component'; export { SelectOptionsDirective } from './lib/components/form/select/common/select-options-directive/select-options.directive'; +export { SpinnerComponent } from './lib/components/spinner/spinner.component'; export { TextAreaComponent } from './lib/components/form/text-area/text-area.component'; export { TextInputComponent } from './lib/components/form/text-input/text-input.component'; export { TooltipDirective } from './lib/directives/tooltip/tooltip.directive'; From 8ffcb3a916edd83de2cdd3d257bdd428ae279c48 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Mon, 30 Dec 2024 17:27:06 +0200 Subject: [PATCH 02/15] DS-248: spinner v1 --- .../components/spinner/spinner.component.html | 34 ++++++++++---- .../components/spinner/spinner.component.scss | 45 +++++++++++++++++++ .../components/spinner/spinner.component.ts | 23 ++++++++-- .../src/lib/components/spinner/spinner.mdx | 10 +++++ .../lib/components/spinner/spinner.stories.ts | 20 ++++++--- .../services/translation/translationKeys.ts | 4 ++ .../src/lib/theme/display-theme.scss | 1 + 7 files changed, 121 insertions(+), 16 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html index 7dcabcc18..fb09f1f22 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html @@ -1,8 +1,26 @@ - - - + + + + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss index e69de29bb..652cc69aa 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss @@ -0,0 +1,45 @@ +@use '../../foundations/colors/tokens.scss' as colors; +@use '../../foundations/spacing/tokens.scss' as spacing; + +/* stylelint-disable-next-line unit-disallowed-list */ +$lg-size: calc(3rem / var(--fudis-rem-multiplier)); // 48px +/* stylelint-disable-next-line unit-disallowed-list */ +$max-width: calc(16rem / var(--fudis-rem-multiplier)); // 256px + +.fudis-spinner { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + max-width: $max-width; + + &__variant { + &__sm { + margin-top: spacing.$spacing-xxs; + margin-bottom: spacing.$spacing-xs; + width: spacing.$spacing-md; + height: spacing.$spacing-md; + } + + &__lg { + margin-bottom: spacing.$spacing-sm; + width: $lg-size; + height: $lg-size; + } + } + + &__svg { + animation: spin 1.5s linear infinite; + fill: colors.$color-primary; + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts index 55fa543bf..32f054dbd 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts @@ -1,10 +1,27 @@ -import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Component, Input } from '@angular/core'; +import { FudisTranslationService } from '../../services/translation/translation.service'; +import { NgxFudisModule } from '../../ngx-fudis.module'; @Component({ selector: 'fudis-spinner', standalone: true, - imports: [], + imports: [CommonModule, NgxFudisModule], templateUrl: './spinner.component.html', styleUrl: './spinner.component.scss', }) -export class SpinnerComponent {} +export class SpinnerComponent { + constructor(protected _translationService: FudisTranslationService) {} + + /** + * Visible label text displayed under the spinner icon. If not provided, default text 'Loading' is used + */ + @Input() label: string; + + /** + * Size variant + */ + @Input() variant: 'sm' | 'lg' = 'sm'; + + tempVariantArray = ['sm', 'lg']; +} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx index 52755da3e..4f5996e6e 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx @@ -1 +1,11 @@ +import { ArgTypes, Meta, Canvas } from "@storybook/blocks"; +import { SpinnerComponent } from "./spinner.component.ts"; +import * as SpinnerStories from "./spinner.stories.ts"; + + + # Spinner Component + + + + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts index 6e98892bf..4c7a57469 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts @@ -17,11 +17,21 @@ export default { page: docs, }, }, + argTypes: { + variant: { + options: ['sm', 'lg'], + control: { type: 'radio' }, + }, + }, } as Meta; -const html = String.raw; - -export const Example: StoryFn = (args) => ({ - ...args, - template: html` `, +const Template: StoryFn = (args) => ({ + props: args, }); + +export const Example = Template.bind({}); + +Example.args = { + variant: 'sm', + label: 'Loading text. Erase me to revert to default text.', +}; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts index 115c27d3e..48384e519 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts @@ -75,6 +75,7 @@ export interface FudisTranslationConfig { FUNIDATA_LOGO: string; }; ATTENTION: string; + LOADING: string; LANGUAGE_BADGE: { ARIA_LABEL: FudisTranslationLanguageBadgeAriaLabel; }; @@ -160,6 +161,7 @@ export const en: FudisTranslationConfig = { FUNIDATA_LOGO: 'Funidata homepage', }, ATTENTION: 'Attention', + LOADING: 'Loading', LANGUAGE_BADGE: { ARIA_LABEL: { FI: 'Change translation to Finnish', @@ -241,6 +243,7 @@ export const fi: FudisTranslationConfig = { FUNIDATA_LOGO: 'Funidatan kotisivut', }, ATTENTION: 'Huomio', + LOADING: 'Ladataan', LANGUAGE_BADGE: { ARIA_LABEL: { FI: 'Vaihda käännöskieleksi Suomi', @@ -322,6 +325,7 @@ export const sv: FudisTranslationConfig = { EXTERNAL_LINK: '(öppnas i en ny flik)', }, ATTENTION: 'Observera', + LOADING: 'Laddar', LANGUAGE_BADGE: { ARIA_LABEL: { FI: 'Ändra översättning till Finska', diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss b/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss index da2cd4dae..173aa14f5 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss @@ -17,6 +17,7 @@ fudis-radio-button-group, fudis-multiselect, fudis-section, fudis-select, +fudis-spinner, fudis-text-area, fudis-text-input { display: block; From 5babca0836b369bed3a549f21963e3b15ef5e499 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Mon, 30 Dec 2024 17:28:47 +0200 Subject: [PATCH 03/15] DS-248: prettier fix --- .../src/lib/components/spinner/spinner.component.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts index ff46315ec..e184823f9 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts @@ -8,9 +8,8 @@ describe('SpinnerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SpinnerComponent] - }) - .compileComponents(); + imports: [SpinnerComponent], + }).compileComponents(); fixture = TestBed.createComponent(SpinnerComponent); component = fixture.componentInstance; From a5ab5b7792e002a0463f85f3ed5b594cc388c228 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Mon, 30 Dec 2024 17:38:14 +0200 Subject: [PATCH 04/15] DS-248: spinner to sandbox --- ngx-fudis/projects/dev/src/app/app.component.html | 6 ++++-- ngx-fudis/projects/dev/src/app/app.module.ts | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ngx-fudis/projects/dev/src/app/app.component.html b/ngx-fudis/projects/dev/src/app/app.component.html index 9ac93813e..ac0649d30 100644 --- a/ngx-fudis/projects/dev/src/app/app.component.html +++ b/ngx-fudis/projects/dev/src/app/app.component.html @@ -4,19 +4,21 @@ 1 rem = {{ visibleRemValue }}px Font size is {{ fontSize }} + - Welcome to Fudis sandbox + Welcome to Fudis sandbox Whoops! Here is danger notificationWhoops! Here is danger notification + Date: Tue, 31 Dec 2024 10:39:05 +0200 Subject: [PATCH 05/15] DS-248: rename Spinner to Loading Spinner --- ngx-fudis/.storybook/preview.js | 2 +- .../projects/dev/src/app/app.component.html | 2 +- ngx-fudis/projects/dev/src/app/app.module.ts | 4 +- .../loading-spinner.component.html | 21 +++++++ .../loading-spinner.component.scss} | 2 +- .../loading-spinner.component.spec.ts} | 12 ++-- .../loading-spinner.component.ts} | 10 ++-- .../loading-spinner/loading-spinner.mdx | 35 ++++++++++++ .../loading-spinner.stories.ts | 56 +++++++++++++++++++ .../components/spinner/spinner.component.html | 26 --------- .../src/lib/components/spinner/spinner.mdx | 11 ---- .../lib/components/spinner/spinner.stories.ts | 37 ------------ .../src/lib/theme/display-theme.scss | 2 +- .../projects/ngx-fudis/src/public-api.ts | 2 +- 14 files changed, 129 insertions(+), 93 deletions(-) create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html rename ngx-fudis/projects/ngx-fudis/src/lib/components/{spinner/spinner.component.scss => loading-spinner/loading-spinner.component.scss} (97%) rename ngx-fudis/projects/ngx-fudis/src/lib/components/{spinner/spinner.component.spec.ts => loading-spinner/loading-spinner.component.spec.ts} (50%) rename ngx-fudis/projects/ngx-fudis/src/lib/components/{spinner/spinner.component.ts => loading-spinner/loading-spinner.component.ts} (77%) create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts delete mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html delete mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx delete mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts diff --git a/ngx-fudis/.storybook/preview.js b/ngx-fudis/.storybook/preview.js index 65c370859..d3d358ef5 100644 --- a/ngx-fudis/.storybook/preview.js +++ b/ngx-fudis/.storybook/preview.js @@ -104,9 +104,9 @@ const preview = { "Icon", "Language Badge Group", "Link", + "Loading Spinner", "Notification", "Section", - "Spinner", "Typography", ], "Directives", diff --git a/ngx-fudis/projects/dev/src/app/app.component.html b/ngx-fudis/projects/dev/src/app/app.component.html index ac0649d30..b6f071adf 100644 --- a/ngx-fudis/projects/dev/src/app/app.component.html +++ b/ngx-fudis/projects/dev/src/app/app.component.html @@ -4,7 +4,7 @@ 1 rem = {{ visibleRemValue }}px Font size is {{ fontSize }} - + diff --git a/ngx-fudis/projects/dev/src/app/app.module.ts b/ngx-fudis/projects/dev/src/app/app.module.ts index 04521819e..db1a57594 100644 --- a/ngx-fudis/projects/dev/src/app/app.module.ts +++ b/ngx-fudis/projects/dev/src/app/app.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgxFudisModule, SpinnerComponent } from 'ngx-fudis'; +import { NgxFudisModule, LoadingSpinnerComponent } from 'ngx-fudis'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { ScrollingModule } from '@angular/cdk/scrolling'; @@ -31,7 +31,7 @@ import { DialogTestFormComponent } from './dialog-test/dialog-test-content/dialo NgxFudisModule, ScrollingModule, TranslocoRootModule, - SpinnerComponent, + LoadingSpinnerComponent, RouterModule.forRoot([]), ], providers: [ diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html new file mode 100644 index 000000000..2d66aaaf9 --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html @@ -0,0 +1,21 @@ + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss similarity index 97% rename from ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss rename to ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss index 652cc69aa..ec750d13f 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss @@ -6,7 +6,7 @@ $lg-size: calc(3rem / var(--fudis-rem-multiplier)); // 48px /* stylelint-disable-next-line unit-disallowed-list */ $max-width: calc(16rem / var(--fudis-rem-multiplier)); // 256px -.fudis-spinner { +.fudis-loading-spinner { display: inline-flex; flex-direction: column; align-items: center; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts similarity index 50% rename from ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts rename to ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts index e184823f9..24d148f97 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts @@ -1,17 +1,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SpinnerComponent } from './spinner.component'; +import { LoadingSpinnerComponent } from './loading-spinner.component'; -describe('SpinnerComponent', () => { - let component: SpinnerComponent; - let fixture: ComponentFixture; +describe('LoadingSpinnerComponent', () => { + let component: LoadingSpinnerComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SpinnerComponent], + imports: [LoadingSpinnerComponent], }).compileComponents(); - fixture = TestBed.createComponent(SpinnerComponent); + fixture = TestBed.createComponent(LoadingSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts similarity index 77% rename from ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts rename to ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts index 32f054dbd..c8796ebc2 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts @@ -4,13 +4,13 @@ import { FudisTranslationService } from '../../services/translation/translation. import { NgxFudisModule } from '../../ngx-fudis.module'; @Component({ - selector: 'fudis-spinner', + selector: 'fudis-loading-spinner', standalone: true, imports: [CommonModule, NgxFudisModule], - templateUrl: './spinner.component.html', - styleUrl: './spinner.component.scss', + templateUrl: './loading-spinner.component.html', + styleUrl: './loading-spinner.component.scss', }) -export class SpinnerComponent { +export class LoadingSpinnerComponent { constructor(protected _translationService: FudisTranslationService) {} /** @@ -22,6 +22,4 @@ export class SpinnerComponent { * Size variant */ @Input() variant: 'sm' | 'lg' = 'sm'; - - tempVariantArray = ['sm', 'lg']; } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx new file mode 100644 index 000000000..adf311fad --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx @@ -0,0 +1,35 @@ +import { ArgTypes, Meta, Canvas } from "@storybook/blocks"; +import { LoadingSpinnerComponent } from "./loading-spinner.component.ts"; +import * as LoadingSpinnerStories from "./loading-spinner.stories.ts"; + + + +# Loading Spinner Component + +Loading Spinner Component is used to communicate about delayed application loading state of the full page, or part of the viewed page. + +Components consists of: + +- Icon SVG +- Customisable Label text, where Fudis will provide default 'Loading' text for English, Finnish and Swedish. + +## Usage Guidelines + +Application should determine case by case, if use of Loading Spinner would make sense. + +### General Guidelines + +- Loading Spinner is displayed, if loading takes longer than 2 seconds + +### Section or part of the page + +- Use smaller `variant` of `sm` +- If user focus is in the Loading Spinner, when loading is finished, focus should moved to the first element meaningful element. + +### Full page + +- Use larger `variant` of `lg` + + + + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts new file mode 100644 index 000000000..e71feba38 --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts @@ -0,0 +1,56 @@ +import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; +import docs from './loading-spinner.mdx'; +import { LoadingSpinnerComponent } from './loading-spinner.component'; + +export default { + title: 'Components/Loading Spinner', + component: LoadingSpinnerComponent, + decorators: [ + moduleMetadata({ + imports: [LoadingSpinnerComponent], + providers: [], + declarations: [], + }), + ], + parameters: { + docs: { + page: docs, + }, + }, + argTypes: { + variant: { + options: ['sm', 'lg'], + control: { type: 'radio' }, + }, + }, +} as Meta; + +const html = String.raw; + +const Template: StoryFn = (args) => ({ + props: args, +}); + +export const Example = Template.bind({}); + +Example.args = { + variant: 'sm', + label: '', +}; + +const loadingText = 'Longer spinner loading text to see that alignment and linebreaks work.'; + +const AllVariantsTemplate: StoryFn = () => ({ + props: { label: loadingText }, + template: html` + + + + + + + + `, +}); + +export const AllVariants = AllVariantsTemplate.bind({}); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html deleted file mode 100644 index fb09f1f22..000000000 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.component.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx deleted file mode 100644 index 4f5996e6e..000000000 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { ArgTypes, Meta, Canvas } from "@storybook/blocks"; -import { SpinnerComponent } from "./spinner.component.ts"; -import * as SpinnerStories from "./spinner.stories.ts"; - - - -# Spinner Component - - - - diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts deleted file mode 100644 index 4c7a57469..000000000 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/spinner/spinner.stories.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; -import docs from './spinner.mdx'; -import { SpinnerComponent } from './spinner.component'; - -export default { - title: 'Components/Spinner', - component: SpinnerComponent, - decorators: [ - moduleMetadata({ - imports: [SpinnerComponent], - providers: [], - declarations: [], - }), - ], - parameters: { - docs: { - page: docs, - }, - }, - argTypes: { - variant: { - options: ['sm', 'lg'], - control: { type: 'radio' }, - }, - }, -} as Meta; - -const Template: StoryFn = (args) => ({ - props: args, -}); - -export const Example = Template.bind({}); - -Example.args = { - variant: 'sm', - label: 'Loading text. Erase me to revert to default text.', -}; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss b/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss index 173aa14f5..d3f91d761 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss @@ -17,7 +17,7 @@ fudis-radio-button-group, fudis-multiselect, fudis-section, fudis-select, -fudis-spinner, +fudis-loading-spinner, fudis-text-area, fudis-text-input { display: block; diff --git a/ngx-fudis/projects/ngx-fudis/src/public-api.ts b/ngx-fudis/projects/ngx-fudis/src/public-api.ts index 17a813d49..f97d1ea33 100644 --- a/ngx-fudis/projects/ngx-fudis/src/public-api.ts +++ b/ngx-fudis/projects/ngx-fudis/src/public-api.ts @@ -87,7 +87,7 @@ export { SelectComponent } from './lib/components/form/select/select/select.comp export { SelectGroupComponent } from './lib/components/form/select/common/select-group/select-group.component'; export { SelectOptionComponent } from './lib/components/form/select/select/select-option/select-option.component'; export { SelectOptionsDirective } from './lib/components/form/select/common/select-options-directive/select-options.directive'; -export { SpinnerComponent } from './lib/components/spinner/spinner.component'; +export { LoadingSpinnerComponent } from './lib/components/loading-spinner/loading-spinner.component'; export { TextAreaComponent } from './lib/components/form/text-area/text-area.component'; export { TextInputComponent } from './lib/components/form/text-input/text-input.component'; export { TooltipDirective } from './lib/directives/tooltip/tooltip.directive'; From 8008f62e3eefdd2a755872070b30615b730a13c2 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Tue, 31 Dec 2024 12:45:36 +0200 Subject: [PATCH 06/15] DS-248: docs and translations --- .../loading-spinner.component.html | 2 +- .../loading-spinner.component.ts | 33 ++++++++++++++++--- .../loading-spinner/loading-spinner.mdx | 25 +++++++++++++- .../loading-spinner.stories.ts | 5 +++ .../services/translation/translationKeys.ts | 24 +++++++++++--- 5 files changed, 79 insertions(+), 10 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html index 2d66aaaf9..f9859f031 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html @@ -16,6 +16,6 @@ {{ - label || _translationService.getTranslations()().LOADING + label || _translationService.getTranslations()().LOADING_SPINNER.LOADING }} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts index c8796ebc2..e7a38a2a7 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts @@ -1,7 +1,8 @@ import { CommonModule } from '@angular/common'; -import { Component, Input } from '@angular/core'; +import { Component, Input, OnChanges } from '@angular/core'; import { FudisTranslationService } from '../../services/translation/translation.service'; import { NgxFudisModule } from '../../ngx-fudis.module'; +import { FudisComponentChanges } from '../../types/miscellaneous'; @Component({ selector: 'fudis-loading-spinner', @@ -10,16 +11,40 @@ import { NgxFudisModule } from '../../ngx-fudis.module'; templateUrl: './loading-spinner.component.html', styleUrl: './loading-spinner.component.scss', }) -export class LoadingSpinnerComponent { +export class LoadingSpinnerComponent implements OnChanges { constructor(protected _translationService: FudisTranslationService) {} /** - * Visible label text displayed under the spinner icon. If not provided, default text 'Loading' is used + * Visible label text displayed under the spinner icon. If not provided, default text 'Loading' is used. */ @Input() label: string; /** - * Size variant + * Size variant. Variant 'sm' for smaller page sections and 'lg' for full page. */ @Input() variant: 'sm' | 'lg' = 'sm'; + + /** + * Status message for screen reader users. Displayed only for 'lg' variant. Fudis provides default 'Page is loading' and 'Page load finished' texts. + */ + @Input() statusMessage: string | null; + + /** + * For variant 'lg' and better screen reader experience, instead of using *ngIf for displaying component, set this property true when loading is in progress and false, when loading is not in progress. This will trigger screen reader `statusMessage` properties accordingly. + */ + @Input() enabled: boolean = true; + + ngOnChanges(changes: FudisComponentChanges): void { + const enabled = changes.enabled; + + if (enabled && enabled.currentValue !== enabled.previousValue) { + if (enabled.currentValue) { + // From false to true + console.log('From false to true'); + } else { + // From true to false + console.log('From true to false'); + } + } + } } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx index adf311fad..5f9b6eeb4 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx @@ -20,15 +20,38 @@ Application should determine case by case, if use of Loading Spinner would make ### General Guidelines - Loading Spinner is displayed, if loading takes longer than 2 seconds +- When loading is in progress, user focus should not be automatically moved to loadable section during loading ### Section or part of the page - Use smaller `variant` of `sm` -- If user focus is in the Loading Spinner, when loading is finished, focus should moved to the first element meaningful element. +- If user focus is in the Loading Spinner, focus should moved to the first element meaningful element after loading is finished ### Full page - Use larger `variant` of `lg` +- After loading is finished, user focus should be as initially after page load, e. g. in the `h1` title element +- Component communicates loading status for screen reader users with ARIA attributes. With variant `lg` Fudis automatically communicates status messages 'Page is loading' and 'Page load finished'. This can be overriden by app using `statusMessage` property. + +## Design + +### Common + +- SVG fill color: primary (e.g. Sisu #1076DB) +- Component max width: 256px + +### Variant `sm` + +- Icon size: 24px \* 24px +- Label text: Body Text regular md +- Margin top: 24px +- Horizontally centered + +### Variant `lg` + +- Icon size: 48px \* 48px +- Label text: Body Text regular lg +- Horizontally and vertically centered diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts index e71feba38..d8c973654 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts @@ -22,6 +22,10 @@ export default { options: ['sm', 'lg'], control: { type: 'radio' }, }, + enabled: { + options: [true, false], + control: { type: 'radio' }, + }, }, } as Meta; @@ -36,6 +40,7 @@ export const Example = Template.bind({}); Example.args = { variant: 'sm', label: '', + enabled: true, }; const loadingText = 'Longer spinner loading text to see that alignment and linebreaks work.'; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts index 48384e519..78023d470 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts @@ -75,7 +75,11 @@ export interface FudisTranslationConfig { FUNIDATA_LOGO: string; }; ATTENTION: string; - LOADING: string; + LOADING_SPINNER: { + LOADING: string; + PAGE_LOADING: string; + PAGE_LOAD_FINISHED: string; + }; LANGUAGE_BADGE: { ARIA_LABEL: FudisTranslationLanguageBadgeAriaLabel; }; @@ -161,7 +165,11 @@ export const en: FudisTranslationConfig = { FUNIDATA_LOGO: 'Funidata homepage', }, ATTENTION: 'Attention', - LOADING: 'Loading', + LOADING_SPINNER: { + LOADING: 'Loading', + PAGE_LOADING: 'Page is loading', + PAGE_LOAD_FINISHED: 'Page load finished', + }, LANGUAGE_BADGE: { ARIA_LABEL: { FI: 'Change translation to Finnish', @@ -243,7 +251,11 @@ export const fi: FudisTranslationConfig = { FUNIDATA_LOGO: 'Funidatan kotisivut', }, ATTENTION: 'Huomio', - LOADING: 'Ladataan', + LOADING_SPINNER: { + LOADING: 'Ladataan', + PAGE_LOADING: 'Sivua ladataan', + PAGE_LOAD_FINISHED: 'Sivu on ladattu', + }, LANGUAGE_BADGE: { ARIA_LABEL: { FI: 'Vaihda käännöskieleksi Suomi', @@ -325,7 +337,11 @@ export const sv: FudisTranslationConfig = { EXTERNAL_LINK: '(öppnas i en ny flik)', }, ATTENTION: 'Observera', - LOADING: 'Laddar', + LOADING_SPINNER: { + LOADING: 'Laddar', + PAGE_LOADING: 'Sidan laddas', + PAGE_LOAD_FINISHED: 'Sidan har laddats klart', + }, LANGUAGE_BADGE: { ARIA_LABEL: { FI: 'Ändra översättning till Finska', From 6b4806dcdeb907d54deee76b228a12e4cc96a2f2 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Tue, 31 Dec 2024 13:40:38 +0200 Subject: [PATCH 07/15] DS-248: Storybook examples --- .../loading-spinner-example.component.html | 17 +++++++++ .../loading-spinner-example.component.scss | 36 +++++++++++++++++++ .../loading-spinner-example.component.ts | 24 +++++++++++++ .../loading-spinner.stories.ts | 34 +++++++++++++++--- .../src/lib/theme/display-theme.scss | 6 +++- 5 files changed, 112 insertions(+), 5 deletions(-) create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.scss create mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html new file mode 100644 index 000000000..ce7cd721d --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html @@ -0,0 +1,17 @@ +@let loading = loadingState(); + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.scss new file mode 100644 index 000000000..be0be27db --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.scss @@ -0,0 +1,36 @@ +/* stylelint-disable unit-disallowed-list */ +@use '../../../foundations/borders/mixins.scss' as borders; +@use '../../../foundations/colors/mixins.scss' as colors; + +.fudis-loading-spinner-demo { + @include borders.outline('3px', 'solid', 'primary'); + + display: flex; + position: relative; + align-items: center; + justify-content: center; + max-width: 30rem; + min-height: 15rem; + + &__backdrop { + @include colors.bg-color('white'); + @include borders.outline('3px', 'solid', 'green'); + + display: flex; + position: relative; + position: absolute; + align-items: center; + justify-content: center; + transition: 1s; + width: 100%; + height: 100%; + + &--visible { + opacity: 1; + } + + &--hidden { + opacity: 0; + } + } +} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts new file mode 100644 index 000000000..6d7a58784 --- /dev/null +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts @@ -0,0 +1,24 @@ +import { Component, signal } from '@angular/core'; + +import { CommonModule } from '@angular/common'; +import { LoadingSpinnerComponent } from '../loading-spinner.component'; +import { NgxFudisModule } from '../../../ngx-fudis.module'; + +@Component({ + standalone: true, + imports: [CommonModule, LoadingSpinnerComponent, NgxFudisModule], + selector: 'example-loading-spinner-demo', + styleUrl: './loading-spinner-example.component.scss', + templateUrl: './loading-spinner-example.component.html', +}) +export class StorybookExampleLoadingSpinnerComponent { + loadingState = signal(false); + + public toggleLoading(): void { + this.loadingState.set(true); + + setTimeout(() => { + this.loadingState.set(false); + }, 3000); + } +} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts index d8c973654..dd1981429 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.stories.ts @@ -1,13 +1,14 @@ import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; import docs from './loading-spinner.mdx'; import { LoadingSpinnerComponent } from './loading-spinner.component'; +import { StorybookExampleLoadingSpinnerComponent } from './examples/loading-spinner-example.component'; export default { title: 'Components/Loading Spinner', component: LoadingSpinnerComponent, decorators: [ moduleMetadata({ - imports: [LoadingSpinnerComponent], + imports: [LoadingSpinnerComponent, StorybookExampleLoadingSpinnerComponent], providers: [], declarations: [], }), @@ -26,6 +27,9 @@ export default { options: [true, false], control: { type: 'radio' }, }, + statusMessage: { + control: { type: 'text' }, + }, }, } as Meta; @@ -41,17 +45,20 @@ Example.args = { variant: 'sm', label: '', enabled: true, + statusMessage: '', }; const loadingText = 'Longer spinner loading text to see that alignment and linebreaks work.'; -const AllVariantsTemplate: StoryFn = () => ({ - props: { label: loadingText }, - template: html` +const AllVariantsTemplate: StoryFn = (args) => ({ + props: { ...args, label: loadingText }, + template: html` + Small variants + Large variants @@ -59,3 +66,22 @@ const AllVariantsTemplate: StoryFn = () => ({ }); export const AllVariants = AllVariantsTemplate.bind({}); + +AllVariants.parameters = { + controls: { + exclude: /.*/g, + }, +}; + +const LoadingSpinnerDemoTemplate: StoryFn = (args) => ({ + props: args, + template: ``, +}); + +export const LoadingSpinnerDemo = LoadingSpinnerDemoTemplate.bind({}); + +LoadingSpinnerDemo.parameters = { + controls: { + exclude: /.*/g, + }, +}; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss b/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss index d3f91d761..90319c6ea 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/theme/display-theme.scss @@ -8,7 +8,6 @@ fudis-expandable, fudis-fieldset, fudis-footer, fudis-form, -fudis-hr, fudis-localized-text-group, fudis-heading, fudis-horizontal-rule, @@ -23,6 +22,11 @@ fudis-text-input { display: block; } +fudis-hr { + display: block; + width: 100%; // To enable full width, when used inside Grid +} + fudis-button { display: inline-block; } From 9f7bfb089515028c055062ea66f0348812646cdf Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Tue, 31 Dec 2024 14:04:34 +0200 Subject: [PATCH 08/15] DS-248: Enable manual focus for Heading component --- .../examples/loading-spinner-example.component.html | 2 +- .../examples/loading-spinner-example.component.ts | 9 ++++++++- .../components/loading-spinner/loading-spinner.mdx | 6 ++++-- .../typography/heading/heading.component.html | 12 ++++++------ .../typography/heading/heading.component.scss | 6 ++++++ .../typography/heading/heading.component.ts | 10 ++++++++-- 6 files changed, 33 insertions(+), 12 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html index ce7cd721d..a7ef2393f 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html @@ -8,7 +8,7 @@ - Welcome to Loading Spinner Demo Page Click Button below to set loading state for 3 seconds diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts index 6d7a58784..52d8c5c8b 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts @@ -1,8 +1,9 @@ -import { Component, signal } from '@angular/core'; +import { Component, signal, ViewChild } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LoadingSpinnerComponent } from '../loading-spinner.component'; import { NgxFudisModule } from '../../../ngx-fudis.module'; +import { HeadingComponent } from '../../typography/heading/heading.component'; @Component({ standalone: true, @@ -14,11 +15,17 @@ import { NgxFudisModule } from '../../../ngx-fudis.module'; export class StorybookExampleLoadingSpinnerComponent { loadingState = signal(false); + @ViewChild('headingRef') public headingRef: HeadingComponent; + public toggleLoading(): void { this.loadingState.set(true); setTimeout(() => { this.loadingState.set(false); + + setTimeout(() => { + this.headingRef.headingRef.nativeElement.focus(); + }, 100); }, 3000); } } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx index 5f9b6eeb4..da96ad46b 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx @@ -13,6 +13,10 @@ Components consists of: - Icon SVG - Customisable Label text, where Fudis will provide default 'Loading' text for English, Finnish and Swedish. +## Example + + + ## Usage Guidelines Application should determine case by case, if use of Loading Spinner would make sense. @@ -53,6 +57,4 @@ Application should determine case by case, if use of Loading Spinner would make - Label text: Body Text regular lg - Horizontally and vertically centered - - diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.html index 8eb270e6a..d3c4a4477 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.html @@ -16,37 +16,37 @@ -

+

-

+

-

+

-

+

-
+
-
+
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss index 4d37c5118..b37a172d7 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss @@ -1,5 +1,6 @@ @use '../../../foundations/typography/mixins.scss' as typography; @use '../../../foundations/colors/mixins.scss' as colorMixins; +@use '../../../foundations/focus/mixins.scss' as focus; .fudis-heading { @include colorMixins.text-color('gray-dark'); @@ -7,6 +8,11 @@ box-sizing: border-box; margin-top: 0; + // For keyboard users, where Heading tag is focused manually + &:focus-visible { + @include focus.focus-generic; + } + &__variant { &__xxs { @include typography.heading-xxs; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts index 337233cf7..2adbd89e2 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts @@ -5,6 +5,7 @@ import { OnInit, OnChanges, ElementRef, + ViewChild, } from '@angular/core'; import { FudisHeadingLevel, FudisHeadingVariant } from '../../../types/typography'; import { FudisIdService } from '../../../services/id/id.service'; @@ -22,14 +23,19 @@ import { getHeadingVariant } from '../../../utilities/typography/typography-util export class HeadingComponent implements OnInit, OnChanges { constructor( private _idService: FudisIdService, - private _headingElement: ElementRef, + private _wrapperElement: ElementRef, ) { /** * Set Heading wrapper to be "full width" if used inside Grid */ - (_headingElement.nativeElement as HTMLHeadingElement).style.gridColumn = '1/-1'; + (_wrapperElement.nativeElement as HTMLHeadingElement).style.gridColumn = '1/-1'; } + /** + * Rendered HTML Heading element, e.g.

or

tag. + */ + @ViewChild('headingRef') public headingRef: ElementRef; + /** * Semantic level of heading */ From 95447a1ae3ae9afaf586ed4d240a4b1685f1cc11 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Tue, 31 Dec 2024 15:17:20 +0200 Subject: [PATCH 09/15] DS-248: progressing --- .../loading-spinner-example.component.html | 12 ++++- .../loading-spinner-example.component.ts | 3 +- .../loading-spinner.component.html | 50 ++++++++++++------- .../loading-spinner.component.scss | 12 +++-- .../loading-spinner.component.spec.ts | 36 ++++++++++++- .../loading-spinner.component.ts | 21 ++------ .../loading-spinner/loading-spinner.mdx | 16 +++--- .../services/translation/translationKeys.ts | 8 +-- 8 files changed, 105 insertions(+), 53 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html index a7ef2393f..50d24979c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.html @@ -5,13 +5,21 @@ [class.fudis-loading-spinner-demo__backdrop--visible]="loading" [class.fudis-loading-spinner-demo__backdrop--hidden]="!loading" > - Welcome to Loading Spinner Demo Page - Click Button below to set loading state for 3 seconds + Click Button below to turn loading state on for 3 seconds. This will trigger also status + message for screen readers. + After 3s, focus handled by this demo component, will move shortly to Heading component. There + is small delay in focus, so that screen readers have some time to read out Loading Spinner's + changed status message. + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts index 52d8c5c8b..e247d431e 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples/loading-spinner-example.component.ts @@ -23,9 +23,10 @@ export class StorybookExampleLoadingSpinnerComponent { setTimeout(() => { this.loadingState.set(false); + // Enough delay, so that screen reader has time to announce from Loading Spinner that page load is finished setTimeout(() => { this.headingRef.headingRef.nativeElement.focus(); - }, 100); + }, 500); }, 3000); } } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html index f9859f031..0124e598e 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html @@ -1,21 +1,37 @@ +@let translations = _translationService.getTranslations()(); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss index ec750d13f..34faa5b2d 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.scss @@ -7,12 +7,16 @@ $lg-size: calc(3rem / var(--fudis-rem-multiplier)); // 48px $max-width: calc(16rem / var(--fudis-rem-multiplier)); // 256px .fudis-loading-spinner { - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; + display: inline-block; max-width: $max-width; + &__ui-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + &__variant { &__sm { margin-top: spacing.$spacing-xxs; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts index 24d148f97..117f3d700 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { LoadingSpinnerComponent } from './loading-spinner.component'; +import { BodyTextComponent } from '../typography/body-text/body-text.component'; describe('LoadingSpinnerComponent', () => { let component: LoadingSpinnerComponent; @@ -8,7 +9,7 @@ describe('LoadingSpinnerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [LoadingSpinnerComponent], + imports: [LoadingSpinnerComponent, BodyTextComponent], }).compileComponents(); fixture = TestBed.createComponent(LoadingSpinnerComponent); @@ -19,4 +20,37 @@ describe('LoadingSpinnerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should have correct HTML elements and classes', () => { + + }); + + describe('visual properties', () => { + describe('small (default) variant', () => { + it('should have default Loading text if label is not provided', () => {}); + + it('should have app provided label', () => {}); + + it('should have correct svg icon', () => {}); + + it('should not have visible elements, if visible is false', () => {}); + }); + + describe('large variant', () => { + it('should have default Loading text if label is not provided', () => {}); + + it('should have app provided label', () => {}); + + it('should have correct svg icon', () => {}); + + it('should not have visible elements, if visible is false', () => {}); + }); + }); + describe('screen reader elements', () => { + it('should not be present with small variant', () => {}); + + it('should have correct status message when visible is true', () => {}); + + it('should have correct status message when visible is false', () => {}); + }); }); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts index e7a38a2a7..e11d61cc7 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { FudisTranslationService } from '../../services/translation/translation.service'; import { NgxFudisModule } from '../../ngx-fudis.module'; -import { FudisComponentChanges } from '../../types/miscellaneous'; @Component({ selector: 'fudis-loading-spinner', @@ -11,7 +10,7 @@ import { FudisComponentChanges } from '../../types/miscellaneous'; templateUrl: './loading-spinner.component.html', styleUrl: './loading-spinner.component.scss', }) -export class LoadingSpinnerComponent implements OnChanges { +export class LoadingSpinnerComponent { constructor(protected _translationService: FudisTranslationService) {} /** @@ -32,19 +31,5 @@ export class LoadingSpinnerComponent implements OnChanges { /** * For variant 'lg' and better screen reader experience, instead of using *ngIf for displaying component, set this property true when loading is in progress and false, when loading is not in progress. This will trigger screen reader `statusMessage` properties accordingly. */ - @Input() enabled: boolean = true; - - ngOnChanges(changes: FudisComponentChanges): void { - const enabled = changes.enabled; - - if (enabled && enabled.currentValue !== enabled.previousValue) { - if (enabled.currentValue) { - // From false to true - console.log('From false to true'); - } else { - // From true to false - console.log('From true to false'); - } - } - } + @Input() visible: boolean = true; } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx index da96ad46b..a6818cba6 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.mdx @@ -23,19 +23,23 @@ Application should determine case by case, if use of Loading Spinner would make ### General Guidelines -- Loading Spinner is displayed, if loading takes longer than 2 seconds -- When loading is in progress, user focus should not be automatically moved to loadable section during loading +- Loading Spinner should be displayed, if loading takes longer than 2 seconds. +- When loading is in progress, user focus should not be automatically moved to loadable section during loading. ### Section or part of the page -- Use smaller `variant` of `sm` -- If user focus is in the Loading Spinner, focus should moved to the first element meaningful element after loading is finished +- Use smaller `variant` of `sm`. +- If user focus is in the Loading Spinner, focus should moved to the first meaningful element after loading is finished. ### Full page +- **IMPORTANT**: Instead of using `` use ``. This will help screen reader users, as component exists in DOM although it is not visually visible. - Use larger `variant` of `lg` -- After loading is finished, user focus should be as initially after page load, e. g. in the `h1` title element -- Component communicates loading status for screen reader users with ARIA attributes. With variant `lg` Fudis automatically communicates status messages 'Page is loading' and 'Page load finished'. This can be overriden by app using `statusMessage` property. +- Component communicates loading status for screen reader. With variant `lg` component automatically communicates status messages 'Page is loading' and 'Page load finished'. This can be overriden by app using `statusMessage` property. +- After loading is finished, user focus should be as initially after page load, e. g. in the `h1` title element. If focus is manually changed by the Application, there should be small delay before focus, so that screen reader has time to announce 'Page load finished' status. +- For code example, check repository's `StorybookExampleLoadingSpinnerComponent` example, seen below as well. Located `./ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/examples`. + + ## Design diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts index 78023d470..b8cc53d2c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translationKeys.ts @@ -76,7 +76,7 @@ export interface FudisTranslationConfig { }; ATTENTION: string; LOADING_SPINNER: { - LOADING: string; + VISIBLE_LABEL: string; PAGE_LOADING: string; PAGE_LOAD_FINISHED: string; }; @@ -166,7 +166,7 @@ export const en: FudisTranslationConfig = { }, ATTENTION: 'Attention', LOADING_SPINNER: { - LOADING: 'Loading', + VISIBLE_LABEL: 'Loading', PAGE_LOADING: 'Page is loading', PAGE_LOAD_FINISHED: 'Page load finished', }, @@ -252,7 +252,7 @@ export const fi: FudisTranslationConfig = { }, ATTENTION: 'Huomio', LOADING_SPINNER: { - LOADING: 'Ladataan', + VISIBLE_LABEL: 'Ladataan', PAGE_LOADING: 'Sivua ladataan', PAGE_LOAD_FINISHED: 'Sivu on ladattu', }, @@ -338,7 +338,7 @@ export const sv: FudisTranslationConfig = { }, ATTENTION: 'Observera', LOADING_SPINNER: { - LOADING: 'Laddar', + VISIBLE_LABEL: 'Laddar', PAGE_LOADING: 'Sidan laddas', PAGE_LOAD_FINISHED: 'Sidan har laddats klart', }, From f06db5e7194cd397746a9fa131bb89f0f072efaf Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Tue, 31 Dec 2024 15:56:41 +0200 Subject: [PATCH 10/15] DS-248: unit tests --- .../loading-spinner.component.html | 13 +- .../loading-spinner.component.spec.ts | 145 +++++++++++++++--- .../loading-spinner.component.ts | 3 +- 3 files changed, 135 insertions(+), 26 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html index 0124e598e..a6e2f2e29 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.html @@ -1,16 +1,17 @@ @let translations = _translationService.getTranslations()(); +