playbook_ui 12.38.0 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115
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/pb_collapsible/_collapsible.scss +6 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -9
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +274 -17
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +7 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +232 -132
- data/app/pb_kits/playbook/pb_nav/_mixins.scss +14 -0
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -7
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
- data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +20 -4
- data/app/pb_kits/playbook/pb_nav/item.rb +89 -3
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
- data/app/pb_kits/playbook/pb_nav/nav.rb +13 -0
- data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +76 -0
- data/app/pb_kits/playbook/pb_select/_select.tsx +9 -5
- data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +36 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx +50 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +5 -9
- data/app/pb_kits/playbook/pb_select/select.rb +14 -0
- data/app/pb_kits/playbook/pb_select/select.test.js +17 -0
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/version.rb +2 -2
- metadata +22 -8
@@ -1,165 +1,266 @@
|
|
1
|
-
import React from
|
2
|
-
import classnames from
|
1
|
+
import React from "react";
|
2
|
+
import classnames from "classnames";
|
3
3
|
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps } from
|
5
|
-
import { globalProps, GlobalProps } from
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
5
|
+
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
6
6
|
|
7
|
-
import Icon from
|
8
|
-
import Image from
|
9
|
-
import Collapsible from
|
7
|
+
import Icon from "../pb_icon/_icon";
|
8
|
+
import Image from "../pb_image/_image";
|
9
|
+
import Collapsible from "../pb_collapsible/_collapsible";
|
10
|
+
import { NavChildProps } from "./navTypes";
|
11
|
+
import { Spacing } from "../types";
|
10
12
|
|
11
13
|
type NavItemProps = {
|
12
|
-
active?: boolean
|
13
|
-
aria?: { [key: string]: string }
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
data?: object
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
14
|
+
active?: boolean;
|
15
|
+
aria?: { [key: string]: string };
|
16
|
+
fontWeight?: "regular" | "bold" | "bolder";
|
17
|
+
children?: React.ReactNode[] | React.ReactNode;
|
18
|
+
className?: string;
|
19
|
+
collapsible?: boolean;
|
20
|
+
data?: object;
|
21
|
+
dark?: boolean;
|
22
|
+
fontSize?: "normal" | "small";
|
23
|
+
iconLeft?: string;
|
24
|
+
iconRight?: string | string[];
|
25
|
+
onIconRightClick?: () => void;
|
26
|
+
onIconLeftClick?: () => void;
|
27
|
+
id?: string;
|
28
|
+
imageUrl?: string;
|
29
|
+
link?: string;
|
30
|
+
onClick?: () => void;
|
31
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
32
|
+
text: string;
|
33
|
+
collapsibleTrail?: boolean;
|
34
|
+
collapsed?: boolean;
|
35
|
+
paddingBottom?: Spacing;
|
36
|
+
paddingTop?: Spacing;
|
37
|
+
paddingLeft?: Spacing;
|
38
|
+
paddingRight?: Spacing;
|
39
|
+
paddingX?: Spacing;
|
40
|
+
paddingY?: Spacing;
|
41
|
+
padding?: Spacing;
|
42
|
+
margin?: Spacing,
|
43
|
+
marginBottom?: Spacing,
|
44
|
+
marginTop?: Spacing,
|
45
|
+
marginRight?: Spacing,
|
46
|
+
marginLeft?: Spacing,
|
47
|
+
marginX?: Spacing,
|
48
|
+
marginY?: Spacing,
|
49
|
+
orientation?: "vertical" | "horizontal";
|
50
|
+
variant?: "normal" | "subtle";
|
51
|
+
} & GlobalProps;
|
31
52
|
|
32
53
|
const NavItem = (props: NavItemProps) => {
|
54
|
+
|
55
|
+
const fontWeightDefault = (orientation: string, variant: string) => {
|
56
|
+
return orientation === "horizontal" && variant === "subtle"
|
57
|
+
? "regular "
|
58
|
+
: orientation === "horizontal" && variant === "normal"
|
59
|
+
? "bold"
|
60
|
+
: "regular";
|
61
|
+
};
|
62
|
+
|
33
63
|
const {
|
34
64
|
active = false,
|
35
65
|
aria = {},
|
66
|
+
orientation,
|
67
|
+
variant,
|
68
|
+
fontWeight = fontWeightDefault(orientation, variant),
|
36
69
|
children,
|
37
70
|
className,
|
38
71
|
collapsible,
|
39
|
-
collapsibleClick,
|
40
72
|
data = {},
|
73
|
+
dark = false,
|
74
|
+
fontSize = "normal",
|
41
75
|
iconLeft,
|
42
76
|
iconRight,
|
43
|
-
|
44
|
-
|
77
|
+
onIconRightClick,
|
78
|
+
onIconLeftClick,
|
45
79
|
id,
|
46
80
|
imageUrl,
|
47
81
|
link,
|
48
|
-
onClick = () => {
|
49
|
-
target =
|
50
|
-
text =
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
82
|
+
onClick = () => {},
|
83
|
+
target = "_self",
|
84
|
+
text = "",
|
85
|
+
collapsibleTrail,
|
86
|
+
collapsed,
|
87
|
+
itemSpacing,
|
88
|
+
padding,
|
89
|
+
paddingX,
|
90
|
+
paddingY,
|
91
|
+
paddingBottom,
|
92
|
+
paddingTop,
|
93
|
+
paddingLeft,
|
94
|
+
paddingRight,
|
95
|
+
margin,
|
96
|
+
marginBottom,
|
97
|
+
marginTop,
|
98
|
+
marginRight,
|
99
|
+
marginLeft,
|
100
|
+
marginX,
|
101
|
+
marginY
|
102
|
+
} = props;
|
103
|
+
|
104
|
+
const filteredProps = { ...props };
|
105
|
+
[
|
106
|
+
"padding",
|
107
|
+
"paddingX",
|
108
|
+
"paddingY",
|
109
|
+
"paddingBottom",
|
110
|
+
"paddingTop",
|
111
|
+
"paddingRight",
|
112
|
+
"paddingLeft",
|
113
|
+
"margin",
|
114
|
+
"marginX",
|
115
|
+
"marginY",
|
116
|
+
"marginBottom",
|
117
|
+
"marginTop",
|
118
|
+
"marginRight",
|
119
|
+
"marginLeft",
|
120
|
+
].forEach((prop) => delete filteredProps[prop]);
|
121
|
+
|
122
|
+
const Tag = link ? "a" : "div";
|
123
|
+
const activeClass = active === true ? "active" : "";
|
124
|
+
const collapsibleTrailClass =
|
125
|
+
collapsible && collapsibleTrail ? "collapsible_trail" : "";
|
126
|
+
const fontSizeClass =
|
127
|
+
fontSize === "small" ? "font_size_small" : "font_size_normal";
|
128
|
+
const fontWeightClass =
|
129
|
+
fontWeight === "bold"
|
130
|
+
? "font_bold"
|
131
|
+
: fontWeight === "bolder"
|
132
|
+
? "font_bolder"
|
133
|
+
: "font_regular";
|
134
|
+
const ariaProps = buildAriaProps(aria);
|
135
|
+
const dataProps = buildDataProps(data);
|
136
|
+
const classes = classnames(
|
137
|
+
buildCss("pb_nav_list_kit_item", activeClass),
|
138
|
+
collapsible
|
139
|
+
? buildCss("pb_collapsible_nav_item", activeClass, collapsibleTrailClass)
|
140
|
+
: "",
|
141
|
+
fontSizeClass,
|
142
|
+
fontWeightClass,
|
143
|
+
globalProps(filteredProps),
|
144
|
+
className
|
145
|
+
);
|
146
|
+
|
147
|
+
const spacingProps = {
|
148
|
+
padding,
|
149
|
+
paddingBottom,
|
150
|
+
paddingTop,
|
151
|
+
paddingRight,
|
152
|
+
paddingLeft,
|
153
|
+
paddingX,
|
154
|
+
paddingY,
|
155
|
+
margin,
|
156
|
+
marginBottom,
|
157
|
+
marginTop,
|
158
|
+
marginRight,
|
159
|
+
marginLeft,
|
160
|
+
marginX,
|
161
|
+
marginY,
|
162
|
+
};
|
163
|
+
|
164
|
+
const finalItemSpacing = {
|
165
|
+
...(itemSpacing || {}),
|
166
|
+
...Object.entries(spacingProps).reduce((acc: any, [prop, value]) => {
|
167
|
+
if (value) {
|
168
|
+
acc[prop] = value;
|
169
|
+
}
|
170
|
+
return acc;
|
171
|
+
}, {}),
|
172
|
+
};
|
173
|
+
|
174
|
+
const tagClasses = classnames(
|
175
|
+
collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
|
176
|
+
globalProps({ ...finalItemSpacing })
|
177
|
+
);
|
178
|
+
|
179
|
+
const handleIconClick = (e: any) => {
|
180
|
+
if (onIconLeftClick) {
|
181
|
+
e.stopPropagation();
|
182
|
+
onIconLeftClick();
|
183
|
+
}
|
184
|
+
};
|
185
|
+
|
186
|
+
// Map over the children and clone them with itemSpacing prop so nested navItems all get itemSpacing
|
187
|
+
const childrenWithProps = React.Children.map(children, (child) => {
|
188
|
+
if (React.isValidElement(child)) {
|
189
|
+
const childProps: NavChildProps = {
|
190
|
+
itemSpacing: itemSpacing,
|
191
|
+
};
|
192
|
+
return React.cloneElement(child, childProps);
|
65
193
|
}
|
66
|
-
|
194
|
+
return child;
|
195
|
+
});
|
67
196
|
|
68
197
|
return (
|
69
|
-
<li
|
70
|
-
{
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
<Collapsible icon={iconRight ? iconRight : ['plus','minus']}
|
78
|
-
iconSize="xs"
|
79
|
-
id={id}
|
80
|
-
collapsed={toggleCollapsed}
|
81
|
-
iconClick={iconRightClick}
|
82
|
-
onClick={collapsibleClick}
|
83
|
-
>
|
84
|
-
<Collapsible.Main>
|
85
|
-
<Tag
|
86
|
-
className="pb_nav_list_item_link"
|
87
|
-
href={link}
|
198
|
+
<li {...ariaProps} {...dataProps} className={classes} id={id}>
|
199
|
+
{collapsible ? (
|
200
|
+
<Collapsible
|
201
|
+
icon={iconRight ? iconRight : ["plus", "minus"]}
|
202
|
+
iconSize="xs"
|
203
|
+
id={id}
|
204
|
+
collapsed={collapsed}
|
205
|
+
onIconClick={onIconRightClick}
|
88
206
|
onClick={onClick}
|
89
|
-
target={target}
|
90
207
|
>
|
91
|
-
{
|
92
|
-
<
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
</
|
120
|
-
</Tag>
|
121
|
-
</Collapsible.Main>
|
122
|
-
<Collapsible.Content>
|
123
|
-
{children}
|
124
|
-
</Collapsible.Content>
|
208
|
+
<Collapsible.Main dark={dark}>
|
209
|
+
<Tag className={tagClasses} href={link} target={target}>
|
210
|
+
{imageUrl && (
|
211
|
+
<div
|
212
|
+
className="pb_nav_list_item_icon_section_collapsible"
|
213
|
+
key={imageUrl}
|
214
|
+
onClick={(e) => handleIconClick(e)}
|
215
|
+
>
|
216
|
+
<Image className="pb_nav_img_wrapper" url={imageUrl} />
|
217
|
+
</div>
|
218
|
+
)}
|
219
|
+
|
220
|
+
{iconLeft && (
|
221
|
+
<div
|
222
|
+
className="pb_nav_list_item_icon_section_collapsible"
|
223
|
+
key={iconLeft}
|
224
|
+
onClick={(e) => handleIconClick(e)}
|
225
|
+
>
|
226
|
+
<Icon
|
227
|
+
className="pb_nav_list_item_icon_left_collapsible"
|
228
|
+
fixedWidth
|
229
|
+
icon={iconLeft}
|
230
|
+
/>
|
231
|
+
</div>
|
232
|
+
)}
|
233
|
+
<span className="pb_nav_list_item_text_collapsible">{text}</span>
|
234
|
+
</Tag>
|
235
|
+
</Collapsible.Main>
|
236
|
+
<Collapsible.Content>{childrenWithProps}</Collapsible.Content>
|
125
237
|
</Collapsible>
|
126
|
-
|
238
|
+
) : (
|
127
239
|
<Tag
|
128
|
-
className=
|
240
|
+
className={tagClasses}
|
129
241
|
href={link}
|
130
242
|
onClick={onClick}
|
131
243
|
target={target}
|
132
244
|
>
|
133
|
-
{imageUrl &&
|
134
|
-
<div
|
135
|
-
className="
|
136
|
-
key={imageUrl}
|
137
|
-
>
|
138
|
-
<Image
|
139
|
-
className="pb_nav_img_wrapper"
|
140
|
-
url={imageUrl}
|
141
|
-
/>
|
245
|
+
{imageUrl && (
|
246
|
+
<div className="pb_nav_list_item_icon_section" key={imageUrl}>
|
247
|
+
<Image className="pb_nav_img_wrapper" url={imageUrl} />
|
142
248
|
</div>
|
143
|
-
}
|
144
|
-
|
145
|
-
{iconLeft &&
|
146
|
-
<div
|
147
|
-
className="pb_nav_list_item_icon_section"
|
148
|
-
key={iconLeft}
|
149
|
-
>
|
249
|
+
)}
|
250
|
+
|
251
|
+
{iconLeft && (
|
252
|
+
<div className="pb_nav_list_item_icon_section" key={iconLeft}>
|
150
253
|
<Icon
|
151
254
|
className="pb_nav_list_item_icon_left"
|
152
255
|
fixedWidth
|
153
256
|
icon={iconLeft}
|
154
257
|
/>
|
155
258
|
</div>
|
156
|
-
}
|
157
|
-
|
158
|
-
<span className="pb_nav_list_item_text">
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
{iconRight &&
|
259
|
+
)}
|
260
|
+
|
261
|
+
<span className="pb_nav_list_item_text">{text || children}</span>
|
262
|
+
|
263
|
+
{iconRight && (
|
163
264
|
<div
|
164
265
|
className="pb_nav_list_item_icon_section"
|
165
266
|
key={iconRight as string}
|
@@ -170,12 +271,11 @@ const NavItem = (props: NavItemProps) => {
|
|
170
271
|
icon={iconRight as string}
|
171
272
|
/>
|
172
273
|
</div>
|
173
|
-
}
|
274
|
+
)}
|
174
275
|
</Tag>
|
175
|
-
|
176
|
-
}
|
276
|
+
)}
|
177
277
|
</li>
|
178
|
-
)
|
179
|
-
}
|
278
|
+
);
|
279
|
+
};
|
180
280
|
|
181
|
-
export default NavItem
|
281
|
+
export default NavItem;
|
@@ -5,6 +5,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
5
5
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
6
6
|
|
7
7
|
import Caption from '../pb_caption/_caption'
|
8
|
+
import { SpacingObject, NavChildProps } from './navTypes'
|
8
9
|
|
9
10
|
type NavProps = {
|
10
11
|
aria?: { [key: string]: string },
|
@@ -20,6 +21,7 @@ type NavProps = {
|
|
20
21
|
link?: string,
|
21
22
|
title?: string,
|
22
23
|
variant?: "normal" | "subtle",
|
24
|
+
itemSpacing?: SpacingObject
|
23
25
|
} & GlobalProps
|
24
26
|
|
25
27
|
const Nav = (props: NavProps) => {
|
@@ -37,6 +39,7 @@ const Nav = (props: NavProps) => {
|
|
37
39
|
orientation = 'vertical',
|
38
40
|
title = '',
|
39
41
|
variant = 'normal',
|
42
|
+
itemSpacing,
|
40
43
|
} = props
|
41
44
|
|
42
45
|
const ariaProps = buildAriaProps(aria)
|
@@ -50,6 +53,19 @@ const Nav = (props: NavProps) => {
|
|
50
53
|
className
|
51
54
|
)
|
52
55
|
|
56
|
+
// Map over the children and clone them with orientation, variant and itemSpacing props to gain access to them in navItem
|
57
|
+
const childrenWithProps = React.Children.map(children, (child) => {
|
58
|
+
if (React.isValidElement(child)) {
|
59
|
+
const childProps: NavChildProps = {
|
60
|
+
orientation: orientation,
|
61
|
+
variant: variant,
|
62
|
+
itemSpacing: itemSpacing
|
63
|
+
};
|
64
|
+
return React.cloneElement(child, childProps);
|
65
|
+
}
|
66
|
+
return child;
|
67
|
+
});
|
68
|
+
|
53
69
|
return (
|
54
70
|
<nav
|
55
71
|
{...ariaProps}
|
@@ -72,7 +88,7 @@ const Nav = (props: NavProps) => {
|
|
72
88
|
</a>
|
73
89
|
</div>
|
74
90
|
}
|
75
|
-
<ul>{
|
91
|
+
<ul>{childrenWithProps}</ul>
|
76
92
|
</nav>
|
77
93
|
)
|
78
94
|
}
|
@@ -27,14 +27,7 @@
|
|
27
27
|
}
|
28
28
|
[class*=_text] {
|
29
29
|
flex: 1;
|
30
|
-
font-weight: $regular;
|
31
30
|
}
|
32
|
-
}
|
33
|
-
&[class*=_active] [class*=_link] {
|
34
|
-
@include pb_title_4;
|
35
|
-
color: $primary;
|
36
|
-
letter-spacing: normal;
|
37
|
-
}
|
38
31
|
&:hover {
|
39
32
|
background-color: rgba($primary, 0.03);
|
40
33
|
[class*=_icon] {
|
@@ -44,5 +37,11 @@
|
|
44
37
|
color: $primary;
|
45
38
|
}
|
46
39
|
}
|
40
|
+
}
|
41
|
+
&[class*=_active] [class*=_link] {
|
42
|
+
@include pb_title_4;
|
43
|
+
color: $primary;
|
44
|
+
letter-spacing: normal;
|
45
|
+
}
|
47
46
|
}
|
48
47
|
}
|
@@ -1,63 +1,90 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import { Nav, NavItem
|
1
|
+
import React from "react";
|
2
|
+
import { Nav, NavItem } from '../..'
|
3
3
|
|
4
4
|
const CollapsibleNav = (props) => {
|
5
|
-
const navItems = ["Overview", "Albums", "Similar Artists"]
|
6
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
7
|
-
const collapsibles = navItems.map(() => useCollapsible(true))
|
8
|
-
|
9
|
-
const handleMainClick = (index) => {
|
10
|
-
collapsibles.forEach(([, , setCollapsed], idx) => {
|
11
|
-
if (idx === index) {
|
12
|
-
setCollapsed(false)
|
13
|
-
} else {
|
14
|
-
setCollapsed(true)
|
15
|
-
}
|
16
|
-
})
|
17
|
-
}
|
18
|
-
|
19
|
-
|
20
|
-
const handleIconRightClick = (index) => {
|
21
|
-
const [isCollapsed, setCollapsed] = collapsibles[index]
|
22
|
-
setCollapsed(!isCollapsed)
|
23
|
-
}
|
24
|
-
|
25
5
|
return (
|
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
|
-
|
6
|
+
<Nav variant="bold">
|
7
|
+
<NavItem
|
8
|
+
active
|
9
|
+
collapsible
|
10
|
+
collapsibleTrail
|
11
|
+
fontWeight="bolder"
|
12
|
+
iconLeft="city"
|
13
|
+
iconRight={["plus", "minus"]}
|
14
|
+
link="#"
|
15
|
+
text="Overview"
|
16
|
+
{...props}
|
17
|
+
>
|
18
|
+
<NavItem
|
19
|
+
link="#"
|
20
|
+
text="City"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
<NavItem
|
24
|
+
link="#"
|
25
|
+
text="People"
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
<NavItem
|
29
|
+
link="#"
|
30
|
+
text="Business"
|
31
|
+
{...props}
|
32
|
+
/>
|
33
|
+
</NavItem>
|
34
|
+
<NavItem
|
35
|
+
collapsible
|
36
|
+
collapsibleTrail
|
37
|
+
fontWeight="bolder"
|
38
|
+
iconLeft="theater-masks"
|
39
|
+
iconRight={["plus", "minus"]}
|
40
|
+
link="#"
|
41
|
+
text="Albums"
|
42
|
+
{...props}
|
43
|
+
>
|
44
|
+
<NavItem
|
45
|
+
link="#"
|
46
|
+
text="Entertainment"
|
47
|
+
{...props}
|
48
|
+
/>
|
49
|
+
<NavItem
|
50
|
+
link="#"
|
51
|
+
text="Food"
|
52
|
+
{...props}
|
53
|
+
/>
|
54
|
+
<NavItem
|
55
|
+
link="#"
|
56
|
+
text="Style"
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
</NavItem>
|
60
|
+
<NavItem
|
61
|
+
collapsible
|
62
|
+
collapsibleTrail
|
63
|
+
fontWeight="bolder"
|
64
|
+
iconLeft="city"
|
65
|
+
iconRight={["plus", "minus"]}
|
66
|
+
link="#"
|
67
|
+
text="Similar Artists"
|
68
|
+
{...props}
|
69
|
+
>
|
70
|
+
<NavItem
|
71
|
+
link="#"
|
72
|
+
text="City"
|
73
|
+
{...props}
|
74
|
+
/>
|
75
|
+
<NavItem
|
76
|
+
link="#"
|
77
|
+
text="People"
|
78
|
+
{...props}
|
79
|
+
/>
|
80
|
+
<NavItem
|
81
|
+
link="#"
|
82
|
+
text="Business"
|
83
|
+
{...props}
|
84
|
+
/>
|
85
|
+
</NavItem>
|
86
|
+
</Nav>
|
87
|
+
);
|
88
|
+
};
|
62
89
|
|
63
90
|
export default CollapsibleNav
|
@@ -0,0 +1 @@
|
|
1
|
+
The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action.
|