import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import Checkbox from "../Checkbox";
import { Link, UnstyledList, UnstyledListItem, createComponentTemplate } from "../../../storybook";
import { Calendar } from "../../Icon/Icons";
import {
  RADIO_BUTTON,
  TOGGLE,
  DROPDOWN
} from "../../../storybook/components/related-components/component-description-map";
import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
import "./checkbox.stories.scss";

<Meta title="Inputs/Checkbox" component={Checkbox} />

<!--- Component template -->

export const checkboxTemplate = createComponentTemplate(Checkbox);

<!--- Component documentation -->

# Checkbox

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

Checkboxes allow users to select one or more items from a set of options.

<Canvas>
  <Story name="Overview" args={{ label: "Option", defaultChecked: true }}>
    {checkboxTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Checkbox} />

## Usage

<UsageGuidelines
  guidelines={[
    <span className="l3-style-story-checkbox_list">
      Use checkboxes to:
      <span className="l3-style-story-checkbox_list-item">1. Select one or more options from a list</span>
      <span className="l3-style-story-checkbox_list-item">2. Turn an item on or off in a desktop environment</span>
    </span>,
    "Use checkboxes independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection.",
    "Ensure both label and input are clickable to select the checkbox field. ",
    "Keep a positive tone of voice. For example: “Turn on notifications” instead of “Turn off notifications”.",
    "Checkboxes should be listed according to a logical order.",
    "Place checkboxes vertically, using 16px spacing.",
    "Checkbox will always apear with a label."
  ]}
/>

<Tip title="Am I using the right component?">
  For settings that are immediately applied, consider using a{" "}
  <Link href="/?path=/docs/inputs-toggle--overview" size={Link.sizes.SMALL} withoutSpacing>
    toggle switch
  </Link>{" "}
  instead.
</Tip>

## Variants

### Kinds

<Canvas>
  <Story name="Kinds">
    <Checkbox label="primary" kind="primary" />
    <Checkbox label="secondary" kind="secondary" />
  </Story>
</Canvas>

### Size

Has Large and Small sizes

<Canvas>
  <Story name="Size">
    <Checkbox label="large" size="large" />
    <Checkbox label="large" size="large" disabled />
    <Checkbox label="small" size="small" />
    <Checkbox label="small" size="small" disabled />
  </Story>
</Canvas>

### Description

<Canvas>
  <Story name="Description">
    <Checkbox
      label="Checkbox with description"
      size="large"
      description="Helpful description of the option which may briefly highlight side effects or conditions of the option."
    />
    <Checkbox
      label="Checkbox with description"
      size="small"
      description="Helpful description of the option which may briefly highlight side effects or conditions of the option."
      kind="secondary"
    />
  </Story>
</Canvas>

### States

Has 4 states: regular, selected, and disabled.

<Canvas>
  <Story name="States">
    <Checkbox label="Regular" />
    <Checkbox label="Selected" checked />
    <Checkbox label="Indeterminate" indeterminate />
    <Checkbox label="Disabled" disabled />
    <Checkbox label="Disabled checked" disabled checked />
    <Checkbox label="Disabled indeterminate" disabled indeterminate />
  </Story>
</Canvas>

### Variants of Checkboxes' Labels

Component have ability to render with:

<UnstyledList>
  <UnstyledListItem>with text label</UnstyledListItem>
  <UnstyledListItem>with component label</UnstyledListItem>
  <UnstyledListItem>with empty label (empty DOM element will be rendered)</UnstyledListItem>
  <UnstyledListItem>without label (DOM element for label will not be rendered).</UnstyledListItem>
</UnstyledList>
Check React source and rendered HTML.

<Canvas>
  <Story name="Labels">
    <Checkbox ariaLabel="With Label" label="With label" />
    <Checkbox
      ariaLabel="With Component Label"
      label={
        <span class="custom-component-label">
          <Calendar size="12" />
          Component Label
        </span>
      }
    />
    <Checkbox ariaLabel="With Empty Label" label="" />
    <Checkbox ariaLabel="Without Label" label={false} />
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-style-story-checkbox_wrapper">
            <Checkbox label="Item 1" name="Item 1" />
            <Checkbox label="Item 2" name="Item 2" checked />
            <Checkbox label="Item 3" name="Item 3" checked />
          </DialogContentContainer>
        ),
        description: "Use checkboxes when one or more items can be selected."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-style-story-checkbox_wrapper">
            <Checkbox label="Item 1" name="Item 1" checked />
            <Checkbox label="Item 2" name="Item 2" disabled />
            <Checkbox label="Item 3" name="Item 3" disabled />
          </DialogContentContainer>
        ),
        description: (
          <>
            Don't use checkboxes when only one item can be selected from a list. Use{" "}
            <Link href="/?path=/docs/inputs-radio-button--overview" withoutSpacing>
              radio buttons
            </Link>{" "}
            instead.
          </>
        )
      }
    },
    {
      positive: {
        component: (
          <div className="l3-style-story-checkbox_border">
            <Checkbox label="Option" checked />
          </div>
        ),
        description: "Use the checkbox label’s prop to describe the option purpse."
      },
      negative: {
        component: [
          <div className="l3-style-story-checkbox_border">
            <Checkbox className="l3-style-story-checkbox_minus-margin" checked />
          </div>,
          <div className="l3-style-story-checkbox_border">Option</div>
        ],
        description: "Don’t use a separte div which is not related to the Checkbox component."
      }
    },
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-style-story-checkbox_wrapper">
            <Checkbox label="Item 1" name="Item 1" />
            <Checkbox label="Item 2" name="Item 2" checked />
            <Checkbox label="Item 3" name="Item 3" checked />
          </DialogContentContainer>
        ),
        description: "Place the checkbox on the left side of the label."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-style-story-checkbox_wrapper">
            <div className="l3-style-story-checkbox_inline-wrapper">
              <span>Item 1</span>
              <Checkbox className="l3-style-story-checkbox_minus-margin" />
            </div>
            <div className="l3-style-story-checkbox_inline-wrapper">
              <span>Item 2</span>
              <Checkbox className="l3-style-story-checkbox_minus-margin" checked />
            </div>
            <div className="l3-style-story-checkbox_inline-wrapper">
              <span>Item 3</span>
              <Checkbox className="l3-style-story-checkbox_minus-margin" checked />
            </div>
          </DialogContentContainer>
        ),
        description: "Don’t change the position of the checkbox. Keep it to the left side of the label."
      }
    },
    {
      positive: {
        component: (
          <DialogContentContainer className="l3-style-story-checkbox_wrapper">
            <Checkbox label="Only show incomplete items" checked />
          </DialogContentContainer>
        ),
        description: "Always keep a positive tone of voice."
      },
      negative: {
        component: (
          <DialogContentContainer className="l3-style-story-checkbox_wrapper">
            <Checkbox label="Hide done items" checked />
          </DialogContentContainer>
        ),
        description: "Avoid negative language that makes the user check the box in order for something not to happen."
      }
    }
  ]}
/>

## Use cases and examples

### Single checkbox

Allows the user to choose a single option. For example: accept terms of use.

<Canvas>
  <Story name="Single checkbox">
    <Checkbox
      checked
      label={
        <>
          I agree to the <span className="element-type-link">Terms of Service</span> and{" "}
          <span className="element-type-link">Privacy Policy.</span>
        </>
      }
    />
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[RADIO_BUTTON, TOGGLE, DROPDOWN]} />
