playbook_ui 13.33.1 → 13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366
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_advanced_table/Components/TableHeaderCell.tsx +5 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +25 -20
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +82 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
- data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -6
- data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +31 -32
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +3 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +33 -32
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +3 -7
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +9 -0
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +25 -19
- data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -3
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +71 -64
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -5
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +37 -31
- data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +4 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +11 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +52 -17
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb +5 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +16 -9
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +6 -1
- data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
- data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
- data/app/pb_kits/playbook/pb_icon/_icon.scss +17 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +5 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +34 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +9 -1
- data/app/pb_kits/playbook/pb_icon/icon.test.js +22 -9
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +132 -201
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +28 -33
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx +14 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +81 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +56 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +64 -0
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +2 -2
- metadata +15 -5
@@ -1,73 +1,74 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
2
|
+
import PropTypes from 'prop-types'
|
3
|
+
import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
|
3
4
|
|
4
|
-
const CollapsibleCustomMainWithIcon = () => {
|
5
|
+
const CollapsibleCustomMainWithIcon = (props) => {
|
5
6
|
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
|
6
7
|
|
7
8
|
return (
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
</Flex>
|
30
|
-
</Background>
|
31
|
-
<Collapsible.Content padding="none">
|
9
|
+
<>
|
10
|
+
<Collapsible collapsed={isCollapsed}>
|
11
|
+
<Flex
|
12
|
+
align="center"
|
13
|
+
cursor="pointer"
|
14
|
+
gap="sm"
|
15
|
+
htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
|
16
|
+
justify="between"
|
17
|
+
position="sticky"
|
18
|
+
top="0"
|
19
|
+
>
|
20
|
+
<Title
|
21
|
+
dark={props.dark}
|
22
|
+
size={4}
|
23
|
+
text="Custom Main Section"
|
24
|
+
/>
|
25
|
+
<Collapsible.Icon collapsed={isCollapsed} />
|
26
|
+
</Flex>
|
27
|
+
<Collapsible.Content
|
28
|
+
padding="none"
|
29
|
+
>
|
32
30
|
<div>
|
33
31
|
<List>
|
34
32
|
<ListItem
|
35
33
|
align="stretch"
|
36
34
|
flexDirection="column"
|
37
35
|
>
|
38
|
-
Checklist item
|
36
|
+
{"Checklist item"}
|
39
37
|
</ListItem>
|
40
38
|
<ListItem
|
41
39
|
align="stretch"
|
42
40
|
flexDirection="column"
|
43
41
|
>
|
44
|
-
Checklist item
|
42
|
+
{"Checklist item"}
|
45
43
|
</ListItem>
|
46
44
|
<ListItem
|
47
45
|
align="stretch"
|
48
46
|
flexDirection="column"
|
49
47
|
>
|
50
|
-
Checklist item
|
48
|
+
{"Checklist item"}
|
51
49
|
</ListItem>
|
52
50
|
<ListItem
|
53
51
|
align="stretch"
|
54
52
|
flexDirection="column"
|
55
53
|
>
|
56
|
-
Checklist item
|
54
|
+
{"Checklist item"}
|
57
55
|
</ListItem>
|
58
56
|
<ListItem
|
59
57
|
align="stretch"
|
60
58
|
flexDirection="column"
|
61
59
|
>
|
62
|
-
Checklist item
|
60
|
+
{"Checklist item"}
|
63
61
|
</ListItem>
|
64
62
|
</List>
|
65
63
|
</div>
|
66
64
|
</Collapsible.Content>
|
67
65
|
</Collapsible>
|
68
|
-
|
69
66
|
</>
|
70
67
|
)
|
71
68
|
}
|
72
69
|
|
70
|
+
CollapsibleCustomMainWithIcon.propTypes = {
|
71
|
+
dark: PropTypes.bool,
|
72
|
+
}
|
73
|
+
|
73
74
|
export default CollapsibleCustomMainWithIcon
|
data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb
CHANGED
@@ -1,12 +1,8 @@
|
|
1
1
|
<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
|
2
|
-
|
3
|
-
|
4
|
-
<%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
|
2
|
+
<%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true" }, align: "center", gap: "sm", justify: "between" }) do %>
|
3
|
+
<%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
|
5
4
|
<%= pb_rails("collapsible/collapsible_icon") %>
|
6
|
-
|
7
|
-
<% end %>
|
8
|
-
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
9
|
-
<% end %>
|
5
|
+
<% end %>
|
10
6
|
<%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
|
11
7
|
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
|
12
8
|
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import PropTypes from 'prop-types';
|
2
3
|
import { Collapsible, useCollapsible, Button } from '../..'
|
3
4
|
|
4
5
|
const CollapsibleState = (props) => {
|
@@ -7,6 +8,7 @@ const CollapsibleState = (props) => {
|
|
7
8
|
return (
|
8
9
|
<>
|
9
10
|
<Button
|
11
|
+
dark={props.dark}
|
10
12
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
11
13
|
padding="none"
|
12
14
|
variant="link"
|
@@ -17,6 +19,7 @@ const CollapsibleState = (props) => {
|
|
17
19
|
<Collapsible
|
18
20
|
collapsed={isCollapsed}
|
19
21
|
icon={["plus", "minus"]}
|
22
|
+
iconColor='white'
|
20
23
|
padding="none"
|
21
24
|
>
|
22
25
|
<Collapsible.Main padding="sm"
|
@@ -35,6 +38,7 @@ const CollapsibleState = (props) => {
|
|
35
38
|
<Collapsible
|
36
39
|
collapsed={isCollapsed}
|
37
40
|
icon={["plus", "minus"]}
|
41
|
+
iconColor='white'
|
38
42
|
padding="none"
|
39
43
|
>
|
40
44
|
<Collapsible.Main padding="sm"
|
@@ -53,6 +57,7 @@ const CollapsibleState = (props) => {
|
|
53
57
|
<Collapsible
|
54
58
|
collapsed={isCollapsed}
|
55
59
|
icon={["plus", "minus"]}
|
60
|
+
iconColor='white'
|
56
61
|
padding="none"
|
57
62
|
>
|
58
63
|
<Collapsible.Main padding="sm"
|
@@ -72,4 +77,8 @@ const CollapsibleState = (props) => {
|
|
72
77
|
)
|
73
78
|
}
|
74
79
|
|
80
|
+
CollapsibleState.propTypes = {
|
81
|
+
dark: PropTypes.bool,
|
82
|
+
}
|
83
|
+
|
75
84
|
export default CollapsibleState
|
@@ -8,23 +8,23 @@ import Body from '../pb_body/_body'
|
|
8
8
|
import Caption from '../pb_caption/_caption'
|
9
9
|
import Icon from '../pb_icon/_icon'
|
10
10
|
|
11
|
-
const contactTypeMap: { [key: string]: string
|
11
|
+
const contactTypeMap: { [key: string]: string } = {
|
12
12
|
'cell': 'mobile',
|
13
13
|
'email': 'envelope',
|
14
|
+
'extension': 'phone-plus',
|
14
15
|
'home': 'phone',
|
15
16
|
'work': 'phone-office',
|
16
17
|
'work-cell': 'phone-laptop',
|
17
18
|
'wrong-phone': 'phone-slash',
|
18
|
-
'extension': 'phone-plus',
|
19
19
|
}
|
20
20
|
|
21
21
|
const formatContact = (contactString: string, contactType: string) => {
|
22
|
-
if (contactType
|
22
|
+
if (contactType === 'email') return contactString
|
23
23
|
|
24
24
|
const cleaned = contactString.replace(/\D/g, '')
|
25
25
|
const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
|
26
26
|
|
27
|
-
if(contactType
|
27
|
+
if (contactType === 'extension') {
|
28
28
|
return cleaned.match(/^\d{4}$/)
|
29
29
|
}
|
30
30
|
|
@@ -40,19 +40,20 @@ const formatContact = (contactString: string, contactType: string) => {
|
|
40
40
|
phoneNumber[4],
|
41
41
|
].join('')
|
42
42
|
}
|
43
|
-
|
43
|
+
|
44
44
|
return null
|
45
45
|
}
|
46
46
|
|
47
47
|
type ContactProps = {
|
48
|
-
aria?: { [key: string]: string
|
49
|
-
className?: string | string[]
|
50
|
-
contactDetail?: string
|
51
|
-
contactType?: string
|
52
|
-
contactValue: string
|
53
|
-
data?: {[key: string]: string}
|
54
|
-
|
55
|
-
|
48
|
+
aria?: { [key: string]: string }
|
49
|
+
className?: string | string[]
|
50
|
+
contactDetail?: string
|
51
|
+
contactType?: string
|
52
|
+
contactValue: string
|
53
|
+
data?: { [key: string]: string }
|
54
|
+
dark?: boolean
|
55
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
|
56
|
+
id?: string
|
56
57
|
}
|
57
58
|
|
58
59
|
const Contact = (props: ContactProps): React.ReactElement => {
|
@@ -63,8 +64,10 @@ const Contact = (props: ContactProps): React.ReactElement => {
|
|
63
64
|
contactType,
|
64
65
|
contactValue,
|
65
66
|
data = {},
|
67
|
+
dark = false,
|
66
68
|
htmlOptions = {},
|
67
|
-
id
|
69
|
+
id,
|
70
|
+
} = props
|
68
71
|
const ariaProps = buildAriaProps(aria)
|
69
72
|
const dataProps = buildDataProps(data)
|
70
73
|
const htmlProps = buildHtmlProps(htmlOptions)
|
@@ -73,6 +76,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
|
|
73
76
|
globalProps(props),
|
74
77
|
className
|
75
78
|
)
|
79
|
+
|
76
80
|
return (
|
77
81
|
<div
|
78
82
|
{...ariaProps}
|
@@ -83,25 +87,27 @@ const Contact = (props: ContactProps): React.ReactElement => {
|
|
83
87
|
>
|
84
88
|
<Body
|
85
89
|
className="pb_contact_kit"
|
86
|
-
color="light"
|
90
|
+
color={"light"}
|
91
|
+
dark={dark}
|
87
92
|
tag="span"
|
88
93
|
>
|
89
94
|
<Icon
|
95
|
+
dark={dark}
|
90
96
|
fixedWidth
|
91
97
|
icon={contactTypeMap[contactType] || 'phone'}
|
92
98
|
/>
|
93
99
|
{` ${formatContact(contactValue, contactType)} `}
|
94
|
-
{
|
95
|
-
contactDetail &&
|
100
|
+
{contactDetail && (
|
96
101
|
<Caption
|
102
|
+
dark={dark}
|
97
103
|
size="xs"
|
98
104
|
tag="span"
|
99
105
|
text={contactDetail}
|
100
106
|
/>
|
101
|
-
}
|
107
|
+
)}
|
102
108
|
</Body>
|
103
109
|
</div>
|
104
110
|
)
|
105
111
|
}
|
106
112
|
|
107
|
-
export default Contact
|
113
|
+
export default Contact
|
@@ -2,18 +2,21 @@
|
|
2
2
|
<%= pb_rails("body", props: {
|
3
3
|
tag: "span",
|
4
4
|
classname: "pb_contact_kit",
|
5
|
-
color: "light"
|
5
|
+
color: "light",
|
6
|
+
dark: object.dark
|
6
7
|
}) do %>
|
7
8
|
<%= pb_rails("icon", props: {
|
8
9
|
icon: object.contact_icon,
|
9
|
-
fixed_width: true
|
10
|
+
fixed_width: true,
|
11
|
+
dark: object.dark
|
10
12
|
}) %>
|
11
13
|
<%= object.formatted_contact_value if object.contact_value %>
|
12
14
|
|
13
15
|
<%= pb_rails("caption", props: {
|
14
16
|
text: object.contact_detail,
|
15
17
|
tag: 'span',
|
16
|
-
size: 'xs'
|
18
|
+
size: 'xs',
|
19
|
+
dark: object.dark
|
17
20
|
}) if object.contact_detail %>
|
18
21
|
<% end %>
|
19
22
|
<% end %>
|
@@ -10,16 +10,16 @@ import Caption from "../pb_caption/_caption";
|
|
10
10
|
import Icon from "../pb_icon/_icon";
|
11
11
|
|
12
12
|
type DateRangeInlineProps = {
|
13
|
-
className?: string;
|
14
|
-
id?: string;
|
15
|
-
data?: string;
|
16
13
|
align?: "left" | "center" | "vertical";
|
17
|
-
|
14
|
+
className?: string;
|
18
15
|
dark?: boolean;
|
19
|
-
|
16
|
+
data?: string;
|
17
|
+
endDate?: Date;
|
18
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => any) };
|
20
19
|
icon?: boolean;
|
20
|
+
id?: string;
|
21
|
+
size?: "sm" | "xs";
|
21
22
|
startDate?: Date;
|
22
|
-
endDate?: Date;
|
23
23
|
};
|
24
24
|
|
25
25
|
const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
|
@@ -36,59 +36,36 @@ const dateTimeIso = (dateValue: Date) => {
|
|
36
36
|
|
37
37
|
const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
|
38
38
|
const {
|
39
|
-
icon = false,
|
40
|
-
dark = false,
|
41
|
-
size = "sm",
|
42
39
|
align = "left",
|
40
|
+
className,
|
41
|
+
dark = false,
|
43
42
|
data = {},
|
43
|
+
endDate,
|
44
44
|
htmlOptions = {},
|
45
|
+
icon = false,
|
46
|
+
size = "sm",
|
45
47
|
startDate,
|
46
|
-
endDate,
|
47
|
-
className,
|
48
48
|
} = props;
|
49
49
|
|
50
|
-
const iconContent = () => {
|
51
|
-
return (
|
52
|
-
<>
|
53
|
-
{icon && (
|
54
|
-
<>
|
55
|
-
<Body color="light"
|
56
|
-
key={Math.random()}
|
57
|
-
tag="span"
|
58
|
-
>
|
59
|
-
<Icon
|
60
|
-
className="pb_date_range_inline_icon"
|
61
|
-
dark={dark}
|
62
|
-
fixedWidth
|
63
|
-
icon="calendar-alt"
|
64
|
-
size={size}
|
65
|
-
tag="span"
|
66
|
-
/>
|
67
|
-
</Body>
|
68
|
-
</>
|
69
|
-
)}
|
70
|
-
</>
|
71
|
-
);
|
72
|
-
};
|
73
|
-
|
74
50
|
const dateInCurrentYear = () => {
|
75
51
|
const currentDate = new Date();
|
76
52
|
return (
|
77
|
-
startDate
|
78
|
-
startDate
|
53
|
+
startDate?.getFullYear() === endDate?.getFullYear() &&
|
54
|
+
startDate?.getFullYear() === currentDate.getFullYear()
|
79
55
|
);
|
80
56
|
};
|
81
57
|
|
82
58
|
const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
|
83
|
-
const dataProps = buildDataProps(data)
|
84
|
-
const htmlProps = buildHtmlProps(htmlOptions)
|
59
|
+
const dataProps = buildDataProps(data);
|
60
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
61
|
+
|
85
62
|
const renderTime = (date: Date) => {
|
86
63
|
return (
|
87
64
|
<time dateTime={dateTimeIso(date)}>
|
88
65
|
{dateInCurrentYear() ? (
|
89
|
-
|
66
|
+
` ${dateTimestamp(date, false)} `
|
90
67
|
) : (
|
91
|
-
|
68
|
+
` ${dateTimestamp(date, true)} `
|
92
69
|
)}
|
93
70
|
</time>
|
94
71
|
);
|
@@ -101,53 +78,83 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
|
|
101
78
|
className={classnames(dateRangeClasses, globalProps(props), className)}
|
102
79
|
>
|
103
80
|
<div className="pb_date_range_inline_wrapper">
|
104
|
-
{size
|
81
|
+
{size === "xs" && (
|
105
82
|
<>
|
106
|
-
{
|
107
|
-
|
108
|
-
|
109
|
-
|
83
|
+
{icon && (
|
84
|
+
<Caption
|
85
|
+
dark={dark}
|
86
|
+
tag="span">
|
87
|
+
<Icon
|
88
|
+
className="pb_date_range_inline_icon"
|
89
|
+
dark={dark}
|
90
|
+
fixedWidth
|
91
|
+
icon="calendar-alt"
|
92
|
+
size={size}
|
93
|
+
tag="span"
|
94
|
+
/>
|
95
|
+
</Caption>
|
96
|
+
)}
|
97
|
+
<Caption
|
98
|
+
dark={dark}
|
99
|
+
tag="span">
|
110
100
|
{renderTime(startDate)}
|
111
101
|
</Caption>
|
112
|
-
<Caption
|
113
|
-
|
114
|
-
|
102
|
+
<Caption
|
103
|
+
dark={dark}
|
104
|
+
tag="span">
|
115
105
|
<Icon
|
116
106
|
className="pb_date_range_inline_arrow"
|
107
|
+
dark={dark}
|
117
108
|
fixedWidth
|
118
109
|
icon="long-arrow-right"
|
110
|
+
tag="span"
|
119
111
|
/>
|
120
112
|
</Caption>
|
121
|
-
<Caption
|
122
|
-
|
123
|
-
|
113
|
+
<Caption
|
114
|
+
dark={dark}
|
115
|
+
tag="span">
|
124
116
|
{renderTime(endDate)}
|
125
117
|
</Caption>
|
126
118
|
</>
|
127
119
|
)}
|
128
120
|
|
129
|
-
{size
|
121
|
+
{size === "sm" && (
|
130
122
|
<>
|
131
|
-
{
|
132
|
-
|
133
|
-
|
134
|
-
|
123
|
+
{icon && (
|
124
|
+
<Body
|
125
|
+
color={"light"}
|
126
|
+
dark={dark}
|
127
|
+
tag="span">
|
128
|
+
<Icon
|
129
|
+
className="pb_date_range_inline_icon"
|
130
|
+
dark={dark}
|
131
|
+
fixedWidth
|
132
|
+
icon="calendar-alt"
|
133
|
+
size={size}
|
134
|
+
tag="span"
|
135
|
+
/>
|
136
|
+
</Body>
|
137
|
+
)}
|
138
|
+
<Body
|
139
|
+
dark={dark}
|
140
|
+
tag="span">
|
135
141
|
{renderTime(startDate)}
|
136
142
|
</Body>
|
137
|
-
<Body
|
138
|
-
|
139
|
-
|
140
|
-
|
143
|
+
<Body
|
144
|
+
color={"light"}
|
145
|
+
dark={dark}
|
146
|
+
tag="span">
|
141
147
|
<Icon
|
142
148
|
className="pb_date_range_inline_arrow"
|
143
149
|
dark={dark}
|
144
150
|
fixedWidth
|
145
151
|
icon="long-arrow-right"
|
152
|
+
tag="span"
|
146
153
|
/>
|
147
154
|
</Body>
|
148
|
-
<Body
|
149
|
-
|
150
|
-
|
155
|
+
<Body
|
156
|
+
dark={dark}
|
157
|
+
tag="span">
|
151
158
|
{renderTime(endDate)}
|
152
159
|
</Body>
|
153
160
|
</>
|
@@ -1,10 +1,5 @@
|
|
1
1
|
<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
|
2
|
-
<%=
|
3
|
-
aria: object.aria,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
class: object.classname,
|
7
|
-
**combined_html_options) do %>
|
2
|
+
<%= pb_content_tag(:dialog) do %>
|
8
3
|
<% if object.status === "" && object.title %>
|
9
4
|
<%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
|
10
5
|
<% end %>
|
@@ -1,8 +1,5 @@
|
|
1
|
-
<%=
|
2
|
-
|
3
|
-
data: object.data,
|
4
|
-
aria: object.aria,
|
5
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag(:div, class: "") do %>
|
2
|
+
<% 'excluded classname?' %>
|
6
3
|
<% if object.confirm_button && object.cancel_button %>
|
7
4
|
<div class="dialog-pseudo-footer"></div>
|
8
5
|
<%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.sticky_header,
|
5
|
-
aria: object.aria,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag(:div, class: object.sticky_header) do %>
|
7
2
|
<%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
|
8
3
|
<%= content.presence || object.title %>
|
9
4
|
|
@@ -8,9 +8,13 @@
|
|
8
8
|
<%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
|
9
9
|
<% end %>
|
10
10
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
11
|
-
<input
|
12
|
-
|
13
|
-
|
11
|
+
<input
|
12
|
+
data-default-value="<%= input_default_value %>"
|
13
|
+
id="dropdown-selected-option"
|
14
|
+
name="<%= object.name %>"
|
15
|
+
style="display: none"
|
16
|
+
<%= object.required ? "required" : ""%>
|
17
|
+
/>
|
14
18
|
<% if content.present? %>
|
15
19
|
<%= content.presence %>
|
16
20
|
<%= pb_rails("body", props: { status: "negative", text: object.error }) %>
|