playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31078 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -6
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +9 -10
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +8 -4
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -7
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +17 -280
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +0 -6
- data/app/pb_kits/playbook/pb_nav/_item.tsx +22 -35
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +7 -6
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +58 -85
- data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx} +5 -14
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -5
- data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -5
- data/app/pb_kits/playbook/pb_nav/item.rb +3 -29
- data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb +24 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -11
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -75
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +0 -3
- data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +0 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +0 -58
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +0 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +0 -1
data/lib/playbook/version.rb
CHANGED
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.37.0.pre.alpha.
|
4
|
+
version: 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-08-
|
12
|
+
date: 2023-08-15 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -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/
|
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
|
@@ -1863,6 +1855,8 @@ files:
|
|
1863
1855
|
- app/pb_kits/playbook/pb_select/docs/_select_blank.jsx
|
1864
1856
|
- app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb
|
1865
1857
|
- app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx
|
1858
|
+
- app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb
|
1859
|
+
- app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md
|
1866
1860
|
- app/pb_kits/playbook/pb_select/docs/_select_default.html.erb
|
1867
1861
|
- app/pb_kits/playbook/pb_select/docs/_select_default.jsx
|
1868
1862
|
- app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb
|
@@ -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 +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='bold'>
|
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
|