import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import LeadForm from '../LeadForm';
import { leadFormMock, leadFormMockWithoutDefaultValues, leadFormMockUS, leadFormMockCanada, leadFormMockAustralia } 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.
<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>
    <Story name="No default values">
        <LeadForm data={leadFormMockWithoutDefaultValues} />
    </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} />
