playbook_ui_docs 14.5.0.pre.rc.12 → 14.5.0.pre.rc.14

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c958c4b4ce783d1a9305a5220c431982b627856ba0f98c61603d62f4bf43ebec
4
- data.tar.gz: 72a39d276b451e91cad1061c30594a20b407bacfc4a3d684d95a38e3595b481b
3
+ metadata.gz: 86d0c02dc450b83961c53f8494daf49ba3a40030a571b36b15d7eff86e6e054b
4
+ data.tar.gz: 2cba8ecc619dba16e75d90ebf324a270fb56193d5f03e10ce7ffefc7c6235b81
5
5
  SHA512:
6
- metadata.gz: 2cad86fb971dc794045d1220a44340801f460f4350470f924227efa5b98deaee1f7b7db31c0658ffde7c46183b12cea98da4bde7e313478efb148f8b229bff8c
7
- data.tar.gz: dbbd7f99d927fd4aef03e5cb55843abeb27cb749368c7fccba83d8fe01103a07b279a2e4e0b17178c6170b97dd0b4f3f7e5f646d8ece6a59a2f52c49130de9b6
6
+ metadata.gz: 834d49a7a247e4db459983231f32dd1135141d8541cd7d63a5387f0e5de21abffb5e4b42581354ccd4c7958c81c1d1511d72d121573d10e6debd9035a6f110f4
7
+ data.tar.gz: 3386f2a9ffb22b55e5a2b9e4d40da81a9aacbb1394d5d55ec39122de171bf72566664b10a7e5248b6d9cf6f5c539ba2f66cee04fdcc5572c61c2865ce8d260dc
@@ -0,0 +1,117 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const DrawerBorders = () => {
5
+ // Individual state variables for each drawer size
6
+ const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
7
+ const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
8
+ const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
9
+ const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
10
+ const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
11
+
12
+ // Toggle functions for each drawer
13
+ const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
14
+ const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
15
+ const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
16
+ const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
17
+ const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
18
+
19
+ return (
20
+ <>
21
+ <Flex padding="md"
22
+ wrap
23
+ >
24
+ <Button marginRight="md"
25
+ onClick={toggleBRightDrawer}
26
+ >
27
+ Drawer with border right
28
+ </Button>
29
+ <Button marginRight="md"
30
+ onClick={toggleBLeftDrawer}
31
+ >
32
+ Drawer with border left
33
+ </Button>
34
+ <Button marginRight="md"
35
+ onClick={toggleBFullDrawer}
36
+ >
37
+ Drawer with border full
38
+ </Button>
39
+ <Button marginRight="md"
40
+ onClick={toggleBDefaultDrawer}
41
+ >
42
+ Default Drawer
43
+ </Button>
44
+ <Button marginRight="md"
45
+ onClick={toggleBRoundedDrawer}
46
+ >
47
+ Rounded Drawer
48
+ </Button>
49
+ </Flex>
50
+
51
+ {/* Drawers for each size */}
52
+ <Drawer
53
+ behavior="float"
54
+ border="right"
55
+ fullHeight
56
+ onClose={toggleBRightDrawer}
57
+ opened={openedBRightDrawer}
58
+ overlay={false}
59
+ placement="left"
60
+ size="lg"
61
+ >
62
+ This is a Drawer with border right
63
+ </Drawer>
64
+ <Drawer
65
+ behavior="float"
66
+ border="left"
67
+ fullHeight
68
+ onClose={toggleBLeftDrawer}
69
+ opened={openedBLeftDrawer}
70
+ overlay={false}
71
+ placement="right"
72
+ size="lg"
73
+ >
74
+ This is a Drawer with border left
75
+ </Drawer>
76
+ <Drawer
77
+ behavior="float"
78
+ border="full"
79
+ fullHeight
80
+ onClose={toggleBFullDrawer}
81
+ opened={openedBFullDrawer}
82
+ overlay={false}
83
+ placement="right"
84
+ size="lg"
85
+ >
86
+ This is a Drawer with border full
87
+ </Drawer>
88
+ <Drawer
89
+ behavior="float"
90
+ fullHeight
91
+ onClose={toggleBDefaultDrawer}
92
+ opened={openedBDefaultDrawer}
93
+ overlay={false}
94
+ placement="right"
95
+ size="lg"
96
+ >
97
+ This is a Default Drawer
98
+ </Drawer>
99
+ <Drawer
100
+ behavior="float"
101
+ borderRadius="rounded"
102
+ fullHeight
103
+ onClose={toggleBRoundedDrawer}
104
+ opened={openedBRoundedDrawer}
105
+ overlay={false}
106
+ placement="right"
107
+ size="lg"
108
+ >
109
+ <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
110
+ This is a Rounded Drawer
111
+ </div>
112
+ </Drawer>
113
+ </>
114
+ );
115
+ };
116
+
117
+ export default DrawerBorders;
@@ -0,0 +1,43 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const useDrawer = (visible = false) => {
5
+ const [opened, setOpened] = useState(visible);
6
+ const toggle = () => setOpened(!opened);
7
+
8
+ return [opened, toggle];
9
+ };
10
+
11
+ const DrawerBreakpoints = () => {
12
+ const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
13
+
14
+ return (
15
+ <>
16
+ <Flex wrap>
17
+ <Button
18
+ id="sm"
19
+ marginRight="md"
20
+ onClick={toggleSmallDrawer}
21
+ >
22
+ {"Will open at small breakpoint"}
23
+ </Button>
24
+ </Flex>
25
+ <Flex>
26
+ <Drawer
27
+ behavior={"push"}
28
+ breakpoint="sm"
29
+ fullHeight
30
+ onClose={toggleSmallDrawer}
31
+ opened={smallDrawerOpened}
32
+ overlay={false}
33
+ placement={"right"}
34
+ size={"lg"}
35
+ >
36
+ Open because small breakpoint
37
+ </Drawer>
38
+ </Flex>
39
+ </>
40
+ );
41
+ };
42
+
43
+ export default DrawerBreakpoints;
@@ -0,0 +1 @@
1
+ <%= pb_rails("drawer") %>
@@ -0,0 +1,63 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const useDrawer = (visible = false) => {
5
+ const [opened, setOpened] = useState(visible);
6
+ const toggle = () => setOpened(!opened);
7
+
8
+ return [opened, toggle];
9
+ };
10
+
11
+ const DrawerDefault = () => {
12
+ const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
13
+ const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
14
+
15
+ return (
16
+ <>
17
+ <Flex wrap>
18
+ <Button
19
+ id="sm"
20
+ marginRight="md"
21
+ onClick={toggleHeaderSeparatorDrawer}
22
+ >
23
+ {"Left Drawer"}
24
+ </Button>
25
+ <Button
26
+ marginRight="xl"
27
+ onClick={toggleBothSeparatorsDrawer}
28
+ >
29
+ {"Right Drawer"}
30
+ </Button>
31
+ </Flex>
32
+ <Flex>
33
+ {/* Left Drawer */}
34
+ <Drawer
35
+ behavior={"push"}
36
+ fullHeight
37
+ onClose={toggleHeaderSeparatorDrawer}
38
+ opened={headerSeparatorDrawerOpened}
39
+ overlay
40
+ placement={"left"}
41
+ size={"lg"}
42
+ >
43
+ Test me (Left Drawer)
44
+ </Drawer>
45
+
46
+ {/* Right Drawer */}
47
+ <Drawer
48
+ behavior={"push"}
49
+ fullHeight
50
+ onClose={toggleBothSeparatorsDrawer}
51
+ opened={bothSeparatorsDrawerOpened}
52
+ overlay
53
+ placement={"right"}
54
+ size={"lg"}
55
+ >
56
+ Test me (Right Drawer)
57
+ </Drawer>
58
+ </Flex>
59
+ </>
60
+ );
61
+ };
62
+
63
+ export default DrawerDefault;
@@ -0,0 +1,55 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const DrawerSizes = () => {
5
+ // Individual state variables for each drawer size
6
+ const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
7
+ const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
8
+
9
+ // Toggle functions for each drawer
10
+ const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
11
+ const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
12
+
13
+ return (
14
+ <>
15
+ <Flex wrap>
16
+ <Button marginRight="md"
17
+ onClick={toggleNoOverlayDrawer}
18
+ >
19
+ No Overlay Drawer
20
+ </Button>
21
+ <Button marginRight="md"
22
+ onClick={toggleOverlayDrawer}
23
+ >
24
+ Overlay Drawer
25
+ </Button>
26
+ </Flex>
27
+
28
+ {/* Drawers for each size */}
29
+ <Drawer
30
+ behavior="push"
31
+ fullHeight
32
+ onClose={toggleNoOverlayDrawer}
33
+ opened={openedNoOverlayDrawer}
34
+ overlay={false}
35
+ placement="right"
36
+ size="lg"
37
+ >
38
+ This is a Drawer with no overlay
39
+ </Drawer>
40
+ <Drawer
41
+ behavior="push"
42
+ fullHeight
43
+ onClose={toggleOverlayDrawer}
44
+ opened={openedOverlayDrawer}
45
+ overlay
46
+ placement="right"
47
+ size="lg"
48
+ >
49
+ This is a Drawer with an overlay
50
+ </Drawer>
51
+ </>
52
+ );
53
+ };
54
+
55
+ export default DrawerSizes;
@@ -0,0 +1,113 @@
1
+ import React, { useState } from "react";
2
+ import { Button, Drawer, Flex } from "playbook-ui";
3
+
4
+ const DrawerSizes = () => {
5
+ // Individual state variables for each drawer size
6
+ const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
7
+ const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
8
+ const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
9
+ const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
10
+ const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
11
+
12
+ // Toggle functions for each drawer
13
+ const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
14
+ const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
15
+ const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
16
+ const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
17
+ const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
18
+
19
+ return (
20
+ <>
21
+ <Flex wrap>
22
+ <Button marginRight="md"
23
+ onClick={toggleXsDrawer}
24
+ >
25
+ XS Drawer
26
+ </Button>
27
+ <Button marginRight="md"
28
+ onClick={toggleSmDrawer}
29
+ >
30
+ SM Drawer
31
+ </Button>
32
+ <Button marginRight="md"
33
+ onClick={toggleMdDrawer}
34
+ >
35
+ MD Drawer
36
+ </Button>
37
+ <Button marginRight="md"
38
+ onClick={toggleLgDrawer}
39
+ >
40
+ LG Drawer
41
+ </Button>
42
+ <Button marginRight="md"
43
+ onClick={toggleXlDrawer}
44
+ >
45
+ XL Drawer
46
+ </Button>
47
+ </Flex>
48
+
49
+ {/* Drawers for each size */}
50
+ <Drawer
51
+ behavior="push"
52
+ fullHeight
53
+ onClose={toggleXsDrawer}
54
+ opened={openedXsDrawer}
55
+ overlay
56
+ placement="right"
57
+ size="xs"
58
+ >
59
+ XS
60
+ </Drawer>
61
+
62
+ <Drawer
63
+ behavior="push"
64
+ fullHeight
65
+ onClose={toggleSmDrawer}
66
+ opened={openedSmDrawer}
67
+ overlay
68
+ placement="right"
69
+ size="sm"
70
+ >
71
+ This is an SM Drawer
72
+ </Drawer>
73
+
74
+ <Drawer
75
+ behavior="push"
76
+ fullHeight
77
+ onClose={toggleMdDrawer}
78
+ opened={openedMdDrawer}
79
+ overlay
80
+ placement="right"
81
+ size="md"
82
+ >
83
+ This is an MD Drawer
84
+ </Drawer>
85
+
86
+ <Drawer
87
+ behavior="push"
88
+ fullHeight
89
+ onClose={toggleLgDrawer}
90
+ opened={openedLgDrawer}
91
+ overlay
92
+ placement="right"
93
+ size="lg"
94
+ >
95
+ This is an LG Drawer
96
+ </Drawer>
97
+
98
+ <Drawer
99
+ behavior="push"
100
+ fullHeight
101
+ onClose={toggleXlDrawer}
102
+ opened={openedXlDrawer}
103
+ overlay
104
+ placement="right"
105
+ size="xl"
106
+ >
107
+ This is an XL Drawer
108
+ </Drawer>
109
+ </>
110
+ );
111
+ };
112
+
113
+ export default DrawerSizes;
@@ -0,0 +1,12 @@
1
+ examples:
2
+
3
+ rails:
4
+ - drawer_default: Default
5
+
6
+
7
+ react:
8
+ - drawer_default: Default
9
+ - drawer_sizes: Sizes
10
+ - drawer_overlay: Overlay
11
+ - drawer_borders: Borders
12
+ - drawer_breakpoints: Open on Breakpoints
@@ -0,0 +1,5 @@
1
+ export { default as DrawerDefault } from './_drawer_default.jsx'
2
+ export { default as DrawerSizes } from './_drawer_sizes.jsx'
3
+ export { default as DrawerOverlay } from './_drawer_overlay.jsx'
4
+ export { default as DrawerBorders } from './_drawer_borders.jsx'
5
+ export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'