playbook_ui 13.1.0 → 13.2.0.pre.alpha.PLAY986dateTimeRounding1150

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) 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 +54 -23
  4. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +16 -14
  5. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +86 -115
  6. data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss +16 -0
  7. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +58 -58
  8. data/app/pb_kits/playbook/pb_nav/_item.tsx +242 -138
  9. data/app/pb_kits/playbook/pb_nav/_nav.scss +38 -0
  10. data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
  11. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  12. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +50 -59
  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 +4 -1
  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 +4 -10
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -1
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +6 -1
  19. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_item_spacing.jsx} +18 -17
  20. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md +1 -0
  21. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.html.erb +23 -0
  22. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +55 -0
  23. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.md +4 -0
  24. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.html.erb +6 -0
  25. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +46 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.md +4 -0
  27. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.html.erb +6 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.jsx +47 -0
  29. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md +1 -0
  30. data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +4 -1
  31. data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +4 -1
  32. data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +4 -1
  33. data/app/pb_kits/playbook/pb_nav/docs/example.yml +10 -5
  34. data/app/pb_kits/playbook/pb_nav/docs/index.js +4 -1
  35. data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -12
  36. data/app/pb_kits/playbook/pb_nav/item.rb +55 -14
  37. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
  38. data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
  39. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -1
  40. data/dist/playbook-rails.js +5 -5
  41. data/lib/playbook/version.rb +2 -2
  42. metadata +20 -11
  43. data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
  44. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
  45. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +0 -1
@@ -11,71 +11,61 @@
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] {
74
- font-size: $font_base;
64
+ [class*="_text"] {
75
65
  color: $text_lt_default;
76
66
  flex: 1;
77
67
  }
78
- [class*=_img_left] {
68
+ [class*="_img_left"] {
79
69
  margin-right: $space_xs;
80
70
  height: 20px;
81
71
  width: 25px;
@@ -85,49 +75,51 @@ $selector: ".pb_nav_list";
85
75
  border-bottom: 0;
86
76
  }
87
77
  }
88
-
89
78
  }
90
79
 
91
80
  // Subtle Variant
92
- &[class*=_subtle] {
81
+ &[class*="_subtle"] {
93
82
  @include subtle;
94
83
  }
95
84
 
96
85
  // Bold Variant
97
- &[class*=_bold] {
86
+ &[class*="_bold"] {
98
87
  @include bold;
99
88
  }
100
89
 
101
90
  // Show Highlight
102
- &[class*=_highlight] {
103
- [class*=_active] {
91
+ &[class*="_highlight"] {
92
+ [class*="_active"] {
104
93
  background-color: $active_light;
105
94
  }
106
- &[class*=dark]{
107
- [class*=_active] {
108
- background-color: rgba($white, $opacity_1);
109
- }
95
+ &[class*="dark"] {
96
+ [class*="_active"] {
97
+ background-color: rgba($white, $opacity_1);
98
+ }
110
99
  }
111
100
  }
112
101
 
113
- &[class*=dark]{
114
- background: tint($bg_dark,10%);
115
- [class*=pb_nav_list_kit_item]{
102
+ &[class*="dark"] {
103
+ background: tint($bg_dark, 10%);
104
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
116
105
  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;
106
+ &[class*="_active"] {
107
+ border-left-color: $white !important;
108
+ [class*="_item_text"],
109
+ [class*="_item_icon"] {
110
+ color: $text_dk_default !important;
121
111
  }
122
112
  }
123
- [class*=_link] {
124
- [class*=_text],[class*=_icon]{
125
- color: $text_dk_lighter;
126
- }
127
- &:hover{
113
+ [class*="_item_text"],
114
+ [class*="_item_icon"] {
115
+ color: $text_dk_lighter !important;
116
+ }
117
+ &[class*="_link"] {
118
+ &:hover {
128
119
  background-color: rgba($white, $opacity_1);
129
- [class*=_icon],[class*=_text] {
130
- color: $white;
120
+ [class*="_icon"],
121
+ [class*="_text"] {
122
+ color: $white !important;
131
123
  }
132
124
  }
133
125
  }
@@ -135,13 +127,12 @@ $selector: ".pb_nav_list";
135
127
  }
136
128
 
137
129
  //Borderless
138
- &[class*=_borderless] {
139
- [class*=pb_nav_list_kit_item] {
130
+ &[class*="_borderless"] {
131
+ [class*="pb_nav_list_kit_item"] {
140
132
  list-style: none;
141
- border-bottom: 0;
133
+ border-bottom: 0 !important;
142
134
  }
143
135
  }
144
-
145
136
  }
146
137
 
147
138
  //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}
@@ -1 +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.
1
+ The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
@@ -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 (
@@ -26,8 +29,10 @@ const CollapsibleNavCustom = (props) => {
26
29
  collapsed={collapsed}
27
30
  collapsible
28
31
  collapsibleTrail
32
+ fontSize="small"
29
33
  fontWeight="bolder"
30
34
  iconLeft="chevron-down"
35
+ iconRight={["plus", "minus"]}
31
36
  id={`collapsible-nav-item-${index + 1}`}
32
37
  key={index}
33
38
  link="#"
@@ -1,87 +1,88 @@
1
1
  import React from "react";
2
2
  import { Nav, NavItem } from '../..'
3
3
 
4
- const CollapsibleNavEmphasize = (props) => {
4
+ const CollapsibleNavItemSpacing = (props) => {
5
5
  return (
6
- <Nav variant="bold">
6
+ <Nav
7
+ itemSpacing={{padding: "xs", marginY: "none"}}
8
+ variant="bold"
9
+ {...props}
10
+ >
7
11
  <NavItem
8
- active
9
- collapsible
10
- collapsibleTrail
11
- fontSize="small"
12
- fontWeight="bolder"
12
+ active
13
+ collapsible
13
14
  iconLeft="city"
14
- iconRight={["plus", "minus"]}
15
15
  link="#"
16
16
  text="Overview"
17
17
  {...props}
18
18
  >
19
19
  <NavItem
20
20
  link="#"
21
+ paddingY="none"
21
22
  text="City"
22
23
  {...props}
23
24
  />
24
25
  <NavItem
25
26
  link="#"
27
+ paddingY="none"
26
28
  text="People"
27
29
  {...props}
28
30
  />
29
31
  <NavItem
30
32
  link="#"
33
+ paddingY="none"
31
34
  text="Business"
32
35
  {...props}
33
36
  />
34
37
  </NavItem>
35
38
  <NavItem
36
39
  collapsible
37
- collapsibleTrail
38
- fontSize="small"
39
- fontWeight="bolder"
40
40
  iconLeft="theater-masks"
41
- iconRight={["plus", "minus"]}
42
41
  link="#"
43
42
  text="Albums"
44
43
  {...props}
45
44
  >
46
45
  <NavItem
47
46
  link="#"
47
+ paddingY="none"
48
48
  text="Entertainment"
49
49
  {...props}
50
50
  />
51
51
  <NavItem
52
52
  link="#"
53
+ paddingY="none"
53
54
  text="Food"
54
55
  {...props}
55
56
  />
56
57
  <NavItem
57
58
  link="#"
59
+ paddingY="none"
58
60
  text="Style"
59
61
  {...props}
60
62
  />
61
63
  </NavItem>
62
64
  <NavItem
63
65
  collapsible
64
- collapsibleTrail
65
- fontSize="small"
66
- fontWeight="bolder"
67
66
  iconLeft="city"
68
- iconRight={["plus", "minus"]}
69
67
  link="#"
70
68
  text="Similar Artists"
71
69
  {...props}
72
70
  >
73
71
  <NavItem
74
72
  link="#"
73
+ paddingY="none"
75
74
  text="City"
76
75
  {...props}
77
76
  />
78
77
  <NavItem
79
78
  link="#"
79
+ paddingY="none"
80
80
  text="People"
81
81
  {...props}
82
82
  />
83
83
  <NavItem
84
84
  link="#"
85
+ paddingY="none"
85
86
  text="Business"
86
87
  {...props}
87
88
  />
@@ -90,4 +91,4 @@ const CollapsibleNavEmphasize = (props) => {
90
91
  );
91
92
  };
92
93
 
93
- export default CollapsibleNavEmphasize;
94
+ export default CollapsibleNavItemSpacing
@@ -0,0 +1 @@
1
+ The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
3
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
4
+ <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
6
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
7
+ <% end %>
8
+ <% end %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
10
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
11
+ <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#", font_size:"small", margin_y:"none" }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Food", link: "#", font_size:"small", margin_y:"none" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Style", link: "#", font_size:"small", margin_y:"none" }) %>
14
+ <% end %>
15
+ <% end %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
17
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
18
+ <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
@@ -0,0 +1,55 @@
1
+ import React from "react"
2
+ import { Nav, NavItem } from "../.."
3
+
4
+ const CollapsibleNavWithAllOptions = (props) => {
5
+ const navItems = ["Overview", "Albums", "Similar Artists"]
6
+
7
+ return (
8
+ <>
9
+ <Nav
10
+ variant="bold"
11
+ {...props}
12
+ >
13
+ {navItems.map((text, index) => {
14
+ return (
15
+ <NavItem
16
+ collapsible
17
+ collapsibleTrail
18
+ fontWeight="bolder"
19
+ iconLeft="city"
20
+ iconRight={["plus", "minus"]}
21
+ key={index}
22
+ link="#"
23
+ text={text}
24
+ {...props}
25
+ >
26
+ <NavItem
27
+ fontSize="small"
28
+ link="#"
29
+ marginY="none"
30
+ text="City"
31
+ {...props}
32
+ />
33
+ <NavItem
34
+ fontSize="small"
35
+ link="#"
36
+ marginY="none"
37
+ text="People"
38
+ {...props}
39
+ />
40
+ <NavItem
41
+ fontSize="small"
42
+ link="#"
43
+ marginY="none"
44
+ text="Business"
45
+ {...props}
46
+ />
47
+ </NavItem>
48
+ );
49
+ })}
50
+ </Nav>
51
+ </>
52
+ )
53
+ }
54
+
55
+ export default CollapsibleNavWithAllOptions
@@ -0,0 +1,4 @@
1
+ Collapsible Navs optionally accept the following props:
2
+
3
+ - `collapsibleTrail` / `collapsible_trail`, enables a vertical guideline to the left of the collapsible nav's children
4
+ - `iconRight` optionally accepts an array of 2 icon values; the first is used as the default icon when the node is collapsed, the second is toggled when the node is expanded. If only 1 icon value is passed, the icon will not toggle between collapsible states.
@@ -0,0 +1,6 @@
1
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "About", link: "#", font_weight:"bolder", font_size:"small" }) %>
3
+ <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, font_weight:"bolder", font_size:"small" }) %>
4
+ <%= pb_rails("nav/item", props: { text: "Service", link: "#", font_weight:"bolder", font_size:"small" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", font_weight:"bolder", font_size:"small" }) %>
6
+ <% end %>
@@ -0,0 +1,46 @@
1
+ import React from "react";
2
+ import { Nav, NavItem } from '../..'
3
+
4
+ const NavWithFontControl = (props) => {
5
+ return (
6
+ <Nav
7
+ link="#"
8
+ orientation="vertical"
9
+ variant="bold"
10
+ {...props}
11
+ >
12
+ <NavItem
13
+ fontSize="small"
14
+ fontWeight="bolder"
15
+ link="#"
16
+ text="About"
17
+ {...props}
18
+ />
19
+ <NavItem
20
+ active
21
+ fontSize="small"
22
+ fontWeight="bolder"
23
+ link="#"
24
+ text="Case Studies"
25
+ {...props}
26
+ />
27
+ <NavItem
28
+ fontSize="small"
29
+ fontWeight="bolder"
30
+ link="#"
31
+ text="Service"
32
+ {...props}
33
+ />
34
+ <NavItem
35
+ fontSize="small"
36
+ fontWeight="bolder"
37
+ link="#"
38
+ text="Contacts"
39
+ {...props}
40
+ />
41
+ </Nav>
42
+
43
+ );
44
+ };
45
+
46
+ export default NavWithFontControl;
@@ -0,0 +1,4 @@
1
+ All Nav variants' navItems accept the following props for customizing font:
2
+
3
+ - `fontSize` / `font_size` defaults to `normal`, also accepts `small`
4
+ - `fontWeight` / `font_weight` defaults to `regular`, also accepts `bold` and `bolder`
@@ -0,0 +1,6 @@
1
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "About", link: "#", padding_y:"xxs", margin:"none" }) %>
3
+ <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, padding_y:"xxs", margin:"none" }) %>
4
+ <%= pb_rails("nav/item", props: { text: "Service", link: "#", padding_y:"xxs", margin:"none" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", padding_y:"xxs", margin:"none" }) %>
6
+ <% end %>
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+
3
+ import Nav from '../_nav'
4
+ import NavItem from '../_item'
5
+
6
+ const NavWithSpacingControl = (props) => {
7
+ return (
8
+ <Nav
9
+ link="#"
10
+ orientation="vertical"
11
+ variant="bold"
12
+ {...props}
13
+ >
14
+ <NavItem
15
+ link="#"
16
+ margin="none"
17
+ paddingY="xxs"
18
+ text="About"
19
+ {...props}
20
+ />
21
+ <NavItem
22
+ active
23
+ link="#"
24
+ margin="none"
25
+ paddingY="xxs"
26
+ text="Case Studies"
27
+ {...props}
28
+ />
29
+ <NavItem
30
+ link="#"
31
+ margin="none"
32
+ paddingY="xxs"
33
+ text="Service"
34
+ {...props}
35
+ />
36
+ <NavItem
37
+ link="#"
38
+ margin="none"
39
+ paddingY="xxs"
40
+ text="Contacts"
41
+ {...props}
42
+ />
43
+ </Nav>
44
+ )
45
+ }
46
+
47
+ export default NavWithSpacingControl
@@ -0,0 +1 @@
1
+ All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
@@ -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="#"