playbook_ui_docs 12.39.0.pre.alpha.salesbookmismatchingdate1117 → 13.0.0.pre.alpha.PLAY966collapsiblenav41128

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c47368e461f9d4a1e0f3ee542a94f7188326906d7d21d8346043581cce557c73
4
- data.tar.gz: 2e002978b9e4e051ab19f7154d22160080f109b4f656ff01905aef5432773e12
3
+ metadata.gz: 59e5c41eb3811f9766127244a9ba92998843ba6ee4416890a923e6c6fcf44d36
4
+ data.tar.gz: ae6ada029fa092c05bc7e480137c9f3a4021429c585afa8f9c3fce1fa324b66c
5
5
  SHA512:
6
- metadata.gz: 0bf58e14966ea87d49b001fa557dbcd5a7d5a4ae38e1da4ddcb49a39772b0eacc46cee492547f3a0d26e90eb68174b151dd3c3dd2cd1f8a0fce2906cabbe9725
7
- data.tar.gz: 869fc6cba2f61521205fa2a65a6af4979edda705029bccd94ca420ef7444cdab9b1dd5a325a60611e1bde47793cd583ddc95784ce15285e6cdff724b2a4d9792
6
+ metadata.gz: 904d541abda7d445870ac8556f572682248ea058562ac60acaf2a405fa914047f017323ced7c934b101959fe3b4d5093250d7129c40583053cb40097a06506e1
7
+ data.tar.gz: 492ac64cf3ad4955521e214fda61f5b61d0cdb3935f51dfae71fce5eb29dfa71f5ed5039ae8db1d2444d40e6de530af2cf873f9eb3897795881f124776073d33
@@ -5,7 +5,7 @@ import NavItem from '../_item'
5
5
 
6
6
  const BlockNoTitleNav = (props) => {
7
7
  return (
8
- <Nav>
8
+ <Nav {...props}>
9
9
  <NavItem
10
10
  iconLeft="newspaper"
11
11
  link="#"
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const BorderlessNav = (props) => {
7
7
  return (
8
- <Nav borderless>
8
+ <Nav
9
+ borderless
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  active
11
14
  link="#"
@@ -1,20 +1,20 @@
1
- <%= pb_rails("nav", props: { variant: "subtle" }) do %>
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: "subtle" }) do %>
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: "subtle" }) do %>
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: "subtle" }) do %>
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 variant='bold'>
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 variant="bold">
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 ` navBold` prop can be passed to NavItem
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.
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const NoHighlightNav = (props) => {
7
7
  return (
8
- <Nav highlight={false}>
8
+ <Nav
9
+ highlight={false}
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  active
11
14
  link="#"
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const SubtleNav = (props) => {
7
7
  return (
8
- <Nav variant="subtle">
8
+ <Nav
9
+ variant="subtle"
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  link="#"
11
14
  text="Overview"
@@ -5,7 +5,10 @@ import NavItem from '../_item'
5
5
 
6
6
  const SubtleWithIconsNav = (props) => {
7
7
  return (
8
- <Nav variant="subtle">
8
+ <Nav
9
+ variant="subtle"
10
+ {...props}
11
+ >
9
12
  <NavItem
10
13
  iconLeft="city"
11
14
  link="#"
@@ -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
- # - collapsible_nav: Collapsible Nav
11
- # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
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
- # - collapsible_nav: Collapsible Nav
30
- # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
31
- # - collapsible_nav_custom: Collapsible Nav With Custom Toggling
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