[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,30 @@ 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

@@ -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>
@@ -150,11 +146,11 @@
                   '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/components/formExamples.component.html

@@ -50,13 +50,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,7 +68,7 @@
                 [options]="dropdownOptions"
                 [multipleOption]="true"
                 [control]="testFormGroup.controls['dropdownMulti']"
-              />
+              /> -->
               <fudis-datepicker
                 [label]="'Select some date'"
                 [control]="testFormGroup.controls['date']"
@@ -95,24 +95,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/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/alert/alert.component.html

@@ -18,7 +18,7 @@
       (handleBlur)="_handleBlur($event)"
       [attr.aria-label]="message"
       [initialFocus]="initialFocus"
-      [color]="variant !== 'warning' ? 'white' : 'default'"
+      [color]="variant !== 'warning' ? 'white' : 'gray'"
       class="fudis-alert__link"
       *ngIf="routerLinkUrl && linkTitle"
       [routerLinkUrl]="routerLinkUrl"

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

@@ -1,6 +1,6 @@
 import { ArgTypes, Meta, Canvas } from "@storybook/blocks";
-
 import { AlertGroupComponent } from "./alert-group/alert-group.component.ts";
+import { excludeRegex } from "../../utilities/storybook";
 
 <Meta title="Components/Alert Group" />
 
@@ -104,4 +104,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} />

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

@@ -1,16 +1,20 @@
 import { StoryFn, Meta } from '@storybook/angular';
 import { ButtonComponent } from './button.component';
 import readme from './readme.mdx';
+import { buttonExclude } from '../../utilities/storybook';
 
 export default {
   title: 'Components/Button',
   component: ButtonComponent,
   parameters: {
     docs: {
+      argTypes: {
+        exclude: buttonExclude,
+      },
       page: readme,
     },
     controls: {
-      exclude: ['_iconColor', '_classList', 'getClasses', 'ngOnChanges', 'getAriaLabel'],
+      exclude: buttonExclude,
     },
   },
   argTypes: {
@@ -25,6 +29,13 @@ export default {
     icon: {
       control: { type: 'text' },
     },
+    tooltip: {
+      control: { type: 'text' },
+    },
+    tooltipPosition: {
+      options: ['left', 'right', 'above', 'below'],
+      control: { type: 'radio' },
+    },
   },
 } as Meta;
 

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

@@ -1,4 +1,4 @@
-import { ArgTypes, Meta, Canvas, Controls } from "@storybook/blocks";
+import { ArgTypes, Meta, Canvas } from "@storybook/blocks";
 import { ButtonComponent } from "./button.component";
 import * as ButtonStories from "./button.stories.ts";
 

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/readme.hidden

@@ -3,6 +3,7 @@ import { linkTo } from "@storybook/addon-links";
 import { DescriptionListComponent } from "./description-list.component.ts";
 import * as DescriptionListStories from "./description-list.stories.ts";
 import { Source } from "@storybook/blocks";
+import { excludeRegex } from "../../utilities/storybook";
 
 <Meta title="Components/Description List" />
 

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

@@ -2,8 +2,7 @@ import { Component, Input, OnDestroy, OnInit, effect } from '@angular/core';
 import { FudisDialogService } from '../../services/dialog/dialog.service';
 import { FudisIdService } from '../../services/id/id.service';
 import { FudisTranslationService } from '../../services/translation/translation.service';
-
-type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'initial';
+import { FudisDialogSize } from '../../types/miscellaneous';
 
 @Component({
   selector: 'fudis-dialog',
@@ -25,7 +24,7 @@ export class DialogComponent implements OnInit, OnDestroy {
   /**
    * Dialog size
    */
-  @Input() size: DialogSize = 'md';
+  @Input() size: FudisDialogSize = 'md';
 
   /**
    * Dialog's close button has to have absolute positioning when used inside fudis-form