playbook_ui 12.33.0.pre.alpha.revert2650closedialogonoutsideclick977 → 12.33.1.pre.alpha.PLAY933navkitcollapsible994

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +6 -4
  3. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +25 -0
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +19 -11
  5. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +27 -14
  6. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +7 -2
  7. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +2 -7
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.html.erb +10 -0
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +19 -0
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +2 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +1 -1
  12. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +3 -1
  13. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_collapsible/index.js +3 -3
  15. data/app/pb_kits/playbook/pb_date/_date.tsx +8 -7
  16. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -2
  17. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +4 -4
  18. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +2 -2
  19. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +5 -5
  20. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +31 -45
  21. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +3 -5
  22. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +21 -24
  23. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
  25. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
  26. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
  27. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +8 -6
  28. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +16 -15
  29. data/app/pb_kits/playbook/pb_kit/dateTime.ts +67 -139
  30. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +31 -52
  31. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +120 -0
  32. data/app/pb_kits/playbook/pb_message/_message.tsx +24 -24
  33. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -0
  34. data/app/pb_kits/playbook/pb_nav/_item.tsx +98 -49
  35. data/app/pb_kits/playbook/pb_nav/_nav.scss +1 -0
  36. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  37. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +24 -0
  38. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +83 -0
  39. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +86 -0
  40. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -0
  41. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
  42. data/app/pb_kits/playbook/pb_nav/item.html.erb +34 -12
  43. data/app/pb_kits/playbook/pb_nav/item.rb +5 -0
  44. data/app/pb_kits/playbook/pb_time/_time.tsx +11 -9
  45. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +49 -46
  46. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -4
  47. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +11 -11
  48. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +11 -8
  49. data/dist/playbook-rails.js +7 -7
  50. data/lib/playbook/version.rb +2 -2
  51. metadata +11 -3
  52. data/app/pb_kits/playbook/pb_collapsible/types.d.ts +0 -1
data/app/pb_kits/playbook/pb_logistic/_logistic.jsx ADDED
@@ -0,0 +1,120 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+
6
+ import DateTime from '../pb_kit/dateTime'
7
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
+ import { globalProps } from '../utilities/globalProps'
9
+
10
+ import Body from '../pb_body/_body'
11
+ import Caption from '../pb_caption/_caption'
12
+ import Icon from '../pb_icon/_icon'
13
+ import Title from '../pb_title/_title'
14
+
15
+ const dateString = (value: DateTime) => {
16
+ const month = value.toMonthNum()
17
+ const day = value.toDay()
18
+
19
+ return ` · ${month}/${day}`
20
+ }
21
+
22
+ type LogisticProps = {
23
+ aria?: object,
24
+ className?: string,
25
+ dark?: boolean,
26
+ data?: object,
27
+ date: string,
28
+ id?: string,
29
+ link?: string,
30
+ projectName?: string,
31
+ projectNumber?: number,
32
+ }
33
+
34
+ const Logistic = (props: LogisticProps) => {
35
+ const { aria = {},
36
+ className,
37
+ dark = false,
38
+ data = {},
39
+ date,
40
+ id,
41
+ link,
42
+ projectName,
43
+ projectNumber } = props
44
+
45
+ const ariaProps = buildAriaProps(aria)
46
+ const dataProps = buildDataProps(data)
47
+ const formattedDate = new DateTime({ value: date })
48
+ const classes = classnames(
49
+ buildCss('pb_logistic_kit', { dark }),
50
+ globalProps(props),
51
+ className
52
+ )
53
+
54
+ return (
55
+ <div
56
+ {...ariaProps}
57
+ {...dataProps}
58
+ className={classes}
59
+ id={id}
60
+ >
61
+ <Body color="light">
62
+ <Caption text="Project" />
63
+ <Icon
64
+ fixedWidth
65
+ icon="home"
66
+ />
67
+
68
+ {` ${projectNumber}`}
69
+
70
+ <Choose>
71
+ <When condition={link}>
72
+ <a
73
+ className="pb_logistic_kit_links"
74
+ href={link}
75
+ >
76
+ <Choose>
77
+ <When condition={date}>
78
+ <Title
79
+ size={4}
80
+ tag="span"
81
+ text={' ' + projectName + dateString(formattedDate)}
82
+ />
83
+ </When>
84
+ <Otherwise>
85
+ <Title
86
+ size={4}
87
+ tag="span"
88
+ text={' ' + projectName}
89
+ />
90
+ </Otherwise>
91
+ </Choose>
92
+ </a>
93
+ </When>
94
+ <Otherwise>
95
+ <Choose>
96
+ <When condition={date}>
97
+ <Title
98
+ dark={dark}
99
+ size={4}
100
+ tag="span"
101
+ text={' ' + projectName + dateString(formattedDate)}
102
+ />
103
+ </When>
104
+ <Otherwise>
105
+ <Title
106
+ dark={dark}
107
+ size={4}
108
+ tag="span"
109
+ text={' ' + projectName}
110
+ />
111
+ </Otherwise>
112
+ </Choose>
113
+ </Otherwise>
114
+ </Choose>
115
+ </Body>
116
+ </div>
117
+ )
118
+ }
119
+
120
+ export default Logistic
data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED
@@ -24,7 +24,7 @@ type MessageProps = {
24
24
  label?: string,
25
25
  message: string,
26
26
  timestamp?: string,
27
- timestampObject?: Date,
27
+ timestampObject?: string,
28
28
  timezone?: string,
29
29
  alignTimestamp?: string,
30
30
  }
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
61
61
 
62
62
  return (
63
63
  <div
64
- {...ariaProps}
65
- {...dataProps}
66
- className={classes}
67
- id={id}
64
+ {...ariaProps}
65
+ {...dataProps}
66
+ className={classes}
67
+ id={id}
68
68
  >
69
69
  {shouldDisplayAvatar &&
70
70
  <Avatar
71
- imageUrl={avatarUrl}
72
- name={avatarName}
73
- size="xs"
74
- status={avatarStatus}
71
+ imageUrl={avatarUrl}
72
+ name={avatarName}
73
+ size="xs"
74
+ status={avatarStatus}
75
75
  />
76
76
  }
77
77
  <div className="content_wrapper">
78
78
  <Flex
79
- justify={alignTimestamp === 'left' ? 'none' : 'between'}
80
- orientation="row"
79
+ justify={alignTimestamp === 'left' ? 'none' : 'between'}
80
+ orientation="row"
81
81
  >
82
82
  {label &&
83
83
  <Title
84
- className="message_title"
85
- size={4}
86
- text={label}
84
+ className="message_title"
85
+ size={4}
86
+ text={label}
87
87
  />
88
88
  }
89
89
  <Timestamp
90
- className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
91
- text={timestamp}
92
- timestamp={''}
93
- timezone={timezone}
90
+ className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
91
+ text={timestamp}
92
+ timestamp={''}
93
+ timezone={timezone}
94
94
  />
95
95
  {timestampObject &&
96
96
  <Timestamp
97
- className={`pull-${alignTimestamp} message_timestamp`}
98
- text={''}
99
- timestamp={timestampObject}
100
- timezone={timezone}
97
+ className={`pull-${alignTimestamp} message_timestamp`}
98
+ text={''}
99
+ timestamp={timestampObject}
100
+ timezone={timezone}
101
101
  />
102
102
  }
103
103
  </Flex>
104
104
  {message &&
105
105
  <Body
106
- className="pb_message_body"
107
- text={message}
106
+ className="pb_message_body"
107
+ text={message}
108
108
  />
109
109
  }
110
110
  {children}
data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss ADDED
@@ -0,0 +1,6 @@
1
+ [class^="pb_nav_list"] {
2
+ .pb_collapsible_main_kit,
3
+ .pb_collapsible_content_kit {
4
+ padding: 0 !important;
5
+ }
6
+ }
data/app/pb_kits/playbook/pb_nav/_item.tsx CHANGED
@@ -6,15 +6,17 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Icon from '../pb_icon/_icon'
8
8
  import Image from '../pb_image/_image'
9
+ import Collapsible from '../pb_collapsible/_collapsible'
9
10
 
10
11
  type NavItemProps = {
11
12
  active?: boolean,
12
13
  aria?: { [key: string]: string },
13
14
  children?: React.ReactNode[] | React.ReactNode,
14
15
  className?: string,
16
+ collapsible?: boolean,
15
17
  data?: object,
16
18
  iconLeft?: string,
17
- iconRight?: string,
19
+ iconRight?: string | string[],
18
20
  id?: string,
19
21
  imageUrl?: string,
20
22
  link?: string,
@@ -29,6 +31,7 @@ const NavItem = (props: NavItemProps) => {
29
31
  aria = {},
30
32
  children,
31
33
  className,
34
+ collapsible,
32
35
  data = {},
33
36
  iconLeft,
34
37
  iconRight,
@@ -53,54 +56,100 @@ const NavItem = (props: NavItemProps) => {
53
56
  className={classes}
54
57
  id={id}
55
58
  >
56
- <Tag
57
- className="pb_nav_list_item_link"
58
- href={link}
59
- onClick={onClick}
60
- target={target}
61
- >
62
- {imageUrl &&
63
- <div
64
- className="pb_nav_list_item_icon_section"
65
- key={imageUrl}
66
- >
67
- <Image
68
- className="pb_nav_img_wrapper"
69
- url={imageUrl}
70
- />
71
- </div>
72
- }
73
-
74
- {iconLeft &&
75
- <div
76
- className="pb_nav_list_item_icon_section"
77
- key={iconLeft}
78
- >
79
- <Icon
80
- className="pb_nav_list_item_icon_left"
81
- fixedWidth
82
- icon={iconLeft}
83
- />
84
- </div>
85
- }
86
-
87
- <span className="pb_nav_list_item_text">
88
- {text || children}
89
- </span>
90
-
91
- {iconRight &&
92
- <div
93
- className="pb_nav_list_item_icon_section"
94
- key={iconRight}
95
- >
96
- <Icon
97
- className="pb_nav_list_item_icon_right"
98
- fixedWidth
99
- icon={iconRight}
100
- />
101
- </div>
102
- }
103
- </Tag>
59
+ {
60
+ collapsible ? (
61
+ <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs" padding="none">
62
+ <Collapsible.Main>
63
+ <Tag
64
+ className="pb_nav_list_item_link"
65
+ href={link}
66
+ onClick={onClick}
67
+ target={target}
68
+ >
69
+ {imageUrl &&
70
+ <div
71
+ className="pb_nav_list_item_icon_section"
72
+ key={imageUrl}
73
+ >
74
+ <Image
75
+ className="pb_nav_img_wrapper"
76
+ url={imageUrl}
77
+ />
78
+ </div>
79
+ }
80
+
81
+ {iconLeft &&
82
+ <div
83
+ className="pb_nav_list_item_icon_section"
84
+ key={iconLeft}
85
+ >
86
+ <Icon
87
+ className="pb_nav_list_item_icon_left"
88
+ fixedWidth
89
+ icon={iconLeft}
90
+ />
91
+ </div>
92
+ }
93
+ <span className="pb_nav_list_item_text">
94
+ {text}
95
+ </span>
96
+ </Tag>
97
+ </Collapsible.Main>
98
+ <Collapsible.Content>
99
+ {children}
100
+ </Collapsible.Content>
101
+ </Collapsible>
102
+ ) : (
103
+ <Tag
104
+ className="pb_nav_list_item_link"
105
+ href={link}
106
+ onClick={onClick}
107
+ target={target}
108
+ >
109
+ {imageUrl &&
110
+ <div
111
+ className="pb_nav_list_item_icon_section"
112
+ key={imageUrl}
113
+ >
114
+ <Image
115
+ className="pb_nav_img_wrapper"
116
+ url={imageUrl}
117
+ />
118
+ </div>
119
+ }
120
+
121
+ {iconLeft &&
122
+ <div
123
+ className="pb_nav_list_item_icon_section"
124
+ key={iconLeft}
125
+ >
126
+ <Icon
127
+ className="pb_nav_list_item_icon_left"
128
+ fixedWidth
129
+ icon={iconLeft}
130
+ />
131
+ </div>
132
+ }
133
+
134
+ <span className="pb_nav_list_item_text">
135
+ {text || children}
136
+ </span>
137
+
138
+ {iconRight &&
139
+ <div
140
+ className="pb_nav_list_item_icon_section"
141
+ key={iconRight as string}
142
+ >
143
+ <Icon
144
+ className="pb_nav_list_item_icon_right"
145
+ fixedWidth
146
+ icon={iconRight as string}
147
+ />
148
+ </div>
149
+ }
150
+ </Tag>
151
+ )
152
+ }
104
153
  </li>
105
154
  )
106
155
  }
data/app/pb_kits/playbook/pb_nav/_nav.scss CHANGED
@@ -4,3 +4,4 @@
4
4
  @import "../tokens/colors";
5
5
  @import "./vertical_nav";
6
6
  @import "./horizontal_nav";
7
+ @import "./collapsible_nav";
data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss CHANGED
@@ -29,22 +29,20 @@
29
29
  flex: 1;
30
30
  font-weight: $regular;
31
31
  }
32
- @media (hover:hover) {
33
- &:hover {
34
- background-color: rgba($primary, 0.03);
35
- [class*=_icon] {
36
- color: $primary;
37
- }
38
- [class*=_text] {
39
- color: $primary;
40
- }
41
- }
42
- }
43
32
  }
44
33
  &[class*=_active] [class*=_link] {
45
34
  @include pb_title_4;
46
35
  color: $primary;
47
36
  letter-spacing: normal;
48
37
  }
38
+ &:hover {
39
+ background-color: rgba($primary, 0.03);
40
+ [class*=_icon] {
41
+ color: $primary;
42
+ }
43
+ [class*=_text] {
44
+ color: $primary;
45
+ }
46
+ }
49
47
  }
50
48
  }
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb ADDED
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
3
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
4
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
6
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
7
+ <% end %>
8
+ <% end %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
10
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
11
+ <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
14
+ <% end %>
15
+ <% end %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
17
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
18
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
24
+
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx ADDED
@@ -0,0 +1,83 @@
1
+ import React from "react";
2
+
3
+ import Nav from "../_nav";
4
+ import NavItem from "../_item";
5
+
6
+ const CollapsibleNav = (props) => {
7
+ return (
8
+ <Nav variant="subtle">
9
+ <NavItem
10
+ collapsible
11
+ iconLeft="city"
12
+ link="#"
13
+ text="Overview"
14
+ {...props}
15
+ >
16
+ <NavItem
17
+ link="#"
18
+ text="City"
19
+ {...props}
20
+ />
21
+ <NavItem
22
+ link="#"
23
+ text="People"
24
+ {...props}
25
+ />
26
+ <NavItem
27
+ link="#"
28
+ text="Business"
29
+ {...props}
30
+ />
31
+ </NavItem>
32
+ <NavItem
33
+ active
34
+ collapsible
35
+ iconLeft="theater-masks"
36
+ link="#"
37
+ text="Albums"
38
+ {...props}
39
+ >
40
+ <NavItem
41
+ link="#"
42
+ text="Entertainment"
43
+ {...props}
44
+ />
45
+ <NavItem
46
+ link="#"
47
+ text="Food"
48
+ {...props}
49
+ />
50
+ <NavItem
51
+ link="#"
52
+ text="Style"
53
+ {...props}
54
+ />
55
+ </NavItem>
56
+ <NavItem
57
+ collapsible
58
+ iconLeft="city"
59
+ link="#"
60
+ text="Similar Artists"
61
+ {...props}
62
+ >
63
+ <NavItem
64
+ link="#"
65
+ text="City"
66
+ {...props}
67
+ />
68
+ <NavItem
69
+ link="#"
70
+ text="People"
71
+ {...props}
72
+ />
73
+ <NavItem
74
+ link="#"
75
+ text="Business"
76
+ {...props}
77
+ />
78
+ </NavItem>
79
+ </Nav>
80
+ );
81
+ };
82
+
83
+ export default CollapsibleNav;
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx ADDED
@@ -0,0 +1,86 @@
1
+ import React from "react";
2
+
3
+ import Nav from "../_nav";
4
+ import NavItem from "../_item";
5
+
6
+ const CollapsibleNavCustomIcons = (props) => {
7
+ return (
8
+ <Nav variant="subtle">
9
+ <NavItem
10
+ collapsible
11
+ iconLeft="city"
12
+ iconRight={["chevron-down", "chevron-up"]}
13
+ link="#"
14
+ text="Overview"
15
+ {...props}
16
+ >
17
+ <NavItem
18
+ link="#"
19
+ text="City"
20
+ {...props}
21
+ />
22
+ <NavItem
23
+ link="#"
24
+ text="People"
25
+ {...props}
26
+ />
27
+ <NavItem
28
+ link="#"
29
+ text="Business"
30
+ {...props}
31
+ />
32
+ </NavItem>
33
+ <NavItem
34
+ active
35
+ collapsible
36
+ iconLeft="theater-masks"
37
+ iconRight={["chevron-down", "chevron-up"]}
38
+ link="#"
39
+ text="Albums"
40
+ {...props}
41
+ >
42
+ <NavItem
43
+ link="#"
44
+ text="Entertainment"
45
+ {...props}
46
+ />
47
+ <NavItem
48
+ link="#"
49
+ text="Food"
50
+ {...props}
51
+ />
52
+ <NavItem
53
+ link="#"
54
+ text="Style"
55
+ {...props}
56
+ />
57
+ </NavItem>
58
+ <NavItem
59
+ collapsible
60
+ iconLeft="city"
61
+ iconRight={["chevron-down", "chevron-up"]}
62
+ link="#"
63
+ text="Similar Artists"
64
+ {...props}
65
+ >
66
+ <NavItem
67
+ link="#"
68
+ text="City"
69
+ {...props}
70
+ />
71
+ <NavItem
72
+ link="#"
73
+ text="People"
74
+ {...props}
75
+ />
76
+ <NavItem
77
+ link="#"
78
+ text="Business"
79
+ {...props}
80
+ />
81
+ </NavItem>
82
+ </Nav>
83
+ );
84
+ };
85
+
86
+ export default CollapsibleNavCustomIcons;
data/app/pb_kits/playbook/pb_nav/docs/example.yml CHANGED
@@ -7,6 +7,7 @@ examples:
7
7
  - borderless_nav: No Borders
8
8
  - subtle_nav: Subtle Variant
9
9
  - subtle_with_icons_nav: Subtle With Icons
10
+ - collapsible_nav: Subtle With Collapsible
10
11
  - subtle_no_highlight_nav: Subtle No Highlight
11
12
  - bold_vertical_nav: Bold Variant
12
13
  - horizontal_nav: Horizontal Nav
@@ -24,6 +25,8 @@ examples:
24
25
  - borderless_nav: No Borders
25
26
  - subtle_nav: Subtle Variant
26
27
  - subtle_with_icons_nav: Subtle With Icons
28
+ - collapsible_nav: Subtle With Collapsible
29
+ - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
27
30
  - subtle_no_highlight_nav: Subtle No Highlight
28
31
  - bold_vertical_nav: Bold Variant
29
32
  - horizontal_nav: Horizontal Nav
data/app/pb_kits/playbook/pb_nav/docs/index.js CHANGED
@@ -13,3 +13,5 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
13
13
  export { default as NewTab } from './_new_tab.jsx'
14
14
  export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
15
15
  export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
16
+ export { default as CollapsibleNav } from './_collapsible_nav.jsx'
17
+ export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'