import { Canvas, Meta } from "@storybook/blocks";
import { UsageGuidelines } from "vibe-storybook-components";
import {
  DIALOG_CONTENT_CONTAINER,
  DIVIDER,
  FLEX
} from "../../../storybook/components/related-components/component-description-map";
import { TipBenefits } from "./Box.stories.helpers";
import * as BoxStories from "./Box.stories";

<Meta of={BoxStories} />

# Box

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Box component is used as a wrapper component.

Its purpose is to help scaffold compositions while using Vibe's prop keys without writing new CSS. <br />It can be used as a container for
atom based compositions, it can accept all Vibe style related props and have a semantic html tag.

<Canvas of={BoxStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Use as a styled container",
    "Use to add spacing, borders, and rounded corners to areas of content",
    "Use as an inner component for spacing or styles"
  ]}
/>

<TipBenefits />

## Utility props

### BACKGROUNDS COLORS

<Canvas of={BoxStories.BackgroundColors} />

### TEXT COLORS

<Canvas of={BoxStories.TextColors} />

### BORDER

<Canvas of={BoxStories.Border} />

### BORDER COLOR

<Canvas of={BoxStories.BorderColor} />

### ROUNDED CORNERS

#### Size props

<Canvas of={BoxStories.RoundCorners} />

### SHADOW

<Canvas of={BoxStories.Shadow} />

### MARGIN

#### Size props

<Canvas of={BoxStories.Margin} />

#### Property variations per each size:

```
margin
marginX (x axis: left, right)
marginY (y axis: top, bottom)
marginTop
marginEnd
marginBottom
marginStart
```

#### Aligning Auto and none

each property variation can hold additional values for:

```
AUTO
NONE
```

### PADDING

#### Size props

<Canvas of={BoxStories.Padding} />

#### Property variations per each size:

```
padding
paddingX (x axis: left, right)
paddingY (y axis: top, bottom)
paddingTop
paddingEnd
paddingBottom
paddingStart
```

### Component Disabled

<Canvas of={BoxStories.Disabled} />

## Related components

<RelatedComponents componentsNames={[FLEX, DIVIDER, DIALOG_CONTENT_CONTAINER]} />