import DialogContentContainer from "../DialogContentContainer";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import DialogContentContainerExample from "./DialogContentContainerExample";

export const metaSettings = createStoryMetaSettings({
  component: DialogContentContainer,
  enumPropNamesArray: ["type", "size"]
});

<Meta
  title="Popover/DialogContentContainer - (Coming Soon)"
  component={DialogContentContainer}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const dialogContentContainerTemplate = createComponentTemplate(DialogContentContainer);

<!--- Component documentation -->

# DialogContentContainer

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Feedback](#feedback)

## Overview

This component is a style component, it provide the look and feel of elevation.

<Canvas>
  <Story name="Overview" args={{ children: <DialogContentContainerExample /> }}>
    {dialogContentContainerTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={DialogContentContainer} />

## Usage

<UsageGuidelines guidelines={["Use this component in order to wrap components within Dialog or Modal"]} />

## Variants

### Popover

<Canvas>
  <Story name="Popover">
    <DialogContentContainer type={DialogContentContainer.types.POPOVER}>
      <DialogContentContainerExample />
    </DialogContentContainer>
  </Story>
</Canvas>

### Modal

<Canvas>
  <Story name="Modal">
    <DialogContentContainer type={DialogContentContainer.types.MODAL}>
      <DialogContentContainerExample />
    </DialogContentContainer>
  </Story>
</Canvas>
