import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import StickyButtonPageScroll from '../StickyButtonPageScroll';

export const scrollTopSettings = {
    label: 'Label of the scroll to top button'
};

<Meta title="Components/Sticky Button Page Scroll" component={StickyButtonPageScroll} />

# StickyButtonPageScroll
<br />

## `StickyButtonPageScrolls` are used to scroll to top of the page when button is clicked.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ height: '250vh', position: 'relative' }}>
            <p>
                Please scroll at the bottom to view the button.
                Scroll button should appear about when red line hits top of screen.
            </p>
            <hr
                style={{
                    position: 'absolute',
                    top: '98vh',
                    width: '100%',
                    borderWidth: '0 0 1px 0',
                    borderStyle: 'solid',
                    borderColor: 'red'
                }}
            />
        </div>
        <StickyButtonPageScroll settings={getKnobs(StickyButtonPageScroll.schema().form)} />
        <div style={{ height: '50vh', padding: '10px', background: '#ccc', position: 'relative' }}>
            <p>Button should stick over this content</p>
        </div>
    </Story>
</Canvas>


## Usage Example

<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(StickyButtonPageScroll.schema().form)}
/>

```jsx
import StickyButtonPageScroll from
    '@appdirect/sfb-theme-components/src/components/sticky-button-page-scroll/StickyButtonPageScroll';

<StickyButtonPageScroll settings={settingsData} />

```

## Props
<ArgsTable of={StickyButtonPageScroll} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={scrollTopSettings} />
</table>

### Form Output
<FormOutput code={StickyButtonPageScroll.schema().form} />
