playbook_ui 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_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;
|