playbook_ui 12.38.0.pre.alpha.PLAY966collapsiblenav41082 → 12.38.0.pre.alpha.audiencesalpha1083

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -6
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +9 -10
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +8 -4
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -7
  11. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
  12. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +17 -280
  13. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +0 -6
  14. data/app/pb_kits/playbook/pb_nav/_item.tsx +24 -75
  15. data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -18
  16. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +7 -6
  17. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +58 -85
  19. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx} +5 -14
  20. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -5
  21. data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
  22. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -5
  23. data/app/pb_kits/playbook/pb_nav/item.rb +3 -29
  24. data/dist/playbook-rails.js +1 -1
  25. data/lib/playbook/version.rb +1 -1
  26. metadata +2 -10
  27. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -75
  28. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +0 -3
  29. data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
  30. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +0 -1
  31. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +0 -58
  32. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +0 -1
  33. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
  34. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +0 -1
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.38.0"
5
- VERSION = "12.38.0.pre.alpha.PLAY966collapsiblenav41082"
5
+ VERSION = "12.38.0.pre.alpha.audiencesalpha1083"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.38.0.pre.alpha.PLAY966collapsiblenav41082
4
+ version: 12.38.0.pre.alpha.audiencesalpha1083
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -616,8 +616,6 @@ files:
616
616
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb
617
617
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx
618
618
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md
619
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx
620
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md
621
619
  - app/pb_kits/playbook/pb_collapsible/docs/example.yml
622
620
  - app/pb_kits/playbook/pb_collapsible/docs/index.js
623
621
  - app/pb_kits/playbook/pb_collapsible/index.js
@@ -1521,7 +1519,6 @@ files:
1521
1519
  - app/pb_kits/playbook/pb_nav/_collapsible_nav.scss
1522
1520
  - app/pb_kits/playbook/pb_nav/_horizontal_nav.scss
1523
1521
  - app/pb_kits/playbook/pb_nav/_item.tsx
1524
- - app/pb_kits/playbook/pb_nav/_mixins.scss
1525
1522
  - app/pb_kits/playbook/pb_nav/_nav.scss
1526
1523
  - app/pb_kits/playbook/pb_nav/_nav.test.js
1527
1524
  - app/pb_kits/playbook/pb_nav/_nav.tsx
@@ -1540,12 +1537,7 @@ files:
1540
1537
  - app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx
1541
1538
  - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb
1542
1539
  - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx
1543
- - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
1544
- - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
1545
- - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
1546
- - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb
1547
- - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx
1548
- - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md
1540
+ - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx
1549
1541
  - app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
1550
1542
  - app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
1551
1543
  - app/pb_kits/playbook/pb_nav/docs/_description.md
@@ -1,75 +0,0 @@
1
- import React from 'react'
2
- import { Collapsible, useCollapsible, Button } from '../..'
3
-
4
- const CollapsibleState = (props) => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
-
7
- return (
8
- <>
9
- <Button
10
- onClick={() => setIsCollapsed(!isCollapsed)}
11
- padding="none"
12
- variant="link"
13
- >
14
- {isCollapsed ? "Expand All" : "Collapse All"}
15
- </Button>
16
-
17
- <Collapsible
18
- collapsed={isCollapsed}
19
- icon={["plus", "minus"]}
20
- padding="none"
21
- >
22
- <Collapsible.Main padding="sm"
23
- {...props}
24
- >
25
- <div>{"Main Section"}</div>
26
- </Collapsible.Main>
27
- <Collapsible.Content>
28
- <div>
29
- {
30
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
31
- }
32
- </div>
33
- </Collapsible.Content>
34
- </Collapsible>
35
- <Collapsible
36
- collapsed={isCollapsed}
37
- icon={["plus", "minus"]}
38
- padding="none"
39
- >
40
- <Collapsible.Main padding="sm"
41
- {...props}
42
- >
43
- <div>{"Main Section"}</div>
44
- </Collapsible.Main>
45
- <Collapsible.Content>
46
- <div>
47
- {
48
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
49
- }
50
- </div>
51
- </Collapsible.Content>
52
- </Collapsible>
53
- <Collapsible
54
- collapsed={isCollapsed}
55
- icon={["plus", "minus"]}
56
- padding="none"
57
- >
58
- <Collapsible.Main padding="sm"
59
- {...props}
60
- >
61
- <div>{"Main Section"}</div>
62
- </Collapsible.Main>
63
- <Collapsible.Content>
64
- <div>
65
- {
66
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
67
- }
68
- </div>
69
- </Collapsible.Content>
70
- </Collapsible>
71
- </>
72
- )
73
- }
74
-
75
- export default CollapsibleState
@@ -1,3 +0,0 @@
1
- The `collapsed` prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our `useCollapsible` hook.
2
-
3
- NOTE: you must import and declare the `useCollapsible` hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.
@@ -1,5 +0,0 @@
1
- @mixin collapsible_trail_class {
2
- .pb_collapsible_content_kit {
3
- border-color: $border_light;
4
- }
5
- }
@@ -1 +0,0 @@
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.
@@ -1,58 +0,0 @@
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='subtle'>
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
@@ -1 +0,0 @@
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.
@@ -1,23 +0,0 @@
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 +0,0 @@
1
- The ` navBold` prop can be passed to NavItem