Merge pull request #282 from funidata/DS-240-link-and-notification-check

[Storybook]: Configuring ArgTypes filtering

ngx-fudis/.storybook/compodoc.tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "include": [
+    "../projects/ngx-fudis/src/**/*.stories.ts",
     "../projects/ngx-fudis/src/**/*.component.ts",
     "../projects/ngx-fudis/src/**/*.directive.ts",
     "../projects/ngx-fudis/src/**/*.service.ts"

ngx-fudis/.storybook/preview.js

@@ -4,19 +4,29 @@ import { moduleMetadata } from "@storybook/angular";
 import { setCompodocJson } from "@storybook/addon-docs/angular";
 import docJson from "../documentation.json";
 import getVersion from "./getVersion";
+import { excludeRegex } from "../projects/ngx-fudis/src/lib/utilities/storybook";
 
 setCompodocJson(docJson);
 
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
+      exclude: excludeRegex(),
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
-    docs: { story: { inline: true } },
+    docs: {
+      argTypes: {
+        exclude: excludeRegex(),
+      },
+      controls: {
+        exclude: excludeRegex(),
+      },
+      story: { inline: true },
+    },
     options: {
       storySort: {
         order: [

ngx-fudis/projects/dev/src/app/app.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t">
   <div class="root-style">
-    <fudis-alert-group />
+    <!-- <fudis-alert-group /> -->
 
     <fudis-grid [columns]="4" [marginTop]="'lg'">
       <fudis-grid-item [columns]="'3 / 4'" [alignX]="'end'" [alignY]="'end'">
@@ -24,7 +24,7 @@
             <fudis-heading [level]="3" fudisGridItem [columns]="'auto'">
               <fudis-link [href]="'#'" [linkTitle]="'Link inside a heading'"></fudis-link>
             </fudis-heading>
-            <fudis-button [label]="'Trigger alert'" (handleClick)="triggerAlert()" />
+            <!-- <fudis-button [label]="'Trigger alert'" (handleClick)="triggerAlert()" /> -->
             <fudis-button
               [label]="'Open dialog from template with fudis-form'"
               (handleClick)="openDialog()"
@@ -34,7 +34,7 @@
               (handleClick)="openDialogFromComponent()"
             />
             <fudis-button [label]="'Change language'" (handleClick)="changeLanguage()" />
-            <fudis-button
+            <!-- <fudis-button
               [label]="'Menu'"
               [labelHidden]="true"
               [size]="'small'"
@@ -59,7 +59,7 @@
                 <fudis-dropdown-menu-item [label]="'Item 2200250'"></fudis-dropdown-menu-item>
                 <fudis-dropdown-menu-item [label]="'Item 878787878571'"></fudis-dropdown-menu-item>
               </fudis-dropdown-menu>
-            </fudis-button>
+            </fudis-button> -->
           </fudis-grid>
         </ng-template>
       </fudis-expandable>
@@ -69,7 +69,7 @@
 
       <fudis-expandable [title]="'Description list'">
         <ng-template fudisContent type="expandable">
-          <fudis-description-list [data]="testData"></fudis-description-list>
+          <!-- <fudis-description-list [data]="testData"></fudis-description-list> -->
         </ng-template>
       </fudis-expandable>
 
@@ -96,20 +96,16 @@
 
     <fudis-footer>
       <ng-template fudisFooterRight>
-        <fudis-link
-          [href]="'example.com'"
-          [linkTitle]="'Tietosuojaseloste'"
-          [isExternalLink]="true"
-        />
+        <fudis-link [href]="'example.com'" [linkTitle]="'Tietosuojaseloste'" [external]="true" />
         <fudis-link
           [href]="'example.com'"
           [linkTitle]="'Saavutettavuusseloste'"
-          [isExternalLink]="true"
+          [external]="true"
         />
         <fudis-link [href]="'example.com'" [linkTitle]="'Järjestelmätiedot'" />
       </ng-template>
       <ng-template fudisFooterLeft>
-        <fudis-link [href]="'example.com'" [linkTitle]="'Promo link'" [isExternalLink]="true" />
+        <fudis-link [href]="'example.com'" [linkTitle]="'Promo link'" [external]="true" />
       </ng-template>
     </fudis-footer>
   </div>
@@ -144,17 +140,16 @@
               <fudis-text-input
                 [label]="'Is something wrong?'"
                 [helpText]="'I hope everything is OK'"
-                [maxLength]="20"
                 [control]="testFormGroup.controls['textInput']"
                 [tooltip]="
                   'This text-input has multiple validators: required, minlength and maxlength'
                 "
               />
-              <fudis-radio-button-group
+              <!-- <fudis-radio-button-group
                 [title]="'Choose the truth'"
                 [control]="testFormGroup.controls['truth']"
                 [options]="radioButtonOptions"
-              />
+              /> -->
             </ng-template>
           </fudis-fieldset>
         </ng-template>

ngx-fudis/projects/dev/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, Inject, OnInit, TemplateRef, ViewChild } from '@angular/core
 
 import { TranslocoService } from '@ngneat/transloco';
 import {
-  FudisAlertService,
+  // FudisAlertService,
   FudisDialogService,
   FudisGridService,
   FudisTranslationService,
@@ -19,7 +19,7 @@ import {
   FudisRadioButtonOption,
 } from 'dist/ngx-fudis/lib/types/forms';
 
-import { FudisAlert } from 'dist/ngx-fudis/lib/types/miscellaneous';
+// import { FudisAlert } from 'dist/ngx-fudis/lib/types/miscellaneous';
 import { FormControl, FormGroup } from '@angular/forms';
 import { DialogTestContentComponent } from './dialog-test/dialog-test-content/dialog-test-content.component';
 
@@ -40,7 +40,7 @@ export class AppComponent implements OnInit {
     private _translocoService: TranslocoService,
     private _gridService: FudisGridService,
     private _fudisLanguage: FudisTranslationService,
-    private _alertService: FudisAlertService,
+    // private _alertService: FudisAlertService,
     private _errorSummaryService: FudisErrorSummaryService,
     private _breakpointService: FudisBreakpointService,
   ) {
@@ -150,16 +150,16 @@ export class AppComponent implements OnInit {
     this.getApplicationFontSize();
   }
 
-  triggerAlert(): void {
-    const newAlert: FudisAlert = {
-      message: 'Something dangerous MIGHT happen.',
-      type: 'warning',
-      id: 'my-own-id-3',
-      routerLinkUrl: '/',
-      linkTitle: 'More info about this warning.',
-    };
-    this._alertService.addAlert(newAlert);
-  }
+  // triggerAlert(): void {
+  //   const newAlert: FudisAlert = {
+  //     message: 'Something dangerous MIGHT happen.',
+  //     type: 'warning',
+  //     id: 'my-own-id-3',
+  //     routerLinkUrl: '/',
+  //     linkTitle: 'More info about this warning.',
+  //   };
+  //   this._alertService.addAlert(newAlert);
+  // }
 
   getApplicationFontSize(): void {
     this.fontSize = getComputedStyle(

ngx-fudis/projects/dev/src/app/components/dropdownExamples.component.html

@@ -1,7 +1,7 @@
 <fudis-expandable [title]="'Dropdown examples'">
   <ng-template fudisContent type="expandable">
     <fudis-grid [width]="'sm'" [columns]="2">
-      <fudis-dropdown
+      <!-- <fudis-dropdown
         [control]="testFormGroup.controls.dropdownFirst"
         [options]="_options"
         [multipleOption]="true"
@@ -12,7 +12,7 @@
         [options]="_options"
         [multipleOption]="true"
         [label]="'Second dropdown'"
-      />
+      /> -->
     </fudis-grid>
   </ng-template>
 </fudis-expandable>

ngx-fudis/projects/dev/src/app/components/formExamples.component.html

@@ -35,7 +35,6 @@
               <fudis-text-input
                 [label]="t('label')"
                 [helpText]="t('helpText')"
-                [maxLength]="20"
                 [control]="testFormGroup.controls['textInput']"
                 [tooltip]="
                   'This text-input has multiple validators: required, minlength and maxlength'
@@ -50,13 +49,13 @@
                   [message]="'Backend threw an error, it is not totally fault of this component'"
                 />
               </fudis-text-input>
-              <fudis-radio-button-group
+              <!-- <fudis-radio-button-group
                 [title]="t('chooseTruth')"
                 [helpText]="t('chooseTruthHelp')"
                 [control]="testFormGroup.controls['truth']"
                 [options]="radioButtonOptions"
-              />
-              <fudis-dropdown
+              /> -->
+              <!-- <fudis-dropdown
                 [id]="'dropdown-id-123'"
                 [label]="'Some dropdown'"
                 [options]="dropdownOptions"
@@ -68,15 +67,14 @@
                 [options]="dropdownOptions"
                 [multipleOption]="true"
                 [control]="testFormGroup.controls['dropdownMulti']"
-              />
+              /> -->
               <fudis-datepicker
                 [label]="'Select some date'"
                 [control]="testFormGroup.controls['date']"
               />
               <fudis-text-area
                 [label]="'Basic required text-area'"
                 [control]="testFormGroup.controls['textArea']"
-                [maxLength]="20"
               />
               <fudis-input-with-language-options
                 [label]="'At least one required'"
@@ -95,24 +93,24 @@
     <ng-template fudisContent type="expandable">
       <fudis-grid [columns]="'inputLg'">
         <fudis-heading [level]="3" [size]="'md'">Single-select dropdown</fudis-heading>
-        <fudis-autocomplete
+        <!-- <fudis-autocomplete
           [label]="'Choose item'"
           [variant]="'dropdown'"
           [id]="'dropdown-1234'"
           [options]="multipleOptions"
           [control]="testFormGroup.controls['autocompleteDropdown']"
-        />
+        /> -->
         <fudis-heading [level]="3" [size]="'md'">Single-select search</fudis-heading>
-        <fudis-autocomplete
+        <!-- <fudis-autocomplete
           [label]="'Search item'"
           [options]="multipleOptions"
           [control]="testFormGroup.controls['autocompleteSearch']"
-        />
+        /> -->
         <fudis-heading [level]="3" [size]="'md'">Autocomplete multi-select dropdown</fudis-heading>
-        <fudis-autocomplete-multi-select
+        <!-- <fudis-autocomplete-multi-select
           [label]="'Search and choose items'"
           [options]="multipleOptions"
-        />
+        /> -->
       </fudis-grid>
     </ng-template>
   </fudis-expandable>

ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts

@@ -33,7 +33,7 @@ import { Component } from '@angular/core';
             hendrerit ante nisl sed quam. Vestibulum euismod leo ac magna pretium.
           </fudis-body-text>
         </fudis-grid>
-        <fudis-description-list
+        <!-- <fudis-description-list
           [columns]="'1fr 1fr 1fr'"
           [data]="[
             { key: 'Name', value: 'Mary Rhubarb', subHeading: 'The lady boss' },
@@ -44,7 +44,7 @@ import { Component } from '@angular/core';
               value: 'Pie maker 2023, Mix it up master 2008, Place setting champion 1987'
             }
           ]"
-        ></fudis-description-list>
+        ></fudis-description-list> -->
         <hr />
         <fudis-grid [columns]="3" [marginTop]="'sm'" [marginBottom]="'sm'">
           <div style="border: 2px solid lightblue">

ngx-fudis/projects/documentation/development/SetupVSCode.stories.mdx

@@ -42,9 +42,38 @@ Recommended settings are specified in `settings/.vscode/settings.json`. They ass
 
 Take a look at the file to see all recommendations and commentary about them. You should really use all of them, but here are some of the most important ones:
 
-| Setting                     | Recommended Value | Description                                                                                                                                                                                   |
-| --------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `eslint.workingDirectories` | `["ngx-fudis"]`   | Enables the ESLint extension to work when VS Code is opened in repository root. Without this setting, interactive linting is available only when VS Code is opened in `ngx-fudis/` directory. |
-| `editor.formatOnSave`       | `true`            | Makes formatting painless as it happens automatically and you never have to think about it.                                                                                                   |
+<table>
+  <thead>
+    <tr>
+      <th>Setting</th>
+      <th>Recommended Value</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>eslint.workingDirectories</code>
+      </td>
+      <td>`["ngx-fudis"]`</td>
+      <td>
+        Enables the ESLint extension to work when VS Code is opened in repository root. Without this
+        setting, interactive linting is available only when VS Code is opened in{" "}
+        <code>ngx-fudis/</code> directory.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>editor.formatOnSave</code>
+      </td>
+      <td>
+        <code>true</code>
+      </td>
+      <td>
+        Makes formatting painless as it happens automatically and you never have to think about it.
+      </td>
+    </tr>
+  </tbody>
+</table>
 
 Remember that VS Code applies `.vscode/settings.json` contents only to that folder and its subfolders, so your global configuration will not be affected by using these recommendations.

ngx-fudis/projects/ngx-fudis/src/lib/components/alert/readme.hidden

@@ -1,5 +1,4 @@
 import { ArgTypes, Meta, Canvas } from "@storybook/blocks";
-
 import { AlertGroupComponent } from "./alert-group/alert-group.component.ts";
 
 <Meta title="Components/Alert Group" />
@@ -104,4 +103,6 @@ Fudis Dialog has a focus trap, so that keyboard are not able to navigate outside
 - Alert Group is wrapped inside a `section` element which has an automatic `aria-label` describing its content. E. g. 'Notifications - Number of notifications: 5'
 - Elements used in Alert Group have proper labels as needed for screen reader users.
 
+## Properties
+
 <ArgTypes of={AlertGroupComponent} />

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

@@ -2,6 +2,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { BreadcrumbsComponent } from './breadcrumbs.component';
 import readme from './readme.mdx';
+import { breadcrumbsExclude } from '../../utilities/storybook';
 
 export default {
   title: 'Components/Breadcrumbs',
@@ -14,12 +15,14 @@ export default {
   parameters: {
     docs: {
       page: readme,
+      argTypes: {
+        exclude: breadcrumbsExclude,
+      },
     },
     controls: {
-      exclude: '_breadcrumbsPrefix',
+      exclude: breadcrumbsExclude,
     },
   },
-  argTypes: {},
 } as Meta;
 
 const html = String.raw;

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

@@ -1,7 +1,8 @@
 import { ArgTypes, Meta, Canvas } from "@storybook/blocks";
-import { linkTo } from "@storybook/addon-links";
 import { BreadcrumbsComponent } from "./breadcrumbs.component";
 import * as BreadcrumbsStories from "./breadcrumbs.stories.ts";
+import { breadcrumbsExclude } from "../../utilities/storybook";
+import { BreadcrumbsItemComponent } from "./breadcrumbs-item/breadcrumbs-item.component";
 
 <Meta title="Components/Breadcrumbs" />
 
@@ -45,6 +46,10 @@ The last Breadcrumbs Item Component is always displayed as non-link and just pla
 - Each visible Breadcrumbs Item, except the last one, is a link
 - The last visible list item has `aria-current="page"` attribute
 
-## Properties
+## Properties of Breadcrumbs
 
 <ArgTypes of={BreadcrumbsComponent} />
+
+## Properties of Breadcrumbs Item
+
+<ArgTypes of={BreadcrumbsItemComponent} exclude={breadcrumbsExclude} />