playbook_ui 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3923 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +0 -21
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +184 -5
- data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +216 -5
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +6 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +7 -2
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +64 -3
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +203 -5
- data/app/pb_kits/playbook/pb_gauge/gauge.test.js +1 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +154 -5
- data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +2 -2
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +0 -2
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +2 -5
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +113 -5
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +1 -1
- data/dist/chunks/_typeahead-DnWoIeq6.js +22 -0
- data/dist/chunks/_weekday_stacked-C5Ls9JLc.js +45 -0
- data/dist/chunks/lib-CEpcaI8y.js +29 -0
- data/dist/chunks/{pb_form_validation-Dna2I7fw.js → pb_form_validation-D9zkwt2b.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -3
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/pagination_renderer.rb +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +6 -21
- data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +0 -25
- data/app/pb_kits/playbook/pb_drawer/_drawer.scss +0 -465
- data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +0 -195
- data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +0 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +0 -117
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +0 -43
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +0 -63
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +0 -55
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +0 -113
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +0 -12
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +0 -12
- data/app/pb_kits/playbook/pb_drawer/drawer.rb +0 -8
- data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +0 -77
- data/dist/chunks/_typeahead-BywvWGAm.js +0 -22
- data/dist/chunks/_weekday_stacked-5OGZKZeo.js +0 -45
- data/dist/chunks/lib-DMOmCoAX.js +0 -29
@@ -1,195 +0,0 @@
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
2
|
-
import classnames from "classnames";
|
3
|
-
import Modal from "react-modal";
|
4
|
-
|
5
|
-
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
6
|
-
import { globalProps } from "../utilities/globalProps";
|
7
|
-
|
8
|
-
import { DialogContext } from "../pb_dialog/_dialog_context";
|
9
|
-
|
10
|
-
type DrawerProps = {
|
11
|
-
aria?: { [key: string]: string };
|
12
|
-
behavior?: "floating" | "push";
|
13
|
-
border?: "full" | "none" | "right" | "left";
|
14
|
-
breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
15
|
-
children: React.ReactNode | React.ReactNode[] | string;
|
16
|
-
className?: string;
|
17
|
-
data?: { [key: string]: string };
|
18
|
-
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
19
|
-
id?: string;
|
20
|
-
fullHeight?: boolean;
|
21
|
-
onClose?: () => void;
|
22
|
-
opened: boolean;
|
23
|
-
overlay: boolean;
|
24
|
-
placement?: "left" | "right";
|
25
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
26
|
-
text?: string;
|
27
|
-
trigger?: string;
|
28
|
-
};
|
29
|
-
|
30
|
-
const Drawer = (props: DrawerProps): React.ReactElement => {
|
31
|
-
const {
|
32
|
-
aria = {},
|
33
|
-
behavior = "floating",
|
34
|
-
border = "none",
|
35
|
-
breakpoint = "none",
|
36
|
-
className,
|
37
|
-
data = {},
|
38
|
-
htmlOptions = {},
|
39
|
-
id,
|
40
|
-
size = "md",
|
41
|
-
children,
|
42
|
-
fullHeight = false,
|
43
|
-
opened,
|
44
|
-
onClose,
|
45
|
-
overlay = true,
|
46
|
-
placement = "left",
|
47
|
-
trigger,
|
48
|
-
} = props;
|
49
|
-
const ariaProps = buildAriaProps(aria);
|
50
|
-
const dataProps = buildDataProps(data);
|
51
|
-
const htmlProps = buildHtmlProps(htmlOptions);
|
52
|
-
|
53
|
-
let globalPropsString: string = globalProps(props);
|
54
|
-
|
55
|
-
// Check if the string contains any of the prefixes
|
56
|
-
const containsPrefix = ['p_', 'pb_', 'pt_', 'pl_', 'pr_', 'px_', 'py_'].some((prefix) =>
|
57
|
-
globalPropsString.includes(prefix)
|
58
|
-
);
|
59
|
-
|
60
|
-
// If none of the prefixes are found, append 'p_sm' to the string
|
61
|
-
if (!containsPrefix) {
|
62
|
-
globalPropsString += ' p_sm';
|
63
|
-
}
|
64
|
-
|
65
|
-
const drawerClassNames = {
|
66
|
-
base: `${classnames(
|
67
|
-
"pb_drawer",
|
68
|
-
buildCss("pb_drawer", size, placement),
|
69
|
-
{
|
70
|
-
"drawer_border_full": border === "full",
|
71
|
-
"drawer_border_right": border === "right",
|
72
|
-
"drawer_border_left": border === "left",
|
73
|
-
}
|
74
|
-
)} ${globalPropsString}`,
|
75
|
-
afterOpen: "pb_drawer_after_open",
|
76
|
-
beforeClose: "pb_drawer_before_close",
|
77
|
-
};
|
78
|
-
|
79
|
-
const fullHeightClassNames = () => {
|
80
|
-
if (!fullHeight) return null;
|
81
|
-
return `full_height_${placement}`;
|
82
|
-
};
|
83
|
-
|
84
|
-
const overlayClassNames = {
|
85
|
-
base: `pb_drawer${overlay ? '_overlay' : '_no_overlay'} ${fullHeight !== null && fullHeightClassNames()} ${!overlay ? 'no-background' : ''}`,
|
86
|
-
afterOpen: "pb_drawer_overlay_after_open",
|
87
|
-
beforeClose: "pb_drawer_overlay_before_close",
|
88
|
-
};
|
89
|
-
|
90
|
-
const classes = classnames(
|
91
|
-
buildCss("pb_drawer_wrapper"),
|
92
|
-
className
|
93
|
-
);
|
94
|
-
|
95
|
-
const [triggerOpened, setTriggerOpened] = useState(false);
|
96
|
-
|
97
|
-
const breakpointWidths: Record<DrawerProps['breakpoint'], number> = {
|
98
|
-
none: 0,
|
99
|
-
xs: 575,
|
100
|
-
sm: 768,
|
101
|
-
md: 992,
|
102
|
-
lg: 1200,
|
103
|
-
xl: 1400,
|
104
|
-
};
|
105
|
-
|
106
|
-
// State to manage opening the drawer based on breakpoint
|
107
|
-
const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
|
108
|
-
|
109
|
-
useEffect(() => {
|
110
|
-
if (breakpoint === 'none') return;
|
111
|
-
|
112
|
-
const handleResize = () => {
|
113
|
-
const width = window.innerWidth;
|
114
|
-
const breakpointWidth = breakpointWidths[breakpoint];
|
115
|
-
|
116
|
-
if (width <= breakpointWidth) {
|
117
|
-
setIsBreakpointOpen(true);
|
118
|
-
} else {
|
119
|
-
setIsBreakpointOpen(false);
|
120
|
-
}
|
121
|
-
};
|
122
|
-
|
123
|
-
window.addEventListener('resize', handleResize);
|
124
|
-
|
125
|
-
// Call handler once on mount to set initial state
|
126
|
-
handleResize();
|
127
|
-
|
128
|
-
return () => {
|
129
|
-
window.removeEventListener('resize', handleResize);
|
130
|
-
};
|
131
|
-
}, [breakpoint]);
|
132
|
-
|
133
|
-
const modalIsOpened = trigger ? triggerOpened : (opened || isBreakpointOpen);
|
134
|
-
|
135
|
-
useEffect(() => {
|
136
|
-
const sizeMap: Record<DrawerProps['size'], string> = {
|
137
|
-
xl: '365px',
|
138
|
-
lg: '300px',
|
139
|
-
md: '250px',
|
140
|
-
sm: '200px',
|
141
|
-
xs: '64px',
|
142
|
-
};
|
143
|
-
const body = document.querySelector('body');
|
144
|
-
|
145
|
-
if (modalIsOpened && behavior === 'push' && body) {
|
146
|
-
if (placement === 'left') {
|
147
|
-
body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
|
148
|
-
} else if (placement === 'right') {
|
149
|
-
body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`;
|
150
|
-
}
|
151
|
-
|
152
|
-
body.classList.add('ReactModal__Body--open');
|
153
|
-
} else if (body) {
|
154
|
-
body.style.cssText = ''; // Clear the styles when modal is closed or behavior is not 'push'
|
155
|
-
body.classList.remove('ReactModal__Body--open');
|
156
|
-
}
|
157
|
-
}, [modalIsOpened, behavior, placement, size]);
|
158
|
-
|
159
|
-
const api = {
|
160
|
-
onClose: trigger
|
161
|
-
? function () {
|
162
|
-
setTriggerOpened(false);
|
163
|
-
}
|
164
|
-
: onClose,
|
165
|
-
};
|
166
|
-
|
167
|
-
return (
|
168
|
-
<DialogContext.Provider value={api}>
|
169
|
-
<div
|
170
|
-
{...ariaProps}
|
171
|
-
{...dataProps}
|
172
|
-
{...htmlProps}
|
173
|
-
className={classes}
|
174
|
-
>
|
175
|
-
<Modal
|
176
|
-
ariaHideApp={false}
|
177
|
-
className={drawerClassNames}
|
178
|
-
closeTimeoutMS={200}
|
179
|
-
contentLabel="Minimal Modal Example"
|
180
|
-
id={id}
|
181
|
-
isOpen={modalIsOpened}
|
182
|
-
onRequestClose={onClose}
|
183
|
-
overlayClassName={overlayClassNames}
|
184
|
-
shouldCloseOnOverlayClick={overlay}
|
185
|
-
>
|
186
|
-
<>
|
187
|
-
{children}
|
188
|
-
</>
|
189
|
-
</Modal>
|
190
|
-
</div>
|
191
|
-
</DialogContext.Provider>
|
192
|
-
);
|
193
|
-
};
|
194
|
-
|
195
|
-
export default Drawer;
|
@@ -1,117 +0,0 @@
|
|
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;
|
@@ -1,43 +0,0 @@
|
|
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;
|
@@ -1 +0,0 @@
|
|
1
|
-
<%= pb_rails("drawer") %>
|
@@ -1,63 +0,0 @@
|
|
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;
|
@@ -1,55 +0,0 @@
|
|
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;
|
@@ -1,113 +0,0 @@
|
|
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;
|
@@ -1,5 +0,0 @@
|
|
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'
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
|
2
|
-
<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
|
3
|
-
<%= pb_content_tag(
|
4
|
-
# :div,
|
5
|
-
# aria: object.aria,
|
6
|
-
# class: object.classname,
|
7
|
-
# data: object.data,
|
8
|
-
# id: object.id,
|
9
|
-
# **combined_html_options
|
10
|
-
) do %>
|
11
|
-
<span>DRAWER CONTENT</span>
|
12
|
-
<% end %>
|