Skip to content
Snippets Groups Projects
Commit 1df613fd authored by OZGCloud's avatar OZGCloud
Browse files

OZG-5832 Add new stories

- fix some stories
parent d9693158
No related branches found
No related tags found
No related merge requests found
Showing
with 210 additions and 30 deletions
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>`,
}),
};
......@@ -12,6 +12,8 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
styles: [':host {@apply flex}'],
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
......
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>`,
}),
};
......@@ -6,7 +6,13 @@ import { ButtonCardComponent } from './button-card.component';
const meta: Meta<ButtonCardComponent> = {
title: 'Button card',
component: ButtonCardComponent,
subcomponents: { BescheidGenerateIconComponent },
parameters: {
docs: {
description: {
component: 'A button with two lines of text',
},
},
},
decorators: [
moduleMetadata({
imports: [ButtonCardComponent, BescheidGenerateIconComponent],
......@@ -23,7 +29,7 @@ export const Default: Story = {
args: {
text: 'Bescheiddokument',
subText: 'automatisch erstellen',
isLoading: true,
isLoading: false,
},
argTypes: {
text: { description: 'First line of text' },
......
......@@ -6,7 +6,6 @@ import { ButtonComponent } from './button.component';
const meta: Meta<ButtonComponent> = {
title: 'Button',
component: ButtonComponent,
subcomponents: { FileIconComponent },
decorators: [
moduleMetadata({
imports: [ButtonComponent, FileIconComponent],
......
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',
},
};
......@@ -2,16 +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 { FileUploadButtonComponent } from './file-upload-button.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, SpinnerIconComponent },
decorators: [
moduleMetadata({
imports: [CommonModule, FileUploadButtonComponent, AttachmentIconComponent, SpinnerIconComponent],
imports: [
CommonModule,
FileUploadButtonComponent,
AttachmentIconComponent,
SpinnerIconComponent,
],
}),
],
excludeStories: /.*Data$/,
......@@ -23,7 +27,7 @@ type Story = StoryObj<FileUploadButtonComponent>;
export const Upload: Story = {
args: {
id: "1",
id: '1',
isLoading: false,
},
render: (args: FileUploadButtonComponent) => ({
......
......@@ -3,9 +3,9 @@ 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 { StampIconComponent } from '../../icons/stamp-icon/stamp-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> = {
......@@ -13,7 +13,14 @@ const meta: Meta<RadioButtonCardComponent> = {
component: RadioButtonCardComponent,
decorators: [
moduleMetadata({
imports: [CommonModule, RadioButtonCardComponent, StampIconComponent, CloseIconComponent, SaveIconComponent, SendIconComponent],
imports: [
CommonModule,
RadioButtonCardComponent,
StampIconComponent,
CloseIconComponent,
SaveIconComponent,
SendIconComponent,
],
providers: [FormGroupDirective],
}),
],
......
......@@ -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;
......
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' } } },
},
};
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' } } },
},
};
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>'
}),
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment