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.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +6 -0
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -9
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  12. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  13. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  14. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +274 -17
  15. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +7 -1
  16. data/app/pb_kits/playbook/pb_nav/_item.tsx +232 -132
  17. data/app/pb_kits/playbook/pb_nav/_mixins.scss +14 -0
  18. data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
  19. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -7
  20. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  21. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
  22. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  23. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
  24. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  25. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  29. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  30. data/app/pb_kits/playbook/pb_nav/item.html.erb +20 -4
  31. data/app/pb_kits/playbook/pb_nav/item.rb +89 -3
  32. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
  33. data/app/pb_kits/playbook/pb_nav/nav.rb +13 -0
  34. data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
  35. data/app/pb_kits/playbook/pb_select/_select.scss +76 -0
  36. data/app/pb_kits/playbook/pb_select/_select.tsx +9 -5
  37. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
  38. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
  39. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +36 -0
  40. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx +50 -0
  41. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -0
  42. data/app/pb_kits/playbook/pb_select/docs/example.yml +3 -0
  43. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_select/select.html.erb +5 -9
  45. data/app/pb_kits/playbook/pb_select/select.rb +14 -0
  46. data/app/pb_kits/playbook/pb_select/select.test.js +17 -0
  47. data/dist/playbook-rails.js +2 -2
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +22 -8
@@ -1,165 +1,266 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
1
+ import React from "react";
2
+ import classnames from "classnames";
3
3
 
4
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
- import { globalProps, GlobalProps } from '../utilities/globalProps'
4
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
5
+ import { globalProps, GlobalProps } from "../utilities/globalProps";
6
6
 
7
- import Icon from '../pb_icon/_icon'
8
- import Image from '../pb_image/_image'
9
- import Collapsible from '../pb_collapsible/_collapsible'
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
- children?: React.ReactNode[] | React.ReactNode,
15
- className?: string,
16
- collapsible?: boolean,
17
- collapsibleClick?: () => void,
18
- data?: object,
19
- iconLeft?: string,
20
- iconRight?: string | string[],
21
- iconRightClick?: () => void,
22
- iconLeftClick?: () => void,
23
- id?: string,
24
- imageUrl?: string,
25
- link?: string,
26
- onClick?: React.MouseEventHandler<HTMLElement>,
27
- target?: '_blank' | '_self' | '_parent' | '_top',
28
- text: string,
29
- toggleCollapsed?: any
30
- } & GlobalProps
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
- iconRightClick,
44
- iconLeftClick,
77
+ onIconRightClick,
78
+ onIconLeftClick,
45
79
  id,
46
80
  imageUrl,
47
81
  link,
48
- onClick = () => { },
49
- target = '_self',
50
- text = '',
51
- toggleCollapsed
52
- } = props
53
-
54
- const Tag = link ? 'a' : 'div'
55
- const activeClass = active === true ? 'active' : ''
56
- const ariaProps = buildAriaProps(aria)
57
- const dataProps = buildDataProps(data)
58
- const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
59
-
60
-
61
- const handleIconClick = (e:any) => {
62
- if (iconLeftClick) {
63
- e.stopPropagation();
64
- iconLeftClick()
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
- {...ariaProps}
71
- {...dataProps}
72
- className={classes}
73
- id={id}
74
- >
75
- {
76
- collapsible ? (
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
- {imageUrl &&
92
- <div
93
- className="pb_nav_list_item_icon_section"
94
- key={imageUrl}
95
- onClick={(e)=>handleIconClick(e)}
96
- >
97
- <Image
98
- className="pb_nav_img_wrapper"
99
- url={imageUrl}
100
- />
101
- </div>
102
- }
103
-
104
- {iconLeft &&
105
- <div
106
- className="pb_nav_list_item_icon_section"
107
- key={iconLeft}
108
- onClick={(e)=>handleIconClick(e)}
109
- >
110
- <Icon
111
- className="pb_nav_list_item_icon_left"
112
- fixedWidth
113
- icon={iconLeft}
114
- />
115
- </div>
116
- }
117
- <span className="pb_nav_list_item_text">
118
- {text}
119
- </span>
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="pb_nav_list_item_link"
240
+ className={tagClasses}
129
241
  href={link}
130
242
  onClick={onClick}
131
243
  target={target}
132
244
  >
133
- {imageUrl &&
134
- <div
135
- className="pb_nav_list_item_icon_section"
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
- {text || children}
160
- </span>
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;
@@ -0,0 +1,14 @@
1
+ @mixin collapsible_trail_class {
2
+ .pb_collapsible_content_kit {
3
+ position: relative;
4
+ &::after {
5
+ content: "";
6
+ position: absolute;
7
+ top: 4px;
8
+ bottom: 4px;
9
+ left: 5px;
10
+ width: 1px;
11
+ background-color: $border_light;
12
+ }
13
+ }
14
+ }
@@ -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>{children}</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
  }
@@ -56,7 +56,7 @@ $selector: ".pb_nav_list";
56
56
  color: $primary;
57
57
  }
58
58
  [class*=_text] {
59
- color: $primary;
59
+ color: $primary !important;
60
60
  }
61
61
  }
62
62
  }
@@ -1,63 +1,90 @@
1
- import React from "react"
2
- import { Nav, NavItem, useCollapsible } from "../.."
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
- <Nav variant='subtle'>
28
- {navItems.map((text, index) => {
29
- const [collapsed] = collapsibles[index]
30
- return (
31
- <NavItem
32
- collapsible
33
- collapsibleClick={() => handleMainClick(index)}
34
- iconLeft="chevron-down"
35
- iconRightClick={() => handleIconRightClick(index)}
36
- id={`collapsible-nav-item-${index + 1}`}
37
- key={index}
38
- link="#"
39
- text={text}
40
- toggleCollapsed={collapsed}
41
- {...props}
42
- >
43
- <NavItem link="#"
44
- text="City"
45
- {...props}
46
- />
47
- <NavItem link="#"
48
- text="People"
49
- {...props}
50
- />
51
- <NavItem link="#"
52
- text="Business"
53
- {...props}
54
- />
55
- </NavItem>
56
- );
57
- })}
58
- </Nav>
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.