playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31073 → 12.37.0.pre.alpha.PLAY951collapsiblenav31078
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_nav/_collapsible_nav.scss +16 -2
- data/app/pb_kits/playbook/pb_nav/_item.tsx +2 -2
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +3 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +3 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +3 -3
- data/app/pb_kits/playbook/pb_nav/item.rb +9 -2
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bf2b1506bcffa9036acfa79e0938d64c12b73271f835283c1d7a810925c76b49
|
|
4
|
+
data.tar.gz: 71d153b0d3af01df033fc620f457d33259da874106754eb4f08410a101dcc1ea
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a128988fd7827a9da95c818e86a3a6f8eda872dc5a7681dedd35aa23bb25496286886a04db47ae45965a587e0747074b85f4e4f4968366c948eaa108c169cf35
|
|
7
|
+
data.tar.gz: d08d9346f961164fa8ad08d0d85affad812bd0432fc20eaf0937864f521a89afdd3964f6140fc47debc0c303eb725d491606e462050df455c37d2a10f4e61fd5
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.
|
|
16
|
+
.font_bolder {
|
|
17
17
|
.pb_nav_list_item_text {
|
|
18
18
|
@include pb_title_4;
|
|
19
19
|
}
|
|
@@ -25,6 +25,17 @@
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
.font_bold {
|
|
29
|
+
.pb_nav_list_item_text {
|
|
30
|
+
font-weight: $bold;
|
|
31
|
+
}
|
|
32
|
+
.pb_collapsible_main_kit {
|
|
33
|
+
.pb_nav_list_item_text_collapsible {
|
|
34
|
+
font-weight: $bold !important;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
28
39
|
.font_regular {
|
|
29
40
|
.pb_nav_list_item_text {
|
|
30
41
|
font-weight: $regular;
|
|
@@ -36,7 +47,6 @@
|
|
|
36
47
|
}
|
|
37
48
|
}
|
|
38
49
|
|
|
39
|
-
|
|
40
50
|
//styling for default variant with collapsible
|
|
41
51
|
&[class*="_normal"] {
|
|
42
52
|
[class*="pb_collapsible_nav_item"] {
|
|
@@ -147,6 +157,10 @@
|
|
|
147
157
|
}
|
|
148
158
|
|
|
149
159
|
[class*="pb_collapsible_nav_item"] {
|
|
160
|
+
.pb_nav_list_kit_item {
|
|
161
|
+
margin-right: 0px !important;
|
|
162
|
+
}
|
|
163
|
+
|
|
150
164
|
&[class*="_active"] {
|
|
151
165
|
background-color: unset !important;
|
|
152
166
|
.pb_nav_list_item_link {
|
|
@@ -11,7 +11,7 @@ import Collapsible from '../pb_collapsible/_collapsible'
|
|
|
11
11
|
type NavItemProps = {
|
|
12
12
|
active?: boolean,
|
|
13
13
|
aria?: { [key: string]: string },
|
|
14
|
-
fontWeight?: "regular" | "bold",
|
|
14
|
+
fontWeight?: "regular" | "bold" | "bolder",
|
|
15
15
|
children?: React.ReactNode[] | React.ReactNode,
|
|
16
16
|
className?: string,
|
|
17
17
|
collapsible?: boolean,
|
|
@@ -61,7 +61,7 @@ const NavItem = (props: NavItemProps) => {
|
|
|
61
61
|
const activeClass = active === true ? 'active' : ''
|
|
62
62
|
const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
|
|
63
63
|
const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
|
|
64
|
-
const fontWeightClass = fontWeight === 'bold' ? "font_bold" : "font_regular"
|
|
64
|
+
const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
|
|
65
65
|
const ariaProps = buildAriaProps(aria)
|
|
66
66
|
const dataProps = buildDataProps(data)
|
|
67
67
|
const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
|
|
@@ -8,7 +8,7 @@ const CollapsibleNav = (props) => {
|
|
|
8
8
|
active
|
|
9
9
|
collapsible
|
|
10
10
|
collapsibleTrail
|
|
11
|
-
fontWeight="
|
|
11
|
+
fontWeight="bolder"
|
|
12
12
|
iconLeft="city"
|
|
13
13
|
iconRight={["plus", "minus"]}
|
|
14
14
|
link="#"
|
|
@@ -34,7 +34,7 @@ const CollapsibleNav = (props) => {
|
|
|
34
34
|
<NavItem
|
|
35
35
|
collapsible
|
|
36
36
|
collapsibleTrail
|
|
37
|
-
|
|
37
|
+
fontWeight="bolder"
|
|
38
38
|
iconLeft="theater-masks"
|
|
39
39
|
iconRight={["plus", "minus"]}
|
|
40
40
|
link="#"
|
|
@@ -60,7 +60,7 @@ const CollapsibleNav = (props) => {
|
|
|
60
60
|
<NavItem
|
|
61
61
|
collapsible
|
|
62
62
|
collapsibleTrail
|
|
63
|
-
|
|
63
|
+
fontWeight="bolder"
|
|
64
64
|
iconLeft="city"
|
|
65
65
|
iconRight={["plus", "minus"]}
|
|
66
66
|
link="#"
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
<%= pb_rails("nav", props: { variant: "subtle" }) do %>
|
|
2
|
-
<%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"
|
|
2
|
+
<%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
|
|
3
3
|
<%= pb_rails("nav", props: { variant: "subtle" }) do %>
|
|
4
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
|
-
<%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"
|
|
9
|
+
<%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
|
|
10
10
|
<%= pb_rails("nav", props: { variant: "subtle" }) do %>
|
|
11
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
|
-
<%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"
|
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
|
|
17
17
|
<%= pb_rails("nav", props: { variant: "subtle" }) do %>
|
|
18
18
|
<%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
|
|
19
19
|
<%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
|
|
@@ -9,7 +9,7 @@ const CollapsibleNavEmphasize = (props) => {
|
|
|
9
9
|
collapsible
|
|
10
10
|
collapsibleTrail
|
|
11
11
|
fontSize="small"
|
|
12
|
-
fontWeight="
|
|
12
|
+
fontWeight="bolder"
|
|
13
13
|
iconLeft="city"
|
|
14
14
|
iconRight={["plus", "minus"]}
|
|
15
15
|
link="#"
|
|
@@ -36,7 +36,7 @@ const CollapsibleNavEmphasize = (props) => {
|
|
|
36
36
|
collapsible
|
|
37
37
|
collapsibleTrail
|
|
38
38
|
fontSize="small"
|
|
39
|
-
fontWeight="
|
|
39
|
+
fontWeight="bolder"
|
|
40
40
|
iconLeft="theater-masks"
|
|
41
41
|
iconRight={["plus", "minus"]}
|
|
42
42
|
link="#"
|
|
@@ -63,7 +63,7 @@ const CollapsibleNavEmphasize = (props) => {
|
|
|
63
63
|
collapsible
|
|
64
64
|
collapsibleTrail
|
|
65
65
|
fontSize="small"
|
|
66
|
-
fontWeight="
|
|
66
|
+
fontWeight="bolder"
|
|
67
67
|
iconLeft="city"
|
|
68
68
|
iconRight={["plus", "minus"]}
|
|
69
69
|
link="#"
|
|
@@ -8,7 +8,7 @@ module Playbook
|
|
|
8
8
|
values: %w[normal small],
|
|
9
9
|
default: "normal"
|
|
10
10
|
prop :font_weight, type: Playbook::Props::Enum,
|
|
11
|
-
values: %w[bold regular],
|
|
11
|
+
values: %w[bold regular bolder],
|
|
12
12
|
default: "regular"
|
|
13
13
|
prop :collapsible, type: Playbook::Props::Boolean, default: false
|
|
14
14
|
prop :link
|
|
@@ -56,7 +56,14 @@ module Playbook
|
|
|
56
56
|
end
|
|
57
57
|
|
|
58
58
|
def font_weight_class
|
|
59
|
-
font_weight
|
|
59
|
+
case font_weight
|
|
60
|
+
when "bold"
|
|
61
|
+
"font_bold"
|
|
62
|
+
when "bolder"
|
|
63
|
+
"font_bolder"
|
|
64
|
+
else
|
|
65
|
+
"font_regular"
|
|
66
|
+
end
|
|
60
67
|
end
|
|
61
68
|
|
|
62
69
|
def collapsible_trail_class
|