playbook_ui_docs 12.39.0.pre.alpha.salesbookmismatchingdate1114 → 13.0.0.pre.alpha.PLAY966collapsiblenav41126

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: e562c1019791696372f7972cc921037978eae389af8024fc1bc5f5ee6d581a8f
4
- data.tar.gz: b2713cfa41abedbb7ab4d64ba46a8d85a6809848e38f4ebb64902335966f5dc5
3
+ metadata.gz: f2326456127b566bf233fd5f198b7e26a3ca6803a5c03d1ae100b5937fcaa02a
4
+ data.tar.gz: 543edb20808e9a5742bf2f38681e2cb84c1c1c00c06b77a052589861f1569027
5
5
  SHA512:
6
- metadata.gz: a801d0e2078a100223f4339a32c5b7380570168fcfa1bbb9542acb1171ea29050ef5047eff57128fd0b8fc6c6429bdc627f27b357f2fce43d3c6899503280925
7
- data.tar.gz: fada92b8114e1ce3b1f3f04b59f743e0c0d109f52b2f0457c1594a7bd8d9711856ac89efbf1f2ef05e70e82f50269727d671a67aaf84b47675a46c8878ed6d81
6
+ metadata.gz: b586fbc3a63ca3e9dbcccb8ce6b655f749c50155d21dfc7e6ad5a00cf3a2632bbcbd4d820551fdedf30c27cde70492ed00c8fc525e7ef11392bc066436a1ab54
7
+ data.tar.gz: b6866e7d011dca6f10383126b5dc979e9e09f180e41a10ef78f22c148f12ca448ed1c0166db8bf34cc08573975b1fa65d7717212b537304dfb931f4c0d7548ff
@@ -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