import { Canvas, Meta } from "@storybook/blocks";
import { Tip } from "vibe-storybook-components";
import {
  CLICKABLE,
  HEADING,
  TEXT_FIELD
} from "../../../storybook/components/related-components/component-description-map";
import * as HiddenTextStories from "./HiddenText.stories";

<Meta of={HiddenTextStories} />

# HiddenText

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

## Overview

Hidden text helps us to create a text which is accessible to screen reader users but not to users who see the screen.

<Canvas of={HiddenTextStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={["Use hidden text for writing a text which should be exposed to screen reader users only."]}
/>

<Tip>
  If your text should be hidden from everyone please hide it by using CSS with "display: none" or "visibility: hidden".
</Tip>

## Related components

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