[Notification]: Refactor component not to strict what content is contained, remove empty spaces from body text content

ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.html

@@ -6,7 +6,7 @@
           <fudis-icon class="fudis-error-summary__icon" [icon]="'alert'"></fudis-icon>
           <div class="fudis-error-summary__errors">
             <ng-container *ngIf="helpText">
-              <fudis-body-text fudisSpacing [marginTop]="'xs'">
+              <fudis-body-text fudisSpacing [size]="'md-regular'" [marginTop]="'xs'">
                 <span class="fudis-visually-hidden">{{ _attentionText }}:&nbsp;</span
                 >{{ helpText }}</fudis-body-text
               >
@@ -21,13 +21,15 @@
                     [link]="'.'"
                     [fragmentId]="error.id"
                     [title]="error.message"
+                    [color]="'primary-dark'"
                   ></fudis-link>
                 </ng-container>
                 <ng-container *ngIf="linkType === 'href'">
                   <fudis-link
                     [size]="'md'"
                     [href]="'#' + error.id"
                     [title]="error.message"
+                    [color]="'primary-dark'"
                   ></fudis-link>
                 </ng-container>
                 <ng-container *ngIf="linkType === 'onClick'">
@@ -36,6 +38,7 @@
                     [size]="'md'"
                     [href]="'#'"
                     [title]="error.message"
+                    [color]="'primary-dark'"
                   ></fudis-link>
                 </ng-container>
               </li>

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.stories.ts

@@ -27,7 +27,9 @@ import readme from './readme.mdx';
         <fudis-button [variant]="'tertiary'" [icon]="'plus'" [label]="'Some action'" />
       </ng-template>
       <ng-template fudisNotifications [type]="'fieldset'">
-        <fudis-notification>This is notification</fudis-notification>
+        <fudis-notification
+          ><fudis-body-text>This is notification</fudis-body-text></fudis-notification
+        >
       </ng-template>
       <ng-template fudisContent [type]="'fieldset'">
         <fudis-grid [columns]="{ md: 2 }">

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/readme.mdx

@@ -102,7 +102,9 @@ HTML Template
         <fudis-button [variant]="'tertiary'" [icon]="'plus'" [label]="'Some action'" />
       </ng-template>
       <ng-template fudisNotifications [type]="'fieldset'">
-        <fudis-notification>This is notification inside fieldset</fudis-notification>
+        <fudis-notification>
+          <fudis-body-text>This is notification inside fieldset</fudis-body-text>
+        </fudis-notification>
       </ng-template>
       <ng-template fudisContent [type]="'fieldset'">
           <fudis-text-input

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts

@@ -260,7 +260,11 @@ class ExampleWithMultipleFormsComponent {
       <ng-template fudisContent [type]="'form'">
         <fudis-section [title]="'Main section'" [errorSummaryBreadcrumb]="true">
           <ng-template fudisNotifications [type]="'section'">
-            <fudis-notification>This is notification for the section</fudis-notification>
+            <fudis-notification
+              ><fudis-body-text
+                >This is notification for the section</fudis-body-text
+              ></fudis-notification
+            >
           </ng-template>
           <ng-template fudisContent [type]="'section'">
             <fudis-expandable

ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.ts

@@ -2,15 +2,18 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  Host,
   Input,
   OnChanges,
+  Optional,
   Output,
   Signal,
   effect,
 } from '@angular/core';
 import { FudisTranslationService } from '../../services/translation/translation.service';
 import { FudisComponentChanges, FudisTranslationConfig } from '../../types/miscellaneous';
 import { LinkApiDirective } from '../../directives/link/link-api/link-api.directive';
+import { NotificationComponent } from '../notification/notification.component';
 
 @Component({
   selector: 'fudis-link',
@@ -19,8 +22,16 @@ import { LinkApiDirective } from '../../directives/link/link-api/link-api.direct
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LinkComponent extends LinkApiDirective implements OnChanges {
-  constructor(private _translationService: FudisTranslationService) {
+  constructor(
+    @Host() @Optional() private _parentNotification: NotificationComponent,
+    private _translationService: FudisTranslationService,
+  ) {
     super();
+
+    if (_parentNotification) {
+      this.color = 'gray-dark';
+    }
+
     effect(() => {
       this._translations = this._translationService.getTranslations();
 
@@ -38,6 +49,7 @@ export class LinkComponent extends LinkApiDirective implements OnChanges {
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Input() link: string | any[];
+
   /**
    * Title for the link, if not defined title will be the same as link URL
    */
@@ -85,7 +97,10 @@ export class LinkComponent extends LinkApiDirective implements OnChanges {
   protected _externalLinkTitleParsed: string[];
 
   ngOnChanges(changes: FudisComponentChanges<LinkComponent>): void {
-    if (changes.externalLink || changes.title) {
+    if (
+      changes.externalLink?.currentValue !== changes.externalLink?.previousValue ||
+      changes.title?.currentValue !== changes.title?.previousValue
+    ) {
       this._parseExternalLinkTitle();
     }
   }

ngx-fudis/projects/ngx-fudis/src/lib/components/notification/nofication.component.spec.ts

@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent } from 'ng-mocks';
 import { IconComponent } from '../icon/icon.component';
-import { BodyTextComponent } from '../typography/body-text/body-text.component';
 import { LinkComponent } from '../link/link.component';
 import { NotificationComponent } from './notification.component';
 import { FudisNotification } from '../../types/miscellaneous';
@@ -16,13 +14,7 @@ describe('NotificationComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        NotificationComponent,
-        IconComponent,
-        MockComponent(BodyTextComponent),
-        LinkComponent,
-        LinkDirective,
-      ],
+      declarations: [NotificationComponent, IconComponent, LinkComponent, LinkDirective],
       imports: [RouterModule.forRoot([])],
     })
       .overrideComponent(NotificationComponent, {
@@ -46,7 +38,7 @@ describe('NotificationComponent', () => {
 
   function notificationIconCheck(variant: FudisNotification): void {
     component.variant = variant;
-    component.ngOnChanges();
+
     fixture.detectChanges();
 
     let icon: string = '';
@@ -68,15 +60,14 @@ describe('NotificationComponent', () => {
         break;
     }
 
-    const iconElement = getElement(fixture, `.fudis-icon#${icon}`);
-
-    expect(component.icon).toEqual(icon);
-    expect(iconElement).toBeTruthy();
+    const iconVariant = getElement(fixture, 'fudis-icon svg').getAttribute('id');
+    expect(iconVariant).toEqual(icon);
   }
 
   function notificationVariants(variant: FudisNotification): void {
     component.variant = variant;
     fixture.detectChanges();
+
     assertNotificationHasClasses(`fudis-notification fudis-notification__${variant}`);
   }
 
@@ -97,45 +88,4 @@ describe('NotificationComponent', () => {
       notificationIconCheck('info');
     });
   });
-
-  describe('Link inside Notification', () => {
-    beforeEach(() => {
-      component.link = ['/test-url'];
-      fixture.detectChanges();
-    });
-    it('should have default CSS class', () => {
-      const linkElement = getElement(fixture, 'fudis-link');
-
-      expect(linkElement).toBeTruthy();
-      expect(linkElement.className).toContain('fudis-notification__link');
-    });
-
-    it('should have router link element', () => {
-      const anchorElement = getElement(fixture, 'a');
-
-      expect(anchorElement).toBeTruthy();
-      expect(anchorElement.getAttribute('href')).toEqual('/test-url');
-    });
-
-    it('should replace router link with linkTitle if given', () => {
-      component.linkTitle = 'New link title';
-      fixture.detectChanges();
-
-      const anchorElement = getElement(fixture, 'a');
-
-      expect(anchorElement.textContent).toEqual('New link title');
-    });
-
-    it('should replace router link with external link', () => {
-      component.externalLink = 'www.example.com';
-      fixture.detectChanges();
-
-      const anchorElement = getElement(fixture, 'a');
-
-      expect(anchorElement.getAttribute('href')).toEqual('www.example.com');
-      expect(anchorElement.getAttribute('aria-label')).toEqual(
-        'www.example.com, (opens in a new tab)',
-      );
-    });
-  });
 });

ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.html

@@ -1,24 +1,13 @@
 <div class="fudis-notification fudis-notification__{{ variant }}">
   <ng-container *ngIf="!_content">
-    <fudis-icon [icon]="_icon" />
-    <fudis-body-text class="fudis-notification__body-text" [size]="'lg-regular'">
+    <fudis-icon *ngIf="variant === 'warning'" [icon]="'exclamation-mark-circle'" />
+    <fudis-icon *ngIf="variant === 'danger'" [icon]="'alert'" />
+    <fudis-icon *ngIf="variant === 'success'" [icon]="'checkmark-circle'" />
+    <fudis-icon *ngIf="variant === 'info'" [icon]="'info-circle'" />
+    <div class="fudis-notification__content">
       <span class="fudis-visually-hidden">{{ _attentionText }}:&nbsp;</span>
       <ng-content />
-      <fudis-link
-        class="fudis-notification__link"
-        *ngIf="!externalLink && link"
-        [title]="linkTitle"
-        [link]="link"
-        [color]="'gray-dark'"
-      />
-      <fudis-link
-        class="fudis-notification__link"
-        *ngIf="externalLink"
-        [title]="linkTitle"
-        [externalLink]="externalLink"
-        [color]="'gray-dark'"
-      />
-    </fudis-body-text>
+    </div>
   </ng-container>
   <ng-container *ngIf="_content?.type === 'notification'">
     <ng-container *ngTemplateOutlet="_content!.templateRef" />

ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.scss

@@ -7,17 +7,15 @@
 
   box-sizing: border-box;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   padding: 0 spacing.$spacing-sm 0 spacing.$spacing-xxs;
   width: 100%;
   min-height: spacing.$spacing-md;
 
-  &__link {
-    margin-left: spacing.$spacing-xxs;
-  }
-
-  &__body-text {
-    white-space: pre-wrap;
+  &__content {
+    display: inline-block;
+    align-self: center;
+    margin: calc(spacing.$spacing-xxs + spacing.$pixel-2) 0;
   }
 
   &__warning {

ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.ts

@@ -1,13 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  Input,
-  OnChanges,
-  OnInit,
-  effect,
-} from '@angular/core';
-import { FudisIcon } from '../../types/icons';
+import { ChangeDetectionStrategy, Component, ContentChild, Input, effect } from '@angular/core';
 import { ContentDirective } from '../../directives/content-projection/content/content.directive';
 import { FudisNotification } from '../../types/miscellaneous';
 import { FudisTranslationService } from '../../services/translation/translation.service';
@@ -18,7 +9,7 @@ import { FudisTranslationService } from '../../services/translation/translation.
   styleUrls: ['./notification.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NotificationComponent implements OnChanges, OnInit {
+export class NotificationComponent {
   constructor(private _translateService: FudisTranslationService) {
     effect(() => {
       this._attentionText = this._translateService.getTranslations()().ICON.ATTENTION;
@@ -35,67 +26,8 @@ export class NotificationComponent implements OnChanges, OnInit {
    */
   @Input() variant: FudisNotification = 'warning';
 
-  /**
-   * Add Angular Router link
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @Input() link: string | any[];
-
-  /**
-   * Add an external link as HTML href to point a target page on another domain.
-   * External link contains new-tab icon and assistive aria-label.
-   */
-  @Input() externalLink: string;
-
-  /**
-   * Title for the link, if not defined title will be the same as link URL
-   */
-  @Input() linkTitle: string;
-
-  /**
-   * Icon for notification
-   */
-  protected _icon: FudisIcon;
-
   /**
    * Screen reader text for icon
    */
   protected _attentionText: string;
-
-  /**
-   * Getter for notification icon
-   */
-  get icon(): string {
-    return this._icon;
-  }
-
-  ngOnInit(): void {
-    this._setNotificationIcon();
-  }
-
-  ngOnChanges(): void {
-    this._setNotificationIcon();
-  }
-
-  /**
-   * Used to set correct icon for each notification variant
-   */
-  private _setNotificationIcon(): void {
-    switch (this.variant) {
-      case 'warning':
-        this._icon = 'exclamation-mark-circle';
-        break;
-      case 'danger':
-        this._icon = 'alert';
-        break;
-      case 'success':
-        this._icon = 'checkmark-circle';
-        break;
-      case 'info':
-        this._icon = 'info-circle';
-        break;
-      default:
-        break;
-    }
-  }
 }