import TextWithHighlight from "../TextWithHighlight";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate } from "../../../storybook/functions/createComponentTemplate";
import {
  EDITABLE_HEADING,
  HEADING,
  TEXT_FIELD
} from "../../../storybook/components/related-components/component-description-map";

<Meta title="Text/TextWithHighlight - (Coming Soon)" component={TextWithHighlight} />

<!--- Component template -->

export const textWithHighlightTemplate = createComponentTemplate(TextWithHighlight);

<!--- Component documentation -->

# TextWithHighlight

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

## Overview

Component for displaying highlighted text

<Canvas>
  <Story name="Overview" args={{ text: "Hello world, hello world again", highlightTerm: "Hello again" }}>
    {textWithHighlightTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={TextWithHighlight} />

## Usage

<UsageGuidelines
  guidelines={[
    "By using this component, you can display text with highlighted sub strings according to a given term and lines limit."
  ]}
/>

## Related components

<RelatedComponents componentsNames={[HEADING, TEXT_FIELD, EDITABLE_HEADING]} />
