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