import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import LeadForm from '../LeadForm';
import { leadFormMock, leadFormMockWithoutDefaultValues, leadFormMockWithoutDefaultValuesLeadsV1,
    leadFormMockUS, leadFormMockCanada, leadFormMockAustralia } from '../../../../mocks/components/leadForm';
import { leadFormWithCustomAttributes } from '../../../../mocks/form/leadForm'
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

<Meta title="Components/Product Lead Form" component={LeadForm} />

# LeadForm
<br />

## `LeadForms` are used when the main CTA for a product is "Contact Us" instead of a direct purchase.
*All stories use Leads V2 unless specified*
<br />

### Default
<Canvas>
    <Story name="Default - US">
        <LeadForm data={leadFormMockUS} />
    </Story>
    <Story name="Canada">
        <LeadForm data={leadFormMockCanada} />
    </Story>
    <Story name="Australia">
        <LeadForm data={leadFormMockAustralia} />
    </Story>
    <h2>No default values</h2>
    <i>
        Submit form to see required values and associated validation errors
    </i>
    <Story name="No default values - minimum required for Leads V2">
        <LeadForm data={leadFormMockWithoutDefaultValues} />
    </Story>
    <Story name="No default values - minimum required for Leads V1">
        <LeadForm data={leadFormMockWithoutDefaultValuesLeadsV1} />
    </Story>
    <Story name="Custom attributes">
        <LeadForm data={leadFormWithCustomAttributes} />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="leadFormData"
    code={leadFormMock}
/>

```jsx
import LeadForm from '@appdirect/sfb-theme-components/src/components/product-lead-form/LeadForm';

<LeadForm data={leadFormData} />

```

## Props
<ArgsTable of={LeadForm} />
