playbook_ui 12.38.0.pre.alpha.PLAY966collapsiblenav41086 → 12.38.0.pre.alpha.PLAYaddingdatapropselectkit1080
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 +25 -101
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -22
- 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_attributes.html.erb +26 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_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 +2 -8
- data/app/pb_kits/playbook/pb_select/select.rb +14 -0
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -10
- 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.38.0.pre.alpha.
|
4
|
+
version: 12.38.0.pre.alpha.PLAYaddingdatapropselectkit1080
|
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/
|
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
|
@@ -1859,6 +1851,8 @@ files:
|
|
1859
1851
|
- app/pb_kits/playbook/pb_select/_select.tsx
|
1860
1852
|
- app/pb_kits/playbook/pb_select/docs/_description.md
|
1861
1853
|
- app/pb_kits/playbook/pb_select/docs/_footer.md
|
1854
|
+
- app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb
|
1855
|
+
- app/pb_kits/playbook/pb_select/docs/_select_attributes.md
|
1862
1856
|
- app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb
|
1863
1857
|
- app/pb_kits/playbook/pb_select/docs/_select_blank.jsx
|
1864
1858
|
- app/pb_kits/playbook/pb_select/docs/_select_custom_select.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='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
|