import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductPlan from '../ProductPlan';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { editionsMockData } from '../../../../mocks/product/productEditions';

export const dataOnlyPlans = {
    ...editionsMockData,
    footnotes: undefined
};

export const dataOnlyNotes = {
    ...editionsMockData,
    footnotes: [
        ...editionsMockData.footnotes,
        '*Lorem ipsum dolor sit amet, consectetur adipiscing elicitudin leo eu, vulputate turpis.',
        '*Lorem ipsum dolor sit amet, consectetur adipiscing elicitudin leo eu, vulputate turpis.',
        '*Lorem ipsum dolor sit amet, consectetur adipiscing elicitudin leo eu, vulputate turpis.'
    ],
    bullets: undefined
};

<Meta title="Components/Product Plan" component={ProductPlan} />

# ProductPlan
<br />

## `ProductPlans` display all plans and notes that are included in a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductPlan data={editionsMockData} />
    </Story>
</Canvas>

### Only plans
<Canvas>
    <Story name="Only plans">
        <ProductPlan data={dataOnlyPlans} />
    </Story>
</Canvas>

### Only notes
<Canvas>
    <Story name="Only notes">
        <ProductPlan data={dataOnlyNotes} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="productPlanData"
    code={editionsMockData}
/>

```jsx
import ProductPlan from '@appdirect/sfb-theme-components/src/components/product-plan/ProductPlan';

<ProductPlan data={productPlanData} />
```

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