diff --git a/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.stories.ts b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..dbb89342b65d8059a7eb55cce494d2ec53dac8f6 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.stories.ts @@ -0,0 +1,35 @@ +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { AttachmentComponent } from '../attachment/attachment.component'; +import { AttachmentContainerComponent } from './attachment-container.component'; + +const meta: Meta<AttachmentContainerComponent> = { + title: 'Containers/Attachment container', + component: AttachmentContainerComponent, + parameters: { + docs: { + description: { + component: 'Container for multiple attachments', + }, + }, + }, + decorators: [ + moduleMetadata({ + imports: [AttachmentContainerComponent, AttachmentComponent], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<AttachmentContainerComponent>; + +export const Default: Story = { + render: () => ({ + template: `<ods-attachment-container> + <ods-attachment caption="Attachment" description="200 kB" fileType="pdf"></ods-attachment> + <ods-attachment caption="Second attachment" description="432 kB" fileType="doc"></ods-attachment> + </ods-attachment-container>`, + }), +}; diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts index 4a4fe3ee5844e2db722ccfc25cd48214b3d4a068..35e3ed6e47466cc40456fb05c37355d39ceace2e 100644 --- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts +++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts @@ -10,8 +10,10 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone standalone: true, imports: [CommonModule, SpinnerIconComponent, FileIconComponent], styles: [':host {@apply flex}'], - template: ` <button + template: `<button class="relative flex w-full items-start gap-3 border-b border-b-grayborder bg-background-100 px-3 py-2 hover:bg-background-200" + [disabled]="isLoading" + [attr.aria-disabled]="isLoading" > <div class="flex-shrink"> <ods-file-icon diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts b/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts index b485cf6a12ea32ef33c0906a85176ccfb9bdedd2..98b1fb378acaa15e6dde185d2bd0aeffd4304f01 100644 --- a/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts +++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts @@ -15,20 +15,38 @@ export const Default: Story = { name: 'File with pdf icon', args: { caption: 'Katzenanmeldung_1231231_eingang.pdf', + errorCaption: 'Error!', + loadingCaption: 'Loading...', description: '450 kB', fileType: 'pdf', + isLoading: false, + errorMessages: [], }, argTypes: { caption: { - table: { - type: { summary: 'Name of the document or title' }, - }, + description: 'Name of the document', + }, + errorCaption: { + description: 'Error text appears when eror messages array is not empty', + }, + loadingCaption: { + description: 'Loading text appears when isLoading flag is true', }, description: { + description: 'Description can contain size of file or e.g. loading progress', + }, + fileType: { + description: 'Type of file icon', + }, + isLoading: { + description: 'Boolean flag for loading state', table: { - type: { summary: 'Description can contain size of file or e.g. loading progress' }, + defaultValue: { summary: 'false' }, }, }, + errorMessages: { + description: 'The array containing strings with errors text', + }, }, }; @@ -44,7 +62,7 @@ export const Doc: Story = { export const Loading: Story = { name: 'File with loading icon', args: { - caption: 'Katzenanmeldung_1231231_eingang.doc', + loadingCaption: 'Katzenanmeldung_1231231_eingang.doc', description: '573 kB', fileType: 'doc', isLoading: true, @@ -54,7 +72,7 @@ export const Loading: Story = { export const Error: Story = { name: 'Error message in file', args: { - caption: 'Fehler beim Hochladen', + errorCaption: 'Fehler beim Hochladen', errorMessages: ['Erlaubte Dateiendungen: pdf, jpg, png, jpeg'], }, }; diff --git a/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-comtainer.stories.ts b/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-comtainer.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..b0fc0da094793d9e46009e818b7f365a0f4f72ff --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-comtainer.stories.ts @@ -0,0 +1,49 @@ +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { AttachmentContainerComponent } from '../attachment-container/attachment-container.component'; +import { AttachmentComponent } from '../attachment/attachment.component'; +import { BescheidStatusTextComponent } from '../bescheid-status-text/bescheid-status-text.component'; +import { BescheidContainerComponent } from './bescheid-container.component'; + +const meta: Meta<BescheidContainerComponent> = { + title: 'Containers/Bescheid container', + component: BescheidContainerComponent, + parameters: { + docs: { + description: { + component: 'Container for bescheid information', + }, + }, + }, + decorators: [ + moduleMetadata({ + imports: [ + AttachmentComponent, + AttachmentContainerComponent, + BescheidContainerComponent, + BescheidStatusTextComponent, + ], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<BescheidContainerComponent>; + +export const Default: Story = { + render: () => ({ + template: `<ods-bescheid-container> + <ods-bescheid-status-text + bewilligt="true" + dateText="13.11.2024" + [hasBescheidDraft]="false" + ></ods-bescheid-status-text> + <ods-attachment-container> + <ods-attachment caption="Attachment" description="200 kB" fileType="pdf"></ods-attachment> + <ods-attachment caption="Second attachment" description="432 kB" fileType="doc"></ods-attachment> + </ods-attachment-container> + </ods-bescheid-container>`, + }), +}; diff --git a/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.stories.ts b/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..9beeac31bd09c47d6660924cecc19618fe86f897 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.stories.ts @@ -0,0 +1,27 @@ +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { BescheidStatusTextComponent } from './bescheid-status-text.component'; + +const meta: Meta<BescheidStatusTextComponent> = { + title: 'Bescheid status text', + component: BescheidStatusTextComponent, + decorators: [ + moduleMetadata({ + imports: [BescheidStatusTextComponent], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<BescheidStatusTextComponent>; + +export const Default: Story = { + args: { dateText: '31.12.1999', bewilligt: true, hasBescheidDraft: false }, + argTypes: { + dateText: { description: 'Date of decision' }, + bewilligt: { table: { defaultValue: { summary: 'false' } } }, + hasBescheidDraft: { table: { defaultValue: { summary: 'false' } } }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts b/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..c41225c7418d8a5ce8df09afb89f88d4f8240091 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts @@ -0,0 +1,44 @@ +import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { BescheidGenerateIconComponent } from '../icons/bescheid-generate-icon/bescheid-generate-icon.component'; +import { ButtonCardComponent } from './button-card.component'; + +const meta: Meta<ButtonCardComponent> = { + title: 'Button card', + component: ButtonCardComponent, + parameters: { + docs: { + description: { + component: 'A button with two lines of text', + }, + }, + }, + decorators: [ + moduleMetadata({ + imports: [ButtonCardComponent, BescheidGenerateIconComponent], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<ButtonCardComponent>; + +export const Default: Story = { + args: { + text: 'Bescheiddokument', + subText: 'automatisch erstellen', + isLoading: false, + }, + argTypes: { + text: { description: 'First line of text' }, + subText: { description: 'Second line of text' }, + }, + render: (args: ButtonCardComponent) => ({ + props: args, + template: `<ods-button-card ${argsToTemplate(args)} class="w-72"> + <ods-bescheid-generate-icon icon fileType="auto"></ods-bescheid-generate-icon> + </ods-button-card>`, + }), +}; diff --git a/alfa-client/libs/design-system/src/lib/button/button.stories.ts b/alfa-client/libs/design-system/src/lib/button/button.stories.ts index 9739685d3479512e4ee3deea340727d0c296f049..5db5e2e20ad61881bf767c822890d900898544ea 100644 --- a/alfa-client/libs/design-system/src/lib/button/button.stories.ts +++ b/alfa-client/libs/design-system/src/lib/button/button.stories.ts @@ -6,7 +6,6 @@ import { ButtonComponent } from './button.component'; const meta: Meta<ButtonComponent> = { title: 'Button', component: ButtonComponent, - subcomponents: { FileIconComponent }, decorators: [ moduleMetadata({ imports: [ButtonComponent, FileIconComponent], @@ -20,21 +19,36 @@ export default meta; type Story = StoryObj<ButtonComponent>; export const Default: Story = { - args: { text: 'Hello world!', isLoading: false, variant: 'primary' }, + args: { + text: 'Hello world!', + isLoading: false, + variant: 'primary', + }, argTypes: { variant: { options: ['primary', 'outline'], control: { type: 'radio' }, + table: { defaultValue: { summary: 'primary' } }, }, }, }; export const WithIcon: Story = { - args: { text: 'I have an icon', isLoading: false, variant: 'outline' }, - render: (args: ButtonComponent) => ({ + args: { + text: 'I have an icon', + variant: 'outline', + }, + render: (args) => ({ props: args, template: `<ods-button ${argsToTemplate(args)}> - <ods-file-icon icon fileType='pdf' size='extra-large'></ods-file-icon> + <ods-file-icon icon fileType='pdf' size='small'></ods-file-icon> </ods-button>`, }), }; + +export const IsLoading: Story = { + args: { + text: 'Loading...', + isLoading: true, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..7a3537402744cf3da587a4ac3bfeecf4b8382dd6 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts @@ -0,0 +1,24 @@ +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { ErrorMessageComponent } from './error-message.component'; + +const meta: Meta<ErrorMessageComponent> = { + title: 'Error message', + component: ErrorMessageComponent, + decorators: [ + moduleMetadata({ + imports: [ErrorMessageComponent], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<ErrorMessageComponent>; + +export const Default: Story = { + args: { + error: 'Text of error', + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.component.ts b/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.component.ts index 103f12039191e3f8d0990d9365cada09f9d7dbe2..d883ea9a7d5a8a4d47fb591668563ac6700a8c4e 100644 --- a/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.component.ts +++ b/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.component.ts @@ -11,7 +11,6 @@ import { Component, ElementRef, Input, ViewChild } from '@angular/core'; }) export class FileUploadButtonComponent { @Input({ required: true }) id!: string; - @Input() text: string = ''; @Input() isLoading: boolean = false; @Input() accept: string = '*/*'; diff --git a/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts b/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts index a304c432a70ab5eaae243845e58e71ff3f18a84c..4611142703816438b0b927d1e23038bd4d7994b5 100644 --- a/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts +++ b/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts @@ -2,15 +2,20 @@ import { CommonModule } from '@angular/common'; import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; import { AttachmentIconComponent } from '../../icons/attachment-icon/attachment-icon.component'; +import { SpinnerIconComponent } from '../../icons/spinner-icon/spinner-icon.component'; import { FileUploadButtonComponent } from './file-upload-button.component'; const meta: Meta<FileUploadButtonComponent> = { title: 'File upload button', component: FileUploadButtonComponent, - subcomponents: { AttachmentIconComponent }, decorators: [ moduleMetadata({ - imports: [CommonModule, FileUploadButtonComponent, AttachmentIconComponent], + imports: [ + CommonModule, + FileUploadButtonComponent, + AttachmentIconComponent, + SpinnerIconComponent, + ], }), ], excludeStories: /.*Data$/, @@ -22,13 +27,15 @@ type Story = StoryObj<FileUploadButtonComponent>; export const Upload: Story = { args: { - text: 'Anhang hochladen', + id: '1', isLoading: false, }, render: (args: FileUploadButtonComponent) => ({ props: args, template: `<ods-file-upload-button ${argsToTemplate(args)}> - <ods-attachment-icon></ods-attachment-icon> + <ods-attachment-icon icon></ods-attachment-icon> + <ods-spinner-icon spinner size="medium"></ods-spinner-icon> + <p text>Anhang hochladen</p> </ods-file-upload-button>`, }), }; diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..96ec7406916b5f4773f6aa448ad12112c913ebfc --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts @@ -0,0 +1,93 @@ +import { CommonModule } from '@angular/common'; +import { FormGroupDirective } from '@angular/forms'; +import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { CloseIconComponent } from '../../icons/close-icon/close-icon.component'; +import { SaveIconComponent } from '../../icons/save-icon/save-icon.component'; +import { SendIconComponent } from '../../icons/send-icon/send-icon.component'; +import { StampIconComponent } from '../../icons/stamp-icon/stamp-icon.component'; +import { RadioButtonCardComponent } from './radio-button-card.component'; + +const meta: Meta<RadioButtonCardComponent> = { + title: 'Radio button card', + component: RadioButtonCardComponent, + decorators: [ + moduleMetadata({ + imports: [ + CommonModule, + RadioButtonCardComponent, + StampIconComponent, + CloseIconComponent, + SaveIconComponent, + SendIconComponent, + ], + providers: [FormGroupDirective], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<RadioButtonCardComponent>; + +export const Default: Story = { + args: { + label: 'bewilligt', + name: 'exampleName', + value: 'bewilligt', + variant: 'bescheid_bewilligt', + fullWidthText: false, + }, + render: (args: RadioButtonCardComponent) => ({ + props: args, + template: `<div class="my-10 flex gap-8"> + <ods-radio-button-card + ${argsToTemplate(args)} + > + <ods-stamp-icon /> + </ods-radio-button-card> + <ods-radio-button-card + label="abgelehnt" + name="exampleName" + value="abgelehnt" + variant="bescheid_abgelehnt" + > + <ods-close-icon class="fill-abgelehnt" /> + </ods-radio-button-card> + </div>`, + }), +}; + +export const Message: Story = { + args: { + label: 'bewilligt', + name: 'exampleName', + value: 'bewilligt', + variant: 'bescheid_bewilligt', + fullWidthText: false, + }, + render: (args: RadioButtonCardComponent) => ({ + props: args, + template: `<div + class="flex w-full max-w-72 flex-col gap-4" + > + <ods-radio-button-card + label="Als neue Nachricht an den Antragsteller senden" + value="NACHRICHT" + name="nachrichtOrManual" + variant="bescheid_save" + [fullWidthText]="true" + ><ods-send-icon></ods-send-icon + ></ods-radio-button-card> + <ods-radio-button-card + label="Nur speichern" + value="MANUAL" + name="nachrichtOrManual" + variant="bescheid_save" + [fullWidthText]="true" + ><ods-save-icon></ods-save-icon + ></ods-radio-button-card> + </div>`, + }), +}; diff --git a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts index 086494defe0ede679d49d6cd509ba4256399f72a..ffb625fbac3347909db7779389f1d42cf5bed157 100644 --- a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts +++ b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts @@ -48,7 +48,6 @@ type TextInputVariants = VariantProps<typeof textInputVariants>; export class TextInputComponent { @Input({ required: true }) label: string; @Input() placeholder: string = ''; - @Input() error: string; @Input() autocomplete: string = 'off'; @Input() variant: TextInputVariants['variant']; @Input() fieldControl: FormControl; diff --git a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.stories.ts b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..07adaa37698abe4d2a8911ca9b088f432c8eeca1 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.stories.ts @@ -0,0 +1,36 @@ +import { ReactiveFormsModule } from '@angular/forms'; +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { TextInputComponent } from './text-input.component'; + +const meta: Meta<TextInputComponent> = { + title: 'Text input', + component: TextInputComponent, + decorators: [ + moduleMetadata({ + imports: [TextInputComponent, ReactiveFormsModule], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<TextInputComponent>; + +export const Default: Story = { + args: { + label: 'This is text input', + placeholder: 'Input your text', + variant: 'default', + required: false, + }, + argTypes: { + variant: { + control: 'radio', + options: ['default', 'error'], + table: { defaultValue: { summary: 'default' } }, + }, + required: { table: { defaultValue: { summary: 'false' } } }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/form/textarea/textarea.stories.ts b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..f5a42c80c89d1460e18c2e1ec0e0cee35a8ee5b8 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.stories.ts @@ -0,0 +1,38 @@ +import { ReactiveFormsModule } from '@angular/forms'; +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { TextareaComponent } from './textarea.component'; + +const meta: Meta<TextareaComponent> = { + title: 'Text area', + component: TextareaComponent, + decorators: [ + moduleMetadata({ + imports: [TextareaComponent, ReactiveFormsModule], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<TextareaComponent>; + +export const Default: Story = { + args: { + label: 'This is text area', + placeholder: 'Input your text', + variant: 'default', + required: false, + rows: 3, + }, + argTypes: { + variant: { + control: 'radio', + options: ['default', 'error'], + table: { defaultValue: { summary: 'default' } }, + }, + rows: { table: { defaultValue: { summary: '3' } } }, + required: { table: { defaultValue: { summary: 'false' } } }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/attachment-icon/attachment-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/attachment-icon/attachment-icon.stories.ts index 2e5acf7b6e4af7794121b1022bbbe1bf60e5220c..f9b8400dbb30152b0faf11c5ddd2558375867ef5 100644 --- a/alfa-client/libs/design-system/src/lib/icons/attachment-icon/attachment-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/attachment-icon/attachment-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<AttachmentIconComponent> = { export default meta; type Story = StoryObj<AttachmentIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'medium' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/bescheid-generate-icon/bescheid-generate-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/bescheid-generate-icon/bescheid-generate-icon.stories.ts index fa457b7c630e1e9df9f82d96064184f571748624..6bb54e62f8cbc091881004b5df0cd4e5db7a1267 100644 --- a/alfa-client/libs/design-system/src/lib/icons/bescheid-generate-icon/bescheid-generate-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/bescheid-generate-icon/bescheid-generate-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<BescheidGenerateIconComponent> = { export default meta; type Story = StoryObj<BescheidGenerateIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'extra-large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'extra-large' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/bescheid-upload-icon/bescheid-upload-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/bescheid-upload-icon/bescheid-upload-icon.stories.ts index 6505a17d991bf39d5bec17067271d05b60bda778..e559289191604588ace69d720b85122ffd6d3748 100644 --- a/alfa-client/libs/design-system/src/lib/icons/bescheid-upload-icon/bescheid-upload-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/bescheid-upload-icon/bescheid-upload-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<BescheidUploadIconComponent> = { export default meta; type Story = StoryObj<BescheidUploadIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'extra-large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'extra-large' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.stories.ts index f09c734f71d96cf068ab53a95c468fa9c6f83773..b8a8eda0b8afab576ba5b7086d226aa2f0adcc96 100644 --- a/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<CloseIconComponent> = { export default meta; type Story = StoryObj<CloseIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'medium' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'small' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts index 3a4280cc26c8dc3c9ac0542649290e9e4ff41422..544495d4fab1c914f1126ffa182911cdb23d7a10 100644 --- a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts +++ b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts @@ -13,7 +13,6 @@ const fileiconVariants = cva('', { pdf: 'fill-pdf', xml: 'fill-ozggray-300', exclamation: 'fill-error', - loading: 'fill-warning', }, size: { small: 'w-4 h-5', diff --git a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts index a2ffc07ff732f6d8253b547895b420128767b7d6..7cde4da791673cb1153120abd8262e9044afbba5 100644 --- a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts @@ -13,5 +13,23 @@ export default meta; type Story = StoryObj<FileIconComponent>; export const Default: Story = { - args: { fileType: 'pdf', size: 'large' }, + args: { size: 'large', fileType: 'pdf' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'large'], + description: 'Size of icon', + table: { + defaultValue: { summary: 'large' }, + }, + }, + fileType: { + control: 'select', + options: ['pdf', 'xml', 'doc', 'image', 'json', 'exclamation'], + description: 'Type of file icon', + table: { + defaultValue: { summary: 'xml' }, + }, + }, + }, }; diff --git a/alfa-client/libs/design-system/src/lib/icons/save-icon/save-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/save-icon/save-icon.stories.ts index dc7a2f9d6a3bce62a8a8dff82c0b689f8e6e74b8..664f3e90a749172a1d20e70592d1349fb3ba1a1e 100644 --- a/alfa-client/libs/design-system/src/lib/icons/save-icon/save-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/save-icon/save-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<SaveIconComponent> = { export default meta; type Story = StoryObj<SaveIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'medium' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/send-icon/send-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/send-icon/send-icon.stories.ts index 126016baf16cdf9eb47f049230178be42ff9de57..b7a1bf7aca031602253ccc43e075d0bd232e90e0 100644 --- a/alfa-client/libs/design-system/src/lib/icons/send-icon/send-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/send-icon/send-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<SendIconComponent> = { export default meta; type Story = StoryObj<SendIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'medium' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..5a0820ffe695dad7cb9affe275db20ce87c348fc --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/spinner-icon/spinner-icon.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/angular'; + +import { SpinnerIconComponent } from './spinner-icon.component'; + +const meta: Meta<SpinnerIconComponent> = { + title: 'Icons/Spinner icon', + component: SpinnerIconComponent, + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<SpinnerIconComponent>; + +export const Default: Story = { + args: { size: 'large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'full' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/icons/stamp-icon/stamp-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/stamp-icon/stamp-icon.stories.ts index 5401c629c010897ee4eafe663c7c334bc8a57cac..0b1629631a88d9a91dc227ac68bb536662748379 100644 --- a/alfa-client/libs/design-system/src/lib/icons/stamp-icon/stamp-icon.stories.ts +++ b/alfa-client/libs/design-system/src/lib/icons/stamp-icon/stamp-icon.stories.ts @@ -12,4 +12,16 @@ const meta: Meta<StampIconComponent> = { export default meta; type Story = StoryObj<StampIconComponent>; -export const Default: Story = {}; \ No newline at end of file +export const Default: Story = { + args: { size: 'large' }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large', 'extra-large', 'full'], + description: 'Size of icon. Property "full" means 100%', + table: { + defaultValue: { summary: 'large' }, + }, + }, + }, +}; diff --git a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.stories.ts b/alfa-client/libs/design-system/src/lib/testbtn/testbtn.stories.ts deleted file mode 100644 index effd01811bbb02c27ea569c992b0ea37aff8d51a..0000000000000000000000000000000000000000 --- a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.stories.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/angular'; - -import { TestbtnComponent } from './testbtn.component'; - -const meta: Meta<TestbtnComponent> = { - title: 'Test button', - component: TestbtnComponent, - excludeStories: /.*Data$/, - tags: ['autodocs'], -}; - -export default meta; -type Story = StoryObj<TestbtnComponent>; - -export const Default: Story = { - render: () => ({ - template: '<ozg-testbtn><p>Hello world!</p></ozg-testbtn>' - }), -};