import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables } from '../../.storybook/blocks';
import * as stories from './helptext.stories';

<Meta of={stories} />

# Help text
>HelpText gir brukere en forklaring på ukjente begreper eller konsepter, hvis de trenger det.

## Kode
- **Merk:** Prøv å [unngå å bruke HelpText](https://www.designsystemet.no/no/blog/helptext-is-being-removed-what-should-you-do) - vurder heller [popover inline](?path=/story/designsystem-popover--with-text-inline)
- Bruk klassen `helptext` på `<button>` og `popovertarget="MIN-ID"`
- Legg klassen `popover`, attributten `popover` og `id` på `<div>` direkte etter `<button>`
<Canvas of={stories.Default} />

## I field
- Legg `helptext` like etter `label` i `field`
<Canvas of={stories.InField} />

## I fieldset
- Legg `helptext` like etter `legend` i `field`
<Canvas of={stories.InFieldset} />

<CssVariables component="helptext" />