import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Label from 'js/patterns/atoms/forms/label'
import Input from 'js/patterns/atoms/forms/input'

import FromTo from 'js/patterns/organisms/form/from-to'

import FormContact from 'js/patterns/organisms/form/contact'
import FormLogin from 'js/patterns/organisms/form/login'
import FormRegister from 'js/patterns/organisms/form/register'
import FormCreditCard from 'js/patterns/organisms/form/credit-card'
import FormSepa from 'js/patterns/organisms/form/sepa'
import FormAddress from 'js/patterns/organisms/form/address'
import FormAddressChange from 'js/patterns/organisms/form/address-change'
import FormMailChange from 'js/patterns/organisms/form/mail-change'
import FormPasswordReset from 'js/patterns/organisms/form/password-reset'
import FormCoupon from 'js/patterns/organisms/form/coupon'
import FormBanking from 'js/patterns/organisms/form/banking'
import FormEmailChange from 'js/patterns/organisms/form/email-change'
import FormPasswordChange from 'js/patterns/organisms/form/password-change'

<Meta title='4.Organisms|Forms' />

# Forms

## FromTo
<Preview withToolbar>
    <Story name='FromTo'>
        <FromTo />
    </Story>
</Preview>

## Row
<Preview withToolbar>
    <Story name='Row'>
        <div className='c-form-row'>
            <Label />
            <Input />
            <a href='' className='c-link c-link--quiet o-flex o-flex--end'>Passwort vergessen?</a>
        </div>
    </Story>
</Preview>

## Contact Form
<Preview withToolbar>
    <Story name='Contact Form'>
        <FormContact />
    </Story>
</Preview>

## Login Form
<Preview withToolbar>
    <Story name='Login Form'>
        <FormLogin />
    </Story>
</Preview>

## Register Form
<Preview withToolbar>
    <Story name='Register Form'>
        <FormRegister />
    </Story>
</Preview>

## CreditCard Form
<Preview withToolbar>
    <Story name='CreditCard Form'>
        <FormCreditCard />
    </Story>
</Preview>

## Sepa Form
<Preview withToolbar>
    <Story name='Sepa Form'>
        <FormSepa />
    </Story>
</Preview>

## Banking Form
<Preview withToolbar>
    <Story name='Banking Form'>
        <FormBanking />
    </Story>
</Preview>

## Password Reset Form
<Preview withToolbar>
    <Story name='Password Reset Form'>
        <FormPasswordReset />
    </Story>
</Preview>

## Address Form
<Preview withToolbar>
    <Story name='Address Form'>
        <FormAddress />
    </Story>
</Preview>

## Address Form Change
<Preview withToolbar>
    <Story name='Address Form Change'>
        <FormAddressChange />
    </Story>
</Preview>

## Mail Change Form
<Preview withToolbar>
    <Story name='Mail Change Form'>
        <FormMailChange />
    </Story>
</Preview>

## Coupon Form
<Preview withToolbar>
    <Story name='Coupon Form'>
        <FormCoupon />
    </Story>
</Preview>

## Email Change Form
<Preview withToolbar>
    <Story name='Email Change Form'>
        <FormEmailChange />
    </Story>
</Preview>

## Password Change Form
<Preview withToolbar>
    <Story name='Password Change Form'>
        <FormPasswordChange />
    </Story>
</Preview>

export const formPasswordChange = () => {
    return (
        <FormPasswordChange />
    )
}

formPasswordChange.story = {
    name: 'Form Password Change',
}
