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

<Meta title="Atoms/Button Page Scroll" component={ButtonPageScroll} />

# ButtonPageScroll
<br />

## `ButtonPageScrolls` are used to scroll at a different section of the page.
<br />

### Scroll to top
<Canvas>
    <Story name="Scroll to top">
        <div style={{ height: '100vh' }}>
            <p>Please scroll at the bottom to view the button</p>
            <span style={{ position: 'absolute', bottom: 0 }}>
                <ButtonPageScroll text="Back to top" />
            </span>
        </div>
    </Story>
</Canvas>

### Scroll to bottom
<Canvas>
    <Story name="Scroll to bottom">
        <div style={{ height: '100vh' }}>
            <ButtonPageScroll text="Scroll to bottom" direction="bottom" />
        </div>
        <p>Bottom of the page</p>
    </Story>
</Canvas>

### Hidden text
<Canvas>
    <Story name="Hidden text">
        <div style={{ height: '100vh' }}>
            <p>Please scroll at the bottom to view the button</p>
            <span style={{ position: 'absolute', bottom: 0 }}>
                <ButtonPageScroll text="Back to top" hiddenText />
            </span>
        </div>
    </Story>
</Canvas>

## Usage Example
```jsx
import ButtonPageScroll from '@appdirect/sfb-theme-components/src/atoms/button-page-scroll/ButtonPageScroll';

<ButtonPageScroll text="Back to top" direction="top" />
```

## Props

<ArgsTable of={ButtonPageScroll} />
