import React from 'react';
import { PageIndicator } from './react';
export default {
    title: 'Navigation/PageIndicator',
    render: ({ pageCount, selectedPage }) => React.createElement(PageIndicator, { pageCount: pageCount, selectedPage: selectedPage }),
    component: PageIndicator,
};
export const Default = {
    args: {
        pageCount: 5,
        selectedPage: 1,
    },
};
export const InsideContainer = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
export const InsideContainer10Pages = () => (React.createElement("div", { style: { display: 'grid', height: '60vh', border: '1px solid lightgrey' } },
    React.createElement(PageIndicator, { pageCount: 10, selectedPage: 3, style: { paddingBottom: '12px', alignSelf: 'end' } }, ' ')));
export const OutsideContainer = () => (React.createElement("div", { style: { height: '450px', border: '1px solid lightgrey' } },
    React.createElement("div", { style: { height: '300px', borderBottom: '1px solid #e6e6e6' } }),
    React.createElement(PageIndicator, { pageCount: 5, selectedPage: 1, style: { paddingTop: '16px' } }, ' ')));
