From ba7252f08e9dfae189f593179c622394b6511973 Mon Sep 17 00:00:00 2001 From: RiinaKuu Date: Thu, 5 Sep 2024 10:55:29 +0300 Subject: [PATCH 01/25] DS-269: Expose Alert and AlertGroup components to public API --- ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts | 4 ++-- ngx-fudis/projects/ngx-fudis/src/public-api.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts b/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts index f072c1608..bf81967a7 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts @@ -218,8 +218,8 @@ import { SelectIconsComponent } from './components/form/select/common/select-ico */ exports: [ ActionsDirective, - // AlertComponent, - // AlertGroupComponent, + AlertComponent, + AlertGroupComponent, BadgeComponent, BodyTextComponent, BreadcrumbsComponent, diff --git a/ngx-fudis/projects/ngx-fudis/src/public-api.ts b/ngx-fudis/projects/ngx-fudis/src/public-api.ts index bd25bede0..3acf2d8ec 100644 --- a/ngx-fudis/projects/ngx-fudis/src/public-api.ts +++ b/ngx-fudis/projects/ngx-fudis/src/public-api.ts @@ -6,8 +6,8 @@ export * from './lib/ngx-fudis.module'; export { ActionsDirective } from './lib/directives/content-projection/actions/actions.directive'; -// export { AlertComponent } from './lib/components/alert/alert/alert.component'; -// export { AlertGroupComponent } from './lib/components/alert/alert-group/alert-group.component'; +export { AlertComponent } from './lib/components/alert/alert/alert.component'; +export { AlertGroupComponent } from './lib/components/alert/alert-group/alert-group.component'; export { BadgeComponent } from './lib/components/badge/badge.component'; export { BodyTextComponent } from './lib/components/typography/body-text/body-text.component'; export { BreadcrumbsComponent } from './lib/components/breadcrumbs/breadcrumbs.component'; @@ -35,7 +35,7 @@ export { DescriptionListComponent } from './lib/components/description-list/desc export { DescriptionListItemComponent } from './lib/components/description-list/description-list-item/description-list-item.component'; export { DescriptionListItemDetailsComponent } from './lib/components/description-list/description-list-item/description-list-item-details/description-list-item-details.component'; export { DescriptionListItemTermComponent } from './lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component'; -// export { FudisAlertService } from './lib/services/alert/alert.service'; +export { FudisAlertService } from './lib/services/alert/alert.service'; export { FudisBreakpointService } from './lib/services/breakpoint/breakpoint.service'; export { FudisDialogService } from './lib/services/dialog/dialog.service'; export { FudisGridService } from './lib/services/grid/grid.service'; From 381693f96eb4a6aece206a7e58fba25e4fb6b793 Mon Sep 17 00:00:00 2001 From: RiinaKuu Date: Thu, 5 Sep 2024 10:59:42 +0300 Subject: [PATCH 02/25] DS-269: Expose AlertGroup inside Dialog template --- .../ngx-fudis/src/lib/components/dialog/dialog.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.html index e33406265..61d94723c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.html @@ -1,4 +1,4 @@ - +
Date: Thu, 5 Sep 2024 11:04:23 +0300 Subject: [PATCH 03/25] DS-269: Change Body Text variant logic when used inside Dialog to avoid circular dependencies --- .../components/dialog/ngMaterial-theme.scss | 10 +++++ .../body-text/body-text.component.html | 5 ++- .../body-text/body-text.component.spec.ts | 38 ++++++++----------- .../body-text/body-text.component.ts | 38 +++++++++---------- 4 files changed, 49 insertions(+), 42 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/ngMaterial-theme.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/ngMaterial-theme.scss index cb739af24..8c02c18e5 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/ngMaterial-theme.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/ngMaterial-theme.scss @@ -15,6 +15,16 @@ @use "../../foundations/breakpoints/mixins.scss" as breakpoints; @use "../../foundations/utilities/mixins.scss" as utilities; @use "../../foundations/spacing/tokens.scss" as spacing; +@use "../../foundations/typography/mixins.scss" as typography; + +.fudis-dialog { + /* Body Text inside Dialog should be md-light by default but can be altered by the App */ + & fudis-body-text { + & .fudis-body-text__default { + @include typography.body-text-md-light; + } + } +} .cdk-overlay-container { & .cdk-global-overlay-wrapper { diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.html index 41f725070..c2bf22d37 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.html @@ -1,3 +1,6 @@ -

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.spec.ts index 6def13ef5..2d1e0ca3b 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.spec.ts @@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ChangeDetectionStrategy } from '@angular/core'; import { BodyTextComponent } from './body-text.component'; import { getElement, sortClasses } from '../../../utilities/tests/utilities'; -import { fudisBodyTextArray } from '../../../types/typography'; +import { fudisBodyTextArray, fudisTextAlignArray } from '../../../types/typography'; describe('BodyTextComponent', () => { let component: BodyTextComponent; @@ -26,7 +26,7 @@ describe('BodyTextComponent', () => { //TODO: Write test for host class describe('CSS classes', () => { - it('should change CSS classes according to the given body-text variant', () => { + it('should change CSS classes according to the given body-text variant input', () => { fudisBodyTextArray.forEach((variant) => { component.variant = variant; fixture.detectChanges(); @@ -34,32 +34,26 @@ describe('BodyTextComponent', () => { const element = getElement(fixture, '.fudis-body-text'); expect(sortClasses(element.className)).toEqual( - sortClasses(`fudis-body-text fudis-body-text__left fudis-body-text__${variant}`), + sortClasses( + `fudis-body-text fudis-body-text__default fudis-body-text__left fudis-body-text__${variant}`, + ), ); }); }); - // TODO: Refactor to use helper function to test align input - it('should change CSS classes according to given body-text align', () => { - const element = getElement(fixture, '.fudis-body-text'); - - expect(sortClasses(element.className)).toEqual( - sortClasses('fudis-body-text fudis-body-text__left fudis-body-text__md-regular'), - ); - - component.align = 'center'; - fixture.detectChanges(); - - expect(sortClasses(element.className)).toEqual( - sortClasses('fudis-body-text fudis-body-text__center fudis-body-text__md-regular'), - ); + it('should change CSS classes according to the given body-text align input', () => { + fudisTextAlignArray.forEach((align) => { + component.align = align; + fixture.detectChanges(); - component.align = 'right'; - fixture.detectChanges(); + const element = getElement(fixture, '.fudis-body-text'); - expect(sortClasses(element.className)).toEqual( - sortClasses('fudis-body-text fudis-body-text__right fudis-body-text__md-regular'), - ); + expect(sortClasses(element.className)).toEqual( + sortClasses( + `fudis-body-text fudis-body-text__default fudis-body-text__${align} fudis-body-text__md-regular`, + ), + ); + }); }); }); }); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts index c5cab5e4d..3a3e6f47e 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts @@ -1,14 +1,8 @@ -import { - Component, - Input, - HostBinding, - ChangeDetectionStrategy, - Optional, - Host, -} from '@angular/core'; +import { Component, Input, HostBinding, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { FudisBodyText, FudisTextAlign } from '../../../types/typography'; -import { DialogComponent } from '../../dialog/dialog.component'; import { FudisIdService } from '../../../services/id/id.service'; +import { FudisComponentChanges } from '../../../types/miscellaneous'; +import { BehaviorSubject } from 'rxjs'; @Component({ selector: 'fudis-body-text', @@ -16,16 +10,9 @@ import { FudisIdService } from '../../../services/id/id.service'; styleUrls: ['./body-text.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BodyTextComponent { - constructor( - @Host() @Optional() private _parentDialog: DialogComponent, - private _idService: FudisIdService, - ) { +export class BodyTextComponent implements OnChanges { + constructor(private _idService: FudisIdService) { this._id = _idService.getNewId('body-text'); - - if (_parentDialog) { - this.variant = 'md-light'; - } } /** @@ -48,5 +35,18 @@ export class BodyTextComponent { */ protected _id: string; - // TODO: Enable Input spacing for marginBottom + /** + * To add default CSS class if app hasn't provided any variant + */ + protected _defaultClass = new BehaviorSubject(true); + + ngOnChanges(changes: FudisComponentChanges): void { + if (changes.variant?.currentValue !== changes.variant?.previousValue) { + if (!changes.variant?.currentValue) { + this._defaultClass.next(true); + } else { + this._defaultClass.next(false); + } + } + } } From 1c301b5d002c65bd1aedcf56b0b90164c2348b3b Mon Sep 17 00:00:00 2001 From: RiinaKuu Date: Fri, 6 Sep 2024 14:15:53 +0300 Subject: [PATCH 04/25] DS-269: Refactor Alert message to Observable, add Output for clicking link --- .../alert/alert/alert.component.html | 7 +- .../components/alert/alert/alert.component.ts | 80 ++++++++++++++----- 2 files changed, 66 insertions(+), 21 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert/alert.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert/alert.component.html index 4d78b4be2..195ed7bc0 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert/alert.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert/alert.component.html @@ -11,12 +11,13 @@ [align]="'center'" [variant]="'lg-regular'" > - {{ message }} + {{ _currentMessage }}