import { Meta, Canvas, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Icon, ICON_TYPE } from "../..";
import { Kbd } from "./Kbd";

<Meta title="Components/Data/Kbd" component={Kbd} />

<ComponentHeading
  componentName="Kbd"
  description="Kbd represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device"
  sourcePath="src/components/Kbd/Kbd.tsx"
/>

## Installation

```jsx
import { Kbd } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas>
  <Story name="Kbd">
    <Kbd>Space</Kbd>
  </Story>
</Canvas>

## API

Extends `HTMLElement`

## Demos

### Using an Icon

<Canvas withSource={SourceState.OPEN}>
  <Story name="Kbd with an icon">
    <Kbd>
      <Icon icon={ICON_TYPE.CARET_UP} />
    </Kbd>
  </Story>
</Canvas>