/
scroll.stories.js
56 lines (49 loc) · 1.49 KB
/
scroll.stories.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React from 'react';
import { styled } from '@storybook/theming';
import { Spaced } from '@storybook/components';
export default {
title: 'Core|Scroll',
};
const Horizontal = styled(props => <Spaced col={1} {...props} />)({
display: 'grid',
gridTemplateColumns: '100px calc(100vw + 100px) 100px',
});
const Vertical = styled(props => <Spaced row={1} {...props} />)({});
export const story1 = () => (
<Vertical>
<pre>START, when switching stories, you should be able to read this at the top of the page</pre>
<pre style={{ height: '100vh' }}>middle</pre>
<pre>
END, this text should be below the scroll "fold" and therefore only be readable after
scrolling
</pre>
</Vertical>
);
story1.story = { name: 'story with 100vh padding 1' };
export const story2 = () => (
<Vertical>
<pre>START, when switching stories, you should be able to read this at the top of the page</pre>
<pre style={{ height: '100vh' }}>middle</pre>
<pre>
END, this text should be below the scroll "fold" and therefore only be readable after
scrolling
</pre>
</Vertical>
);
story2.story = { name: 'story with 100vh padding 2' };
export const story3 = () => (
<Horizontal>
<pre>START</pre>
<pre>middle</pre>
<pre>END</pre>
</Horizontal>
);
story3.story = { name: 'story with 100vw+' };
export const story4 = () => (
<Horizontal>
<pre>START</pre>
<pre>middle</pre>
<pre>END</pre>
</Horizontal>
);
story4.story = { name: 'story with 100vw+ 2' };