playbook_ui 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998 → 12.35.0.pre.alpha.iconpocwebfonts1023

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_card/_card.scss +3 -0
  4. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -6
  5. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -3
  6. data/app/pb_kits/playbook/pb_card/card.rb +0 -96
  7. data/app/pb_kits/playbook/pb_card/card_body.rb +93 -1
  8. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +11 -0
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +7 -7
  10. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +25 -0
  11. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +20 -14
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +35 -17
  13. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +7 -2
  14. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +8 -5
  15. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.html.erb +10 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +19 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +2 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +1 -1
  20. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +3 -1
  21. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_collapsible/index.js +3 -3
  23. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +14 -2
  24. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +2 -2
  25. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +1 -4
  26. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +1 -2
  27. data/app/pb_kits/playbook/pb_highlight/_highlight.scss +4 -3
  28. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb +6 -16
  29. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx +2 -2
  30. data/app/pb_kits/playbook/pb_highlight/docs/example.yml +0 -2
  31. data/app/pb_kits/playbook/pb_icon/docs/_icon_font.html.erb +11 -0
  32. data/app/pb_kits/playbook/pb_icon/docs/example.yml +1 -0
  33. data/app/pb_kits/playbook/pb_icon/icon.html.erb +15 -1
  34. data/app/pb_kits/playbook/pb_icon/icon.rb +24 -2
  35. data/app/pb_kits/playbook/pb_message/_message.scss +18 -0
  36. data/app/pb_kits/playbook/pb_message/_message.tsx +2 -0
  37. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +44 -0
  38. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.html.erb +24 -0
  39. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.jsx +31 -0
  40. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.md +1 -0
  41. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -2
  42. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -1
  43. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +7 -0
  44. data/app/pb_kits/playbook/pb_message/message_mention.rb +15 -0
  45. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -0
  46. data/app/pb_kits/playbook/pb_nav/_item.tsx +98 -49
  47. data/app/pb_kits/playbook/pb_nav/_nav.scss +1 -0
  48. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  49. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +24 -0
  50. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +83 -0
  51. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +86 -0
  52. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -0
  53. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
  54. data/app/pb_kits/playbook/pb_nav/item.html.erb +34 -12
  55. data/app/pb_kits/playbook/pb_nav/item.rb +5 -0
  56. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -14
  57. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +0 -2
  58. data/app/pb_kits/playbook/pb_popover/index.ts +2 -5
  59. data/dist/playbook-rails.js +7 -7
  60. data/lib/playbook/version.rb +2 -2
  61. metadata +17 -3
  62. data/app/pb_kits/playbook/pb_collapsible/types.d.ts +0 -1
@@ -2,8 +2,8 @@ import PbEnhancedElement from '../pb_enhanced_element'
2
2
 
3
3
  const MAIN_SELECTOR = '[data-collapsible-main]'
4
4
  const CONTENT_SELECTOR = '[data-collapsible-content]'
5
- const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
6
- const UP_ARROW_SELECTOR = '.fa-chevron-up'
5
+ const DOWN_ARROW_SELECTOR = '#collapsible_open_icon'
6
+ const UP_ARROW_SELECTOR = '#collapsible_close_icon'
7
7
 
8
8
  export default class PbCollapsible extends PbEnhancedElement {
9
9
  static get selector() {
@@ -75,5 +75,5 @@ export default class PbCollapsible extends PbEnhancedElement {
75
75
  displayUpArrow() {
76
76
  this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
77
77
  this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
78
- }
78
+ }
79
79
  }
@@ -263,8 +263,20 @@
263
263
  }
264
264
  }
265
265
 
266
- // Styles specific to Rails version of kit
267
- // Rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
266
+ [class*="dialog_body"] {
267
+ padding: $space_sm;
268
+ }
269
+
270
+ [class*="dialog_header"] {
271
+ padding: $space_sm;
272
+ }
273
+
274
+ [class*="dialog_footer"] {
275
+ padding: $space_sm;
276
+ }
277
+
278
+ //styles specific to rails version of kit
279
+ // rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
268
280
  .pb_dialog_wrapper_rails {
269
281
  $medium: 500px;
270
282
  $large: 800px;
@@ -11,9 +11,9 @@ type DialogBodyProps = {
11
11
 
12
12
  // Body component
13
13
  const DialogBody = (props: DialogBodyProps) => {
14
- const { children, padding = "sm", className } = props
14
+ const { children, className } = props
15
15
  const bodyCSS = buildCss("dialog_body")
16
- const bodySpacing = globalProps(props, { padding })
16
+ const bodySpacing = globalProps(props)
17
17
 
18
18
  return (
19
19
  <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -25,16 +25,13 @@ type DialogFooterProps = {
25
25
  const DialogFooter = (props: DialogFooterProps) => {
26
26
  const {
27
27
  children,
28
- padding = "sm",
29
- paddingBottom = "sm",
30
- paddingX = "sm",
31
28
  className,
32
29
  spacing = "between",
33
30
  separator = false,
34
31
  } = props
35
32
 
36
33
  const footerCSS = buildCss("dialog_footer")
37
- const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
34
+ const footerSpacing = globalProps(props)
38
35
 
39
36
  return (
40
37
  <>
@@ -28,7 +28,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
28
28
  children,
29
29
  className,
30
30
  data = {},
31
- padding = "sm",
32
31
  spacing = "between",
33
32
  closeable = true,
34
33
  separator = true,
@@ -38,7 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
38
37
  const dataProps = buildDataProps(data)
39
38
  const api = useContext(DialogContext)
40
39
  const headerCSS = buildCss("dialog_header")
41
- const headerSpacing = globalProps(props, { padding })
40
+ const headerSpacing = globalProps(props)
42
41
 
43
42
  /* eslint-disable react/jsx-handler-names */
44
43
 
@@ -1,6 +1,7 @@
1
- @import "../tokens/colors";
2
- @import "../tokens/opacity";
3
-
4
1
  [class^=pb_highlight_kit] {
5
2
  background-color: rgba($yellow,$opacity_2);
3
+
4
+ mark {
5
+ background-color: unset;
6
+ }
6
7
  }
@@ -1,20 +1,10 @@
1
1
 
2
- <%= pb_rails("highlight", props: {text: "Highlight Kit"})%>
3
- <br>
4
- <br>
5
- <%= pb_rails("title", props: {text: "Kit wrapping",size: 4})%>
6
- <br>
7
2
  <%= pb_rails("body") do%>
8
- This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
3
+ This is the <%= pb_rails("highlight") do%>Highlight Kit<% end %>.
9
4
  <% end %>
10
- <br>
11
- <br>
12
- <%= pb_rails("title", props: {text: "Search",size: 4})%>
13
- <br>
14
- <%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
15
5
 
16
- <br>
17
- <br>
18
- <%= pb_rails("caption", props: {size: "xs", text: "To enable highlighting make sure the [highlighting] flag is set to true. "}) %>
19
- <br>
20
- <br>
6
+ <%= pb_rails("body", props: {padding_bottom: "md"}) do%>
7
+ Hello this is a <%= pb_rails("highlight") do%>highlight<% end %> wrapped.
8
+ <% end %>
9
+
10
+ <%= pb_rails("body", props: {text: "This is text highlighted in the Body Kit using the text prop.", highlighting: true, highlighted_text: ["highlighted", "Body Kit"]})%>
@@ -7,7 +7,7 @@ const HighlightDefault = (props) => (
7
7
  <div>
8
8
  <Highlight
9
9
  highlightedText={['highlight kit']}
10
- text="This is the Highlight Kit"
10
+ text="This is the Highlight Kit."
11
11
  {...props}
12
12
  />
13
13
  <br />
@@ -15,7 +15,7 @@ const HighlightDefault = (props) => (
15
15
  {' '}
16
16
  {'Hello this is a'}
17
17
  {' '}
18
- <Highlight text=" highlight wrapped"/>
18
+ <Highlight text=" highlight wrapped."/>
19
19
  </Body>
20
20
  <br />
21
21
  <Body
@@ -3,7 +3,5 @@ examples:
3
3
  rails:
4
4
  - highlight_default: Default
5
5
 
6
-
7
6
  react:
8
7
  - highlight_default: Default
9
-
@@ -0,0 +1,11 @@
1
+ <div>
2
+ <%= pb_rails("icon", props: { icon: "bumper-plates", font_family: "boxboard", prefix: "icon", size: "5x"} ) %>
3
+ <%= pb_rails("icon", props: { icon: "boxboard", font_family: "boxboard", prefix: "icon", size: "5x", padding_left: "md"} ) %>
4
+ <%= pb_rails("icon", props: { icon: "workout-journal", font_family: "boxboard", prefix: "icon", size: "5x", padding_left: "md"} ) %>
5
+ </div>
6
+
7
+ <div>
8
+ <%= pb_rails("icon", props: { icon: "sushi", font_family: "boxicons", prefix: "bx bx", size: "5x", margin_top: "lg"} ) %>
9
+ <%= pb_rails("icon", props: { icon: "bowl-rice", font_family: "boxicons", prefix: "bx bx", size: "5x", padding_left: "md"} ) %>
10
+ <%= pb_rails("icon", props: { icon: "party", font_family: "boxicons", prefix: "bx bx", size: "5x", padding_left: "md"} ) %>
11
+ </div>
@@ -9,6 +9,7 @@ examples:
9
9
  - icon_sizes: Icon Sizes
10
10
  - icon_custom: Icon Custom
11
11
  - icon_fa_kit: Icon with FontAwesome Kit
12
+ - icon_font: Bring Your Own Icon Font
12
13
 
13
14
  react:
14
15
  - icon_default: Icon Default
@@ -2,14 +2,28 @@
2
2
  <%= object.render_svg(object.custom_icon) %>
3
3
  <% elsif object.valid_emoji(object.icon) %>
4
4
  <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
5
+ <% elsif object.font_family.present? %>
6
+ <%= content_tag(:i, nil,
7
+ id: object.id,
8
+ data: object.data,
9
+ class: object.icon_font_classname,
10
+ style:
11
+ "font-family: #{object.font_family.to_s};font-size: #{object.size.to_s.match?(/x/) ? object.size.to_s.gsub(/x/, '').to_i : object.size.to_s}em;"
12
+ ) %>
13
+ <%= content_tag(:span, nil,
14
+ aria: { label: "#{object.icon} icon" }.merge(object.aria),
15
+ hidden: true
16
+ ) %>
5
17
  <% else %>
6
18
  <%= content_tag(:i, nil,
7
19
  id: object.id,
8
20
  data: object.data,
9
- class: object.classname
21
+ class: object.classname,
10
22
  ) %>
11
23
  <%= content_tag(:span, nil,
12
24
  aria: { label: "#{object.icon} icon" }.merge(object.aria),
13
25
  hidden: true
14
26
  ) %>
15
27
  <% end %>
28
+
29
+
@@ -15,6 +15,8 @@ module Playbook
15
15
  values: ["horizontal", "vertical", "both", nil],
16
16
  default: nil
17
17
  prop :icon
18
+ prop :font_family, type: Playbook::Props::String,
19
+ default: nil
18
20
  prop :custom_icon, type: Playbook::Props::String,
19
21
  default: nil
20
22
  prop :inverse, type: Playbook::Props::Boolean,
@@ -37,6 +39,8 @@ module Playbook
37
39
  default: "far"
38
40
  prop :spin, type: Playbook::Props::Boolean,
39
41
  default: false
42
+ prop :prefix, type: Playbook::Props::String,
43
+ default: "fa"
40
44
 
41
45
  def valid_emoji(icon)
42
46
  emoji_regex = /\p{Emoji}/
@@ -62,6 +66,24 @@ module Playbook
62
66
  )
63
67
  end
64
68
 
69
+ def icon_font_classname
70
+ generate_classname(
71
+ "pb_icon_kit",
72
+ icon_class,
73
+ border_class,
74
+ fixed_width_class,
75
+ flip_class,
76
+ inverse_class,
77
+ list_item_class,
78
+ pull_class,
79
+ pulse_class,
80
+ rotation_class,
81
+ size_class,
82
+ spin_class,
83
+ separator: " "
84
+ )
85
+ end
86
+
65
87
  def custom_icon_classname
66
88
  generate_classname(
67
89
  "pb_icon_kit",
@@ -101,7 +123,7 @@ module Playbook
101
123
  end
102
124
 
103
125
  def icon_class
104
- icon ? "fa-#{icon}" : nil
126
+ icon ? "#{prefix}-#{icon}" : nil
105
127
  end
106
128
 
107
129
  def inverse_class
@@ -136,7 +158,7 @@ module Playbook
136
158
  end
137
159
 
138
160
  def size_class
139
- size ? "fa-#{size}" : nil
161
+ size ? "#{prefix}-#{size}" : nil
140
162
  end
141
163
 
142
164
  def font_style_class
@@ -4,6 +4,24 @@
4
4
  @import "../pb_caption/caption";
5
5
  @import "../pb_timestamp/timestamp";
6
6
 
7
+ $mention_bg_color_yellow: rgba(249, 187, 0, 0.2);
8
+ $mention_bg_color_blue: #e5eefa;
9
+
7
10
  [class^=pb_message_kit] {
8
11
  @include pb_message;
12
+
13
+ [class^=pb_message_mention] {
14
+ border-radius: $space_xxs;
15
+ color: $primary;
16
+ display: inline;
17
+ padding: $space_xxs;
18
+
19
+ &[class*=_user] {
20
+ background-color: $mention_bg_color_blue;
21
+ }
22
+
23
+ &[class*=_self] {
24
+ background-color: $mention_bg_color_yellow;
25
+ }
26
+ }
9
27
  }
@@ -11,6 +11,7 @@ import Body from '../pb_body/_body'
11
11
  import Flex from '../pb_flex/_flex'
12
12
  import Timestamp from '../pb_timestamp/_timestamp'
13
13
  import Title from '../pb_title/_title'
14
+ import MessageMention from './_message_mention'
14
15
 
15
16
  type MessageProps = {
16
17
  aria: { [key: string]: string },
@@ -113,4 +114,5 @@ const Message = (props: MessageProps) => {
113
114
  )
114
115
  }
115
116
 
117
+ Message.Mention = MessageMention
116
118
  export default Message
@@ -0,0 +1,44 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
4
+ import { globalProps } from '../utilities/globalProps'
5
+
6
+ type MessageMentionProps = {
7
+ aria: { [key: string]: string },
8
+ children?: React.ReactChild[] | React.ReactChild,
9
+ className?: string,
10
+ data?: object,
11
+ id?: string,
12
+ variant: 'user' | 'self',
13
+ }
14
+
15
+ const MessageMention = (props: MessageMentionProps) => {
16
+ const {
17
+ aria = {},
18
+ children,
19
+ className,
20
+ data = {},
21
+ id,
22
+ variant = 'user',
23
+ } = props
24
+ const ariaProps = buildAriaProps(aria)
25
+ const dataProps = buildDataProps(data)
26
+ const classes = classnames(
27
+ buildCss('pb_message_mention', variant),
28
+ globalProps(props),
29
+ className
30
+ )
31
+
32
+ return (
33
+ <div
34
+ {...ariaProps}
35
+ {...dataProps}
36
+ className={classes}
37
+ id={id}
38
+ >
39
+ {children}
40
+ </div>
41
+ )
42
+ }
43
+
44
+ export default MessageMention
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("message", props: {
2
+ label: "Keith Craig",
3
+ timestamp: "2 days ago",
4
+ avatar_name: "Keith Craig",
5
+ padding_bottom: "md"
6
+ }) do %>
7
+ <%= pb_rails("message/message_mention", props: { variant: "user" }) do %>
8
+ @all
9
+ <% end %> let's welcome
10
+ <%= pb_rails("message/message_mention", props: { variant: "self" }) do %>
11
+ @Lucille Sanchez
12
+ <% end %> to the team this week!
13
+ <% end %>
14
+
15
+ <%= pb_rails("message", props: {
16
+ label: "Lucille Sanchez",
17
+ timestamp: "2 days ago",
18
+ avatar_name: "Lucille Sanchez",
19
+ avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
20
+ }) do %>
21
+ <%= pb_rails("message/message_mention", props: {variant: "self"}) do %>
22
+ @Keith Craig
23
+ <% end %> thanks for the warm welcome! I'm so excited!
24
+ <% end %>
@@ -0,0 +1,31 @@
1
+ import React from "react"
2
+ import Message from "../_message"
3
+
4
+ const MessageDefault = (props) => {
5
+ return (
6
+ <>
7
+ <Message
8
+ avatarName='Keith Craig'
9
+ label='Keith Craig'
10
+ paddingBottom="md"
11
+ timestamp='2 days ago'
12
+ {...props}
13
+ >
14
+ <Message.Mention variant='user'>{'@all'}</Message.Mention>{` let's welcome `}
15
+ <Message.Mention variant='self'>{'@Lucille Sanchez'}</Message.Mention>{' to the team this week!'}
16
+ </Message>
17
+
18
+ <Message
19
+ avatarName='Lucille Sanchez'
20
+ avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
21
+ label='Lucille Sanchez'
22
+ timestamp='2 days ago'
23
+ {...props}
24
+ >
25
+ <Message.Mention variant='self'>{'@Keith Craig'}</Message.Mention>{` thanks for the warm welcome! I'm so excited!`}
26
+ </Message>
27
+ </>
28
+ )
29
+ }
30
+
31
+ export default MessageDefault
@@ -0,0 +1 @@
1
+ The message kit also supports @mentions using a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure. See the code example for details on how to pass user mentions through your messages.
@@ -4,10 +4,10 @@ examples:
4
4
  - message_default: Default
5
5
  - message_timestamp: With Timestamp Hover
6
6
  - message_hover: Hover
7
-
7
+ - message_mentions: Mentions
8
8
 
9
9
  react:
10
10
  - message_default: Default
11
11
  - message_timestamp: With Timestamp Hover
12
12
  - message_hover: Hover
13
-
13
+ - message_mentions: Mentions
@@ -1,4 +1,4 @@
1
1
  export { default as MessageDefault } from './_message_default.jsx'
2
2
  export { default as MessageTimestamp } from './_message_timestamp.jsx'
3
3
  export { default as MessageHover } from './_message_hover.jsx'
4
-
4
+ export { default as MessageMentions } from './_message_mentions.jsx'
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ aria: object.aria) do %>
6
+ <%= content %>
7
+ <% end %>
@@ -0,0 +1,15 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbMessage
5
+ class MessageMention < Playbook::KitBase
6
+ prop :variant, type: Playbook::Props::Enum,
7
+ values: %w[user self],
8
+ default: "user"
9
+
10
+ def classname
11
+ generate_classname("pb_message_mention", variant)
12
+ end
13
+ end
14
+ end
15
+ end
@@ -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
+ }
@@ -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">
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
  }
@@ -4,3 +4,4 @@
4
4
  @import "../tokens/colors";
5
5
  @import "./vertical_nav";
6
6
  @import "./horizontal_nav";
7
+ @import "./collapsible_nav";