playbook_ui 12.39.0 → 13.0.0.pre.alpha.PLAY966collapsiblenav41126

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +18 -8
  4. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +45 -39
  5. data/app/pb_kits/playbook/pb_kit/dateTime.ts +204 -1
  6. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +16 -14
  7. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +86 -115
  8. data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss +14 -0
  9. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +58 -57
  10. data/app/pb_kits/playbook/pb_nav/_item.tsx +234 -138
  11. data/app/pb_kits/playbook/pb_nav/_nav.scss +38 -0
  12. data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
  13. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  14. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +50 -58
  15. data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +4 -1
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +4 -4
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +4 -10
  19. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +5 -1
  20. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +12 -12
  21. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +13 -1
  22. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -1
  23. data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +4 -1
  24. data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +4 -1
  25. data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +4 -1
  26. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -5
  27. data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -12
  28. data/app/pb_kits/playbook/pb_nav/item.rb +55 -14
  29. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
  30. data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
  31. data/dist/playbook-rails.js +7 -279
  32. data/lib/playbook/version.rb +2 -2
  33. metadata +9 -8
  34. data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
@@ -11,71 +11,62 @@
11
11
 
12
12
  $selector: ".pb_nav_list";
13
13
 
14
- [class^=pb_nav_list][class*=_vertical] {
15
- ul {
16
- padding: 0;
17
- margin: 0;
18
- list-style: none;
19
- }
20
-
21
- [class*=pb_nav_list_title] {
14
+ [class^="pb_nav_list"][class*="_vertical"] {
15
+ [class*="pb_nav_list_title"] {
22
16
  padding: 0 $space_md $space_sm $space_sm;
23
17
  }
24
18
 
25
19
  // Normal Variant
26
- &[class*=_normal] {
27
- [class*=pb_nav_list_kit_item] {
28
- list-style: none;
20
+ &[class*="_normal"] {
21
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
29
22
  border-bottom: 1px solid $border_light;
30
- &[class*=_active] {
31
- [class*=_link] {
32
- border-color: $primary;
33
- [class*=_item_icon] {
34
- color: $primary;
35
- }
36
- [class*=_item_text] {
37
- color: $primary;
38
- font-weight: $bold;
39
- }
23
+ &[class*="_active"] {
24
+ border-left-color: $primary !important;
25
+ [class*="_item_icon"] {
26
+ color: $primary !important;
27
+ }
28
+ [class*="_item_text"] {
29
+ color: $primary !important;
30
+ font-weight: $bold;
40
31
  }
41
32
  }
42
- [class*=_link] {
33
+ &[class*="_link"] {
43
34
  text-decoration: none;
44
35
  display: flex;
45
36
  align-items: center;
46
37
  padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
47
- border: 0 solid transparent;
48
- border-width: 0 0 0 3px;
38
+ border-left: 0 solid transparent;
39
+ border-left-width: 3px;
49
40
  transition-property: color, border-color, background-color;
50
41
  transition-duration: 0.15s;
51
42
  transition-timing-function: $bezier;
52
- @media (hover:hover) {
43
+ @media (hover: hover) {
53
44
  &:hover {
54
45
  background-color: rgba($primary, 0.03);
55
- [class*=_icon] {
46
+ [class*="_icon"] {
56
47
  color: $primary;
57
48
  }
58
- [class*=_text] {
49
+ [class*="_text"] {
59
50
  color: $primary !important;
60
51
  }
61
52
  }
62
53
  }
63
- [class*=_icon_left] {
54
+ [class*="_icon_left"] {
64
55
  font-size: $font_large;
65
56
  margin-right: $space_xs;
66
57
  color: $text_lt_lighter;
67
58
  }
68
- [class*=_icon_right] {
59
+ [class*="_icon_right"] {
69
60
  font-size: $font_large;
70
61
  margin-left: $space_sm;
71
62
  color: $text_lt_default;
72
63
  }
73
- [class*=_text] {
64
+ [class*="_text"] {
74
65
  font-size: $font_base;
75
66
  color: $text_lt_default;
76
67
  flex: 1;
77
68
  }
78
- [class*=_img_left] {
69
+ [class*="_img_left"] {
79
70
  margin-right: $space_xs;
80
71
  height: 20px;
81
72
  width: 25px;
@@ -85,49 +76,51 @@ $selector: ".pb_nav_list";
85
76
  border-bottom: 0;
86
77
  }
87
78
  }
88
-
89
79
  }
90
80
 
91
81
  // Subtle Variant
92
- &[class*=_subtle] {
82
+ &[class*="_subtle"] {
93
83
  @include subtle;
94
84
  }
95
85
 
96
86
  // Bold Variant
97
- &[class*=_bold] {
87
+ &[class*="_bold"] {
98
88
  @include bold;
99
89
  }
100
90
 
101
91
  // Show Highlight
102
- &[class*=_highlight] {
103
- [class*=_active] {
92
+ &[class*="_highlight"] {
93
+ [class*="_active"] {
104
94
  background-color: $active_light;
105
95
  }
106
- &[class*=dark]{
107
- [class*=_active] {
108
- background-color: rgba($white, $opacity_1);
109
- }
96
+ &[class*="dark"] {
97
+ [class*="_active"] {
98
+ background-color: rgba($white, $opacity_1);
99
+ }
110
100
  }
111
101
  }
112
102
 
113
- &[class*=dark]{
114
- background: tint($bg_dark,10%);
115
- [class*=pb_nav_list_kit_item]{
103
+ &[class*="dark"] {
104
+ background: tint($bg_dark, 10%);
105
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
116
106
  border-color: rgba($white, $opacity_1);
117
- &[class*=_active] [class*=_link]{
118
- border-color: $white;
119
- [class*=_text],[class*=_icon]{
120
- color: $text_dk_default;
107
+ &[class*="_active"] {
108
+ border-left-color: $white !important;
109
+ [class*="_item_text"],
110
+ [class*="_item_icon"] {
111
+ color: $text_dk_default !important;
121
112
  }
122
113
  }
123
- [class*=_link] {
124
- [class*=_text],[class*=_icon]{
125
- color: $text_dk_lighter;
126
- }
127
- &:hover{
114
+ [class*="_item_text"],
115
+ [class*="_item_icon"] {
116
+ color: $text_dk_lighter !important;
117
+ }
118
+ &[class*="_link"] {
119
+ &:hover {
128
120
  background-color: rgba($white, $opacity_1);
129
- [class*=_icon],[class*=_text] {
130
- color: $white;
121
+ [class*="_icon"],
122
+ [class*="_text"] {
123
+ color: $white !important;
131
124
  }
132
125
  }
133
126
  }
@@ -135,13 +128,12 @@ $selector: ".pb_nav_list";
135
128
  }
136
129
 
137
130
  //Borderless
138
- &[class*=_borderless] {
139
- [class*=pb_nav_list_kit_item] {
131
+ &[class*="_borderless"] {
132
+ [class*="pb_nav_list_kit_item"] {
140
133
  list-style: none;
141
- border-bottom: 0;
134
+ border-bottom: 0 !important;
142
135
  }
143
136
  }
144
-
145
137
  }
146
138
 
147
139
  //Image Wrapper
@@ -5,7 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const BlockNoTitleNav = (props) => {
7
7
  return (
8
- <Nav>
8
+ <Nav {...props}>
9
9
  <NavItem
10
10
  iconLeft="newspaper"
11
11
  link="#"
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const BorderlessNav = (props) => {
7
7
  return (
8
- <Nav borderless>
8
+ <Nav
9
+ borderless
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  active
11
14
  link="#"
@@ -1,20 +1,20 @@
1
- <%= pb_rails("nav", props: { variant: "subtle" }) do %>
1
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
2
2
  <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
3
- <%= pb_rails("nav", props: { variant: "subtle" }) do %>
3
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
4
4
  <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
5
5
  <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
6
6
  <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
7
7
  <% end %>
8
8
  <% end %>
9
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 %>
10
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
11
11
  <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
12
12
  <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
13
13
  <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
14
14
  <% end %>
15
15
  <% end %>
16
16
  <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
17
- <%= pb_rails("nav", props: { variant: "subtle" }) do %>
17
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
18
18
  <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
19
19
  <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
20
20
  <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
@@ -3,14 +3,14 @@ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNav = (props) => {
5
5
  return (
6
- <Nav>
6
+ <Nav
7
+ variant="bold"
8
+ {...props}
9
+ >
7
10
  <NavItem
8
11
  active
9
12
  collapsible
10
- collapsibleTrail
11
- fontWeight="bolder"
12
13
  iconLeft="city"
13
- iconRight={["plus", "minus"]}
14
14
  link="#"
15
15
  text="Overview"
16
16
  {...props}
@@ -33,10 +33,7 @@ const CollapsibleNav = (props) => {
33
33
  </NavItem>
34
34
  <NavItem
35
35
  collapsible
36
- collapsibleTrail
37
- fontWeight="bolder"
38
36
  iconLeft="theater-masks"
39
- iconRight={["plus", "minus"]}
40
37
  link="#"
41
38
  text="Albums"
42
39
  {...props}
@@ -59,10 +56,7 @@ const CollapsibleNav = (props) => {
59
56
  </NavItem>
60
57
  <NavItem
61
58
  collapsible
62
- collapsibleTrail
63
- fontWeight="bolder"
64
59
  iconLeft="city"
65
- iconRight={["plus", "minus"]}
66
60
  link="#"
67
61
  text="Similar Artists"
68
62
  {...props}
@@ -18,7 +18,10 @@ const CollapsibleNavCustom = (props) => {
18
18
 
19
19
  return (
20
20
  <>
21
- <Nav variant='bold'>
21
+ <Nav
22
+ variant="bold"
23
+ {...props}
24
+ >
22
25
  {navItems.map((text, index) => {
23
26
  const [collapsed] = collapsibles[index]
24
27
  return (
@@ -28,6 +31,7 @@ const CollapsibleNavCustom = (props) => {
28
31
  collapsibleTrail
29
32
  fontWeight="bolder"
30
33
  iconLeft="chevron-down"
34
+ iconRight={["plus", "minus"]}
31
35
  id={`collapsible-nav-item-${index + 1}`}
32
36
  key={index}
33
37
  link="#"
@@ -1,23 +1,23 @@
1
1
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
- <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true, icon_right: ["plus", "minus"] }) do %>
3
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: "#" }) %>
4
+ <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small" }) %>
6
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small" }) %>
7
7
  <% end %>
8
8
  <% end %>
9
- <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true, icon_right: ["plus", "minus"] }) do %>
10
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: "#" }) %>
11
+ <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#", font_size:"small" }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Food", link: "#", font_size:"small" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Style", link: "#", font_size:"small" }) %>
14
14
  <% end %>
15
15
  <% end %>
16
- <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true, icon_right: ["plus", "minus"] }) do %>
17
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: "#" }) %>
18
+ <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small" }) %>
21
21
  <% end %>
22
22
  <% end %>
23
23
  <% end %>
@@ -3,7 +3,10 @@ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNavEmphasize = (props) => {
5
5
  return (
6
- <Nav variant="bold">
6
+ <Nav
7
+ variant="subtle"
8
+ {...props}
9
+ >
7
10
  <NavItem
8
11
  active
9
12
  collapsible
@@ -17,16 +20,19 @@ const CollapsibleNavEmphasize = (props) => {
17
20
  {...props}
18
21
  >
19
22
  <NavItem
23
+ fontSize="small"
20
24
  link="#"
21
25
  text="City"
22
26
  {...props}
23
27
  />
24
28
  <NavItem
29
+ fontSize="small"
25
30
  link="#"
26
31
  text="People"
27
32
  {...props}
28
33
  />
29
34
  <NavItem
35
+ fontSize="small"
30
36
  link="#"
31
37
  text="Business"
32
38
  {...props}
@@ -44,16 +50,19 @@ const CollapsibleNavEmphasize = (props) => {
44
50
  {...props}
45
51
  >
46
52
  <NavItem
53
+ fontSize="small"
47
54
  link="#"
48
55
  text="Entertainment"
49
56
  {...props}
50
57
  />
51
58
  <NavItem
59
+ fontSize="small"
52
60
  link="#"
53
61
  text="Food"
54
62
  {...props}
55
63
  />
56
64
  <NavItem
65
+ fontSize="small"
57
66
  link="#"
58
67
  text="Style"
59
68
  {...props}
@@ -71,16 +80,19 @@ const CollapsibleNavEmphasize = (props) => {
71
80
  {...props}
72
81
  >
73
82
  <NavItem
83
+ fontSize="small"
74
84
  link="#"
75
85
  text="City"
76
86
  {...props}
77
87
  />
78
88
  <NavItem
89
+ fontSize="small"
79
90
  link="#"
80
91
  text="People"
81
92
  {...props}
82
93
  />
83
94
  <NavItem
95
+ fontSize="small"
84
96
  link="#"
85
97
  text="Business"
86
98
  {...props}
@@ -1 +1 @@
1
- The ` navBold` prop can be passed to NavItem
1
+ The `fontWeight` prop can be used to make the navitem text bold or bolder, it is set to regular by default. The additional `collapsibleTrail` prop can be used to add the vertical line to the left of the nested navItems.
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const NoHighlightNav = (props) => {
7
7
  return (
8
- <Nav highlight={false}>
8
+ <Nav
9
+ highlight={false}
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  active
11
14
  link="#"
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const SubtleNav = (props) => {
7
7
  return (
8
- <Nav variant="subtle">
8
+ <Nav
9
+ variant="subtle"
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  link="#"
11
14
  text="Overview"
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const SubtleWithIconsNav = (props) => {
7
7
  return (
8
- <Nav variant="subtle">
8
+ <Nav
9
+ variant="subtle"
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  iconLeft="city"
11
14
  link="#"
@@ -7,8 +7,8 @@ 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: Collapsible Nav
11
- # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
10
+ - collapsible_nav: Collapsible Nav
11
+ - collapsible_nav_emphasize: Collapsible Nav with fontWeight, fontSize and collapsibleTrail
12
12
  - subtle_no_highlight_nav: Subtle No Highlight
13
13
  - bold_vertical_nav: Bold Variant
14
14
  - horizontal_nav: Horizontal Nav
@@ -26,9 +26,9 @@ examples:
26
26
  - borderless_nav: No Borders
27
27
  - subtle_nav: Subtle Variant
28
28
  - subtle_with_icons_nav: Subtle With Icons
29
- # - collapsible_nav: Collapsible Nav
30
- # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
31
- # - collapsible_nav_custom: Collapsible Nav With Custom Toggling
29
+ - collapsible_nav: Collapsible Nav
30
+ - collapsible_nav_emphasize: Collapsible Nav with fontWeight, fontSize and collapsibleTrail
31
+ - collapsible_nav_custom: Collapsible Nav With Custom Toggling
32
32
  - subtle_no_highlight_nav: Subtle No Highlight
33
33
  - bold_vertical_nav: Bold Variant
34
34
  - horizontal_nav: Horizontal Nav
@@ -1,14 +1,15 @@
1
- <%= content_tag(:li,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- dark: object.dark,
6
- id: object.id) do %>
7
1
  <% if object.collapsible %>
8
- <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
9
- <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
2
+ <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
3
+ <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
10
4
  <%= content_tag(object.tag,
11
- object.link ? object.link_options : object.options) do %>
5
+ aria: object.aria,
6
+ class: object.classname,
7
+ data: object.data,
8
+ dark: object.dark,
9
+ id: object.id,
10
+ href: object.link && object.link,
11
+ target: object.link && object.target
12
+ ) do %>
12
13
  <% if object.image_url %>
13
14
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
14
15
  <% end %>
@@ -26,7 +27,14 @@
26
27
  <% end %>
27
28
  <% else %>
28
29
  <%= content_tag(object.tag,
29
- object.link ? object.link_options : object.options) do %>
30
+ aria: object.aria,
31
+ class: object.classname,
32
+ data: object.data,
33
+ dark: object.dark,
34
+ id: object.id,
35
+ href: object.link && object.link,
36
+ target: object.link && object.target
37
+ ) do %>
30
38
  <% if object.image_url %>
31
39
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
32
40
  <% end %>
@@ -40,5 +48,4 @@
40
48
  <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
41
49
  <% end %>
42
50
  <% end %>
43
- <% end %>
44
- <% end %>
51
+ <% end %>
@@ -22,31 +22,72 @@ module Playbook
22
22
  default: "_self"
23
23
  def classname
24
24
  if collapsible
25
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class}"
25
+ "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
26
26
  else
27
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
27
+ "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
28
28
  end
29
29
  end
30
30
 
31
- def tag
32
- link ? "a" : "div"
31
+ def spacing_props
32
+ if collapsible
33
+ if object.margin || object.margin_x || object.margin_y || object.margin_bottom || object.margin_top || object.margin_right || object.margin_left
34
+ # Call the original method
35
+ original_result = super
36
+
37
+ # Remove p_value, px_value, py_value, etc. based on the object's properties
38
+ margin_classes_to_remove = []
39
+ margin_classes_to_remove << "m_#{object.margin}" if object.margin
40
+ margin_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
41
+ margin_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
42
+ margin_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
43
+ margin_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
44
+ margin_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
45
+ margin_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
46
+
47
+ margin_classes_to_remove.each do |class_to_remove|
48
+ original_result.gsub!(class_to_remove, "")
49
+ end
50
+
51
+ original_result.strip
52
+ else
53
+ super
54
+ end
55
+ else
56
+ super
57
+ end
33
58
  end
34
59
 
35
- def options
36
- {
37
- class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
38
- }.compact
60
+ def margin_classes
61
+ margin_attributes = {
62
+ margin: "m",
63
+ margin_x: "mx",
64
+ margin_y: "my",
65
+ margin_bottom: "mb",
66
+ margin_top: "mt",
67
+ margin_right: "mr",
68
+ margin_left: "ml",
69
+ }
70
+
71
+ # rubocop:disable Style/RedundantAssignment
72
+ margin_classes = margin_attributes.map do |attr, class_prefix|
73
+ # rubocop:enable Style/RedundantAssignment
74
+ value = object.public_send(attr)
75
+ " #{class_prefix}_#{value}" if value
76
+ end.compact.join
77
+
78
+ margin_classes
39
79
  end
40
80
 
41
- def link_options
42
- options.merge(
43
- href: link,
44
- target: target
45
- )
81
+ def tag
82
+ link ? "a" : "div"
46
83
  end
47
84
 
48
85
  def collapsible_icons
49
- icon_right.present? ? icon_right : %w[plus minus]
86
+ icon_right.present? && icon_right
87
+ end
88
+
89
+ def collapsible_nav_classname
90
+ "collapsible_nav_wrapper_#{active_class}_#{collapsible_trail_class}"
50
91
  end
51
92
 
52
93
  private
@@ -10,5 +10,7 @@
10
10
  <% end %>
11
11
  <% end %>
12
12
  <% end %>
13
- <ul><%= content.presence %></ul>
13
+ <div class='pb_nav_wrapper'>
14
+ <%= content.presence %>
15
+ </div>
14
16
  <% end %>
@@ -0,0 +1,25 @@
1
+ import { Spacing } from "../types";
2
+
3
+ export type SpacingObject = {
4
+ margin?: Spacing;
5
+ marginBottom?: Spacing;
6
+ marginTop?: Spacing;
7
+ marginRight?: Spacing;
8
+ marginLeft?: Spacing;
9
+ margingX?: Spacing;
10
+ marginY?: Spacing;
11
+ padding?: Spacing;
12
+ paddingBottom?: Spacing;
13
+ paddingTop?: Spacing;
14
+ paddingRight?: Spacing;
15
+ paddingLeft?: Spacing;
16
+ paddingX?: Spacing;
17
+ paddingY?: Spacing;
18
+ };
19
+
20
+ export type NavChildProps = {
21
+ orientation?: "vertical" | "horizontal";
22
+ variant?: "normal" | "subtle";
23
+ itemSpacing?: SpacingObject
24
+ };
25
+