forge/Anvil
1
0
Fork 0
Code Pull requests Activity

docs: create stories for Login page

Browse source 
This is the second form I have touched. Here, I even have a light
validation implemented on the server.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-02-23 13:58:34 +01:00
parent b0366f26ed
commit 390c54a2bf
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
2 changed files with 90 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
stories/pages/Login.stories.ts Normal file
View file

@ -0,0 +1,45 @@
import type { Meta, StoryObj } from '@storybook/svelte';
import Login from '$lib/components/pages/Login.svelte';
const meta = {
title: 'Pages/Login',
component: Login,
tags: ['autodocs'],
argTypes: {
form: { controls: 'object' }
}
} satisfies Meta<Login>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {
args: {
form: {
account: 'jane.doe@domain.example',
incorrect: false,
missing: false,
}
}
};
export const MissingInput: Story = {
args: {
form: {
account: '',
incorrect: false,
missing: true,
}
}
};
export const InvalidFormData: Story = {
args: {
form: {
account: 'jane.doe@domain.example',
incorrect: true,
missing: false,
}
}
};

45
stories/templates/Login.stories.ts Normal file
View file

@ -0,0 +1,45 @@
import type { Meta, StoryObj } from '@storybook/svelte';
import Login from '$lib/components/templates/Login.svelte';
const meta = {
title: 'Templates/Login',
component: Login,
tags: ['autodocs'],
argTypes: {
form: { controls: 'object' }
}
} satisfies Meta<Login>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {
args: {
form: {
account: 'jane.doe@domain.example',
incorrect: false,
missing: false,
}
}
};
export const MissingInput: Story = {
args: {
form: {
account: '',
incorrect: false,
missing: true,
}
}
};
export const InvalidFormData: Story = {
args: {
form: {
account: 'jane.doe@domain.example',
incorrect: true,
missing: false,
}
}
};