playbook_ui 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_button/_button.scss +3 -3
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -3
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +19 -10
- 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/app/pb_kits/playbook/pb_collapsible/index.js +16 -6
- data/app/pb_kits/playbook/pb_dashboard/commonSettings.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +1 -1
- data/app/pb_kits/playbook/tokens/_titles.scss +4 -4
- data/app/pb_kits/playbook/tokens/_typography.scss +10 -10
- data/dist/playbook-rails.js +3 -3
- data/dist/reset.css +1 -1
- data/lib/playbook/version.rb +1 -1
- 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: 139239375cde8415b10b6381e0d294df8666584609ff6c16002aab7f8cb2d5fa
|
|
4
|
+
data.tar.gz: 870ef281c575c7e7c752df452e3c368a197f0adfdbd9a7659259a7b713d4772d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 031cc99959af36b9584cf2a68cd7e0dd69fa59908292e5c7865d9d44329ca6955c1968fa3000b724aef7e6416fcb67f08a3dea5542a88d99234e0d79176b0345
|
|
7
|
+
data.tar.gz: 6614ed6e1c90b0d1c9e404952b1ef22759bd710389a156e821c796b550fca8bcb680615ddb2ee723ab7dc1f0a6c48af5ebfb5c43f58c7b67ce073a4c48defb5c
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
$pb_button_size: 40px;
|
|
11
11
|
$pb_button_v_padding: 7px;
|
|
12
|
-
$pb_button_h_padding:
|
|
12
|
+
$pb_button_h_padding: 34px;
|
|
13
13
|
$pb_button_hover_darken: 4%;
|
|
14
14
|
$pb_button_border_width: 0px;
|
|
15
15
|
|
|
@@ -27,13 +27,12 @@ $pb_button_border_width: 0px;
|
|
|
27
27
|
text-rendering: optimizeLegibility;
|
|
28
28
|
font-size: $font_small;
|
|
29
29
|
font-weight: $bold;
|
|
30
|
-
letter-spacing: $lspace_loose;
|
|
31
30
|
text-align: center;
|
|
32
31
|
vertical-align: middle;
|
|
33
32
|
text-transform: none;
|
|
34
33
|
border-width: $pb_button_border_width;
|
|
35
34
|
border-style: solid;
|
|
36
|
-
border-radius: $
|
|
35
|
+
border-radius: $border_rad_light;
|
|
37
36
|
min-height: $pb_button_size;
|
|
38
37
|
line-height: 1.5;
|
|
39
38
|
padding: $pb_button_v_padding $pb_button_h_padding;
|
|
@@ -52,12 +52,15 @@ const Collapsible = ({
|
|
|
52
52
|
if (CollapsibleParent.length !== 2) {
|
|
53
53
|
throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
|
|
54
54
|
}
|
|
55
|
+
const FirstChild = CollapsibleParent[0]
|
|
56
|
+
const SecondChild = CollapsibleParent[1]
|
|
55
57
|
|
|
56
|
-
const Main =
|
|
57
|
-
const Content =
|
|
58
|
+
const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
|
|
59
|
+
const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
|
|
58
60
|
|
|
59
|
-
|
|
60
|
-
const { children:
|
|
61
|
+
|
|
62
|
+
const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
|
|
63
|
+
const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
|
|
61
64
|
const ariaProps = buildAriaProps(aria)
|
|
62
65
|
const dataProps = buildDataProps(data)
|
|
63
66
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
@@ -75,13 +78,19 @@ const Collapsible = ({
|
|
|
75
78
|
className={classes}
|
|
76
79
|
id={id}
|
|
77
80
|
>
|
|
78
|
-
|
|
79
|
-
{
|
|
80
|
-
|
|
81
|
+
{Main ? (
|
|
82
|
+
<CollapsibleMain {...mainProps}>
|
|
83
|
+
{mainChildren}
|
|
84
|
+
</CollapsibleMain>
|
|
85
|
+
) : (
|
|
86
|
+
FirstChild
|
|
87
|
+
)}
|
|
81
88
|
|
|
82
|
-
|
|
83
|
-
{
|
|
84
|
-
|
|
89
|
+
{Content && (
|
|
90
|
+
<CollapsibleContent {...contentProps}>
|
|
91
|
+
{contentChildren}
|
|
92
|
+
</CollapsibleContent>
|
|
93
|
+
)}
|
|
85
94
|
</div>
|
|
86
95
|
</CollapsibleContext.Provider>
|
|
87
96
|
)
|
|
@@ -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'
|
|
@@ -75,13 +75,23 @@ export default class PbCollapsible extends PbEnhancedElement {
|
|
|
75
75
|
this.displayUpArrow()
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
toggleArrows(showDownArrow) {
|
|
79
|
+
const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
|
|
80
|
+
const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
|
|
81
|
+
|
|
82
|
+
if (downArrow) {
|
|
83
|
+
downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
|
|
84
|
+
}
|
|
85
|
+
if (upArrow) {
|
|
86
|
+
upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
78
90
|
displayDownArrow() {
|
|
79
|
-
this.
|
|
80
|
-
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
|
|
91
|
+
this.toggleArrows(true);
|
|
81
92
|
}
|
|
82
|
-
|
|
93
|
+
|
|
83
94
|
displayUpArrow() {
|
|
84
|
-
this.
|
|
85
|
-
|
|
86
|
-
}
|
|
95
|
+
this.toggleArrows(false);
|
|
96
|
+
}
|
|
87
97
|
}
|
|
@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
|
|
|
53
53
|
/* Change axis label styles */
|
|
54
54
|
axis.labels.style.fontFamily = typography.font_family_base
|
|
55
55
|
axis.labels.style.color = colors.charcoal
|
|
56
|
-
axis.labels.style.fontWeight = typography.
|
|
56
|
+
axis.labels.style.fontWeight = typography.light
|
|
57
57
|
axis.labels.style.fontSize = typography.font_small
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -5,11 +5,10 @@
|
|
|
5
5
|
@mixin pb_title(
|
|
6
6
|
$fontSize: $heading_1,
|
|
7
7
|
$fontWeight: $lighter,
|
|
8
|
-
$lineHeight: $lh_tighter
|
|
9
|
-
$letterSpacing: $lspace_tight
|
|
8
|
+
$lineHeight: $lh_tighter
|
|
10
9
|
){
|
|
11
10
|
font-size: $fontSize;
|
|
12
|
-
letter-spacing: $
|
|
11
|
+
letter-spacing: $lspace_tight;
|
|
13
12
|
font-weight: $fontWeight;
|
|
14
13
|
color: $text_lt_default;
|
|
15
14
|
margin: 0;
|
|
@@ -30,7 +29,8 @@
|
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
@mixin pb_title_4 {
|
|
33
|
-
@include pb_title($heading_4, $bolder
|
|
32
|
+
@include pb_title($heading_4, $bolder);
|
|
33
|
+
letter-spacing: -0.03em;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
@mixin pb_title_dark {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
$font_family_base: "
|
|
1
|
+
$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
|
|
2
2
|
|
|
3
3
|
/* CLEAN UP AND REMOVE */
|
|
4
4
|
$font_jumbo: 36px !default;
|
|
5
5
|
$font_largest: 32px !default;
|
|
6
|
-
$font_larger:
|
|
6
|
+
$font_larger: 28px !default;
|
|
7
7
|
$font_large: 20px !default;
|
|
8
|
-
$font_base:
|
|
8
|
+
$font_base: 16px !default;
|
|
9
9
|
$font_default: $font_base !default;
|
|
10
10
|
$font_normal: $font_base !default;
|
|
11
11
|
$font_medium: $font_base !default;
|
|
@@ -26,8 +26,8 @@ $text_smaller: $font_smaller !default;
|
|
|
26
26
|
$text_smallest: $font_smallest !default;
|
|
27
27
|
|
|
28
28
|
/* Headings */
|
|
29
|
-
$heading_1:
|
|
30
|
-
$heading_2:
|
|
29
|
+
$heading_1: 46px !default;
|
|
30
|
+
$heading_2: 34px !default;
|
|
31
31
|
$heading_3: $font_larger !default;
|
|
32
32
|
$heading_4: $font_base !default;
|
|
33
33
|
|
|
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
|
|
|
35
35
|
$lspace_tightest: -.1em !default;
|
|
36
36
|
$lspace_tighter: -.07em !default;
|
|
37
37
|
$lspace_tight: -.01em !default;
|
|
38
|
-
$lspace_normal:
|
|
38
|
+
$lspace_normal: 0 !default;
|
|
39
39
|
$lspace_loose: .03em !default;
|
|
40
40
|
$lspace_looser: .07em !default;
|
|
41
41
|
$lspace_loosest: .1em !default;
|
|
42
42
|
$lspace_super_loosest: .2em !default;
|
|
43
43
|
|
|
44
44
|
/* Standard Font Weights */
|
|
45
|
-
$bold:
|
|
45
|
+
$bold: 600 !default;
|
|
46
46
|
$regular: 400 !default;
|
|
47
47
|
|
|
48
48
|
/* Non_Standard Font Weights */
|
|
49
|
-
$extrabold:
|
|
50
|
-
$boldest:
|
|
49
|
+
$extrabold: 900 !default;
|
|
50
|
+
$boldest: 800 !default;
|
|
51
51
|
$bolder: 700 !default;
|
|
52
52
|
$light: 300 !default;
|
|
53
|
-
$lighter:
|
|
53
|
+
$lighter: 100 !default;
|