forge/Anvil
1
0
Fork 0
Code Pull requests Activity

docs: write Story for LoginForm

Browse source 
As it is visible here, part of the layout is deferred to the parent
component. See Login template.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-02-28 20:25:19 +01:00
parent 98f9f724ce
commit dc707869b4
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
3 changed files with 116 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
stories/organisms/LoginForm.stories.ts Normal file
View file

@ -0,0 +1,110 @@
import type { Meta, StoryObj } from '@storybook/svelte';
import LoginForm from '$lib/components/organisms/LoginForm.svelte';
const meta = {
title: 'Organisms/LoginForm',
component: LoginForm,
tags: ['autodocs'],
argTypes: {
form: { controls: 'object' },
i18n: { controls: 'object' },
servers: { controls: 'object' }
}
} satisfies Meta<LoginForm>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {
args: {
form: {
account: 'jane.doe@domain.example',
incorrect: false,
missing: false
},
i18n: {
fields: {
account: {
label: 'page.login.form.fields.account.label'
},
passphrase: {
label: 'page.login.form.fields.passphrase.label',
placeholder: 'page.login.form.fields.passphrase.placeholder'
},
server: {
label: 'page.login.form.fields.server.label'
}
},
reset: 'page.login.form.reset',
submit: 'page.login.form.submit',
validation: {
incorrect: 'page.login.form.validation.incorrect',
missing: 'page.login.form.validation.missing'
}
},
servers: []
}
};
export const MissingInput: Story = {
args: {
form: {
account: '',
incorrect: false,
missing: true
},
i18n: {
fields: {
account: {
label: 'page.login.form.fields.account.label'
},
passphrase: {
label: 'page.login.form.fields.passphrase.label',
placeholder: 'page.login.form.fields.passphrase.placeholder'
},
server: {
label: 'page.login.form.fields.server.label'
}
},
reset: 'page.login.form.reset',
submit: 'page.login.form.submit',
validation: {
incorrect: 'page.login.form.validation.incorrect',
missing: 'page.login.form.validation.missing'
}
},
servers: []
}
};
export const InvalidFormData: Story = {
args: {
form: {
account: 'jane.doe@domain.example',
incorrect: true,
missing: false
},
i18n: {
fields: {
account: {
label: 'page.login.form.fields.account.label'
},
passphrase: {
label: 'page.login.form.fields.passphrase.label',
placeholder: 'page.login.form.fields.passphrase.placeholder'
},
server: {
label: 'page.login.form.fields.server.label'
}
},
reset: 'page.login.form.reset',
submit: 'page.login.form.submit',
validation: {
incorrect: 'page.login.form.validation.incorrect',
missing: 'page.login.form.validation.missing'
}
},
servers: []
}
};

6
stories/pages/Login.stories.ts
View file

@ -19,7 +19,7 @@ export const Plain: Story = {
form: {
account: 'jane.doe@domain.example',
incorrect: false,
missing: false,
missing: false
}
}
};
@ -29,7 +29,7 @@ export const MissingInput: Story = {
form: {
account: '',
incorrect: false,
missing: true,
missing: true
}
}
};
@ -39,7 +39,7 @@ export const InvalidFormData: Story = {
form: {
account: 'jane.doe@domain.example',
incorrect: true,
missing: false,
missing: false
}
}
};

6
stories/templates/Login.stories.ts
View file

@ -19,7 +19,7 @@ export const Plain: Story = {
form: {
account: 'jane.doe@domain.example',
incorrect: false,
missing: false,
missing: false
}
}
};
@ -29,7 +29,7 @@ export const MissingInput: Story = {
form: {
account: '',
incorrect: false,
missing: true,
missing: true
}
}
};
@ -39,7 +39,7 @@ export const InvalidFormData: Story = {
form: {
account: 'jane.doe@domain.example',
incorrect: true,
missing: false,
missing: false
}
}
};