import { Meta, Story, ArgsTable, Canvas } from '@storybook/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';
import * as LeadFormStories from './LeadForm.stories';

<Meta of={LeadFormStories} />

# 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 of={LeadFormStories.DefaultUs} />

  <Story of={LeadFormStories.Canada} />

  <Story of={LeadFormStories.Australia} />

  <h2>No default values</h2>

  <i>
    Submit form to see required values and associated validation errors
  </i>

  <Story of={LeadFormStories.NoDefaultValuesMinimumRequiredForLeadsV2} />

  <Story of={LeadFormStories.NoDefaultValuesMinimumRequiredForLeadsV1} />

  <Story of={LeadFormStories.CustomAttributes} />
</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} />
