playbook_ui 13.1.0 → 13.2.0
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +16 -14
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +86 -115
- data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss +16 -0
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +58 -58
- data/app/pb_kits/playbook/pb_nav/_item.tsx +242 -138
- data/app/pb_kits/playbook/pb_nav/_nav.scss +38 -0
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +50 -59
- data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +4 -4
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +4 -10
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +6 -1
- data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_item_spacing.jsx} +18 -17
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.html.erb +23 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +55 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.md +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +46 -0
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.md +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.jsx +47 -0
- data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +10 -5
- data/app/pb_kits/playbook/pb_nav/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -12
- data/app/pb_kits/playbook/pb_nav/item.rb +55 -14
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
- data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -1
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/version.rb +2 -2
- metadata +15 -6
- data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
- 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
|
-
|
|
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
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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:
|
|
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
|
-
|
|
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]
|
|
118
|
-
border-color: $white;
|
|
119
|
-
[class*=
|
|
120
|
-
|
|
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*=
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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],
|
|
130
|
-
|
|
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
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
<%= pb_rails("nav", props: { variant: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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
|
|
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
|
|
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
|
|
4
|
+
const CollapsibleNavItemSpacing = (props) => {
|
|
5
5
|
return (
|
|
6
|
-
<Nav
|
|
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
|
|
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,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!
|