playbook_ui 13.0.0.pre.alpha.PLAY966collapsiblenav41129 → 13.0.0.pre.alpha.salesbookmismatchingdate1120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) 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_kit/dateTime.ts +55 -48
  4. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +14 -16
  5. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +115 -86
  6. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +58 -58
  7. data/app/pb_kits/playbook/pb_nav/_item.tsx +138 -234
  8. data/app/pb_kits/playbook/pb_nav/_mixins.scss +5 -0
  9. data/app/pb_kits/playbook/pb_nav/_nav.scss +0 -38
  10. data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -17
  11. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +11 -9
  12. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +59 -50
  13. data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +1 -4
  15. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +4 -4
  16. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +10 -4
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +1 -5
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +12 -12
  19. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +1 -13
  20. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -1
  21. data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +1 -4
  22. data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +1 -4
  23. data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +1 -4
  24. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -5
  25. data/app/pb_kits/playbook/pb_nav/item.html.erb +12 -19
  26. data/app/pb_kits/playbook/pb_nav/item.rb +14 -55
  27. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -3
  28. data/app/pb_kits/playbook/pb_time/_time.tsx +1 -1
  29. data/dist/playbook-rails.js +5 -5
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +3 -4
  32. data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss +0 -14
  33. data/app/pb_kits/playbook/pb_nav/navTypes.ts +0 -25
data/app/pb_kits/playbook/pb_nav/_nav.tsx CHANGED
@@ -5,7 +5,6 @@ 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'
9
8
 
10
9
  type NavProps = {
11
10
  aria?: { [key: string]: string },
@@ -21,7 +20,6 @@ type NavProps = {
21
20
  link?: string,
22
21
  title?: string,
23
22
  variant?: "normal" | "subtle",
24
- itemSpacing?: SpacingObject
25
23
  } & GlobalProps
26
24
 
27
25
  const Nav = (props: NavProps) => {
@@ -39,7 +37,6 @@ const Nav = (props: NavProps) => {
39
37
  orientation = 'vertical',
40
38
  title = '',
41
39
  variant = 'normal',
42
- itemSpacing,
43
40
  } = props
44
41
 
45
42
  const ariaProps = buildAriaProps(aria)
@@ -53,19 +50,6 @@ const Nav = (props: NavProps) => {
53
50
  className
54
51
  )
55
52
 
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
-
69
53
  return (
70
54
  <nav
71
55
  {...ariaProps}
@@ -88,7 +72,7 @@ const childrenWithProps = React.Children.map(children, (child) => {
88
72
  </a>
89
73
  </div>
90
74
  }
91
- <div className='pb_nav_wrapper'>{childrenWithProps}</div>
75
+ <ul>{children}</ul>
92
76
  </nav>
93
77
  )
94
78
  }
data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  @import "tokens/typography";
2
2
 
3
3
  @mixin subtle {
4
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
4
+ [class*=pb_nav_list_kit_item] {
5
+ list-style: none;
5
6
  border-radius: $border_rad_heavier;
6
7
  border-bottom: 0;
7
8
  margin: $space_xs ($space_sm - 2px);
8
- &[class*="_link"] {
9
+ [class*=_link] {
9
10
  text-decoration: none;
10
11
  display: flex;
11
12
  align-items: center;
@@ -16,30 +17,31 @@
16
17
  transition-timing-function: $bezier;
17
18
  border-radius: $border_rad_heavier;
18
19
  @include pb_body($text_lt_default);
19
- [class*="_icon_left"] {
20
+ [class*=_icon_left] {
20
21
  margin-right: ($space_xs + 2px);
21
22
  color: $text_lt_lighter;
22
23
  }
23
- [class*="_icon_right"] {
24
+ [class*=_icon_right] {
24
25
  margin-left: ($space_xs + 2px);
25
26
  color: $text_lt_default;
26
27
  }
27
- [class*="_text"] {
28
+ [class*=_text] {
28
29
  flex: 1;
29
30
  }
30
31
  &:hover {
31
32
  background-color: rgba($primary, 0.03);
32
- [class*="_icon"] {
33
+ [class*=_icon] {
33
34
  color: $primary;
34
35
  }
35
- [class*="_text"] {
36
+ [class*=_text] {
36
37
  color: $primary;
37
38
  }
38
39
  }
39
40
  }
40
- &[class*="_active"] {
41
+ &[class*=_active] [class*=_link] {
42
+ @include pb_title_4;
41
43
  color: $primary;
42
44
  letter-spacing: normal;
43
45
  }
44
46
  }
45
- }
47
+ }
data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss CHANGED
@@ -11,61 +11,71 @@
11
11
 
12
12
  $selector: ".pb_nav_list";
13
13
 
14
- [class^="pb_nav_list"][class*="_vertical"] {
15
- [class*="pb_nav_list_title"] {
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] {
16
22
  padding: 0 $space_md $space_sm $space_sm;
17
23
  }
18
24
 
19
25
  // Normal Variant
20
- &[class*="_normal"] {
21
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
26
+ &[class*=_normal] {
27
+ [class*=pb_nav_list_kit_item] {
28
+ list-style: none;
22
29
  border-bottom: 1px solid $border_light;
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;
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
+ }
31
40
  }
32
41
  }
33
- &[class*="_link"] {
42
+ [class*=_link] {
34
43
  text-decoration: none;
35
44
  display: flex;
36
45
  align-items: center;
37
46
  padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
38
- border-left: 0 solid transparent;
39
- border-left-width: 3px;
47
+ border: 0 solid transparent;
48
+ border-width: 0 0 0 3px;
40
49
  transition-property: color, border-color, background-color;
41
50
  transition-duration: 0.15s;
42
51
  transition-timing-function: $bezier;
43
- @media (hover: hover) {
52
+ @media (hover:hover) {
44
53
  &:hover {
45
54
  background-color: rgba($primary, 0.03);
46
- [class*="_icon"] {
55
+ [class*=_icon] {
47
56
  color: $primary;
48
57
  }
49
- [class*="_text"] {
58
+ [class*=_text] {
50
59
  color: $primary !important;
51
60
  }
52
61
  }
53
62
  }
54
- [class*="_icon_left"] {
63
+ [class*=_icon_left] {
55
64
  font-size: $font_large;
56
65
  margin-right: $space_xs;
57
66
  color: $text_lt_lighter;
58
67
  }
59
- [class*="_icon_right"] {
68
+ [class*=_icon_right] {
60
69
  font-size: $font_large;
61
70
  margin-left: $space_sm;
62
71
  color: $text_lt_default;
63
72
  }
64
- [class*="_text"] {
73
+ [class*=_text] {
74
+ font-size: $font_base;
65
75
  color: $text_lt_default;
66
76
  flex: 1;
67
77
  }
68
- [class*="_img_left"] {
78
+ [class*=_img_left] {
69
79
  margin-right: $space_xs;
70
80
  height: 20px;
71
81
  width: 25px;
@@ -75,51 +85,49 @@ $selector: ".pb_nav_list";
75
85
  border-bottom: 0;
76
86
  }
77
87
  }
88
+
78
89
  }
79
90
 
80
91
  // Subtle Variant
81
- &[class*="_subtle"] {
92
+ &[class*=_subtle] {
82
93
  @include subtle;
83
94
  }
84
95
 
85
96
  // Bold Variant
86
- &[class*="_bold"] {
97
+ &[class*=_bold] {
87
98
  @include bold;
88
99
  }
89
100
 
90
101
  // Show Highlight
91
- &[class*="_highlight"] {
92
- [class*="_active"] {
102
+ &[class*=_highlight] {
103
+ [class*=_active] {
93
104
  background-color: $active_light;
94
105
  }
95
- &[class*="dark"] {
96
- [class*="_active"] {
97
- background-color: rgba($white, $opacity_1);
98
- }
106
+ &[class*=dark]{
107
+ [class*=_active] {
108
+ background-color: rgba($white, $opacity_1);
109
+ }
99
110
  }
100
111
  }
101
112
 
102
- &[class*="dark"] {
103
- background: tint($bg_dark, 10%);
104
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
113
+ &[class*=dark]{
114
+ background: tint($bg_dark,10%);
115
+ [class*=pb_nav_list_kit_item]{
105
116
  border-color: rgba($white, $opacity_1);
106
- &[class*="_active"] {
107
- border-left-color: $white !important;
108
- [class*="_item_text"],
109
- [class*="_item_icon"] {
110
- color: $text_dk_default !important;
117
+ &[class*=_active] [class*=_link]{
118
+ border-color: $white;
119
+ [class*=_text],[class*=_icon]{
120
+ color: $text_dk_default;
111
121
  }
112
122
  }
113
- [class*="_item_text"],
114
- [class*="_item_icon"] {
115
- color: $text_dk_lighter !important;
116
- }
117
- &[class*="_link"] {
118
- &:hover {
123
+ [class*=_link] {
124
+ [class*=_text],[class*=_icon]{
125
+ color: $text_dk_lighter;
126
+ }
127
+ &:hover{
119
128
  background-color: rgba($white, $opacity_1);
120
- [class*="_icon"],
121
- [class*="_text"] {
122
- color: $white !important;
129
+ [class*=_icon],[class*=_text] {
130
+ color: $white;
123
131
  }
124
132
  }
125
133
  }
@@ -127,12 +135,13 @@ $selector: ".pb_nav_list";
127
135
  }
128
136
 
129
137
  //Borderless
130
- &[class*="_borderless"] {
131
- [class*="pb_nav_list_kit_item"] {
138
+ &[class*=_borderless] {
139
+ [class*=pb_nav_list_kit_item] {
132
140
  list-style: none;
133
- border-bottom: 0 !important;
141
+ border-bottom: 0;
134
142
  }
135
143
  }
144
+
136
145
  }
137
146
 
138
147
  //Image Wrapper
data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx CHANGED
@@ -5,7 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const BlockNoTitleNav = (props) => {
7
7
  return (
8
- <Nav {...props}>
8
+ <Nav>
9
9
  <NavItem
10
10
  iconLeft="newspaper"
11
11
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx CHANGED
@@ -5,10 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const BorderlessNav = (props) => {
7
7
  return (
8
- <Nav
9
- borderless
10
- {...props}
11
- >
8
+ <Nav borderless>
12
9
  <NavItem
13
10
  active
14
11
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb CHANGED
@@ -1,20 +1,20 @@
1
- <%= pb_rails("nav", props: { variant: "bold" }) do %>
1
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
2
  <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
3
- <%= pb_rails("nav", props: { variant: "bold" }) do %>
3
+ <%= pb_rails("nav", props: { variant: "subtle" }) 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: "bold" }) do %>
10
+ <%= pb_rails("nav", props: { variant: "subtle" }) 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: "bold" }) do %>
17
+ <%= pb_rails("nav", props: { variant: "subtle" }) 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: "#" }) %>
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx CHANGED
@@ -3,14 +3,14 @@ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNav = (props) => {
5
5
  return (
6
- <Nav
7
- variant="bold"
8
- {...props}
9
- >
6
+ <Nav>
10
7
  <NavItem
11
8
  active
12
9
  collapsible
10
+ collapsibleTrail
11
+ fontWeight="bolder"
13
12
  iconLeft="city"
13
+ iconRight={["plus", "minus"]}
14
14
  link="#"
15
15
  text="Overview"
16
16
  {...props}
@@ -33,7 +33,10 @@ const CollapsibleNav = (props) => {
33
33
  </NavItem>
34
34
  <NavItem
35
35
  collapsible
36
+ collapsibleTrail
37
+ fontWeight="bolder"
36
38
  iconLeft="theater-masks"
39
+ iconRight={["plus", "minus"]}
37
40
  link="#"
38
41
  text="Albums"
39
42
  {...props}
@@ -56,7 +59,10 @@ const CollapsibleNav = (props) => {
56
59
  </NavItem>
57
60
  <NavItem
58
61
  collapsible
62
+ collapsibleTrail
63
+ fontWeight="bolder"
59
64
  iconLeft="city"
65
+ iconRight={["plus", "minus"]}
60
66
  link="#"
61
67
  text="Similar Artists"
62
68
  {...props}
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx CHANGED
@@ -18,10 +18,7 @@ const CollapsibleNavCustom = (props) => {
18
18
 
19
19
  return (
20
20
  <>
21
- <Nav
22
- variant="bold"
23
- {...props}
24
- >
21
+ <Nav variant='bold'>
25
22
  {navItems.map((text, index) => {
26
23
  const [collapsed] = collapsibles[index]
27
24
  return (
@@ -31,7 +28,6 @@ const CollapsibleNavCustom = (props) => {
31
28
  collapsibleTrail
32
29
  fontWeight="bolder"
33
30
  iconLeft="chevron-down"
34
- iconRight={["plus", "minus"]}
35
31
  id={`collapsible-nav-item-${index + 1}`}
36
32
  key={index}
37
33
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb CHANGED
@@ -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, icon_right: ["plus", "minus"] }) 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 %>
3
3
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
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" }) %>
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
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, icon_right: ["plus", "minus"] }) 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 }) do %>
10
10
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
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" }) %>
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
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, icon_right: ["plus", "minus"] }) 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 }) do %>
17
17
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
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" }) %>
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
21
  <% end %>
22
22
  <% end %>
23
23
  <% end %>
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx CHANGED
@@ -3,10 +3,7 @@ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNavEmphasize = (props) => {
5
5
  return (
6
- <Nav
7
- variant="subtle"
8
- {...props}
9
- >
6
+ <Nav variant="bold">
10
7
  <NavItem
11
8
  active
12
9
  collapsible
@@ -20,19 +17,16 @@ const CollapsibleNavEmphasize = (props) => {
20
17
  {...props}
21
18
  >
22
19
  <NavItem
23
- fontSize="small"
24
20
  link="#"
25
21
  text="City"
26
22
  {...props}
27
23
  />
28
24
  <NavItem
29
- fontSize="small"
30
25
  link="#"
31
26
  text="People"
32
27
  {...props}
33
28
  />
34
29
  <NavItem
35
- fontSize="small"
36
30
  link="#"
37
31
  text="Business"
38
32
  {...props}
@@ -50,19 +44,16 @@ const CollapsibleNavEmphasize = (props) => {
50
44
  {...props}
51
45
  >
52
46
  <NavItem
53
- fontSize="small"
54
47
  link="#"
55
48
  text="Entertainment"
56
49
  {...props}
57
50
  />
58
51
  <NavItem
59
- fontSize="small"
60
52
  link="#"
61
53
  text="Food"
62
54
  {...props}
63
55
  />
64
56
  <NavItem
65
- fontSize="small"
66
57
  link="#"
67
58
  text="Style"
68
59
  {...props}
@@ -80,19 +71,16 @@ const CollapsibleNavEmphasize = (props) => {
80
71
  {...props}
81
72
  >
82
73
  <NavItem
83
- fontSize="small"
84
74
  link="#"
85
75
  text="City"
86
76
  {...props}
87
77
  />
88
78
  <NavItem
89
- fontSize="small"
90
79
  link="#"
91
80
  text="People"
92
81
  {...props}
93
82
  />
94
83
  <NavItem
95
- fontSize="small"
96
84
  link="#"
97
85
  text="Business"
98
86
  {...props}
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md CHANGED
@@ -1 +1 @@
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.
1
+ The ` navBold` prop can be passed to NavItem
data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx CHANGED
@@ -5,10 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const NoHighlightNav = (props) => {
7
7
  return (
8
- <Nav
9
- highlight={false}
10
- {...props}
11
- >
8
+ <Nav highlight={false}>
12
9
  <NavItem
13
10
  active
14
11
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx CHANGED
@@ -5,10 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const SubtleNav = (props) => {
7
7
  return (
8
- <Nav
9
- variant="subtle"
10
- {...props}
11
- >
8
+ <Nav variant="subtle">
12
9
  <NavItem
13
10
  link="#"
14
11
  text="Overview"
data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx CHANGED
@@ -5,10 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const SubtleWithIconsNav = (props) => {
7
7
  return (
8
- <Nav
9
- variant="subtle"
10
- {...props}
11
- >
8
+ <Nav variant="subtle">
12
9
  <NavItem
13
10
  iconLeft="city"
14
11
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/example.yml CHANGED
@@ -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 fontWeight, fontSize and collapsibleTrail
10
+ # - collapsible_nav: Collapsible Nav
11
+ # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
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 fontWeight, fontSize and collapsibleTrail
31
- - collapsible_nav_custom: Collapsible Nav With Custom Toggling
29
+ # - collapsible_nav: Collapsible Nav
30
+ # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
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
data/app/pb_kits/playbook/pb_nav/item.html.erb CHANGED
@@ -1,15 +1,14 @@
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 %>
1
7
  <% if object.collapsible %>
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 %>
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 %>
4
10
  <%= content_tag(object.tag,
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 %>
11
+ object.link ? object.link_options : object.options) do %>
13
12
  <% if object.image_url %>
14
13
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
15
14
  <% end %>
@@ -27,14 +26,7 @@
27
26
  <% end %>
28
27
  <% else %>
29
28
  <%= content_tag(object.tag,
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 %>
29
+ object.link ? object.link_options : object.options) do %>
38
30
  <% if object.image_url %>
39
31
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
40
32
  <% end %>
@@ -48,4 +40,5 @@
48
40
  <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
49
41
  <% end %>
50
42
  <% end %>
51
- <% end %>
43
+ <% end %>
44
+ <% end %>