playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3536
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_advanced_table/Components/TableHeaderCell.tsx +5 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +24 -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 +86 -1
- 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 +67 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md +1 -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_avatar/_avatar.scss +0 -30
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +19 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +44 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +17 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +2 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +2 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +2 -2
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +0 -11
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -2
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +5 -4
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.scss +52 -5
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +6 -1
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb +1 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx +14 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx +25 -0
- data/app/pb_kits/playbook/pb_online_status/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_online_status/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_online_status/online_status.rb +11 -1
- data/app/pb_kits/playbook/pb_online_status/online_status.test.js +31 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb +61 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +70 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +83 -6
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +73 -4
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +2 -2
- data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +5 -1
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +50 -21
- data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
- data/app/pb_kits/playbook/pb_textarea/index.ts +3 -3
- data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +37 -2
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -0
- data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
- data/app/pb_kits/playbook/utilities/_positioning.scss +26 -15
- data/dist/chunks/_typeahead-D-4y9pbv.js +22 -0
- data/dist/chunks/_weekday_stacked-Cax4nrUa.js +45 -0
- data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
- data/dist/chunks/{lib-Bf_E03gc.js → lib-BE0Z3F7x.js} +1 -1
- data/dist/chunks/{pb_form_validation-D0dhqeN2.js → pb_form_validation-TzZQ0Flx.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +20 -11
- data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +0 -32
- data/dist/chunks/_typeahead-COUJ88EA.js +0 -22
- data/dist/chunks/_weekday_stacked-BAkwel5p.js +0 -45
- data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
@@ -1,3 +1,5 @@
|
|
1
|
+
/* eslint-disable react/no-multi-comp */
|
2
|
+
|
1
3
|
import React from 'react'
|
2
4
|
import classnames from 'classnames'
|
3
5
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
@@ -24,7 +26,7 @@ type WalkthroughProps = {
|
|
24
26
|
disableOverlay?: boolean,
|
25
27
|
disableOverlayClose?: boolean,
|
26
28
|
disableScrolling?: boolean,
|
27
|
-
floaterProps?:
|
29
|
+
floaterProps?: Record<string, unknown>,
|
28
30
|
hideBackButton?: boolean,
|
29
31
|
hideCloseButton?: boolean,
|
30
32
|
showProgress?: boolean,
|
@@ -58,89 +60,92 @@ type TooltipProps = {
|
|
58
60
|
disableBeacon?: boolean,
|
59
61
|
},
|
60
62
|
skip?: boolean,
|
61
|
-
backProps?:
|
62
|
-
closeProps?:
|
63
|
-
primaryProps?:
|
64
|
-
skipProps?:
|
65
|
-
tooltipProps?:
|
63
|
+
backProps?: Record<string, unknown>,
|
64
|
+
closeProps?: Record<string, unknown>,
|
65
|
+
primaryProps?: Record<string, unknown>,
|
66
|
+
skipProps?: Record<string, unknown>,
|
67
|
+
tooltipProps?: Record<string, unknown>,
|
66
68
|
}
|
67
69
|
|
70
|
+
// eslint-disable-next-line react/display-name
|
68
71
|
const Tooltip = React.forwardRef((props: TooltipProps) => (
|
69
|
-
|
72
|
+
<div
|
70
73
|
className="pb_card_kit_border_none p_none"
|
71
74
|
{...props.tooltipProps}
|
75
|
+
>
|
76
|
+
{props.step.title && <div>
|
77
|
+
<Flex
|
78
|
+
align="center"
|
79
|
+
justify="between"
|
80
|
+
padding="xs"
|
72
81
|
>
|
73
|
-
|
74
|
-
<Flex
|
75
|
-
align="center"
|
76
|
-
justify="between"
|
77
|
-
padding="xs"
|
78
|
-
>
|
79
|
-
<Title
|
82
|
+
<Title
|
80
83
|
paddingLeft="xs"
|
81
84
|
size={4}
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
85
|
+
>
|
86
|
+
{props.step.title}
|
87
|
+
</Title>
|
88
|
+
{props.skip && (
|
89
|
+
<Button
|
86
90
|
{...props.skipProps}
|
87
91
|
id="skip"
|
88
92
|
text="Skip Tour"
|
89
93
|
variant="link"
|
90
|
-
|
91
|
-
|
94
|
+
/>
|
95
|
+
)}
|
96
|
+
<Button
|
92
97
|
{...props.skipProps}
|
93
98
|
id="skip"
|
94
99
|
text="Skip Tour"
|
95
100
|
variant="link"
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
101
|
+
/>
|
102
|
+
</Flex>
|
103
|
+
<SectionSeparator />
|
104
|
+
</div>}
|
100
105
|
|
101
|
-
|
102
|
-
|
103
|
-
|
106
|
+
<Flex padding="sm">{props.step.content}</Flex>
|
107
|
+
<SectionSeparator />
|
108
|
+
<Flex
|
104
109
|
justify={props.index == 0 ? 'end' : 'between'}
|
105
110
|
padding="xs"
|
106
|
-
|
111
|
+
>
|
107
112
|
|
108
|
-
|
109
|
-
|
113
|
+
{props.index > 0 && (
|
114
|
+
<Button
|
110
115
|
{...props.backProps}
|
111
116
|
id="back"
|
112
117
|
text="Back"
|
113
|
-
|
114
|
-
|
118
|
+
/>
|
119
|
+
)}
|
115
120
|
|
116
|
-
|
117
|
-
|
121
|
+
{props.continuous && !props.isLastStep &&
|
122
|
+
<Button
|
118
123
|
{...props.primaryProps}
|
119
124
|
id="next"
|
120
125
|
text="Next"
|
121
|
-
|
122
|
-
|
126
|
+
/>
|
127
|
+
}
|
123
128
|
|
124
|
-
|
125
|
-
|
129
|
+
{!props.continuous &&
|
130
|
+
<Button
|
126
131
|
{...props.closeProps}
|
127
132
|
id="close"
|
128
133
|
text="Close"
|
129
|
-
|
130
|
-
|
134
|
+
/>
|
135
|
+
}
|
131
136
|
|
132
|
-
|
133
|
-
|
137
|
+
{!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
|
138
|
+
<Button
|
134
139
|
{...props.closeProps}
|
135
140
|
id="close"
|
136
141
|
text="Close"
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
142
|
+
/>
|
143
|
+
}
|
144
|
+
</Flex>
|
145
|
+
</div>
|
141
146
|
)) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
|
142
147
|
|
143
|
-
const Walkthrough = (props: WalkthroughProps) => {
|
148
|
+
const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
|
144
149
|
const {
|
145
150
|
aria = {},
|
146
151
|
callback,
|
@@ -170,24 +175,24 @@ const Walkthrough = (props: WalkthroughProps) => {
|
|
170
175
|
|
171
176
|
return (
|
172
177
|
<div
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
+
{...ariaProps}
|
179
|
+
{...dataProps}
|
180
|
+
{...htmlProps}
|
181
|
+
className={classes}
|
182
|
+
id={id}
|
178
183
|
>
|
179
184
|
<Joyride
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
185
|
+
callback={callback}
|
186
|
+
continuous={continuous}
|
187
|
+
disableOverlay={disableOverlay}
|
188
|
+
disableScrolling
|
189
|
+
floaterProps={floaterProps}
|
190
|
+
run={run}
|
191
|
+
showSkipButton={showSkipButton}
|
192
|
+
steps={steps}
|
193
|
+
styles={styles}
|
194
|
+
tooltipComponent={Tooltip}
|
195
|
+
{...props}
|
191
196
|
/>
|
192
197
|
</div>
|
193
198
|
|
@@ -38,7 +38,7 @@ const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expa
|
|
38
38
|
}
|
39
39
|
}
|
40
40
|
|
41
|
-
const WeekdayStacked = (props: WeekdayStackedProps) => {
|
41
|
+
const WeekdayStacked = (props: WeekdayStackedProps): React.ReactElement => {
|
42
42
|
const {
|
43
43
|
align = 'left',
|
44
44
|
aria = {},
|
@@ -19,55 +19,66 @@
|
|
19
19
|
}
|
20
20
|
|
21
21
|
.z_index_1 {
|
22
|
-
z-index:
|
22
|
+
z-index: $z_1 !important;
|
23
23
|
}
|
24
24
|
|
25
25
|
.z_index_2 {
|
26
|
-
z-index:
|
26
|
+
z-index: $z_2 !important;
|
27
27
|
}
|
28
28
|
|
29
29
|
.z_index_3 {
|
30
|
-
z-index:
|
30
|
+
z-index: $z_3 !important;
|
31
31
|
}
|
32
32
|
|
33
33
|
.z_index_4 {
|
34
|
-
z-index:
|
34
|
+
z-index: $z_4 !important;
|
35
35
|
}
|
36
36
|
|
37
37
|
.z_index_5 {
|
38
|
-
z-index:
|
38
|
+
z-index: $z_5 !important;
|
39
39
|
}
|
40
40
|
|
41
41
|
.z_index_6 {
|
42
|
-
z-index:
|
42
|
+
z-index: $z_6 !important;
|
43
43
|
}
|
44
44
|
|
45
45
|
.z_index_7 {
|
46
|
-
z-index:
|
46
|
+
z-index: $z_7 !important;
|
47
47
|
}
|
48
48
|
|
49
49
|
.z_index_8 {
|
50
|
-
z-index:
|
50
|
+
z-index: $z_8 !important;
|
51
51
|
}
|
52
52
|
|
53
53
|
.z_index_9 {
|
54
|
-
z-index:
|
54
|
+
z-index: $z_9 !important;
|
55
55
|
}
|
56
56
|
|
57
57
|
.z_index_10 {
|
58
|
-
z-index:
|
59
|
-
}
|
60
|
-
|
61
|
-
$zIndex_values:
|
58
|
+
z-index: $z_10 !important;
|
59
|
+
}
|
60
|
+
|
61
|
+
$zIndex_values: (
|
62
|
+
1: $z_1,
|
63
|
+
2: $z_2,
|
64
|
+
3: $z_3,
|
65
|
+
4: $z_4,
|
66
|
+
5: $z_5,
|
67
|
+
6: $z_6,
|
68
|
+
7: $z_7,
|
69
|
+
8: $z_8,
|
70
|
+
9: $z_9,
|
71
|
+
10: $z_10
|
72
|
+
);
|
62
73
|
|
63
74
|
@each $size, $size_value in $breakpoints_grid {
|
64
|
-
@each $zIndex_value in $zIndex_values {
|
75
|
+
@each $zIndex_value, $zIndex_variable in $zIndex_values {
|
65
76
|
$min_size: map-get($size_value, "min");
|
66
77
|
$max_size: map-get($size_value, "max");
|
67
78
|
|
68
79
|
.z_index_#{$size}_#{$zIndex_value} {
|
69
80
|
@include break_on($min_size, $max_size) {
|
70
|
-
z-index:
|
81
|
+
z-index: $zIndex_variable !important;
|
71
82
|
}
|
72
83
|
}
|
73
84
|
}
|