import Label from "../Label";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import { TAG, COUNTER, TOOLTIP } from "../../../storybook/components/related-components/component-description-map";
import { Link, MultipleStoryElementsWrapper } from "../../../storybook/components";
import "./label.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: Label,
  enumPropNamesArray: ["kind", "color"]
});

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

<!--- Component template -->

export const labelTemplate = createComponentTemplate(Label);

<!--- Component documentation -->

# Label

- [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

A label indicates the status of an item. It is not clickable.

<Canvas>
  <Story name="Overview" args={{ text: "New" }}>
    {labelTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Label} />

## Usage

<UsageGuidelines
  guidelines={[
    "Label will always appear in context next to the item it classifies.",
    "Displays a short message like new, beta, coming soon.,etc.",
    "Use only UI colors, not content colors (like status colors)."
  ]}
/>

<Tip title="Check yourself">
  Need to count or indicate numbers? Use the{" "}
  <Link href="/?path=/docs/feedback-counter--overview" size={Link.sizes.SMALL} withoutSpacing>
    Counter
  </Link>{" "}
  component instead.
</Tip>

## Variants

### States

<Canvas>
  <Story name="States">
    <div className="l3-storybook-label_group l3-storybook-label_states-gap">
      <Label text="New" />
      Fill
    </div>
    <div className="l3-storybook-label_group l3-storybook-label_states-gap">
      <Label text="New" kind={Label.kinds.LINE} />
      Outline
    </div>
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    <div className="l3-storybook-label_group">
      <Label text="New" />
      <Label text="New" kind={Label.kinds.LINE} />
    </div>
    <div className="l3-storybook-label_group">
      <Label text="New" color={Label.colors.NEGATIVE} />
      <Label text="New" color={Label.colors.NEGATIVE} kind={Label.kinds.LINE} />
    </div>
    <div className="l3-storybook-label_group">
      <Label text="New" color={Label.colors.POSITIVE} />
      <Label text="New" color={Label.colors.POSITIVE} kind={Label.kinds.LINE} />
    </div>
    <div className="l3-storybook-label_group">
      <Label text="New" color={Label.colors.DARK} />
      <Label text="New" color={Label.colors.DARK} kind={Label.kinds.LINE} />
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <Label text="New" />,
        description: "Use label to indicate the status of an item, for example: “New”."
      },
      negative: {
        component: <Label text="123" />,
        description: (
          <>
            Don’t use the label component in order to indicate numbers, instead use the{" "}
            <Link href="/?path=/docs/feedback-counter--overview" withoutSpacing>
              Counter.
            </Link>
          </>
        )
      }
    },
    {
      positive: {
        component: (
          <div className="l3-storybook-label_inline-block">
            <h5 className="l3-storybook-label_title">Categories</h5>
            <Label text="new" />
          </div>
        ),
        description: "Use label only once per item."
      },
      negative: {
        component: [
          <div className="l3-storybook-label_block">
            <h5>Categories</h5>
            <div className="l3-storybook-label_inline-block">
              <Label text="Featured" />
              <Label text="CRM" />
              <Label text="Export" />
            </div>
          </div>
        ],
        description: (
          <>
            Don’t use multiple lables for one item. Instead, use{" "}
            <Link href="/?path=/docs/data-display-tags--overview" withoutSpacing>
              Tags.
            </Link>
          </>
        )
      }
    },
    {
      positive: {
        component: [<Label text="New" kind={Label.kinds.LINE} />, <Label text="Beta" />],
        description: "Use only the UI colors above."
      },
      negative: {
        component: [
          <Label
            className="l3-storybook-label_bad-lable l3-storybook-label_purple"
            kind={Label.kinds.LINE}
            text="Beta"
          />,
          <Label className="l3-storybook-label_bad-lable l3-storybook-label_pink" kind={Label.kinds.LINE} text="Beta" />
        ],
        description: "Don’t use any content colors for labels. If the page is full of CTAs, use the outline state."
      }
    }
  ]}
/>

## Use cases and examples

### Secondary label

In case of visual overload, use the secondary label in order to create hirarchy.

<Canvas>
  <Story name="Secondary label">
    <MultipleStoryElementsWrapper className="l3-storybook-label_column-block">
      <div className="l3-storybook-label_article">
        <h5 className="l3-storybook-label_title">Gannt</h5>
        <Label text="New" kind={Label.kinds.LINE} />
        <p>Plan, track and present your projects visually using the Gannt chart</p>
      </div>
      <div className="l3-storybook-label_article">
        <h5 className="l3-storybook-label_title">Apps</h5>
        <Label text="New" kind={Label.kinds.LINE} />
        <p>Enhance your dashboard with widgets built on the l3vels apps framework</p>
      </div>
    </MultipleStoryElementsWrapper>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[TOOLTIP, COUNTER, TAG]} />
