playbook_ui_docs 13.27.0.pre.alpha.powercentrainplaybookpt22905 → 13.27.0.pre.alpha.testingcollapsible2912
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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'
|