[Guidance, Description-List, Button, Notification]: Fix max-length indiactor's width and spacing, Hide variant option from Nested DL-Story, Adjust Button Height, Adjust Notification width and internal button styling

ngx-fudis/projects/ngx-fudis/src/lib/components/button/button-theme.scss

@@ -1,6 +1,8 @@
 @use "../../foundations/spacing/tokens.scss" as spacing;
 @use "../../foundations/borders/mixins.scss" as borders;
 @use "../../foundations/colors/mixins.scss" as colors;
+@use "../../foundations/typography/mixins.scss" as typography;
+@use "../../foundations/focus/mixins.scss" as focus;
 
 .fudis-dl-item-details {
   &__regular {
@@ -21,3 +23,26 @@
     @include borders.outline-none;
   }
 }
+
+/** Button elements inside notification are made to look identical with Fudis Link element */
+.fudis-notification {
+  button {
+    @include colors.bg-color("transparent");
+    @include colors.text-color("primary-dark");
+    @include borders.border-none;
+    @include borders.outline-none;
+    @include typography.text-link-m-typography;
+
+    border-radius: spacing.$spacing-none;
+    padding: spacing.$spacing-none;
+    min-height: spacing.$spacing-none;
+    vertical-align: baseline;
+    text-transform: initial;
+    text-decoration: underline solid;
+    letter-spacing: spacing.$spacing-none;
+
+    &:focus {
+      @include focus.focus-generic;
+    }
+  }
+}

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

@@ -57,25 +57,25 @@
 
   &__size {
     &-small {
-      height: spacing.$spacing-md;
+      min-height: spacing.$spacing-md;
     }
 
     &-medium {
-      height: spacing.$spacing-lg;
+      min-height: spacing.$spacing-lg;
     }
 
     &-icon-only {
       padding: 0;
       width: spacing.$spacing-lg;
       min-width: initial;
-      height: spacing.$spacing-lg;
+      min-height: spacing.$spacing-lg;
     }
   }
 
   &__icon {
     position: relative;
     width: spacing.$spacing-lg;
-    height: spacing.$spacing-lg;
+    height: spacing.$spacing-sm;
 
     &__component {
       position: absolute;

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { DescriptionListComponent } from './description-list.component';
 import docs from './description-list-docs.mdx';
 import { FudisLanguageAbbr } from '../../types/miscellaneous';
-import { descriptionListExclude } from '../../utilities/storybook';
+import { descriptionListExclude, nestedDescriptionListExclude } from '../../utilities/storybook';
 import { FudisTranslationService } from '../../services/translation/translation.service';
 
 @Component({
@@ -120,7 +120,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
       <fudis-dl-item>
         <fudis-dt [contentText]="'Raiders of the Lost Ark'"></fudis-dt>
         <fudis-dd>
-          <fudis-dl [variant]="variant">
+          <fudis-dl [variant]="'compact'">
             <fudis-dl-item>
               <fudis-dt [contentText]="'Release Year'"></fudis-dt>
               <fudis-dd [contentText]="'1981'"></fudis-dd>
@@ -139,7 +139,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
       <fudis-dl-item>
         <fudis-dt [contentText]="'The Temple of Doom'"></fudis-dt>
         <fudis-dd>
-          <fudis-dl [variant]="variant">
+          <fudis-dl [variant]="'compact'">
             <fudis-dl-item>
               <fudis-dt [contentText]="'Release Year'"></fudis-dt>
               <fudis-dd [contentText]="'1984'"></fudis-dd>
@@ -158,7 +158,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
       <fudis-dl-item>
         <fudis-dt [contentText]="'The Last Crusade'"></fudis-dt>
         <fudis-dd>
-          <fudis-dl [variant]="variant">
+          <fudis-dl [variant]="'compact'">
             <fudis-dl-item>
               <fudis-dt [contentText]="'Release Year'"></fudis-dt>
               <fudis-dd [contentText]="'1989'"></fudis-dd>
@@ -179,7 +179,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
       <fudis-dl-item>
         <fudis-dt [contentText]="'The Kingdom of Crystal Skull'"></fudis-dt>
         <fudis-dd>
-          <fudis-dl [variant]="variant">
+          <fudis-dl [variant]="'compact'">
             <fudis-dl-item>
               <fudis-dt [contentText]="'Release Year'"></fudis-dt>
               <fudis-dd [contentText]="'2008'"></fudis-dd>
@@ -198,7 +198,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
       <fudis-dl-item>
         <fudis-dt [contentText]="'The Dial of Destiny'"></fudis-dt>
         <fudis-dd>
-          <fudis-dl [variant]="variant">
+          <fudis-dl [variant]="'compact'">
             <fudis-dl-item>
               <fudis-dt [contentText]="'Release Year'"></fudis-dt>
               <fudis-dd [contentText]="'2023'"></fudis-dd>
@@ -220,10 +220,15 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
 
 export const NestedDescriptionLists = NestedDescriptionListsTemplate.bind({});
 NestedDescriptionLists.args = {
-  variant: 'compact',
   disableGrid: false,
 };
 
+NestedDescriptionLists.parameters = {
+  controls: {
+    exclude: nestedDescriptionListExclude,
+  },
+};
+
 const DescriptionListInsideGridTemplate: StoryFn<DescriptionListComponent> = (
   args: DescriptionListComponent,
 ) => ({

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

@@ -89,7 +89,9 @@
   </div>
   <ng-container *ngIf="maxLength && control">
     <small
-      class="fudis-guidance__character-limit-indicator"
+      class="fudis-guidance__character-limit-indicator fudis-guidance__character-limit-indicator__{{
+        _maxLengthWidth
+      }}"
       [class.fudis-guidance__character-limit-indicator__float-right]="!helpText"
     >
       {{ control.value?.length || 0 }}/{{ maxLength }}
@@ -99,7 +101,9 @@
     <ng-container *ngFor="let singleControl of formGroup?.controls | keyvalue">
       <small
         *ngIf="singleControl.key === selectedOption"
-        class="fudis-guidance__character-limit-indicator"
+        class="fudis-guidance__character-limit-indicator fudis-guidance__character-limit-indicator__{{
+          _maxLengthWidth
+        }}"
         [class.fudis-guidance__character-limit-indicator__float-right]="!helpText"
       >
         {{ singleControl.value.value?.length || 0 }}/{{ maxLength }}

ngx-fudis/projects/ngx-fudis/src/lib/components/form/guidance/guidance.component.scss

@@ -43,7 +43,19 @@
     @include typography.body-text-sm-regular;
 
     margin-top: spacing.$spacing-xs;
-    margin-left: spacing.$spacing-xs;
+    text-align: end;
+
+    &__sm {
+      min-width: spacing.$spacing-md;
+    }
+
+    &__md {
+      min-width: spacing.$spacing-xl;
+    }
+
+    &__lg {
+      min-width: spacing.$spacing-xxl;
+    }
 
     &__float-right {
       margin-left: auto;

ngx-fudis/projects/ngx-fudis/src/lib/components/form/guidance/guidance.component.spec.ts

@@ -126,7 +126,10 @@ describe('GuidanceComponent', () => {
     });
 
     it('should show maxLength indicator', () => {
-      const lengthIndicator = getElement(fixture, '.fudis-guidance__character-limit-indicator');
+      const lengthIndicator = getElement(
+        fixture,
+        '.fudis-guidance__character-limit-indicator.fudis-guidance__character-limit-indicator__md',
+      );
 
       expect(lengthIndicator.innerHTML).toContain('0/20');
 
@@ -196,7 +199,10 @@ describe('GuidanceComponent', () => {
         );
         fixture.detectChanges();
 
-        const lengthIndicator = getElement(fixture, '.fudis-guidance__character-limit-indicator');
+        const lengthIndicator = getElement(
+          fixture,
+          '.fudis-guidance__character-limit-indicator.fudis-guidance__character-limit-indicator__md',
+        );
         expect(lengthIndicator.innerHTML).toContain('64/20');
       });
 

ngx-fudis/projects/ngx-fudis/src/lib/components/form/guidance/guidance.component.ts

@@ -1,18 +1,19 @@
-import { Component, Input, OnInit, effect } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, effect } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { FudisTranslationService } from '../../../services/translation/translation.service';
 import { FudisIdService } from '../../../services/id/id.service';
 import { FudisInternalErrorSummaryService } from '../../../services/form/error-summary/internal-error-summary.service';
 import { FudisFormErrorSummaryItem } from '../../../types/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject } from 'rxjs';
+import { FudisComponentChanges } from '../../../types/miscellaneous';
 
 @Component({
   selector: 'fudis-guidance',
   templateUrl: './guidance.component.html',
   styleUrls: ['./guidance.component.scss'],
 })
-export class GuidanceComponent implements OnInit {
+export class GuidanceComponent implements OnChanges, OnInit {
   constructor(
     private _translationService: FudisTranslationService,
     private _idService: FudisIdService,
@@ -109,6 +110,11 @@ export class GuidanceComponent implements OnInit {
    */
   protected _maxLengthAlertThreshold: number;
 
+  /**
+   * The width of the character-limit-indicator, determined by how many digits are in the maxLength input value
+   */
+  protected _maxLengthWidth: 'sm' | 'md' | 'lg';
+
   /**
    * Id from IdService
    */
@@ -120,7 +126,18 @@ export class GuidanceComponent implements OnInit {
   protected _lazyLoadedErrors: string[] = [];
 
   ngOnInit(): void {
+    this._setCharacterLimitIndicatorValues();
+  }
+
+  ngOnChanges(changes: FudisComponentChanges<GuidanceComponent>): void {
+    if (changes.maxLength?.currentValue !== changes.maxLength?.previousValue) {
+      this._setCharacterLimitIndicatorValues();
+    }
+  }
+
+  private _setCharacterLimitIndicatorValues(): void {
     if (this.maxLength) {
+      this._maxLengthWidth = this.maxLength > 100 ? 'lg' : this.maxLength > 10 ? 'md' : 'sm';
       this._maxLengthAlertThreshold = this.maxLength - 5;
     }
   }

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

@@ -1,5 +1,6 @@
 @use "../../foundations/colors/mixins.scss" as colors;
 @use "../../foundations/borders/mixins.scss" as borders;
+@use "../../foundations/grid/tokens.scss" as gridTokens;
 @use "../../foundations/spacing/tokens.scss" as spacing;
 
 .fudis-notification {
@@ -9,7 +10,7 @@
   display: flex;
   align-items: flex-start;
   padding: 0 spacing.$spacing-sm 0 spacing.$spacing-xxs;
-  width: 100%;
+  max-width: gridTokens.$grid-width-lg;
   min-height: spacing.$spacing-md;
 
   &__content {

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

@@ -31,17 +31,22 @@ const Template: StoryFn<NotificationComponent> = (args: NotificationComponent) =
   >`,
 });
 
-const LinkTemplate: StoryFn<NotificationComponent> = (args: NotificationComponent) => ({
+const ButtonAndLinkTemplate: StoryFn<NotificationComponent> = (args: NotificationComponent) => ({
   props: args,
-  template: html`<fudis-notification [variant]="variant">
-    <fudis-body-text
-      >This is Notification with Link.
-      <fudis-link
-        [externalLink]="'https://www.example.com'"
-        [title]="'This link opens in new tab.'"
-      ></fudis-link
-    ></fudis-body-text>
-  </fudis-notification>`,
+  template: html` <fudis-grid [align]="'start'">
+    <fudis-notification [variant]="variant">
+      <fudis-body-text
+        >This is Notification with Link.
+        <fudis-link [externalLink]="'https://www.example.com'" [title]="'This is example link.'" />
+      </fudis-body-text>
+    </fudis-notification>
+    <fudis-notification [variant]="variant">
+      <fudis-body-text
+        >This is Notification with Button.
+        <fudis-button [label]="'This is example button.'" />
+      </fudis-body-text>
+    </fudis-notification>
+  </fudis-grid>`,
 });
 
 const MultiChildTemplate: StoryFn<NotificationComponent> = (args: NotificationComponent) => ({
@@ -60,8 +65,8 @@ Example.args = {
   variant: 'warning',
 };
 
-export const ExampleWithExternalLink = LinkTemplate.bind({});
-ExampleWithExternalLink.args = {
+export const ExampleWithExternalLinkAndButton = ButtonAndLinkTemplate.bind({});
+ExampleWithExternalLinkAndButton.args = {
   variant: 'info',
 };
 

ngx-fudis/projects/ngx-fudis/src/lib/components/notification/readme.mdx

@@ -19,19 +19,17 @@ Notifications are often informative contextual notifications that cannot be clic
 
 ### Content Guidelines
 
-Notification Component doesn't strict what content is contained.
+For basic text content it is recommended to use [Body Text Components](/docs/components-typography-body-text--documentation),
+however Notification Component can contain any kind of Fudis components, text or html content if needed.
 
-It is recommended to use [Body Text Components](/docs/components-typography-body-text--documentation). Inside Notification, Body Text size defaults to `lg-regular` but this can be overriden if needed.
-
-If using [Link Component](/docs/components-link--documentation) or [Link Directive](/docs/directives-link--documentation), for proper color contrast color of the links are set to `gray-dark`.
-
-Otherwise Notification does not interfere with the content styling.
+If using [Button Component](/docs/components-button--documentation) or button element they will be transformed to look like
+[Link Component](/docs/components-link--documentation). Otherwise Notification does not interfere with the content styling.
 
 Please see code examples for recommended usage patterns.
 
 <Canvas of={NotificationStories.ExampleWithMultipleChildComponents}></Canvas>
 
-<Canvas of={NotificationStories.ExampleWithExternalLink}></Canvas>
+<Canvas of={NotificationStories.ExampleWithExternalLinkAndButton}></Canvas>
 
 ### Accessibility
 
@@ -43,6 +41,7 @@ Please see code examples for recommended usage patterns.
 
 - [Icon](/docs/components-icon--documentation)
 - [Link](/docs/components-link--documentation)
+- [Button](/docs/components-button--documentation)
 - [BodyText](/docs/components-typography-body-text--documentation)
 
 ## Properties

ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts

@@ -141,6 +141,11 @@ export const descriptionListArgsTypesExclude: RegExp = excludeRegex([
   'serviceDefaults',
 ]);
 
+export const nestedDescriptionListExclude: RegExp = excludeRegex([
+  ...descriptionListCommonExclude,
+  'variant',
+]);
+
 export const descriptionListExclude: RegExp = excludeRegex([...descriptionListCommonExclude]);
 
 /**

test/visual-regression/description-list.spec.ts

@@ -66,27 +66,13 @@ test("nested description list compact and grid enabled", async ({ page }) => {
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
 
-test("nested description list regular and grid enabled", async ({ page }) => {
-  await page.goto(
-    "/iframe.html?args=variant:regular&id=components-description-list--nested-description-lists&viewMode=story",
-  );
-  await expect(page).toHaveScreenshot({ fullPage: true });
-});
-
 test("nested description list compact and grid disabled", async ({ page }) => {
   await page.goto(
     "/iframe.html?args=disableGrid:!true&id=components-description-list--nested-description-lists&viewMode=story",
   );
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
 
-test("nested description list regular and grid disabled", async ({ page }) => {
-  await page.goto(
-    "/iframe.html?args=variant:regular;disableGrid:!true&id=components-description-list--nested-description-lists&viewMode=story",
-  );
-  await expect(page).toHaveScreenshot({ fullPage: true });
-});
-
 // Description List With Sub Components
 test("description list regular with sub components", async ({ page }) => {
   await page.goto(