import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {within} from '@storybook/testing-library';
import SkipLink from './SkipLink';
import SkipLinkA11y from './stories/SkipLink.a11y.mdx';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/SkipLink"
  component={SkipLink}
  argTypes={{children: {control: 'text'}}}
  args={{
    children: 'skip to main content',
    id: 'main',
  }}
/>

<PageHeader>SkipLink</PageHeader>

- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default">
    {args => {
      return (
        <div>
          <SkipLink {...args} />
          <main id={args.id} tabindex="-1" style={{paddingBottom: '5em'}}>
            Main content
          </main>
        </div>
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Accessibility

<SkipLinkA11y />