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

Sign up to get free protection for your applications and to get access to all the features.
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