import Divider from "../Divider";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createStoryMetaSettings } from "../../../storybook";
import { TAG, ICONS, LABEL } from "../../../storybook/components/related-components/component-description-map";
import classes from "./Divider.stories.module.scss";

export const metaSettings = createStoryMetaSettings({
  component: Divider,
  enumPropNamesArray: ["direction"]
});

<Meta
  title="Data display/Divider"
  component={Divider}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const dividerTemplate = args => (
  <div style={{ width: "400px", height: "170px", marginTop: "150px" }}>
    <Divider {...args} />
  </div>
);

<!--- Component documentation -->

# Divider

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

## Overview

Divider create separation between two UI elements

<Canvas>
  <Story name="Overview">{dividerTemplate.bind({})}</Story>
</Canvas>

## Props

<ArgsTable story={"Overview"} />

## Variants

### Directions

<Canvas>
  <Story name="Directions">
    <div style={{ display: "flex", flexDirection: "column", width: "100%", height: "400px" }}>
      <div style={{ height: 40 }}>
        <span className={classes["divider-description-horizontal-text"]}>Horizontal</span>
        <div style={{ marginLeft: "120px", marginTop: "-10px" }}>
          <Divider direction={Divider.directions.HORIZONTAL} />
        </div>
      </div>
      <div className={classes["divider-description-container"]}>
        <span style={{ marginTop: "-150px" }}>Vertical</span>
        <div style={{ marginTop: "150px", marginLeft: "-100px" }}>
          <Divider direction={Divider.directions.VERTICAL} className={classes["divider-description-horizontal"]} />
        </div>
      </div>
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[LABEL, ICONS, TAG]} />
