playbook_ui_docs 13.27.0.pre.alpha.powercentrainplaybookpt22905 → 13.27.0.pre.alpha.testingcollapsible2912
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.html.erb +23 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +76 -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 +3 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9a85374fd9143acd2db66e83e92a0dce23993dc763dd17a10f4a4c15c241b1d0
|
|
4
|
+
data.tar.gz: eb3fa1cc1d0e7031301cf09e24cf73005111ed1363a3bd1b467792df66690572
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9d955d8734dbdeadfa5963b331acb768b79d991ae9052633659630d9a8578e62bfd9869a75de17cdd6b9aa79b65ad777ee171c40526a1d1ebc38c4027b233f45
|
|
7
|
+
data.tar.gz: d34ee87e7f1540dc1c700445e1a666cdc026a50a944d96e5f3273207026d56f24f8870546c7c85437ddd8464020ade6cc34fb497303f3ba1b95ed0d09bcd3f25
|
|
@@ -0,0 +1,23 @@
|
|
|
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("icon_circle", props: {
|
|
6
|
+
icon: "check",
|
|
7
|
+
size: "xs"
|
|
8
|
+
}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
|
12
|
+
<% end %>
|
|
13
|
+
<%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
|
|
14
|
+
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
|
|
15
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
16
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
17
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
18
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
19
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Collapsible, useCollapsible, Background, Flex, Title, IconCircle, 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
|
+
<IconCircle
|
|
29
|
+
icon="check"
|
|
30
|
+
size="xs"
|
|
31
|
+
/>
|
|
32
|
+
</Flex>
|
|
33
|
+
</Background>
|
|
34
|
+
<Collapsible.Content padding="none">
|
|
35
|
+
<div>
|
|
36
|
+
<List>
|
|
37
|
+
<ListItem
|
|
38
|
+
align="stretch"
|
|
39
|
+
flexDirection="column"
|
|
40
|
+
>
|
|
41
|
+
Checklist item
|
|
42
|
+
</ListItem>
|
|
43
|
+
<ListItem
|
|
44
|
+
align="stretch"
|
|
45
|
+
flexDirection="column"
|
|
46
|
+
>
|
|
47
|
+
Checklist item
|
|
48
|
+
</ListItem>
|
|
49
|
+
<ListItem
|
|
50
|
+
align="stretch"
|
|
51
|
+
flexDirection="column"
|
|
52
|
+
>
|
|
53
|
+
Checklist item
|
|
54
|
+
</ListItem>
|
|
55
|
+
<ListItem
|
|
56
|
+
align="stretch"
|
|
57
|
+
flexDirection="column"
|
|
58
|
+
>
|
|
59
|
+
Checklist item
|
|
60
|
+
</ListItem>
|
|
61
|
+
<ListItem
|
|
62
|
+
align="stretch"
|
|
63
|
+
flexDirection="column"
|
|
64
|
+
>
|
|
65
|
+
Checklist item
|
|
66
|
+
</ListItem>
|
|
67
|
+
</List>
|
|
68
|
+
</div>
|
|
69
|
+
</Collapsible.Content>
|
|
70
|
+
</Collapsible>
|
|
71
|
+
|
|
72
|
+
</>
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default CollapsibleCustomMain
|
|
@@ -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: Custom Main
|
|
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
|
|
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'
|