import IconButton from "../IconButton";
import Flex from "../../Flex/Flex";
import Button from "../../Button/Button";
import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
import person1 from "./assets/person1.png";
import {
  Bolt,
  Robot,
  Doc,
  Pin,
  Show,
  HighlightColorBucket,
  Broom,
  Add,
  Time,
  Item,
  CloseSmall,
  Drag,
  Filter,
  Close
} from "../../Icon/Icons";
import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import {
  BUTTON_GROUP,
  MENU_BUTTON,
  BUTTON
} from "../../../storybook/components/related-components/component-description-map";
import { Link, createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import LinkComponent from "../../Link/Link";
import Icon from "../../Icon/Icon";
import Heading from "../../Heading/Heading";
import classes from "./iconButton.stories.module.scss";
import Avatar from "../../Avatar/Avatar";

export const metaSettings = createStoryMetaSettings({
  component: IconButton,
  enumPropNamesArray: ["kind", "size", "color"],
  iconPropNamesArray: ["icon"],
  actionPropsArray: ["onClick"]
});

<Meta
  title="Buttons/Icon Button"
  component={IconButton}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const iconButtonTemplate = createComponentTemplate(IconButton);

<!--- Component documentation -->

# IconButton

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

Icon button is a square button contains only icon with no visible text labels used mostly in control bars.

<Canvas>
  <Story name="Overview" args={{ ariaLabel: "Close" }}>
    {iconButtonTemplate.bind()}
  </Story>
</Canvas>

## Props

<ArgsTable story={"Overview"} />

## Usage

<UsageGuidelines
  guidelines={[
    <>
      Icon button will always appear with a <Link href="/?path=/docs/popover-tooltip--overview">tooltip</Link> while
      hovering, defining the icon’s meaning.
    </>,
    "Use an icon button when a user can perform an inline action on this page and there's no room for a default button.",
    "Use icon button when you want to display an active state of a button.",
    "Use a Primary icon button when it's the most important action to take.",
    "Use icon button only when the icons is clear and understandable.",
    "Icon buttons are often used when there are 2 or 3 adjacent icons buttons that perform actions on a single item presented in a row."
  ]}
/>

<Tip title="Check yourself">
  To display icons that do not have actions associated with them, use the{" "}
  <Link href="/?path=/docs/components-icon--overview" size={Link.sizes.SMALL} withoutSpacing>
    Icon component
  </Link>
  .
</Tip>

## Variants

### Kinds

There can be more than one button in a screen, but to create the hierarchy of actions we need to use button kinds.

<Canvas>
  <Story name="Kinds">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton icon={Close} kind={IconButton.kinds.PRIMARY} ariaLabel="My primary IconButton" />
      <IconButton icon={Close} kind={IconButton.kinds.TERTIARY} ariaLabel="My tertiary IconButton" />
      <IconButton icon={Close} kind={IconButton.kinds.PRIMARY} ariaLabel="My primary IconButton" shape="Square" />
      <IconButton icon={Close} kind={IconButton.kinds.TERTIARY} ariaLabel="My tertiary IconButton" shape="Square" />
    </div>
  </Story>
</Canvas>

<Tip>
  If you need to use an icon as a button that opens dialog or menu next to it, check out{" "}
  <Link href="/?path=/docs/buttons-menubutton--overview" size={Link.sizes.SMALL} withoutSpacing>
    Menu button
  </Link>{" "}
  component.
</Tip>

### Sizes

<Canvas>
  <Story name="Sizes">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My small IconButton"
        key="small"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My small IconButton"
        key="small"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My large IconButton"
        key="large"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My large IconButton"
        key="large"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Icon

<Canvas>
  <Story name="Icon">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Small Icon Button"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Large Icon Button"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Small Icon Button"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Large Icon Button"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Icon + Label

<Canvas>
  <Story name="Icon + Label">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My IconLabel Button"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My IconLabel Button"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My IconLabel Button"
        label="label"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My IconLabel Button"
        label="label"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Icon tertiary

<Canvas>
  <Story name="Icon tertiary">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Small Icon Button"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Large Icon Button"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Small Icon Button"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Large Icon Button"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Icon + Label tertiary

<Canvas>
  <Story name="Icon + Label tertiary">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Small Icon Button With Label"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Large Icon Button With Label"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Small Icon Button With Label"
        label="label"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My Tertiary Large Icon Button With Label"
        label="label"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Label

<Canvas>
  <Story name="Label">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Small Label Button"
        labelInButton="01"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Large Label Button"
        labelInButton="01"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Small Label Button"
        labelInButton="01"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My Primary Large Label Button"
        labelInButton="01"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Label + Label

<Canvas>
  <Story name="Label + Label">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My primary small Label Button"
        labelInButton="01"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My primary large Label Button"
        labelInButton="01"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My primary small Label Button"
        labelInButton="01"
        label="label"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My primary large Label Button"
        labelInButton="01"
        label="label"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Label tertiary

<Canvas>
  <Story name="Label tertiary">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary small Label Button"
        labelInButton="01"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary large Label Button"
        labelInButton="01"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary small Label Button"
        labelInButton="01"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary large Label Button"
        labelInButton="01"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Label + Label tertiary

<Canvas>
  <Story name="Label + Label tertiary">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary small Label Button"
        labelInButton="01"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary large Label Button"
        labelInButton="01"
        label="label"
      />
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary small Label Button"
        labelInButton="01"
        label="label"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My tertiary large Label Button"
        labelInButton="01"
        label="label"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Active

<Canvas>
  <Story name="Active">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My active large IconButton"
        active
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My active large IconButton"
        active
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My active large IconButton"
        active
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My active large IconButton"
        active
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My active medium IconButton"
        active
        label="label"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My active medium IconButton"
        active
        label="label"
        labelInButton="01"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My active medium IconButton"
        active
        label="label"
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My active medium IconButton"
        active
        label="label"
        labelInButton="01"
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

### Disabled

Set disable button for something that isn’t usable. Use a tooltip on hover in order to indicate the reason of the disabled action.

<Canvas>
  <Story name="Disabled">
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My small disabled IconButton"
        disabledReason="This function is not available"
        disabled
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My large disabled IconButton"
        disabledReason="This function is not available"
        disabled
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My disabled large IconButton"
        disabledReason="This function is not available"
        disabled
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My disabled large IconButton"
        label="label"
        disabledReason="This function is not available"
        disabled
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My disabled large IconButton"
        label="label"
        disabledReason="This function is not available"
        disabled
      />
    </div>
    <div style={{ display: "flex", justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
      <IconButton
        size={IconButton.sizes.SMALL}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My small disabled IconButton"
        disabledReason="This function is not available"
        disabled
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My large disabled IconButton"
        disabledReason="This function is not available"
        disabled
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My disabled large IconButton"
        disabledReason="This function is not available"
        disabled
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.PRIMARY}
        ariaLabel="My disabled large IconButton"
        label="label"
        disabledReason="This function is not available"
        disabled
        shape="Square"
      />
      <IconButton
        size={IconButton.sizes.LARGE}
        icon={Close}
        kind={IconButton.kinds.TERTIARY}
        ariaLabel="My disabled large IconButton"
        label="label"
        disabledReason="This function is not available"
        disabled
        shape="Square"
      />
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <DialogContentContainer>
            <IconButton icon={Pin} ariaLabel="Pin to top" />
            <IconButton icon={Show} ariaLabel="Show all" />
            <IconButton icon={Broom} ariaLabel="Clear style" />
          </DialogContentContainer>
        ),
        description:
          "Use Icon button when action is lower priority than a regular action or there’s no space available to place a button."
      },
      negative: {
        component: <IconButton icon={Add} kind={IconButton.kinds.PRIMARY} ariaLabel="Add item" />,
        description: (
          <>
            Don’t use Icon button as the main action on the page. Instead, use the{" "}
            <Link href="/?path=/docs/buttons-button--overview" withoutSpacing>
              Button component
            </Link>{" "}
            with an icon.
          </>
        )
      }
    },
    {
      positive: {
        component: <IconButton icon={Close} ariaLabel="Close" />,
        description: "Always provide ariaLabel or tooltipContent"
      },
      negative: {
        component: <IconButton icon={Close} />,
        description: "Don’t use icon button without adding a tooltip while hovering."
      }
    }
  ]}
/>

## Use cases and examples

### Icon button as toolbar button

<Canvas>
  <Story name="Icon button as toolbar button">
    <Flex
      className={classes.dashboard}
      direction={Flex.directions.COLUMN}
      align={Flex.align.START}
      style={{ width: "50%" }}
    >
      <Flex className={classes.dashboardHeader} gap={Flex.gaps.SMALL}>
        <Icon icon={Drag} />
        <Heading type={Heading.types.h5} value="Widget name" />
        <IconButton icon={Filter} ariaLabel="Filter the widget by everything" size={IconButton.sizes.SMALL} />
      </Flex>
      <div className={classes.dashboardContent} />
    </Flex>
  </Story>
</Canvas>

### Icon button as close button

<Canvas>
  <Story name="Icon button as close button">
    <Flex style={{ width: "100%" }}>
      <Flex className={classes.recycleBin} style={{ width: "100%" }} justify={Flex.justify.START} gap={Flex.gaps.LARGE}>
        <Flex
          direction={Flex.directions.COLUMN}
          className={classes.recycleBinTitleContainer}
          justify={Flex.justify.CENTER}
        >
          <Icon icon={Item} iconSize={40} />
          <Heading className={classes.recycleBinTitle} type={Heading.types.h5} value="Item" id="l3-recycle-bin-title" />
        </Flex>
        <Avatar size={Avatar.sizes.LARGE} src={person1} type={Avatar.types.IMG} />
        <Flex
          direction={Flex.directions.COLUMN}
          className={classes.recycleBinContent}
          align={Flex.justify.START}
          ariaLabelledby="l3-recycle-bin-title"
        >
          <Flex gap={Flex.gaps.XS}>
            <LinkComponent text="Hadas Farhi" />
            <span>deleted the item </span>
            <span className={classes.recycleBinItemName}>Hello World</span>
            <span>from the board</span>
          </Flex>
          <span className={classes.recycleBinBoardName}>Tasks</span>
          <Flex gap={Flex.gaps.XS} className={classes.recycleBinSubNote}>
            <Icon icon={Time} />
            <span className={classes.recycleBinTimeStamp}>13m</span>
            <span>(Available for restore in the next 1M)</span>
          </Flex>
        </Flex>
        <Button className={classes.recycleBinRestoreButton}>Restore</Button>
      </Flex>
    </Flex>
    <IconButton icon={CloseSmall} ariaLabel="Remove from Recycle bin" />
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[BUTTON, MENU_BUTTON, BUTTON_GROUP]} />
