-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
TreeNode.stories.tsx
73 lines (67 loc) · 2.11 KB
/
TreeNode.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
73
import React from 'react';
import { HighlightStyles } from './HighlightStyles';
import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode';
export default {
title: 'UI/Sidebar/TreeNode',
parameters: { layout: 'fullscreen' },
component: StoryNode,
};
export const Types = () => (
<>
<ComponentNode>Component</ComponentNode>
<GroupNode>Group</GroupNode>
<StoryNode>Story</StoryNode>
<DocumentNode>Document</DocumentNode>
</>
);
export const Expandable = () => (
<>
<ComponentNode isExpandable>Collapsed component</ComponentNode>
<ComponentNode isExpandable isExpanded>
Expanded component
</ComponentNode>
<GroupNode isExpandable>Collapsed group</GroupNode>
<GroupNode isExpandable isExpanded>
Expanded group
</GroupNode>
</>
);
export const Nested = () => (
<>
<DocumentNode depth={0}>Zero</DocumentNode>
<GroupNode isExpandable isExpanded depth={0}>
Zero
</GroupNode>
<GroupNode isExpandable isExpanded depth={1}>
One
</GroupNode>
<StoryNode depth={2}>Two</StoryNode>
<ComponentNode isExpandable isExpanded depth={2}>
Two
</ComponentNode>
<StoryNode depth={3}>Three</StoryNode>
</>
);
export const Selection = () => (
<>
<HighlightStyles refId="foo" itemId="bar" />
<StoryNode data-ref-id="baz" data-item-id="bar" data-nodetype="story" data-selected="false">
Default story
</StoryNode>
<StoryNode data-ref-id="baz" data-item-id="bar" data-nodetype="story" data-selected="true">
Selected story
</StoryNode>
<StoryNode data-ref-id="foo" data-item-id="bar" data-nodetype="story" data-selected="false">
Highlighted story
</StoryNode>
<StoryNode data-ref-id="foo" data-item-id="bar" data-nodetype="story" data-selected="true">
Highlighted + Selected story
</StoryNode>
<GroupNode data-ref-id="foo" data-item-id="baz" data-nodetype="group" data-selected="false">
Default group
</GroupNode>
<GroupNode data-ref-id="foo" data-item-id="bar" data-nodetype="group" data-selected="false">
Highlighted group
</GroupNode>
</>
);