playbook_ui 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936
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_mixins.scss +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +0 -2
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +21 -10
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +92 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +3 -75
- data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb +15 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb +37 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_collapsible/index.js +16 -6
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +4 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +13 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +13 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +2 -8
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +2 -6
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +2 -12
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +8 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +19 -0
- data/dist/menu.yml +2 -2
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/forms/builder/phone_number_field.rb +12 -0
- data/lib/playbook/forms/builder.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +40 -6
- /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6cdef0664f0e77477ac8bb6d3bb3df67732b49ffb2f9cb023f5c1a5867b41876
|
4
|
+
data.tar.gz: 1a9b4e68cd2dc788f5e90fc2e0aa6af63b2ed20a7d1f789997d77cbe14e3b6b9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f0c7b178ef804dc44461454d8004b56a565fca3393d8253e464f2d91b323be6c08e60e9354384c21a5e28528f453b428f5f73d7e6a63bee4578f07d8f9c0cd7d
|
7
|
+
data.tar.gz: 011c22b7c47a434fd173956c7a16a1126ca4b79c3408360c0cfc1b4d9752248237de24bf40ed9a29f5fee2da98b3599d0a8f9299a065a30b78205d2976ffef81
|
@@ -20,7 +20,6 @@ $transition: $transition_cubic;
|
|
20
20
|
border: solid $border_light 2px;
|
21
21
|
border-radius: $border_rad_light;
|
22
22
|
height: 22px;
|
23
|
-
position: relative;
|
24
23
|
transition: background $transition_default ease, box-shadow $transition_default ease;
|
25
24
|
width: 22px;
|
26
25
|
.check_icon,
|
@@ -28,7 +27,6 @@ $transition: $transition_cubic;
|
|
28
27
|
color: $white;
|
29
28
|
height: 16px;
|
30
29
|
left: 1px;
|
31
|
-
position: relative;
|
32
30
|
display: flex;
|
33
31
|
opacity: 0;
|
34
32
|
width: 16px;
|
@@ -9,6 +9,7 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
|
|
9
9
|
import CollapsibleMain from './child_kits/CollapsibleMain'
|
10
10
|
import CollapsibleContext from './context'
|
11
11
|
import { IconSizes } from "../pb_icon/_icon"
|
12
|
+
import CollapsibleIcon from './child_kits/CollapsibleIcon'
|
12
13
|
|
13
14
|
|
14
15
|
type CollapsibleProps = {
|
@@ -52,12 +53,15 @@ const Collapsible = ({
|
|
52
53
|
if (CollapsibleParent.length !== 2) {
|
53
54
|
throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
|
54
55
|
}
|
56
|
+
const FirstChild = CollapsibleParent[0]
|
57
|
+
const SecondChild = CollapsibleParent[1]
|
55
58
|
|
56
|
-
const Main =
|
57
|
-
const Content =
|
59
|
+
const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
|
60
|
+
const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
|
58
61
|
|
59
|
-
|
60
|
-
const { children:
|
62
|
+
|
63
|
+
const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
|
64
|
+
const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
|
61
65
|
const ariaProps = buildAriaProps(aria)
|
62
66
|
const dataProps = buildDataProps(data)
|
63
67
|
const htmlProps = buildHtmlProps(htmlOptions)
|
@@ -75,13 +79,19 @@ const Collapsible = ({
|
|
75
79
|
className={classes}
|
76
80
|
id={id}
|
77
81
|
>
|
78
|
-
|
79
|
-
{
|
80
|
-
|
82
|
+
{Main ? (
|
83
|
+
<CollapsibleMain {...mainProps}>
|
84
|
+
{mainChildren}
|
85
|
+
</CollapsibleMain>
|
86
|
+
) : (
|
87
|
+
FirstChild
|
88
|
+
)}
|
81
89
|
|
82
|
-
|
83
|
-
{
|
84
|
-
|
90
|
+
{Content && (
|
91
|
+
<CollapsibleContent {...contentProps}>
|
92
|
+
{contentChildren}
|
93
|
+
</CollapsibleContent>
|
94
|
+
)}
|
85
95
|
</div>
|
86
96
|
</CollapsibleContext.Provider>
|
87
97
|
)
|
@@ -89,5 +99,6 @@ const Collapsible = ({
|
|
89
99
|
|
90
100
|
Collapsible.Main = CollapsibleMain
|
91
101
|
Collapsible.Content = CollapsibleContent
|
102
|
+
Collapsible.Icon = CollapsibleIcon
|
92
103
|
|
93
104
|
export default Collapsible
|
@@ -0,0 +1,92 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Icon, { IconSizes } from "../../pb_icon/_icon";
|
3
|
+
|
4
|
+
type IconColors =
|
5
|
+
| "default"
|
6
|
+
| "light"
|
7
|
+
| "lighter"
|
8
|
+
| "link"
|
9
|
+
| "error"
|
10
|
+
| "success";
|
11
|
+
|
12
|
+
type IconProps = {
|
13
|
+
collapsed: boolean | (() => void);
|
14
|
+
icon?: string[] | string;
|
15
|
+
iconColor?: IconColors;
|
16
|
+
iconSize?: IconSizes;
|
17
|
+
onIconClick?: () => void;
|
18
|
+
};
|
19
|
+
|
20
|
+
type colorMap = {
|
21
|
+
default: string;
|
22
|
+
light: string;
|
23
|
+
lighter: string;
|
24
|
+
link: string;
|
25
|
+
error: string;
|
26
|
+
success: string;
|
27
|
+
};
|
28
|
+
|
29
|
+
const colorMap = {
|
30
|
+
default: "#242B42",
|
31
|
+
light: "#687887",
|
32
|
+
lighter: "#C1CDD6",
|
33
|
+
link: "#0056CF",
|
34
|
+
error: "#FF2229",
|
35
|
+
success: "#00CA74",
|
36
|
+
};
|
37
|
+
|
38
|
+
const CollapsibleIcon = ({
|
39
|
+
collapsed,
|
40
|
+
icon,
|
41
|
+
iconSize,
|
42
|
+
iconColor,
|
43
|
+
onIconClick,
|
44
|
+
}: IconProps) => {
|
45
|
+
const color = colorMap[iconColor];
|
46
|
+
|
47
|
+
const showIcon = (icon: string | string[]) => {
|
48
|
+
if (typeof icon === "string") {
|
49
|
+
return [icon, icon];
|
50
|
+
}
|
51
|
+
return icon;
|
52
|
+
};
|
53
|
+
|
54
|
+
const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
|
55
|
+
if (onIconClick) {
|
56
|
+
e.stopPropagation();
|
57
|
+
onIconClick();
|
58
|
+
}
|
59
|
+
};
|
60
|
+
|
61
|
+
return (
|
62
|
+
<>
|
63
|
+
{collapsed ? (
|
64
|
+
<div
|
65
|
+
className="icon_wrapper"
|
66
|
+
key={icon ? showIcon(icon)[0] : "chevron-down"}
|
67
|
+
onClick={(e) => handleIconClick(e)}
|
68
|
+
style={{ verticalAlign: "middle", color: color }}
|
69
|
+
>
|
70
|
+
<Icon
|
71
|
+
icon={icon ? showIcon(icon)[0] : "chevron-down"}
|
72
|
+
size={iconSize}
|
73
|
+
/>
|
74
|
+
</div>
|
75
|
+
) : (
|
76
|
+
<div
|
77
|
+
className="icon_wrapper"
|
78
|
+
key={icon ? showIcon(icon)[1] : "chevron-up"}
|
79
|
+
onClick={(e) => handleIconClick(e)}
|
80
|
+
style={{ verticalAlign: "middle", color: color }}
|
81
|
+
>
|
82
|
+
<Icon
|
83
|
+
icon={icon ? showIcon(icon)[1] : "chevron-up"}
|
84
|
+
size={iconSize}
|
85
|
+
/>
|
86
|
+
</div>
|
87
|
+
)}
|
88
|
+
</>
|
89
|
+
);
|
90
|
+
};
|
91
|
+
|
92
|
+
export default CollapsibleIcon;
|
@@ -7,27 +7,9 @@ import { globalProps } from '../../utilities/globalProps'
|
|
7
7
|
|
8
8
|
import Flex from '../../pb_flex/_flex'
|
9
9
|
import FlexItem from '../../pb_flex/_flex_item'
|
10
|
-
import
|
10
|
+
import { IconSizes } from "../../pb_icon/_icon"
|
11
11
|
import CollapsibleContext from '../context'
|
12
|
-
|
13
|
-
|
14
|
-
type colorMap = {
|
15
|
-
default: string,
|
16
|
-
light: string,
|
17
|
-
lighter: string,
|
18
|
-
link: string,
|
19
|
-
error: string,
|
20
|
-
success: string
|
21
|
-
}
|
22
|
-
|
23
|
-
const colorMap = {
|
24
|
-
default: "#242B42",
|
25
|
-
light: "#687887",
|
26
|
-
lighter: "#C1CDD6",
|
27
|
-
link: "#0056CF",
|
28
|
-
error: "#FF2229",
|
29
|
-
success: "#00CA74",
|
30
|
-
}
|
12
|
+
import CollapsibleIcon from './CollapsibleIcon'
|
31
13
|
|
32
14
|
type CollapsibleMainProps = {
|
33
15
|
children: React.ReactNode[] | React.ReactNode,
|
@@ -38,60 +20,6 @@ type CollapsibleMainProps = {
|
|
38
20
|
}
|
39
21
|
type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success"
|
40
22
|
|
41
|
-
type IconProps = {
|
42
|
-
collapsed: boolean | (()=> void)
|
43
|
-
icon?: string[] | string
|
44
|
-
iconColor?: IconColors
|
45
|
-
iconSize?: IconSizes
|
46
|
-
onIconClick?: ()=> void
|
47
|
-
}
|
48
|
-
|
49
|
-
const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
|
50
|
-
const color = colorMap[iconColor]
|
51
|
-
|
52
|
-
const showIcon = (icon: string |string[]) => {
|
53
|
-
if (typeof icon === "string") {
|
54
|
-
return [icon, icon]
|
55
|
-
}
|
56
|
-
return icon
|
57
|
-
}
|
58
|
-
|
59
|
-
const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
|
60
|
-
if (onIconClick) {
|
61
|
-
e.stopPropagation();
|
62
|
-
onIconClick()
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
return (
|
67
|
-
<>
|
68
|
-
{collapsed ? (
|
69
|
-
<div
|
70
|
-
className="icon_wrapper"
|
71
|
-
key={icon ? showIcon(icon)[0] : "chevron-down"}
|
72
|
-
onClick={(e)=> handleIconClick(e)}
|
73
|
-
style={{ verticalAlign: "middle", color: color }}
|
74
|
-
>
|
75
|
-
<Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
|
76
|
-
size={iconSize}
|
77
|
-
/>
|
78
|
-
</div>
|
79
|
-
) : (
|
80
|
-
<div
|
81
|
-
className="icon_wrapper"
|
82
|
-
key={icon ? showIcon(icon)[1] : "chevron-up"}
|
83
|
-
onClick={(e)=> handleIconClick(e)}
|
84
|
-
style={{ verticalAlign: "middle", color: color }}
|
85
|
-
>
|
86
|
-
<Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
|
87
|
-
size={iconSize}
|
88
|
-
/>
|
89
|
-
</div>
|
90
|
-
)}
|
91
|
-
</>
|
92
|
-
);
|
93
|
-
}
|
94
|
-
|
95
23
|
const CollapsibleMain = ({
|
96
24
|
children,
|
97
25
|
className,
|
@@ -120,7 +48,7 @@ const CollapsibleMain = ({
|
|
120
48
|
>
|
121
49
|
<FlexItem>{children}</FlexItem>
|
122
50
|
<FlexItem>
|
123
|
-
<
|
51
|
+
<CollapsibleIcon
|
124
52
|
collapsed={collapsed as () => void}
|
125
53
|
icon={icon as string[] | string}
|
126
54
|
iconColor={iconColor as IconColors}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<%= content_tag(:div,
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname,
|
5
|
+
aria: object.aria,
|
6
|
+
style: "color: #{object.icon_color};",
|
7
|
+
**combined_html_options) do %>
|
8
|
+
<% if object.icon.present? %>
|
9
|
+
<%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
|
10
|
+
<%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
|
11
|
+
<% else %>
|
12
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
|
13
|
+
<%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
|
14
|
+
<% end %>
|
15
|
+
<% end %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbCollapsible
|
5
|
+
class CollapsibleIcon < Playbook::KitBase
|
6
|
+
prop :collapsed, type: Playbook::Props::Boolean,
|
7
|
+
default: true
|
8
|
+
prop :color, type: Playbook::Props::Enum,
|
9
|
+
values: %w[default light lighter link success error],
|
10
|
+
default: "default"
|
11
|
+
prop :icon
|
12
|
+
prop :size, type: Playbook::Props::Enum,
|
13
|
+
values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
|
14
|
+
default: nil
|
15
|
+
|
16
|
+
def classname
|
17
|
+
generate_classname("pb_collapsible_icon_kit", separator: " ")
|
18
|
+
end
|
19
|
+
|
20
|
+
def show_icon(icon)
|
21
|
+
case icon
|
22
|
+
when ::String
|
23
|
+
[icon, icon]
|
24
|
+
when ::Array
|
25
|
+
icon
|
26
|
+
end
|
27
|
+
end
|
28
|
+
|
29
|
+
def icon_color
|
30
|
+
return "" if color.nil?
|
31
|
+
|
32
|
+
color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
|
33
|
+
color_object[color.to_sym]
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
@@ -0,0 +1,72 @@
|
|
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
|
+
</Flex>
|
29
|
+
</Background>
|
30
|
+
<Collapsible.Content padding="none">
|
31
|
+
<div>
|
32
|
+
<List>
|
33
|
+
<ListItem
|
34
|
+
align="stretch"
|
35
|
+
flexDirection="column"
|
36
|
+
>
|
37
|
+
Checklist item
|
38
|
+
</ListItem>
|
39
|
+
<ListItem
|
40
|
+
align="stretch"
|
41
|
+
flexDirection="column"
|
42
|
+
>
|
43
|
+
Checklist item
|
44
|
+
</ListItem>
|
45
|
+
<ListItem
|
46
|
+
align="stretch"
|
47
|
+
flexDirection="column"
|
48
|
+
>
|
49
|
+
Checklist item
|
50
|
+
</ListItem>
|
51
|
+
<ListItem
|
52
|
+
align="stretch"
|
53
|
+
flexDirection="column"
|
54
|
+
>
|
55
|
+
Checklist item
|
56
|
+
</ListItem>
|
57
|
+
<ListItem
|
58
|
+
align="stretch"
|
59
|
+
flexDirection="column"
|
60
|
+
>
|
61
|
+
Checklist item
|
62
|
+
</ListItem>
|
63
|
+
</List>
|
64
|
+
</div>
|
65
|
+
</Collapsible.Content>
|
66
|
+
</Collapsible>
|
67
|
+
|
68
|
+
</>
|
69
|
+
)
|
70
|
+
}
|
71
|
+
|
72
|
+
export default CollapsibleCustomMain
|
@@ -0,0 +1,3 @@
|
|
1
|
+
Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
|
2
|
+
|
3
|
+
__NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.
|
@@ -0,0 +1,19 @@
|
|
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
|
+
<% end %>
|
6
|
+
<% end %>
|
7
|
+
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
8
|
+
<% end %>
|
9
|
+
<%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
|
10
|
+
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
|
11
|
+
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
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
|
+
<% end %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
19
|
+
|
@@ -0,0 +1,3 @@
|
|
1
|
+
Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
|
2
|
+
|
3
|
+
__NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.
|
@@ -0,0 +1,73 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
|
3
|
+
|
4
|
+
const CollapsibleCustomMainWithIcon = () => {
|
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 CollapsibleCustomMainWithIcon
|
@@ -0,0 +1,3 @@
|
|
1
|
+
When using a custom Main Section, you can also use the optional `Collapsible.Icon`.
|
2
|
+
|
3
|
+
__NOTE__: The optional icon subcomponent must receive the `collapsed` state of the collapsible in order to toggle correctly. It also accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
|
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb
ADDED
@@ -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,3 @@
|
|
1
|
+
When using a custom Main Section, you can also use the optional `collapsible/collapsible_icon` subcomponent.
|
2
|
+
|
3
|
+
__NOTE__: The optional icon subcomponent accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
|
@@ -7,6 +7,9 @@ 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
|
11
|
+
- collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
|
12
|
+
|
10
13
|
|
11
14
|
react:
|
12
15
|
- collapsible_default: Default
|
@@ -14,6 +17,10 @@ examples:
|
|
14
17
|
- collapsible_color: Icon Color
|
15
18
|
- collapsible_icons: Custom Icons
|
16
19
|
- collapsible_state: useCollapsible Hook
|
20
|
+
- collapsible_custom_main: Custom Main Section
|
21
|
+
- collapsible_custom_main_with_icon: Custom Main Section With Icon
|
22
|
+
|
23
|
+
|
17
24
|
|
18
25
|
swift:
|
19
26
|
- collapsible_default_swift: Default
|
@@ -2,4 +2,6 @@ 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'
|
7
|
+
export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.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
|
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+

|
2
|
+
|
3
|
+
```swift
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.large) {
|
5
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
6
|
+
PBDateRangeInline(
|
7
|
+
size: .caption,
|
8
|
+
iconSize: .xSmall,
|
9
|
+
startDate: "18 Jun 2013",
|
10
|
+
endDate: "20 Mar 2015",
|
11
|
+
startVariant: .standard
|
12
|
+
)
|
13
|
+
PBDateRangeInline(
|
14
|
+
size: .body,
|
15
|
+
iconSize: .x1,
|
16
|
+
startDate: "18 Jun 2013",
|
17
|
+
endDate: "20 Mar 2015",
|
18
|
+
startVariant: .standard
|
19
|
+
)
|
20
|
+
}
|
21
|
+
.frame(maxWidth: .infinity, alignment: .leading)
|
22
|
+
VStack(alignment: .center, spacing: Spacing.small) {
|
23
|
+
PBDateRangeInline(
|
24
|
+
size: .caption,
|
25
|
+
iconSize: .xSmall,
|
26
|
+
startDate: "15 Jan 2013",
|
27
|
+
endDate: "15 Aug 2015",
|
28
|
+
startVariant: .short(showIcon: true),
|
29
|
+
endVariant: .short(showIcon: false)
|
30
|
+
)
|
31
|
+
PBDateRangeInline(
|
32
|
+
size: .body,
|
33
|
+
iconSize: .x1,
|
34
|
+
startDate: "15 Jan 2013",
|
35
|
+
endDate: "15 Aug 2015",
|
36
|
+
startVariant: .short(showIcon: true),
|
37
|
+
endVariant: .short(showIcon: false)
|
38
|
+
)
|
39
|
+
}
|
40
|
+
.frame(maxWidth: .infinity, alignment: .center)
|
41
|
+
VStack(alignment: .trailing, spacing: Spacing.small) {
|
42
|
+
PBDateRangeInline(
|
43
|
+
size: .caption,
|
44
|
+
iconSize: .xSmall,
|
45
|
+
startDate: "15 Jan 2013",
|
46
|
+
endDate: "15 Aug 2015",
|
47
|
+
startVariant: .short(showIcon: true),
|
48
|
+
endVariant: .short(showIcon: false)
|
49
|
+
)
|
50
|
+
PBDateRangeInline(
|
51
|
+
size: .body,
|
52
|
+
iconSize: .x1,
|
53
|
+
startDate: "15 Jan 2013",
|
54
|
+
endDate: "15 Aug 2015",
|
55
|
+
startVariant: .short(showIcon: true),
|
56
|
+
endVariant: .short(showIcon: false)
|
57
|
+
)
|
58
|
+
}
|
59
|
+
.frame(maxWidth: .infinity, alignment: .trailing)
|
60
|
+
}
|
61
|
+
```
|