playbook_ui_docs 13.27.0.pre.alpha.powercentrainplaybookpt22905 → 13.27.0.pre.alpha.testingcollapsible2917
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/docs/_collapsible_custom_main.jsx +73 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +5 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +5 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
- data/dist/playbook-doc.js +4 -4
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c4d6b57eeffaa765c9c090f0c5a1383d3a0d936f584100c34e4a2d54d0bc49bb
|
|
4
|
+
data.tar.gz: a7ff852dfc6a775fb551257485d008ca23e3dd799849a7854b8346c2ce511f36
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d90ee5ae388bd319bb2523813c5be923c5d46d7b9fc68bc03126f01a86f47250e48d43daa3505495b3688d24569c0f8fbe71de634df6224581e2ae6bd01f65a1
|
|
7
|
+
data.tar.gz: f027b32612d0bf2a761b4197f14e91eca40ebe1f858283fe729f81cbdbad6548bab1d33efd01b959e6dc594a41a02d3cc3f4a7a47a8d0774520a22a8a38679cc
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
|
|
3
|
+
|
|
4
|
+
const CollapsibleCustomMain = () => {
|
|
5
|
+
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<Collapsible
|
|
10
|
+
collapsed={isCollapsed}
|
|
11
|
+
>
|
|
12
|
+
<Background
|
|
13
|
+
backgroundColor="white"
|
|
14
|
+
cursor="pointer"
|
|
15
|
+
htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
|
|
16
|
+
position="sticky"
|
|
17
|
+
top="0"
|
|
18
|
+
>
|
|
19
|
+
<Flex
|
|
20
|
+
align="center"
|
|
21
|
+
gap="sm"
|
|
22
|
+
justify="between"
|
|
23
|
+
>
|
|
24
|
+
<Title
|
|
25
|
+
size={4}
|
|
26
|
+
text="Custom Main Section"
|
|
27
|
+
/>
|
|
28
|
+
<Collapsible.Icon collapsed={isCollapsed}/>
|
|
29
|
+
</Flex>
|
|
30
|
+
</Background>
|
|
31
|
+
<Collapsible.Content padding="none">
|
|
32
|
+
<div>
|
|
33
|
+
<List>
|
|
34
|
+
<ListItem
|
|
35
|
+
align="stretch"
|
|
36
|
+
flexDirection="column"
|
|
37
|
+
>
|
|
38
|
+
Checklist item
|
|
39
|
+
</ListItem>
|
|
40
|
+
<ListItem
|
|
41
|
+
align="stretch"
|
|
42
|
+
flexDirection="column"
|
|
43
|
+
>
|
|
44
|
+
Checklist item
|
|
45
|
+
</ListItem>
|
|
46
|
+
<ListItem
|
|
47
|
+
align="stretch"
|
|
48
|
+
flexDirection="column"
|
|
49
|
+
>
|
|
50
|
+
Checklist item
|
|
51
|
+
</ListItem>
|
|
52
|
+
<ListItem
|
|
53
|
+
align="stretch"
|
|
54
|
+
flexDirection="column"
|
|
55
|
+
>
|
|
56
|
+
Checklist item
|
|
57
|
+
</ListItem>
|
|
58
|
+
<ListItem
|
|
59
|
+
align="stretch"
|
|
60
|
+
flexDirection="column"
|
|
61
|
+
>
|
|
62
|
+
Checklist item
|
|
63
|
+
</ListItem>
|
|
64
|
+
</List>
|
|
65
|
+
</div>
|
|
66
|
+
</Collapsible.Content>
|
|
67
|
+
</Collapsible>
|
|
68
|
+
|
|
69
|
+
</>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export default CollapsibleCustomMain
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
A custom Main section can also be used in place of the provided `Collapsible.Main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
|
|
2
|
+
|
|
3
|
+
If a custom component is used in place of the default, devs must handle collapsible toggling themselves via the useCollapsible hook as seen in this example.
|
|
4
|
+
|
|
5
|
+
The default Collapsible icon can also be used as part of the custom Main as shown, you will need to pass the Collapsible state to the `collapsed` prop on the optional `Collapsible.Icon`.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
|
|
2
|
+
<%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
|
|
3
|
+
<%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
|
|
4
|
+
<%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
|
|
5
|
+
<%= pb_rails("collapsible/collapsible_icon") %>
|
|
6
|
+
<% end %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
|
|
11
|
+
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
|
|
12
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
13
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
14
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
15
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
16
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
A custom Main section can also be used in place of the provided `collapsible/collapsible_main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
|
|
2
|
+
|
|
3
|
+
If a custom component is used in place of the default, devs must add `data: {"collapsible-main": "true"}` to the custom Main for toggling of the collapsible to work correctly.
|
|
4
|
+
|
|
5
|
+
The default Collapsible icon can also be used as part of the custom Main as shown with the optional `collapsible/collapsible_icon`. This optional subcomponent accepts all icon related props `color`, `icon` and `size`.
|
|
@@ -7,6 +7,7 @@ examples:
|
|
|
7
7
|
- collapsible_icons: Custom Icons
|
|
8
8
|
- collapsible_external_controls: Toggle Collapsible With External Controls
|
|
9
9
|
- collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
|
|
10
|
+
- collapsible_custom_main_rails: Custom Main Section
|
|
10
11
|
|
|
11
12
|
react:
|
|
12
13
|
- collapsible_default: Default
|
|
@@ -14,6 +15,8 @@ examples:
|
|
|
14
15
|
- collapsible_color: Icon Color
|
|
15
16
|
- collapsible_icons: Custom Icons
|
|
16
17
|
- collapsible_state: useCollapsible Hook
|
|
18
|
+
- collapsible_custom_main: Custom Main Section
|
|
19
|
+
|
|
17
20
|
|
|
18
21
|
swift:
|
|
19
22
|
- collapsible_default_swift: Default
|
|
@@ -2,4 +2,5 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
|
|
|
2
2
|
export { default as CollapsibleSize } from './_collapsible_size.jsx'
|
|
3
3
|
export { default as CollapsibleColor } from './_collapsible_color.jsx'
|
|
4
4
|
export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
|
|
5
|
-
export {default as CollapsibleState } from './_collapsible_state.jsx'
|
|
5
|
+
export { default as CollapsibleState } from './_collapsible_state.jsx'
|
|
6
|
+
export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
|