import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import VisuallyHidden from './'

<Meta
  title="Utilities/UI Convenience/VisuallyHidden"
  component={VisuallyHidden}
/>

# VisuallyHidden

A VisuallyHidden component is tiny helper that hides content from view, without hiding from accessibility devices like screen readers.

Typically, you would add text inside of a VisuallyHidden component. However, you may add selectors and other React components as well.

<Canvas>
  <Story name="default">
    <VisuallyHidden>Peek-a-boo! You can't see me</VisuallyHidden>
  </Story>
</Canvas>

#### Reference

- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={VisuallyHidden} />

### Stories

#### Focusable

<Canvas>
  <Story name="with content">
    <VisuallyHidden focusable>
      <a href="#">Focusable!</a>
    </VisuallyHidden>
  </Story>
</Canvas>
