playbook_ui_docs 12.36.0.pre.alpha.PLAY942collapsiblenav21035 → 12.36.0.pre.alpha.svgiconmethods1043

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -15
  3. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +2 -2
  4. data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb +1 -0
  5. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +2 -0
  6. data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb +4 -0
  7. data/app/pb_kits/playbook/pb_icon/docs/example.yml +10 -9
  8. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +79 -59
  9. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +6 -4
  10. data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -2
  11. data/dist/playbook-doc.js +9 -9
  12. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b453a77a2422494201dd6202d01f9b3aff94e53065d91b29c1b2a8eb27438701
4
- data.tar.gz: 6dd607e3ecf738ad46073dee29bd6a6ba9b1e046d90e88621bae4323cf7b022b
3
+ metadata.gz: e5b6be6a0707803d18abe60755fdedeea588df8a4113498b277b82745c43d91f
4
+ data.tar.gz: e81a0ffc6c623adb99b5f3c1e37c0ca1f2c4977a2388078d15f2f817e9ad311b
5
5
  SHA512:
6
- metadata.gz: e09acd61f4b5a6d425ecc37153e673ba42c2ab3dd679426be13626d85641b2ecef53836621e8b37f6277e26d5d09cd27bec0089ddaeca716a153561b5ec2acbc
7
- data.tar.gz: 4109215a81dd5453ad4215537e3b5fe7ed95a0673b36457711588412304fedca1e3df2783cecf79ce30a5311d9590cca062b612657210545eb2ff30742e0d9cb
6
+ metadata.gz: 476372c4f392fd8c911688184f83a1005813b790e6665e0290ba88a5def3f3db92f6abc5e4d600fb5ede880560e0f1277244d5468877dc94d39ed752e666a495
7
+ data.tar.gz: e6bf7bc8b8edf48a98da711dd74f7d2c8652c79caa249ea131669ef87541d458ffc217ffdde8821a05c670f01b7a647913b61207cb19314584d053894a664929
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx CHANGED
@@ -1,17 +1,8 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Button } from '../..'
2
+ import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleIcons = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
-
7
- return (
8
- <>
9
- <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
10
- {isCollapsed ? "Expand" : "Collapse"}
11
- </Button>
12
- <Collapsible collapsed={isCollapsed}
13
- icon={['plus','minus']}
14
- >
4
+ const CollapsibleIcons = () => (
5
+ <Collapsible icon={['plus','minus']}>
15
6
  <Collapsible.Main>
16
7
  <div>{'Main Section'}</div>
17
8
  </Collapsible.Main>
@@ -23,8 +14,6 @@ const CollapsibleIcons = () => {
23
14
  </div>
24
15
  </Collapsible.Content>
25
16
  </Collapsible>
26
- </>
27
- )
28
- }
17
+ )
29
18
 
30
19
  export default CollapsibleIcons
data/app/pb_kits/playbook/pb_collapsible/docs/example.yml CHANGED
@@ -4,10 +4,10 @@ examples:
4
4
  - collapsible_default: Default
5
5
  - collapsible_size: Size
6
6
  - collapsible_color: Color
7
- - collapsible_icons: Custom Icons
7
+ # - collapsible_icons: Custom Icons
8
8
 
9
9
  react:
10
10
  - collapsible_default: Default
11
11
  - collapsible_size: Size
12
12
  - collapsible_color: Color
13
- - collapsible_icons: Custom Icons
13
+ # - collapsible_icons: Custom Icons
data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb CHANGED
@@ -1,3 +1,4 @@
1
1
  <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
2
2
  <br/>
3
3
  <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
4
+
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb CHANGED
@@ -14,3 +14,5 @@
14
14
  parent element's css color properties."
15
15
  } ) %>
16
16
  </div>
17
+
18
+
data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb ADDED
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("icon", props: { size: "5x", custom_icon: "copilot", padding_left: "xl" } ) %>
2
+ <%= pb_rails("icon", props: { size: "5x", custom_icon: "squirrel" } ) %>
3
+ <%= pb_rails("icon", props: { size: "5x", custom_icon: "star" } ) %>
4
+
data/app/pb_kits/playbook/pb_icon/docs/example.yml CHANGED
@@ -1,14 +1,15 @@
1
1
  examples:
2
2
  rails:
3
- - icon_default: Icon Default
4
- - icon_rotate: Icon Rotate
5
- - icon_flip: Icon Flip
6
- - icon_animate: Icon Animation
7
- - icon_pull: Icon Pull
8
- - icon_border: Icon Border
9
- - icon_sizes: Icon Sizes
10
- - icon_custom: Icon Custom
11
- - icon_fa_kit: Icon with FontAwesome Kit
3
+ # - icon_default: Icon Default
4
+ # - icon_rotate: Icon Rotate
5
+ # - icon_flip: Icon Flip
6
+ # - icon_animate: Icon Animation
7
+ # - icon_pull: Icon Pull
8
+ # - icon_border: Icon Border
9
+ # - icon_sizes: Icon Sizes
10
+ # - icon_custom: Icon Custom
11
+ # - icon_fa_kit: Icon with FontAwesome Kit
12
+ - icon_svg: Icon SVG
12
13
 
13
14
  react:
14
15
  - icon_default: Icon Default
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx CHANGED
@@ -1,63 +1,83 @@
1
- import React from "react"
2
- import { Nav, NavItem, useCollapsible } from "../.."
3
-
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
- }
1
+ import React from "react";
18
2
 
3
+ import Nav from "../_nav";
4
+ import NavItem from "../_item";
19
5
 
20
- const handleIconRightClick = (index) => {
21
- const [isCollapsed, setCollapsed] = collapsibles[index]
22
- setCollapsed(!isCollapsed)
23
- }
24
-
6
+ const CollapsibleNav = (props) => {
25
7
  return (
26
- <>
27
- <Nav variant='subtle'>
28
- {navItems.map((text, index) => {
29
- const [collapsed] = collapsibles[index]
30
- return (
31
- <NavItem
32
- collapsible
33
- collapsibleClick={() => handleMainClick(index)}
34
- iconLeft="chevron-down"
35
- iconRightClick={() => handleIconRightClick(index)}
36
- id={`collapsible-nav-item-${index + 1}`}
37
- key={index}
38
- link="#"
39
- text={text}
40
- toggleCollapsed={collapsed}
41
- {...props}
42
- >
43
- <NavItem link="#"
44
- text="City"
45
- {...props}
46
- />
47
- <NavItem link="#"
48
- text="People"
49
- {...props}
50
- />
51
- <NavItem link="#"
52
- text="Business"
53
- {...props}
54
- />
55
- </NavItem>
56
- );
57
- })}
58
- </Nav>
59
- </>
60
- )
61
- }
8
+ <Nav variant="subtle">
9
+ <NavItem
10
+ collapsible
11
+ iconLeft="city"
12
+ link="#"
13
+ text="Overview"
14
+ {...props}
15
+ >
16
+ <NavItem
17
+ link="#"
18
+ text="City"
19
+ {...props}
20
+ />
21
+ <NavItem
22
+ link="#"
23
+ text="People"
24
+ {...props}
25
+ />
26
+ <NavItem
27
+ link="#"
28
+ text="Business"
29
+ {...props}
30
+ />
31
+ </NavItem>
32
+ <NavItem
33
+ active
34
+ collapsible
35
+ iconLeft="theater-masks"
36
+ link="#"
37
+ text="Albums"
38
+ {...props}
39
+ >
40
+ <NavItem
41
+ link="#"
42
+ text="Entertainment"
43
+ {...props}
44
+ />
45
+ <NavItem
46
+ link="#"
47
+ text="Food"
48
+ {...props}
49
+ />
50
+ <NavItem
51
+ link="#"
52
+ text="Style"
53
+ {...props}
54
+ />
55
+ </NavItem>
56
+ <NavItem
57
+ collapsible
58
+ iconLeft="city"
59
+ link="#"
60
+ text="Similar Artists"
61
+ {...props}
62
+ >
63
+ <NavItem
64
+ link="#"
65
+ text="City"
66
+ {...props}
67
+ />
68
+ <NavItem
69
+ link="#"
70
+ text="People"
71
+ {...props}
72
+ />
73
+ <NavItem
74
+ link="#"
75
+ text="Business"
76
+ {...props}
77
+ />
78
+ </NavItem>
79
+ </Nav>
80
+ );
81
+ };
62
82
 
63
- export default CollapsibleNav
83
+ export default CollapsibleNav;
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
- import { Nav, NavItem } from '../..'
2
+
3
+ import Nav from "../_nav";
4
+ import NavItem from "../_item";
3
5
 
4
6
  const CollapsibleNavCustomIcons = (props) => {
5
7
  return (
@@ -7,7 +9,7 @@ const CollapsibleNavCustomIcons = (props) => {
7
9
  <NavItem
8
10
  collapsible
9
11
  iconLeft="city"
10
- iconRight={["plus", "minus"]}
12
+ iconRight={["chevron-down", "chevron-up"]}
11
13
  link="#"
12
14
  text="Overview"
13
15
  {...props}
@@ -32,7 +34,7 @@ const CollapsibleNavCustomIcons = (props) => {
32
34
  active
33
35
  collapsible
34
36
  iconLeft="theater-masks"
35
- iconRight={["plus", "minus"]}
37
+ iconRight={["chevron-down", "chevron-up"]}
36
38
  link="#"
37
39
  text="Albums"
38
40
  {...props}
@@ -56,7 +58,7 @@ const CollapsibleNavCustomIcons = (props) => {
56
58
  <NavItem
57
59
  collapsible
58
60
  iconLeft="city"
59
- iconRight={["plus", "minus"]}
61
+ iconRight={["chevron-down", "chevron-up"]}
60
62
  link="#"
61
63
  text="Similar Artists"
62
64
  {...props}
data/app/pb_kits/playbook/pb_nav/docs/example.yml CHANGED
@@ -25,8 +25,8 @@ examples:
25
25
  - borderless_nav: No Borders
26
26
  - subtle_nav: Subtle Variant
27
27
  - subtle_with_icons_nav: Subtle With Icons
28
- - collapsible_nav: Subtle With Collapsible
29
- - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
28
+ # - collapsible_nav: Subtle With Collapsible
29
+ # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
30
30
  - subtle_no_highlight_nav: Subtle No Highlight
31
31
  - bold_vertical_nav: Bold Variant
32
32
  - horizontal_nav: Horizontal Nav