playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31073 → 12.37.0.pre.alpha.PLAY951collapsiblenav31074
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 +13 -1
- 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 +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 046c4a6ee60d6233981489235626a06999ee1d17d015215491da83534e5ab9c3
|
4
|
+
data.tar.gz: 219acf93f0c0bc67e2040158b847a0e0ff9d943c4273de9b6cb72140f3ff5d32
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2f0d02eef6e5304bde87897db22ee87e304bb2f587da934329cd52066502873156c1a8eff67cbc107b8daa8995d3a5c3814374383e12050c5e80e6b45cc8d0ae
|
7
|
+
data.tar.gz: 9973aea22b8168fa03ccca233e7e051a927cef9b8fad2a7fc32c61d3e9907924c70389978797619a3a9515b4b1be3cab3f5f6562280066ea797c099d45248ba2
|
@@ -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,18 @@
|
|
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
|
+
|
39
|
+
|
28
40
|
.font_regular {
|
29
41
|
.pb_nav_list_item_text {
|
30
42
|
font-weight: $regular;
|
@@ -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
|