playbook_ui 14.13.0.pre.alpha.play1834depupdatesass6024 → 14.13.0.pre.rc.0
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/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +4 -11
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +10 -71
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +21 -37
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/index.js +6 -9
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +5 -8
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -9
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +7 -11
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +7 -6
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +3 -9
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +2 -6
- data/app/pb_kits/playbook/pb_button/button.rb +1 -1
- data/app/pb_kits/playbook/pb_date/_date.tsx +4 -14
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +5 -13
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +5 -2
- data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +0 -5
- data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +0 -4
- data/app/pb_kits/playbook/pb_draggable/index.js +15 -151
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +6 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +5 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +5 -7
- data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +6 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +7 -11
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +2 -13
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -2
- data/app/pb_kits/playbook/pb_layout/body.html.erb +5 -1
- data/app/pb_kits/playbook/pb_layout/footer.html.erb +5 -1
- data/app/pb_kits/playbook/pb_layout/header.html.erb +5 -1
- data/app/pb_kits/playbook/pb_layout/item.html.erb +5 -1
- data/app/pb_kits/playbook/pb_layout/layout.html.erb +5 -1
- data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +5 -1
- data/app/pb_kits/playbook/pb_legend/legend.html.erb +6 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +6 -7
- data/app/pb_kits/playbook/pb_link/_link.tsx +0 -18
- data/app/pb_kits/playbook/pb_link/docs/example.yml +3 -5
- data/app/pb_kits/playbook/pb_link/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
- data/app/pb_kits/playbook/pb_link/link.rb +0 -6
- data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -30
- data/app/pb_kits/playbook/pb_message/message.html.erb +6 -1
- data/app/pb_kits/playbook/pb_message/message_mention.html.erb +6 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +9 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +9 -6
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -26
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -25
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -25
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/index.js +83 -52
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +27 -45
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -5
- data/app/pb_kits/playbook/pb_user/_user.tsx +0 -3
- data/app/pb_kits/playbook/pb_user/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_user/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user/user.rb +0 -1
- data/app/pb_kits/playbook/pb_user/user.test.js +0 -14
- data/dist/chunks/_typeahead-BWwaAo_0.js +36 -0
- data/dist/chunks/_weekday_stacked-zyBCd1s8.js +45 -0
- data/dist/chunks/{lib-WQEeEj3t.js → lib-kMuhBuU7.js} +2 -2
- data/dist/chunks/{pb_form_validation-Cq64l4zn.js → pb_form_validation-DBJ0wZuS.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -6
- 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 +7 -38
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts +0 -26
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +0 -3
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +0 -4
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +0 -92
- data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +0 -15
- data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +0 -28
- data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +0 -64
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +0 -21
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +0 -5
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +0 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -8
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_copy_button/index.js +0 -47
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +0 -99
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +0 -61
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +0 -58
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +0 -3
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +0 -11
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +0 -22
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +0 -1
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +0 -29
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +0 -42
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +0 -59
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +0 -2
- data/dist/chunks/_typeahead-DQTwAd_2.js +0 -36
- data/dist/chunks/_weekday_stacked-CnPEqV7l.js +0 -45
- /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close_react.md → _fixed_confirmation_toast_auto_close.md} +0 -0
@@ -1,71 +1,102 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
export default class PbTextInput {
|
2
|
+
static start() {
|
3
|
+
const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
|
3
4
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
inputElements.forEach((inputElement) => {
|
6
|
+
inputElement.addEventListener("input", (event) => {
|
7
|
+
const maskType = inputElement.getAttribute("mask");
|
8
|
+
const cursorPosition = inputElement.selectionStart;
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
this.element.addEventListener("input", this.handleInput);
|
12
|
-
this.handleInput();
|
13
|
-
}
|
10
|
+
let rawValue = event.target.value;
|
11
|
+
let formattedValue = rawValue;
|
14
12
|
|
15
|
-
|
16
|
-
|
17
|
-
|
13
|
+
// Apply formatting based on the mask type
|
14
|
+
switch (maskType) {
|
15
|
+
case "currency":
|
16
|
+
formattedValue = formatCurrency(rawValue);
|
17
|
+
break;
|
18
|
+
case "ssn":
|
19
|
+
formattedValue = formatSSN(rawValue);
|
20
|
+
break;
|
21
|
+
case "postal_code":
|
22
|
+
formattedValue = formatPostalCode(rawValue);
|
23
|
+
break;
|
24
|
+
case "zip_code":
|
25
|
+
formattedValue = formatZipCode(rawValue);
|
26
|
+
break;
|
27
|
+
}
|
28
|
+
|
29
|
+
// Update the sanitized input field in the same wrapper
|
30
|
+
const sanitizedInput = inputElement
|
31
|
+
.closest(".text_input_wrapper")
|
32
|
+
?.querySelector('[data="sanitized-pb-input"]');
|
33
|
+
|
34
|
+
if (sanitizedInput) {
|
35
|
+
switch (maskType) {
|
36
|
+
case "ssn":
|
37
|
+
sanitizedInput.value = sanitizeSSN(formattedValue);
|
38
|
+
break;
|
39
|
+
case "currency":
|
40
|
+
sanitizedInput.value = sanitizeCurrency(formattedValue);
|
41
|
+
break;
|
42
|
+
default:
|
43
|
+
sanitizedInput.value = formattedValue;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
inputElement.value = formattedValue;
|
48
|
+
setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
|
49
|
+
});
|
50
|
+
});
|
18
51
|
|
19
|
-
handleInput() {
|
20
|
-
const maskType = this.element.getAttribute("mask");
|
21
|
-
const cursorPosition = this.element.selectionStart;
|
22
|
-
const rawValue = this.element.value;
|
23
|
-
let formattedValue = rawValue;
|
24
|
-
|
25
|
-
const maskKey = {
|
26
|
-
currency: 'currency',
|
27
|
-
ssn: 'ssn',
|
28
|
-
postal_code: 'postalCode',
|
29
|
-
zip_code: 'zipCode',
|
30
|
-
}[maskType];
|
31
|
-
|
32
|
-
if (maskKey && INPUTMASKS[maskKey]) {
|
33
|
-
formattedValue = INPUTMASKS[maskKey].format(rawValue);
|
34
|
-
}
|
35
|
-
|
36
|
-
const sanitizedInput = this.element
|
37
|
-
.closest(".text_input_wrapper")
|
38
|
-
?.querySelector('[data="sanitized-pb-input"]');
|
39
|
-
|
40
|
-
if (sanitizedInput) {
|
41
|
-
switch (maskType) {
|
42
|
-
case "ssn":
|
43
|
-
sanitizedInput.value = sanitizeSSN(formattedValue);
|
44
|
-
break;
|
45
|
-
case "currency":
|
46
|
-
sanitizedInput.value = sanitizeCurrency(formattedValue);
|
47
|
-
break;
|
48
|
-
default:
|
49
|
-
sanitizedInput.value = formattedValue;
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
this.element.value = formattedValue;
|
54
|
-
setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
|
55
52
|
}
|
56
53
|
}
|
57
54
|
|
55
|
+
function formatCurrency(value) {
|
56
|
+
const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
|
57
|
+
|
58
|
+
if (!numericValue) return "";
|
59
|
+
|
60
|
+
const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
|
61
|
+
if (dollars === 0) return "";
|
62
|
+
|
63
|
+
return new Intl.NumberFormat("en-US", {
|
64
|
+
style: "currency",
|
65
|
+
currency: "USD",
|
66
|
+
maximumFractionDigits: 2,
|
67
|
+
}).format(dollars);
|
68
|
+
}
|
69
|
+
|
70
|
+
function formatSSN(value) {
|
71
|
+
const cleaned = value.replace(/\D/g, "").slice(0, 9);
|
72
|
+
return cleaned
|
73
|
+
.replace(/(\d{5})(?=\d)/, "$1-")
|
74
|
+
.replace(/(\d{3})(?=\d)/, "$1-");
|
75
|
+
}
|
76
|
+
|
77
|
+
function formatZipCode(value) {
|
78
|
+
return value.replace(/\D/g, "").slice(0, 5);
|
79
|
+
}
|
80
|
+
|
81
|
+
function formatPostalCode(value) {
|
82
|
+
const cleaned = value.replace(/\D/g, "").slice(0, 9);
|
83
|
+
return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
|
84
|
+
}
|
85
|
+
|
58
86
|
function sanitizeSSN(input) {
|
59
|
-
return input.replace(/\D/g, "");
|
87
|
+
return input.replace(/\D/g, "");
|
60
88
|
}
|
61
89
|
|
62
90
|
function sanitizeCurrency(input) {
|
63
|
-
return input.replace(/[$,]/g, "");
|
91
|
+
return input.replace(/[$,]/g, "");
|
64
92
|
}
|
65
93
|
|
94
|
+
// function to set cursor position
|
66
95
|
function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
|
67
96
|
const difference = formattedValue.length - rawValue.length;
|
97
|
+
|
68
98
|
const newPosition = Math.max(0, cursorPosition + difference);
|
99
|
+
|
69
100
|
requestAnimationFrame(() => {
|
70
101
|
inputElement.setSelectionRange(newPosition, newPosition);
|
71
102
|
});
|
@@ -32,7 +32,6 @@ type TooltipProps = {
|
|
32
32
|
position?: "absolute" | "fixed";
|
33
33
|
text: string,
|
34
34
|
showTooltip?: boolean,
|
35
|
-
forceOpenTooltip?: boolean,
|
36
35
|
} & GlobalProps
|
37
36
|
|
38
37
|
const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
|
@@ -50,7 +49,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
50
49
|
text,
|
51
50
|
showTooltip = true,
|
52
51
|
zIndex,
|
53
|
-
forceOpenTooltip = false,
|
54
52
|
...rest
|
55
53
|
} = props
|
56
54
|
|
@@ -137,7 +135,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
137
135
|
>
|
138
136
|
{children}
|
139
137
|
</div>
|
140
|
-
{
|
138
|
+
{open && (
|
141
139
|
<div
|
142
140
|
{...getFloatingProps({
|
143
141
|
className: `tooltip_tooltip ${placement} visible`,
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import PbEnhancedElement from '../pb_enhanced_element'
|
2
|
+
|
2
3
|
import {
|
3
4
|
createPopperLite as createPopper,
|
4
5
|
flip,
|
@@ -16,34 +17,27 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
16
17
|
|
17
18
|
connect() {
|
18
19
|
this.triggerElements.forEach((trigger) => {
|
19
|
-
|
20
|
-
|
21
|
-
if (method === 'click') {
|
22
|
-
trigger.addEventListener('click', () => {
|
20
|
+
trigger.addEventListener('mouseenter', () => {
|
21
|
+
this.mouseenterTimeout = setTimeout(() => {
|
23
22
|
this.showTooltip(trigger)
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
this.showTooltip(trigger)
|
29
|
-
this.checkCloseTooltip(trigger)
|
30
|
-
}, TOOLTIP_TIMEOUT)
|
31
|
-
|
32
|
-
trigger.addEventListener('mouseleave', () => {
|
33
|
-
clearTimeout(this.mouseenterTimeout)
|
34
|
-
setTimeout(() => {
|
35
|
-
this.hideTooltip()
|
36
|
-
}, 0)
|
37
|
-
}, { once: true })
|
38
|
-
})
|
39
|
-
|
40
|
-
this.tooltip.addEventListener('mouseenter', () => {
|
23
|
+
this.checkCloseTooltip(trigger)
|
24
|
+
}, TOOLTIP_TIMEOUT)
|
25
|
+
|
26
|
+
trigger.addEventListener('mouseleave', () => {
|
41
27
|
clearTimeout(this.mouseenterTimeout)
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
28
|
+
|
29
|
+
setTimeout(() => {
|
30
|
+
this.hideTooltip()
|
31
|
+
}, 0)
|
32
|
+
}, { once: true })
|
33
|
+
})
|
34
|
+
})
|
35
|
+
|
36
|
+
this.tooltip.addEventListener('mouseenter', () => {
|
37
|
+
clearTimeout(this.mouseenterTimeout)
|
38
|
+
})
|
39
|
+
this.tooltip.addEventListener('mouseleave', () => {
|
40
|
+
this.hideTooltip()
|
47
41
|
})
|
48
42
|
}
|
49
43
|
|
@@ -60,7 +54,7 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
60
54
|
}
|
61
55
|
|
62
56
|
showTooltip(trigger) {
|
63
|
-
if (this.shouldShowTooltip ===
|
57
|
+
if (this.shouldShowTooltip === "false") return
|
64
58
|
|
65
59
|
this.popper = createPopper(trigger, this.tooltip, {
|
66
60
|
placement: this.position,
|
@@ -84,13 +78,6 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
84
78
|
],
|
85
79
|
})
|
86
80
|
this.tooltip.classList.add('show')
|
87
|
-
|
88
|
-
if (this.triggerMethod === 'click') {
|
89
|
-
clearTimeout(this.autoHideTimeout)
|
90
|
-
this.autoHideTimeout = setTimeout(() => {
|
91
|
-
this.hideTooltip()
|
92
|
-
}, 1000)
|
93
|
-
}
|
94
81
|
}
|
95
82
|
|
96
83
|
hideTooltip() {
|
@@ -107,26 +94,25 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
107
94
|
let triggerEl
|
108
95
|
|
109
96
|
if (this.triggerElementId) {
|
110
|
-
triggerEl = document.querySelector(`#${this.triggerElementId}`)
|
97
|
+
triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
|
111
98
|
} else {
|
112
99
|
const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
|
113
|
-
triggerEl = selectorIsId
|
114
|
-
|
115
|
-
: document.querySelectorAll(`${this.triggerElementSelector}`)
|
100
|
+
triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
|
101
|
+
document.querySelectorAll(`${this.triggerElementSelector}`)
|
116
102
|
}
|
117
103
|
|
118
104
|
if (!triggerEl) {
|
105
|
+
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
|
119
106
|
console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
|
120
107
|
return []
|
121
108
|
}
|
122
109
|
|
123
110
|
if (!triggerEl.length) triggerEl = [triggerEl]
|
124
|
-
return
|
111
|
+
return this._triggerElements = (this._triggerElements || triggerEl)
|
125
112
|
}
|
126
113
|
|
127
114
|
get tooltip() {
|
128
|
-
return (this._tooltip
|
129
|
-
this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
|
115
|
+
return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
|
130
116
|
}
|
131
117
|
|
132
118
|
get position() {
|
@@ -148,8 +134,4 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
148
134
|
get shouldShowTooltip() {
|
149
135
|
return this.element.dataset.pbTooltipShowTooltip
|
150
136
|
}
|
151
|
-
|
152
|
-
get triggerMethod() {
|
153
|
-
return this.element.dataset.pbTooltipTriggerMethod || 'hover'
|
154
|
-
}
|
155
137
|
}
|
@@ -9,9 +9,6 @@ module Playbook
|
|
9
9
|
prop :tooltip_id
|
10
10
|
prop :dark, type: Playbook::Props::Boolean,
|
11
11
|
default: false
|
12
|
-
prop :trigger_method, type: Playbook::Props::Enum,
|
13
|
-
values: %w[hover click],
|
14
|
-
default: "hover"
|
15
12
|
|
16
13
|
def classname
|
17
14
|
generate_classname("pb_tooltip_kit", dark_class)
|
@@ -24,8 +21,7 @@ module Playbook
|
|
24
21
|
pb_tooltip_trigger_element_selector: trigger_element_selector,
|
25
22
|
pb_tooltip_trigger_element_id: trigger_element_id,
|
26
23
|
pb_tooltip_tooltip_id: tooltip_id,
|
27
|
-
pb_tooltip_show_tooltip: true
|
28
|
-
pb_tooltip_trigger_method: trigger_method
|
24
|
+
pb_tooltip_show_tooltip: true
|
29
25
|
)
|
30
26
|
end
|
31
27
|
|
@@ -13,7 +13,6 @@ type UserProps = {
|
|
13
13
|
aria?: {[key: string]: string},
|
14
14
|
avatar?: boolean,
|
15
15
|
avatarUrl?: string,
|
16
|
-
bold?: boolean,
|
17
16
|
className?: string,
|
18
17
|
dark?: boolean,
|
19
18
|
data?: {[key: string]: string},
|
@@ -33,7 +32,6 @@ const User = (props: UserProps): React.ReactElement => {
|
|
33
32
|
aria = {},
|
34
33
|
avatar = false,
|
35
34
|
avatarUrl,
|
36
|
-
bold = true,
|
37
35
|
className,
|
38
36
|
dark = false,
|
39
37
|
data = {},
|
@@ -77,7 +75,6 @@ const User = (props: UserProps): React.ReactElement => {
|
|
77
75
|
}
|
78
76
|
<div className="content_wrapper">
|
79
77
|
<Title
|
80
|
-
bold={bold}
|
81
78
|
dark={dark}
|
82
79
|
size={size == 'lg' ? 3 : 4}
|
83
80
|
text={name}
|
@@ -2,7 +2,6 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- user_default: Default
|
5
|
-
- user_light_weight: Light Weight
|
6
5
|
- user_with_territory: With Territory
|
7
6
|
- user_text_only: Text Only
|
8
7
|
- user_size: Horizontal Size
|
@@ -12,7 +11,6 @@ examples:
|
|
12
11
|
|
13
12
|
react:
|
14
13
|
- user_default: Default
|
15
|
-
- user_light_weight: Light Weight
|
16
14
|
- user_with_territory: With Territory
|
17
15
|
- user_text_only: Text Only
|
18
16
|
- user_size: Horizontal Size
|
@@ -1,5 +1,4 @@
|
|
1
1
|
export { default as UserDefault } from './_user_default.jsx'
|
2
|
-
export { default as UserLightWeight } from './_user_light_weight.jsx'
|
3
2
|
export { default as UserWithTerritory } from './_user_with_territory.jsx'
|
4
3
|
export { default as UserTextOnly } from './_user_text_only.jsx'
|
5
4
|
export { default as UserSize } from './_user_size.jsx'
|
@@ -12,7 +12,7 @@
|
|
12
12
|
}) %>
|
13
13
|
<% end %>
|
14
14
|
<%= content_tag(:div, class: "content_wrapper") do %>
|
15
|
-
<%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark
|
15
|
+
<%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
|
16
16
|
<%= pb_rails("body", props: {
|
17
17
|
text: "#{object.details}",
|
18
18
|
dark: object.dark,
|
@@ -26,17 +26,3 @@ test('subtitle prop accepts a node', () => {
|
|
26
26
|
|
27
27
|
expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
|
28
28
|
})
|
29
|
-
|
30
|
-
test('bold prop applies correct styling when false', () => {
|
31
|
-
render(
|
32
|
-
<User
|
33
|
-
bold={false}
|
34
|
-
data={{ testid: 'test-bold-false' }}
|
35
|
-
name="Anna Black"
|
36
|
-
/>
|
37
|
-
)
|
38
|
-
const titleElement = screen.getByText("Anna Black")
|
39
|
-
expect(titleElement).toBeInTheDocument()
|
40
|
-
|
41
|
-
expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
|
42
|
-
})
|