Skip to content

Commit 3f1e77d

Browse files
aeagleaeagle
committed
Revised stories to show all variations of positioned space
1 parent b1305a8 commit 3f1e77d

File tree

3 files changed

+287
-127
lines changed

3 files changed

+287
-127
lines changed

src/components/stories/02-components/Positioned.stories.mdx renamed to src/components/stories/02-components/Positioned.Resizable.TopRightBottomLeft.stories.mdx

Lines changed: 130 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,130 @@
1-
import { Meta, Story, Canvas, Props } from "@storybook/addon-docs/blocks";
2-
import { withKnobs } from "@storybook/addon-knobs";
3-
import { action } from '@storybook/addon-actions';
4-
import { ViewPort, Centered, Positioned } from "../../";
5-
import { ResizeType } from "../../../core-types";
6-
import { useCurrentSpace } from "../../../core-react";
7-
import { green, description } from "../Utils";
8-
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
9-
10-
<CommonHeader />
11-
12-
<Meta title="Components/Positioned" component={Positioned} />
13-
14-
## Positioned
15-
16-
Absolutely positioned space within it's parent.
17-
18-
### With a width and height specified
19-
20-
<Canvas>
21-
<Story name="With size">
22-
<ViewPort>
23-
<Positioned style={green} left={200} top={200} width={400} height={300}>
24-
{description("Positioned")}
25-
</Positioned>
26-
</ViewPort>
27-
</Story>
28-
</Canvas>
29-
30-
### With all side offsets specified
31-
32-
<Canvas>
33-
<Story name="Without size">
34-
<ViewPort>
35-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true}>
36-
{description("Positioned")}
37-
</Positioned>
38-
</ViewPort>
39-
</Story>
40-
</Canvas>
41-
42-
### Allowing repositioning by dragging with a drag handle
43-
44-
<Canvas>
45-
<Story name="With drag handle (width/height specified)">
46-
{() => {
47-
const DragHandle = () => {
48-
const space = useCurrentSpace();
49-
return (
50-
<Centered>
51-
<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
52-
Drag handle
53-
</button>
54-
</Centered>
55-
)
56-
}
57-
return <ViewPort>
58-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
59-
<DragHandle />
60-
</Positioned>
61-
</ViewPort>
62-
}}
63-
</Story>
64-
</Canvas>
65-
66-
<Canvas>
67-
<Story name="With drag handle (top/right/bottom/left specified)">
68-
{() => {
69-
const DragHandle = () => {
70-
const space = useCurrentSpace();
71-
return (
72-
<Centered>
73-
<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
74-
Drag handle
75-
</button>
76-
</Centered>
77-
)
78-
}
79-
return <ViewPort>
80-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
81-
<DragHandle />
82-
</Positioned>
83-
</ViewPort>
84-
}}
85-
</Story>
86-
</Canvas>
87-
88-
### Allowing resizing from each side
89-
90-
<Canvas>
91-
<Story name="With resize handles (width/height specified)">
92-
{() => {
93-
return <ViewPort>
94-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
95-
{description("Positioned")}
96-
</Positioned>
97-
</ViewPort>
98-
}}
99-
</Story>
100-
</Canvas>
101-
102-
<Canvas>
103-
<Story name="With resize handles (top/right/bottom/left specified)">
104-
{() => {
105-
return <ViewPort>
106-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
107-
{description("Positioned")}
108-
</Positioned>
109-
</ViewPort>
110-
}}
111-
</Story>
112-
</Canvas>
113-
114-
### Properties
115-
116-
<Story name="Properties">
117-
<PropsTable>
118-
<PropsHeader>Positioned properties</PropsHeader>
119-
<Prop name="bottom" type="number | string" description="Bottom offset from edge of parent space." />
120-
<Prop name="left" type="number | string" description="Left offset from edge of parent space." />
121-
<Prop name="right" type="number | string" description="Right offset from edge of parent space." />
122-
<Prop name="top" type="number | string" description="Top offset from edge of parent space." />
123-
<Prop name="width" type="number | string" description="Width of space" />
124-
<Prop name="height" type="number | string" description="Height of space" />
125-
<StandardProps />
126-
</PropsTable>
127-
</Story>
1+
import { Meta, Story, Canvas, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { action } from '@storybook/addon-actions';
4+
import { ViewPort, Centered, Positioned } from "../../";
5+
import { ResizeType } from "../../../core-types";
6+
import { useCurrentSpace } from "../../../core-react";
7+
import { green, description } from "../Utils";
8+
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
9+
10+
<CommonHeader />
11+
12+
<Meta title="Components/Positioned/Top, right, bottom, left specified" component={Positioned} />
13+
14+
## Positioned
15+
16+
Absolutely positioned space within it's parent with top / left / right / bottom specified.
17+
18+
<Canvas>
19+
<Story name="Non-resizable">
20+
<ViewPort>
21+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true}>
22+
{description("Positioned")}
23+
</Positioned>
24+
</ViewPort>
25+
</Story>
26+
</Canvas>
27+
28+
<Canvas>
29+
<Story name="Resize handles (all sides)">
30+
{() => {
31+
return <ViewPort>
32+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
33+
{description("Positioned")}
34+
</Positioned>
35+
</ViewPort>
36+
}}
37+
</Story>
38+
</Canvas>
39+
40+
<Canvas>
41+
<Story name="Resize handles (left)">
42+
{() => {
43+
return <ViewPort>
44+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
45+
{description("Positioned")}
46+
</Positioned>
47+
</ViewPort>
48+
}}
49+
</Story>
50+
</Canvas>
51+
52+
<Canvas>
53+
<Story name="Resize handles (top)">
54+
{() => {
55+
return <ViewPort>
56+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
57+
{description("Positioned")}
58+
</Positioned>
59+
</ViewPort>
60+
}}
61+
</Story>
62+
</Canvas>
63+
64+
<Canvas>
65+
<Story name="Resize handles (right)">
66+
{() => {
67+
return <ViewPort>
68+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
69+
{description("Positioned")}
70+
</Positioned>
71+
</ViewPort>
72+
}}
73+
</Story>
74+
</Canvas>
75+
76+
<Canvas>
77+
<Story name="Resize handles (bottom)">
78+
{() => {
79+
return <ViewPort>
80+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
81+
{description("Positioned")}
82+
</Positioned>
83+
</ViewPort>
84+
}}
85+
</Story>
86+
</Canvas>
87+
88+
<Canvas>
89+
<Story name="Drag handle">
90+
{() => {
91+
const DragHandle = () => {
92+
const space = useCurrentSpace();
93+
return (
94+
<Centered>
95+
<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
96+
Drag handle
97+
</button>
98+
</Centered>
99+
)
100+
}
101+
return <ViewPort>
102+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true}>
103+
<DragHandle />
104+
</Positioned>
105+
</ViewPort>
106+
}}
107+
</Story>
108+
</Canvas>
109+
110+
<Canvas>
111+
<Story name="Drag handle and resizable">
112+
{() => {
113+
const DragHandle = () => {
114+
const space = useCurrentSpace();
115+
return (
116+
<Centered>
117+
<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
118+
Drag handle
119+
</button>
120+
</Centered>
121+
)
122+
}
123+
return <ViewPort>
124+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
125+
<DragHandle />
126+
</Positioned>
127+
</ViewPort>
128+
}}
129+
</Story>
130+
</Canvas>

‎src/components/stories/02-components/Positioned.Resizable.WidthHeight.stories.mdx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import { Meta, Story, Canvas, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { action } from '@storybook/addon-actions';
4+
import { ViewPort, Centered, Positioned } from "../../";
5+
import { ResizeType } from "../../../core-types";
6+
import { useCurrentSpace } from "../../../core-react";
7+
import { green, description } from "../Utils";
8+
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
9+
10+
<CommonHeader />
11+
12+
<Meta title="Components/Positioned/Width and height specified" component={Positioned} />
13+
14+
## Positioned
15+
16+
Absolutely positioned space within it's parent with width and height specified.
17+
18+
<Canvas>
19+
<Story name="Non-resizable">
20+
<ViewPort>
21+
<Positioned style={green} left={200} top={200} width={400} height={300}>
22+
{description("Positioned")}
23+
</Positioned>
24+
</ViewPort>
25+
</Story>
26+
</Canvas>
27+
28+
<Canvas>
29+
<Story name="Resize handles (all sides)">
30+
{() => {
31+
return <ViewPort>
32+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
33+
{description("Positioned")}
34+
</Positioned>
35+
</ViewPort>
36+
}}
37+
</Story>
38+
</Canvas>
39+
40+
<Canvas>
41+
<Story name="Resize handles (left only)">
42+
{() => {
43+
return <ViewPort>
44+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
45+
{description("Positioned")}
46+
</Positioned>
47+
</ViewPort>
48+
}}
49+
</Story>
50+
</Canvas>
51+
52+
<Canvas>
53+
<Story name="Resize handles (top only)">
54+
{() => {
55+
return <ViewPort>
56+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
57+
{description("Positioned")}
58+
</Positioned>
59+
</ViewPort>
60+
}}
61+
</Story>
62+
</Canvas>
63+
64+
<Canvas>
65+
<Story name="Resize handles (right only)">
66+
{() => {
67+
return <ViewPort>
68+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
69+
{description("Positioned")}
70+
</Positioned>
71+
</ViewPort>
72+
}}
73+
</Story>
74+
</Canvas>
75+
76+
<Canvas>
77+
<Story name="Resize handles (bottom only)">
78+
{() => {
79+
return <ViewPort>
80+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
81+
{description("Positioned")}
82+
</Positioned>
83+
</ViewPort>
84+
}}
85+
</Story>
86+
</Canvas>
87+
88+
<Canvas>
89+
<Story name="Drag handle">
90+
{() => {
91+
const DragHandle = () => {
92+
const space = useCurrentSpace();
93+
return (
94+
<Centered>
95+
<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
96+
Drag handle
97+
</button>
98+
</Centered>
99+
)
100+
}
101+
return <ViewPort>
102+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true}>
103+
<DragHandle />
104+
</Positioned>
105+
</ViewPort>
106+
}}
107+
</Story>
108+
</Canvas>
109+
110+
<Canvas>
111+
<Story name="Drag handle and resizable">
112+
{() => {
113+
const DragHandle = () => {
114+
const space = useCurrentSpace();
115+
return (
116+
<Centered>
117+
<button onMouseDown={e => space.startMouseDrag(e, action('onDragEnd'))} onTouchStart={e => space.startTouchDrag(e, action('onDragEnd'))}>
118+
Drag handle
119+
</button>
120+
</Centered>
121+
)
122+
}
123+
return <ViewPort>
124+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
125+
<DragHandle />
126+
</Positioned>
127+
</ViewPort>
128+
}}
129+
</Story>
130+
</Canvas>

0 commit comments

Comments
 (0)