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

<Meta
  title="Components/Disclosure/Visually Hidden"
  component={VisuallyHidden}
/>

<ComponentHeading
  componentName="VisuallyHidden"
  description="Show content to screen readers but hide it from the screen"
  sourcePath="src/components/VisuallyHidden/VisuallyHidden.tsx"
  hideDemosLink
/>

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="VisuallyHidden">
    <Box>Visible content</Box>
    <VisuallyHidden>Hidden content</VisuallyHidden>
  </Story>
</Canvas>

## API

Extends `BoxProps`

<ArgsTable of={VisuallyHidden} />

## Demos

Providing more context to an icon.

<Canvas withSource={SourceState.OPEN}>
  <Story name="VisuallyHidden icon">
    <Box>
      <Icon icon={ICON_TYPE.COG} />
      <VisuallyHidden>Settings</VisuallyHidden>
    </Box>
  </Story>
</Canvas>