import EditableHeading from "../EditableHeading";
import { Meta } from "@storybook/blocks";
import { createComponentTemplate } from "vibe-storybook-components";
import {
  EDITABLE_TEXT,
  HEADING,
  TEXT
} from "../../../storybook/components/related-components/component-description-map";
import { TipEditableText } from "./EditableHeading.stories.helpers";
import * as EditableHeadingStories from "./EditableHeading.stories";

<Meta of={EditableHeadingStories} />

export const editableHeadingTemplate = createComponentTemplate(EditableHeading);

# EditableHeading

- [Overview](#overview)
- [Import](#import)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Editable Heading allows users to seamlessly and dynamically edit in-line content. Its default state is a read-view, based on the <StorybookLink page="Text/Heading">Heading</StorybookLink> component, and it becomes editable after clicking on it.

<Canvas of={EditableHeadingStories.Overview} />

## Import

```js
import { EditableHeading } from 'monday-ui-react-core/next'`
```

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Use when you want to allow the user to edit an existing heading text",
    "This component grows relative to its content, and its maximum width is 100% of its container"
  ]}
/>

<TipEditableText />

## Variants

### Heading types

Editable heading can be used with any of the <StorybookLink page="Text/Heading">Heading</StorybookLink> component sizes and weights.

<Canvas of={EditableHeadingStories.Types} />

## Related components

<RelatedComponents componentsNames={[EDITABLE_TEXT, TEXT, HEADING]} />