playbook_ui 12.38.0.pre.alpha.playbook123801077 → 12.39.0
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/_collapsible.scss +6 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -9
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +280 -17
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +6 -0
- data/app/pb_kits/playbook/pb_nav/_item.tsx +35 -22
- data/app/pb_kits/playbook/pb_nav/_mixins.scss +5 -0
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -7
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
- data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +5 -4
- data/app/pb_kits/playbook/pb_nav/item.rb +29 -3
- data/app/pb_kits/playbook/pb_select/_select.scss +76 -0
- data/app/pb_kits/playbook/pb_select/_select.tsx +9 -5
- data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +36 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx +50 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +5 -9
- data/app/pb_kits/playbook/pb_select/select.rb +14 -0
- data/app/pb_kits/playbook/pb_select/select.test.js +17 -0
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +21 -8
@@ -11,57 +11,71 @@ import Collapsible from '../pb_collapsible/_collapsible'
|
|
11
11
|
type NavItemProps = {
|
12
12
|
active?: boolean,
|
13
13
|
aria?: { [key: string]: string },
|
14
|
+
fontWeight?: "regular" | "bold" | "bolder",
|
14
15
|
children?: React.ReactNode[] | React.ReactNode,
|
15
16
|
className?: string,
|
16
17
|
collapsible?: boolean,
|
17
|
-
collapsibleClick?: () => void,
|
18
18
|
data?: object,
|
19
|
+
dark?: boolean,
|
20
|
+
fontSize?: "normal" | "small",
|
19
21
|
iconLeft?: string,
|
20
22
|
iconRight?: string | string[],
|
21
|
-
|
22
|
-
|
23
|
+
onIconRightClick?: () => void,
|
24
|
+
onIconLeftClick?: () => void,
|
23
25
|
id?: string,
|
24
26
|
imageUrl?: string,
|
25
27
|
link?: string,
|
26
|
-
onClick?:
|
28
|
+
onClick?: () => void,
|
27
29
|
target?: '_blank' | '_self' | '_parent' | '_top',
|
28
30
|
text: string,
|
29
|
-
|
31
|
+
collapsibleTrail?: boolean,
|
32
|
+
collapsed?: boolean
|
30
33
|
} & GlobalProps
|
31
34
|
|
32
35
|
const NavItem = (props: NavItemProps) => {
|
33
36
|
const {
|
34
37
|
active = false,
|
35
38
|
aria = {},
|
39
|
+
fontWeight = "regular",
|
36
40
|
children,
|
37
41
|
className,
|
38
42
|
collapsible,
|
39
|
-
collapsibleClick,
|
40
43
|
data = {},
|
44
|
+
dark = false,
|
45
|
+
fontSize = "normal",
|
41
46
|
iconLeft,
|
42
47
|
iconRight,
|
43
|
-
|
44
|
-
|
48
|
+
onIconRightClick,
|
49
|
+
onIconLeftClick,
|
45
50
|
id,
|
46
51
|
imageUrl,
|
47
52
|
link,
|
48
53
|
onClick = () => { },
|
49
54
|
target = '_self',
|
50
55
|
text = '',
|
51
|
-
|
56
|
+
collapsibleTrail,
|
57
|
+
collapsed
|
52
58
|
} = props
|
53
59
|
|
54
60
|
const Tag = link ? 'a' : 'div'
|
55
61
|
const activeClass = active === true ? 'active' : ''
|
62
|
+
const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
|
63
|
+
const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
|
64
|
+
const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
|
56
65
|
const ariaProps = buildAriaProps(aria)
|
57
66
|
const dataProps = buildDataProps(data)
|
58
|
-
const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
|
67
|
+
const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
|
68
|
+
collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '',
|
69
|
+
fontSizeClass,
|
70
|
+
fontWeightClass,
|
71
|
+
globalProps(props),
|
72
|
+
className)
|
59
73
|
|
60
74
|
|
61
75
|
const handleIconClick = (e:any) => {
|
62
|
-
if (
|
76
|
+
if (onIconLeftClick) {
|
63
77
|
e.stopPropagation();
|
64
|
-
|
78
|
+
onIconLeftClick()
|
65
79
|
}
|
66
80
|
}
|
67
81
|
|
@@ -77,20 +91,19 @@ const NavItem = (props: NavItemProps) => {
|
|
77
91
|
<Collapsible icon={iconRight ? iconRight : ['plus','minus']}
|
78
92
|
iconSize="xs"
|
79
93
|
id={id}
|
80
|
-
collapsed={
|
81
|
-
|
82
|
-
onClick={
|
94
|
+
collapsed={collapsed}
|
95
|
+
onIconClick={onIconRightClick}
|
96
|
+
onClick={onClick}
|
83
97
|
>
|
84
|
-
<Collapsible.Main>
|
98
|
+
<Collapsible.Main dark={dark}>
|
85
99
|
<Tag
|
86
|
-
className="
|
100
|
+
className="pb_nav_list_item_link_collapsible"
|
87
101
|
href={link}
|
88
|
-
onClick={onClick}
|
89
102
|
target={target}
|
90
103
|
>
|
91
104
|
{imageUrl &&
|
92
105
|
<div
|
93
|
-
className="
|
106
|
+
className="pb_nav_list_item_icon_section_collapsible"
|
94
107
|
key={imageUrl}
|
95
108
|
onClick={(e)=>handleIconClick(e)}
|
96
109
|
>
|
@@ -103,18 +116,18 @@ const NavItem = (props: NavItemProps) => {
|
|
103
116
|
|
104
117
|
{iconLeft &&
|
105
118
|
<div
|
106
|
-
className="
|
119
|
+
className="pb_nav_list_item_icon_section_collapsible"
|
107
120
|
key={iconLeft}
|
108
121
|
onClick={(e)=>handleIconClick(e)}
|
109
122
|
>
|
110
123
|
<Icon
|
111
|
-
className="
|
124
|
+
className="pb_nav_list_item_icon_left_collapsible"
|
112
125
|
fixedWidth
|
113
126
|
icon={iconLeft}
|
114
127
|
/>
|
115
128
|
</div>
|
116
129
|
}
|
117
|
-
<span className="
|
130
|
+
<span className="pb_nav_list_item_text_collapsible">
|
118
131
|
{text}
|
119
132
|
</span>
|
120
133
|
</Tag>
|
@@ -27,14 +27,7 @@
|
|
27
27
|
}
|
28
28
|
[class*=_text] {
|
29
29
|
flex: 1;
|
30
|
-
font-weight: $regular;
|
31
30
|
}
|
32
|
-
}
|
33
|
-
&[class*=_active] [class*=_link] {
|
34
|
-
@include pb_title_4;
|
35
|
-
color: $primary;
|
36
|
-
letter-spacing: normal;
|
37
|
-
}
|
38
31
|
&:hover {
|
39
32
|
background-color: rgba($primary, 0.03);
|
40
33
|
[class*=_icon] {
|
@@ -44,5 +37,11 @@
|
|
44
37
|
color: $primary;
|
45
38
|
}
|
46
39
|
}
|
40
|
+
}
|
41
|
+
&[class*=_active] [class*=_link] {
|
42
|
+
@include pb_title_4;
|
43
|
+
color: $primary;
|
44
|
+
letter-spacing: normal;
|
45
|
+
}
|
47
46
|
}
|
48
47
|
}
|
@@ -1,63 +1,90 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import { Nav, NavItem
|
1
|
+
import React from "react";
|
2
|
+
import { Nav, NavItem } from '../..'
|
3
3
|
|
4
4
|
const CollapsibleNav = (props) => {
|
5
|
-
const navItems = ["Overview", "Albums", "Similar Artists"]
|
6
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
7
|
-
const collapsibles = navItems.map(() => useCollapsible(true))
|
8
|
-
|
9
|
-
const handleMainClick = (index) => {
|
10
|
-
collapsibles.forEach(([, , setCollapsed], idx) => {
|
11
|
-
if (idx === index) {
|
12
|
-
setCollapsed(false)
|
13
|
-
} else {
|
14
|
-
setCollapsed(true)
|
15
|
-
}
|
16
|
-
})
|
17
|
-
}
|
18
|
-
|
19
|
-
|
20
|
-
const handleIconRightClick = (index) => {
|
21
|
-
const [isCollapsed, setCollapsed] = collapsibles[index]
|
22
|
-
setCollapsed(!isCollapsed)
|
23
|
-
}
|
24
|
-
|
25
5
|
return (
|
26
|
-
|
27
|
-
<
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
6
|
+
<Nav>
|
7
|
+
<NavItem
|
8
|
+
active
|
9
|
+
collapsible
|
10
|
+
collapsibleTrail
|
11
|
+
fontWeight="bolder"
|
12
|
+
iconLeft="city"
|
13
|
+
iconRight={["plus", "minus"]}
|
14
|
+
link="#"
|
15
|
+
text="Overview"
|
16
|
+
{...props}
|
17
|
+
>
|
18
|
+
<NavItem
|
19
|
+
link="#"
|
20
|
+
text="City"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
<NavItem
|
24
|
+
link="#"
|
25
|
+
text="People"
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
<NavItem
|
29
|
+
link="#"
|
30
|
+
text="Business"
|
31
|
+
{...props}
|
32
|
+
/>
|
33
|
+
</NavItem>
|
34
|
+
<NavItem
|
35
|
+
collapsible
|
36
|
+
collapsibleTrail
|
37
|
+
fontWeight="bolder"
|
38
|
+
iconLeft="theater-masks"
|
39
|
+
iconRight={["plus", "minus"]}
|
40
|
+
link="#"
|
41
|
+
text="Albums"
|
42
|
+
{...props}
|
43
|
+
>
|
44
|
+
<NavItem
|
45
|
+
link="#"
|
46
|
+
text="Entertainment"
|
47
|
+
{...props}
|
48
|
+
/>
|
49
|
+
<NavItem
|
50
|
+
link="#"
|
51
|
+
text="Food"
|
52
|
+
{...props}
|
53
|
+
/>
|
54
|
+
<NavItem
|
55
|
+
link="#"
|
56
|
+
text="Style"
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
</NavItem>
|
60
|
+
<NavItem
|
61
|
+
collapsible
|
62
|
+
collapsibleTrail
|
63
|
+
fontWeight="bolder"
|
64
|
+
iconLeft="city"
|
65
|
+
iconRight={["plus", "minus"]}
|
66
|
+
link="#"
|
67
|
+
text="Similar Artists"
|
68
|
+
{...props}
|
69
|
+
>
|
70
|
+
<NavItem
|
71
|
+
link="#"
|
72
|
+
text="City"
|
73
|
+
{...props}
|
74
|
+
/>
|
75
|
+
<NavItem
|
76
|
+
link="#"
|
77
|
+
text="People"
|
78
|
+
{...props}
|
79
|
+
/>
|
80
|
+
<NavItem
|
81
|
+
link="#"
|
82
|
+
text="Business"
|
83
|
+
{...props}
|
84
|
+
/>
|
85
|
+
</NavItem>
|
86
|
+
</Nav>
|
87
|
+
);
|
88
|
+
};
|
62
89
|
|
63
90
|
export default CollapsibleNav
|
@@ -0,0 +1 @@
|
|
1
|
+
The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action.
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import { Nav, NavItem, useCollapsible } from "../.."
|
3
|
+
|
4
|
+
const CollapsibleNavCustom = (props) => {
|
5
|
+
const navItems = ["Overview", "Albums", "Similar Artists"]
|
6
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
7
|
+
const collapsibles = navItems.map(() => useCollapsible(true))
|
8
|
+
|
9
|
+
const handleMainClick = (index) => {
|
10
|
+
collapsibles.forEach(([, , setCollapsed], idx) => {
|
11
|
+
if (idx === index) {
|
12
|
+
setCollapsed(false)
|
13
|
+
} else {
|
14
|
+
setCollapsed(true)
|
15
|
+
}
|
16
|
+
})
|
17
|
+
}
|
18
|
+
|
19
|
+
return (
|
20
|
+
<>
|
21
|
+
<Nav variant='bold'>
|
22
|
+
{navItems.map((text, index) => {
|
23
|
+
const [collapsed] = collapsibles[index]
|
24
|
+
return (
|
25
|
+
<NavItem
|
26
|
+
collapsed={collapsed}
|
27
|
+
collapsible
|
28
|
+
collapsibleTrail
|
29
|
+
fontWeight="bolder"
|
30
|
+
iconLeft="chevron-down"
|
31
|
+
id={`collapsible-nav-item-${index + 1}`}
|
32
|
+
key={index}
|
33
|
+
link="#"
|
34
|
+
onClick={() => handleMainClick(index)}
|
35
|
+
text={text}
|
36
|
+
{...props}
|
37
|
+
>
|
38
|
+
<NavItem link="#"
|
39
|
+
text="City"
|
40
|
+
{...props}
|
41
|
+
/>
|
42
|
+
<NavItem link="#"
|
43
|
+
text="People"
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
<NavItem link="#"
|
47
|
+
text="Business"
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
</NavItem>
|
51
|
+
);
|
52
|
+
})}
|
53
|
+
</Nav>
|
54
|
+
</>
|
55
|
+
)
|
56
|
+
}
|
57
|
+
|
58
|
+
export default CollapsibleNavCustom
|
@@ -0,0 +1 @@
|
|
1
|
+
The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done.
|
@@ -0,0 +1,23 @@
|
|
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 %>
|
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: "#" }) %>
|
7
|
+
<% end %>
|
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 %>
|
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: "#" }) %>
|
14
|
+
<% end %>
|
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 %>
|
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: "#" }) %>
|
21
|
+
<% end %>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
@@ -1,11 +1,15 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Nav, NavItem } from '../..'
|
3
3
|
|
4
|
-
const
|
4
|
+
const CollapsibleNavEmphasize = (props) => {
|
5
5
|
return (
|
6
|
-
<Nav variant="
|
6
|
+
<Nav variant="bold">
|
7
7
|
<NavItem
|
8
|
-
|
8
|
+
active
|
9
|
+
collapsible
|
10
|
+
collapsibleTrail
|
11
|
+
fontSize="small"
|
12
|
+
fontWeight="bolder"
|
9
13
|
iconLeft="city"
|
10
14
|
iconRight={["plus", "minus"]}
|
11
15
|
link="#"
|
@@ -29,8 +33,10 @@ const CollapsibleNavCustomIcons = (props) => {
|
|
29
33
|
/>
|
30
34
|
</NavItem>
|
31
35
|
<NavItem
|
32
|
-
active
|
33
36
|
collapsible
|
37
|
+
collapsibleTrail
|
38
|
+
fontSize="small"
|
39
|
+
fontWeight="bolder"
|
34
40
|
iconLeft="theater-masks"
|
35
41
|
iconRight={["plus", "minus"]}
|
36
42
|
link="#"
|
@@ -55,6 +61,9 @@ const CollapsibleNavCustomIcons = (props) => {
|
|
55
61
|
</NavItem>
|
56
62
|
<NavItem
|
57
63
|
collapsible
|
64
|
+
collapsibleTrail
|
65
|
+
fontSize="small"
|
66
|
+
fontWeight="bolder"
|
58
67
|
iconLeft="city"
|
59
68
|
iconRight={["plus", "minus"]}
|
60
69
|
link="#"
|
@@ -81,4 +90,4 @@ const CollapsibleNavCustomIcons = (props) => {
|
|
81
90
|
);
|
82
91
|
};
|
83
92
|
|
84
|
-
export default
|
93
|
+
export default CollapsibleNavEmphasize;
|
@@ -0,0 +1 @@
|
|
1
|
+
The ` navBold` prop can be passed to NavItem
|
@@ -7,7 +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
|
-
# - collapsible_nav:
|
10
|
+
# - collapsible_nav: Collapsible Nav
|
11
|
+
# - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
|
11
12
|
- subtle_no_highlight_nav: Subtle No Highlight
|
12
13
|
- bold_vertical_nav: Bold Variant
|
13
14
|
- horizontal_nav: Horizontal Nav
|
@@ -25,8 +26,9 @@ examples:
|
|
25
26
|
- borderless_nav: No Borders
|
26
27
|
- subtle_nav: Subtle Variant
|
27
28
|
- subtle_with_icons_nav: Subtle With Icons
|
28
|
-
# - collapsible_nav:
|
29
|
-
# -
|
29
|
+
# - collapsible_nav: Collapsible Nav
|
30
|
+
# - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
|
31
|
+
# - collapsible_nav_custom: Collapsible Nav With Custom Toggling
|
30
32
|
- subtle_no_highlight_nav: Subtle No Highlight
|
31
33
|
- bold_vertical_nav: Bold Variant
|
32
34
|
- horizontal_nav: Horizontal Nav
|
@@ -14,4 +14,5 @@ export { default as NewTab } from './_new_tab.jsx'
|
|
14
14
|
export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
|
15
15
|
export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
|
16
16
|
export { default as CollapsibleNav } from './_collapsible_nav.jsx'
|
17
|
-
export { default as
|
17
|
+
export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
|
18
|
+
export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
|
@@ -2,19 +2,20 @@
|
|
2
2
|
aria: object.aria,
|
3
3
|
class: object.classname,
|
4
4
|
data: object.data,
|
5
|
+
dark: object.dark,
|
5
6
|
id: object.id) do %>
|
6
7
|
<% if object.collapsible %>
|
7
8
|
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
|
8
|
-
<%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
|
9
|
+
<%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
|
9
10
|
<%= content_tag(object.tag,
|
10
11
|
object.link ? object.link_options : object.options) do %>
|
11
12
|
<% if object.image_url %>
|
12
|
-
<%= pb_rails("image", props: { url: object.image_url, classname: "
|
13
|
+
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
|
13
14
|
<% end %>
|
14
15
|
<% if object.icon_left %>
|
15
|
-
<%= pb_rails("icon", props: { icon: object.icon_left, classname: "
|
16
|
+
<%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
|
16
17
|
<% end %>
|
17
|
-
<span class="
|
18
|
+
<span class="pb_nav_list_item_text_collapsible">
|
18
19
|
<%= object.text %>
|
19
20
|
</span>
|
20
21
|
<% end %>
|
@@ -4,9 +4,16 @@ module Playbook
|
|
4
4
|
module PbNav
|
5
5
|
class Item < Playbook::KitBase
|
6
6
|
prop :active, type: Playbook::Props::Boolean, default: false
|
7
|
+
prop :font_size, type: Playbook::Props::Enum,
|
8
|
+
values: %w[normal small],
|
9
|
+
default: "normal"
|
10
|
+
prop :font_weight, type: Playbook::Props::Enum,
|
11
|
+
values: %w[bold regular bolder],
|
12
|
+
default: "regular"
|
7
13
|
prop :collapsible, type: Playbook::Props::Boolean, default: false
|
8
14
|
prop :link
|
9
15
|
prop :text
|
16
|
+
prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
|
10
17
|
prop :icon_left
|
11
18
|
prop :icon_right
|
12
19
|
prop :image_url
|
@@ -15,9 +22,9 @@ module Playbook
|
|
15
22
|
default: "_self"
|
16
23
|
def classname
|
17
24
|
if collapsible
|
18
|
-
"
|
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}"
|
19
26
|
else
|
20
|
-
generate_classname(
|
27
|
+
"#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
|
21
28
|
end
|
22
29
|
end
|
23
30
|
|
@@ -27,7 +34,7 @@ module Playbook
|
|
27
34
|
|
28
35
|
def options
|
29
36
|
{
|
30
|
-
class: "pb_nav_list_item_link",
|
37
|
+
class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
|
31
38
|
}.compact
|
32
39
|
end
|
33
40
|
|
@@ -47,6 +54,25 @@ module Playbook
|
|
47
54
|
def active_class
|
48
55
|
active ? "active" : nil
|
49
56
|
end
|
57
|
+
|
58
|
+
def font_weight_class
|
59
|
+
case font_weight
|
60
|
+
when "bold"
|
61
|
+
"font_bold"
|
62
|
+
when "bolder"
|
63
|
+
"font_bolder"
|
64
|
+
else
|
65
|
+
"font_regular"
|
66
|
+
end
|
67
|
+
end
|
68
|
+
|
69
|
+
def collapsible_trail_class
|
70
|
+
collapsible_trail ? "collapsible_trail" : nil
|
71
|
+
end
|
72
|
+
|
73
|
+
def font_size_class
|
74
|
+
font_size === "small" ? "font_size_small" : "font_size_normal"
|
75
|
+
end
|
50
76
|
end
|
51
77
|
end
|
52
78
|
end
|