diff --git a/ngx-fudis/.storybook/compodoc.tsconfig.json b/ngx-fudis/.storybook/compodoc.tsconfig.json index d4fa87d80..88fc9a1b1 100644 --- a/ngx-fudis/.storybook/compodoc.tsconfig.json +++ b/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" diff --git a/ngx-fudis/.storybook/preview.js b/ngx-fudis/.storybook/preview.js index 9c7ed8abc..a42fe7c49 100644 --- a/ngx-fudis/.storybook/preview.js +++ b/ngx-fudis/.storybook/preview.js @@ -4,6 +4,7 @@ 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); @@ -11,12 +12,21 @@ 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: [ diff --git a/ngx-fudis/projects/dev/src/app/app.component.html b/ngx-fudis/projects/dev/src/app/app.component.html index 4502ee7ac..20b52f57b 100644 --- a/ngx-fudis/projects/dev/src/app/app.component.html +++ b/ngx-fudis/projects/dev/src/app/app.component.html @@ -1,6 +1,6 @@
- + @@ -24,7 +24,7 @@ - + - - + --> @@ -69,7 +69,7 @@ - + @@ -96,20 +96,16 @@ - + - +
@@ -144,17 +140,16 @@ - + /> --> diff --git a/ngx-fudis/projects/dev/src/app/app.component.ts b/ngx-fudis/projects/dev/src/app/app.component.ts index 24ba23c3a..b642bc679 100644 --- a/ngx-fudis/projects/dev/src/app/app.component.ts +++ b/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( diff --git a/ngx-fudis/projects/dev/src/app/components/dropdownExamples.component.html b/ngx-fudis/projects/dev/src/app/components/dropdownExamples.component.html index f13a9389a..bc9080901 100644 --- a/ngx-fudis/projects/dev/src/app/components/dropdownExamples.component.html +++ b/ngx-fudis/projects/dev/src/app/components/dropdownExamples.component.html @@ -1,7 +1,7 @@ - + /> --> diff --git a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html index a0eda997e..e5accc204 100644 --- a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html +++ b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html @@ -35,7 +35,6 @@ - - --> + Single-select dropdown - + /> --> Single-select search - + /> --> Autocomplete multi-select dropdown - + /> --> diff --git a/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts b/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts index 7a082fa9f..cc93251a3 100644 --- a/ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts +++ b/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. - + > -->
diff --git a/ngx-fudis/projects/documentation/development/SetupVSCode.stories.mdx b/ngx-fudis/projects/documentation/development/SetupVSCode.stories.mdx index 2c84d9958..fa18fef29 100644 --- a/ngx-fudis/projects/documentation/development/SetupVSCode.stories.mdx +++ b/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. | + + + + + + + + + + + + + + + + + + + + +
SettingRecommended ValueDescription
+ 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. +
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. diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/readme.hidden b/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/readme.hidden index 4beb81961..3e02aac7c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/readme.hidden +++ b/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"; @@ -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 + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.stories.ts index 9c9c64b92..0c2bed4f5 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.stories.ts +++ b/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; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/readme.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/readme.mdx index 82af0659f..f6f0d80c9 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/readme.mdx +++ b/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"; @@ -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 + +## Properties of Breadcrumbs Item + + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts index 254bd691e..31ffb0805 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts @@ -1,6 +1,7 @@ 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', @@ -10,7 +11,7 @@ export default { page: readme, }, controls: { - exclude: ['_iconColor', '_classList', 'getClasses', 'ngOnChanges', 'getAriaLabel'], + exclude: buttonExclude, }, }, argTypes: { @@ -25,6 +26,13 @@ export default { icon: { control: { type: 'text' }, }, + tooltip: { + control: { type: 'text' }, + }, + tooltipPosition: { + options: ['left', 'right', 'above', 'below'], + control: { type: 'radio' }, + }, }, } as Meta; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/readme.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/readme.mdx index f5caeecbe..127afbd2f 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/readme.mdx +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/readme.mdx @@ -1,6 +1,7 @@ -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"; +import { buttonExclude } from "../../utilities/storybook"; @@ -69,4 +70,4 @@ Note! Label is also hidden automatically when size `icon-only` is used. ## Properties - + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts index 5758e1a4b..049e4955a 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts +++ b/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 diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts index 55a0ccc66..b6081183c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, TemplateRef } from '@angular/core'; +import { Component, Input, TemplateRef } from '@angular/core'; import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms'; import { RouterTestingModule } from '@angular/router/testing'; @@ -7,102 +7,14 @@ import { FudisDialogService } from '../../services/dialog/dialog.service'; import readme from './readme.mdx'; import { FudisValidators } from '../../utilities/form/validators'; import { FudisErrorSummaryService } from '../../services/form/error-summary/error-summary.service'; +import { dialogExclude } from '../../utilities/storybook'; +import { DialogComponent } from './dialog.component'; +import { FudisDialogSize } from '../../types/miscellaneous'; type TestForm = { powerAnimal: FormControl; }; -@Component({ - selector: 'example-dialog-content', - template: ` - Dialog with fudis-grid and scrollable content - - - - I am fudis-heading inside the grid taking the whole width - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis porttitor nunc. Nunc - vehicula ut massa non facilisis. Aliquam vehicula risus vitae ex condimentum, sed - efficitur neque scelerisque. Mauris facilisis vel orci sit amet tincidunt. Praesent ante - leo, tempus eu blandit vel, tempus nec augue. Nam dui est, scelerisque quis mauris sit - amet, sagittis pharetra lectus. Donec nec ligula et dolor venenatis bibendum. Vestibulum - metus tortor, fermentum eu dignissim id, ultrices vitae metus. Donec eget vulputate risus. - Proin eros augue, volutpat mollis varius non, posuere ac turpis. Aliquam et convallis - tortor, non semper mi. Praesent nec eleifend mauris, at laoreet urna. Quisque dignissim - nibh sollicitudin, finibus justo non, efficitur est. - - - Proin pellentesque at felis vel imperdiet. Vivamus eros lorem, condimentum non rutrum - quis, aliquam vitae dolor. Morbi dictum leo non porttitor egestas. Sed sed aliquet purus. - Sed nec metus dictum, porta justo ut, cursus lorem. Nam libero dolor, pulvinar eu enim et, - porttitor sodales ipsum. Nullam tristique ante sed massa porta, in accumsan nibh pretium. - Integer vel facilisis neque, a lacinia dui. Donec cursus eget mi a aliquam. Vestibulum - commodo, elit a mattis porttitor, eros neque euismod sem, eu hendrerit ante nisl sed quam. - Vestibulum euismod leo ac magna pretium. - - - -
- -
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
-
- Showcase of grid items -
- - - - - - `, -}) -class DialogExampleContentComponent {} - @Component({ selector: 'fudis-dialog-example-laucher', template: ` @@ -112,7 +24,7 @@ class DialogExampleContentComponent {} [label]="'Open dialog with form'" > @@ -123,7 +35,7 @@ class DialogExampleContentComponent {} > - + - + + + Dialog with fudis-grid and scrollable content + + + + I am fudis-heading inside the grid taking the whole width + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis porttitor nunc. Nunc + vehicula ut massa non facilisis. Aliquam vehicula risus vitae ex condimentum, sed + efficitur neque scelerisque. Mauris facilisis vel orci sit amet tincidunt. Praesent + ante leo, tempus eu blandit vel, tempus nec augue. Nam dui est, scelerisque quis + mauris sit amet, sagittis pharetra lectus. Donec nec ligula et dolor venenatis + bibendum. Vestibulum metus tortor, fermentum eu dignissim id, ultrices vitae metus. + Donec eget vulputate risus. Proin eros augue, volutpat mollis varius non, posuere ac + turpis. Aliquam et convallis tortor, non semper mi. Praesent nec eleifend mauris, at + laoreet urna. Quisque dignissim nibh sollicitudin, finibus justo non, efficitur est. + + + Proin pellentesque at felis vel imperdiet. Vivamus eros lorem, condimentum non rutrum + quis, aliquam vitae dolor. Morbi dictum leo non porttitor egestas. Sed sed aliquet + purus. Sed nec metus dictum, porta justo ut, cursus lorem. Nam libero dolor, pulvinar + eu enim et, porttitor sodales ipsum. Nullam tristique ante sed massa porta, in + accumsan nibh pretium. Integer vel facilisis neque, a lacinia dui. Donec cursus eget + mi a aliquam. Vestibulum commodo, elit a mattis porttitor, eros neque euismod sem, eu + hendrerit ante nisl sed quam. Vestibulum euismod leo ac magna pretium. + + + +
+ +
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+
+ Showcase of grid items +
+ + + + + + + `, }) -class DialogExampleLauncherComponent implements OnInit { +class DialogExampleLauncherComponent { constructor( public dialog: FudisDialogService, private _errorSummaryService: FudisErrorSummaryService, ) {} + @Input() size: FudisDialogSize = 'md'; + chosenPowerAnimal: string | null; errorSummaryVisible = false; - dialogContentComponent: DialogExampleContentComponent; - exampleDialogFormGroup = new FormGroup({ powerAnimal: new FormControl( null, @@ -174,10 +173,6 @@ class DialogExampleLauncherComponent implements OnInit { ), }); - ngOnInit(): void { - this.dialogContentComponent = DialogExampleContentComponent; - } - closeDialogWithForm() { this.exampleDialogFormGroup.markAllAsTouched(); @@ -199,12 +194,12 @@ class DialogExampleLauncherComponent implements OnInit { export default { title: 'Components/Dialog', - component: DialogExampleLauncherComponent, + component: DialogComponent, decorators: [ moduleMetadata({ imports: [ReactiveFormsModule, FormsModule, RouterTestingModule], providers: [FudisDialogService], - declarations: [DialogExampleContentComponent], + declarations: [DialogExampleLauncherComponent], }), ], parameters: { @@ -212,16 +207,25 @@ export default { page: readme, }, controls: { - exclude: ['chosenPowerAnimal', 'exampleDialogFormGroup', 'closeDialogWithForm'], + exclude: dialogExclude, + }, + }, + argTypes: { + size: { + options: ['sm', 'md', 'lg', 'xl', 'initial'], + control: { type: 'radio' }, }, }, } as Meta; -const Template: StoryFn = ( - args: DialogExampleLauncherComponent, -) => ({ +const html = String.raw; + +const Template: StoryFn = (args: DialogComponent) => ({ props: args, + template: html` `, }); -export const Dialog = Template.bind({}); -Dialog.args = {}; +export const Example = Template.bind({}); +Example.args = { + size: 'md', +}; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/readme.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/readme.mdx index 13748633e..d8106537b 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/readme.mdx +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/readme.mdx @@ -1,6 +1,7 @@ import { ArgTypes, Meta, Canvas } from "@storybook/blocks"; import { DialogComponent } from "./dialog.component.ts"; import * as DialogStories from "./dialog.stories.ts"; +import { dialogExclude } from "../../utilities/storybook"; @@ -10,7 +11,7 @@ Fudis Dialog is based on Angular Material Dialog. Dialog opens on top of any con ## Examples - + See [full code examples](#full-code-example). @@ -197,4 +198,4 @@ class FormDialogComponent { ## Properties - + diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu.stories.hidden b/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu.stories.hidden index c6bd7aff7..6491fd0ff 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu.stories.hidden +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu.stories.hidden @@ -11,9 +11,6 @@ export default { docs: { page: readme, }, - controls: { - exclude: ['content', 'alignMenu'], - }, }, decorators: [ applicationConfig({ diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.html index da226a5ce..34c351928 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.html @@ -18,7 +18,7 @@ variant }}" [attr.aria-expanded]="!_closed" - (click)="setClosedStatus(!_closed)" + (click)="_setClosedStatus(!_closed)" >