import Clickable from "../Clickable";
import Flex from "../../Flex/Flex";
import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import {
  BUTTON,
  HIDDEN_TEXT,
  ICON_BUTTON
} from "../../../storybook/components/related-components/component-description-map";
import { statesPlaySuite } from "../__tests__/clickable-interactions-tests";
import "./clickable.stories.scss";

<Meta title="Accessibility/Clickable" component={Clickable} />

# Clickable

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Feedback](#feedback)

## Overview

An accessibility helper component, this component simulates a button on non button elements

<Canvas>
  <Story name="Overview">
    <Clickable className="l3-story-clickable_first-element" onClick={() => alert("clicked")}>
      <div>I act like a button</div>
    </Clickable>
  </Story>
</Canvas>

## Props

<ArgsTable of={Clickable} />

## Variants

### States

Clickable component supports two different states: regular state and disabled state.
The state only affects the component functionality (a user cannot interact with a disabled clickable component) and not the component appearance.
You can use the component className and style props to change the component appearance.

<Canvas>
  <Story name="States" play={statesPlaySuite}>
    <Flex gap={Flex.gaps.MEDIUM}>
      <Clickable
        className="l3-story-clickable_first-element"
        onClick={() => alert("clicked")}
        ariaLabel="clickable button"
      >
        <div>Regular clickable element</div>
      </Clickable>
      <Clickable
        className="l3-story-clickable_disabled-element"
        onClick={() => alert("clicked")}
        disabled
        ariaLabel="disabled clickable button"
      >
        <div>Disabled clickable element</div>
      </Clickable>
    </Flex>
  </Story>
</Canvas>

## Usage

<UsageGuidelines
  guidelines={[
    "When you can't use button but want need to provide keyboard intractability",
    "This component behaves like a button, treat it like one"
  ]}
/>

## Related components

<RelatedComponents componentsNames={[BUTTON, HIDDEN_TEXT, ICON_BUTTON]} />
