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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -1
- data/app/pb_kits/playbook/pb_kit/dateTime.ts +54 -23
- 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 +5 -5
- data/lib/playbook/version.rb +2 -2
- metadata +20 -11
- 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!
|