-
Notifications
You must be signed in to change notification settings - Fork 182
/
island.stories.tsx
72 lines (60 loc) · 1.88 KB
/
island.stories.tsx
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React from 'react';
import Island, {AdaptiveIsland, Header, Content} from './island';
export default {
title: 'Components/Island',
parameters: {
notes: 'Displays an island.',
screenshots: {captureSelector: '*[data-test~=ring-island]'}
}
};
export const basic = () => (
<Island>
<Header border>Title</Header>
<Content>Content</Content>
</Island>
);
basic.storyName = 'basic';
export const withScroll = () => (
<Island className="limited-island" narrow>
<Header border>Title</Header>
<Content fade>
{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
</Content>
</Island>
);
withScroll.storyName = 'with scroll';
withScroll.parameters = {
storyStyles: `
<style>
.limited-island {
height: 200px;
width: 200px;
}
</style>
`
};
export const withResizeableHeader = () => (
<AdaptiveIsland className="limited-island" narrow>
<Header>Title</Header>
<Content fade>
{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
</Content>
</AdaptiveIsland>
);
withResizeableHeader.storyName = 'with resizeable header';
withResizeableHeader.parameters = {
storyStyles: `
<style>
.limited-island {
height: 200px;
width: 200px;
}
</style>
`
};