1import { getTitle } from '../../helpers/title';
2import mdx from './Scroll.mdx';
3
4export default {
5    title: getTitle(__filename, false),
6    parameters: {
7        docs: {
8            page: mdx,
9        },
10    },
11};
12
13export const Overflow = () => {
14    return (
15        <div className="overflow-auto bg-weak p-7" style={{ height: '100px' }}>
16            <p className="m-0" style={{ 'min-width': '130%' }}>
17                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
18                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
19                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
20                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
21                deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
22                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
23                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
24                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
25                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
26                sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
27                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
28                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
29                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
30                id est laborum.
31            </p>
32        </div>
33    );
34};
35
36export const OverflowHorizontal = () => {
37    return (
38        <div className="overflow-x-auto bg-weak p-7" style={{ height: '100px' }}>
39            <p className="m-0">
40                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
41                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
42                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
43                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
44                deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
45                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
46                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
47                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
48                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
49                sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
50                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
51                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
52                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
53                id est laborum.
54            </p>
55        </div>
56    );
57};
58
59export const OverflowHidden = () => {
60    return (
61        <div className="overflow-hidden bg-weak p-7" style={{ height: '100px' }}>
62            <p className="m-0">
63                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
64                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
65                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
66                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
67                deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
68                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
69                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
70                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
71                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
72                sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
73                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
74                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
75                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
76                id est laborum.
77            </p>
78        </div>
79    );
80};