playbook_ui 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4304 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4312
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_currency/_currency.tsx +16 -6
- data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
- data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +3 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +3 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +40 -34
- data/dist/chunks/_weekday_stacked-CjMIjOgO.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/dist/chunks/_weekday_stacked-DQjMZj0z.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 03dac86a0a0da2ba84586aec1ddf5be7d28e1c20c24be64fcff49492d0b67014
|
4
|
+
data.tar.gz: 7ed399f489ac3f76d72c3b9d5d190c6bf2407ce57cddb04f15b9c60758f2b083
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1914f5d92264cccf5e4dc9e3105972ab3595c1b1376f9778e27e88b66044b4d91a78e5db3108343fc42512d81836f2f92005bde21e849d73c7eeec0cfd1efaf8
|
7
|
+
data.tar.gz: 48deb7e787ea73bbc2c8ee0d37a86debe104436e144aa4b3e4134487a3d81ab956f7436ebd09b63c5692a243c7826a55bdddb900ead5b0d6fa26823579bc6068
|
@@ -26,6 +26,7 @@ type CurrencyProps = {
|
|
26
26
|
variant?: 'default' | 'light' | 'bold',
|
27
27
|
unit?: string,
|
28
28
|
unstyled?: boolean,
|
29
|
+
commaSeparator?: boolean,
|
29
30
|
}
|
30
31
|
|
31
32
|
const sizes: {lg: 1, md: 3, sm: 4} = {
|
@@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
53
54
|
variant = 'default',
|
54
55
|
dark = false,
|
55
56
|
unstyled = false,
|
57
|
+
commaSeparator = false,
|
56
58
|
} = props
|
57
59
|
|
58
60
|
const emphasizedClass = emphasized ? '' : '_deemphasized'
|
@@ -74,7 +76,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
74
76
|
className
|
75
77
|
)
|
76
78
|
|
77
|
-
const getFormattedNumber = (input: number | any
|
79
|
+
const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
|
78
80
|
notation: 'compact',
|
79
81
|
maximumFractionDigits: 1,
|
80
82
|
}).format(input)
|
@@ -88,12 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
88
90
|
return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
|
89
91
|
}
|
90
92
|
|
91
|
-
const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
|
92
|
-
|
93
|
+
const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
|
94
|
+
const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
|
93
95
|
|
94
|
-
const
|
95
|
-
|
96
|
-
|
96
|
+
const formatAmount = (amount: string) => {
|
97
|
+
if (!commaSeparator) return amount;
|
98
|
+
|
99
|
+
const [wholePart, decimalPart] = amount.split('.');
|
100
|
+
const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
|
101
|
+
return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
|
102
|
+
}
|
103
|
+
|
104
|
+
const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
|
105
|
+
const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
|
106
|
+
const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
|
97
107
|
|
98
108
|
return (
|
99
109
|
<div
|
@@ -43,6 +43,9 @@ module Playbook
|
|
43
43
|
prop :unstyled, type: Playbook::Props::Boolean,
|
44
44
|
default: false
|
45
45
|
|
46
|
+
prop :comma_separator, type: Playbook::Props::Boolean,
|
47
|
+
default: false
|
48
|
+
|
46
49
|
def classname
|
47
50
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
48
51
|
end
|
@@ -65,7 +68,7 @@ module Playbook
|
|
65
68
|
def title_props
|
66
69
|
{
|
67
70
|
size: size_value,
|
68
|
-
text: abbreviate ? abbreviated_value :
|
71
|
+
text: abbreviate ? abbreviated_value : formatted_amount,
|
69
72
|
classname: "pb_currency_value",
|
70
73
|
dark: dark,
|
71
74
|
}
|
@@ -96,28 +99,38 @@ module Playbook
|
|
96
99
|
private
|
97
100
|
|
98
101
|
def whole_value
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
+
value = amount.split(".").first
|
103
|
+
if comma_separator
|
104
|
+
number_with_delimiter(value.gsub(",", ""))
|
105
|
+
else
|
106
|
+
value
|
107
|
+
end
|
102
108
|
end
|
103
109
|
|
104
|
-
def
|
105
|
-
|
106
|
-
abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
|
107
|
-
abbreviated_num[index]
|
110
|
+
def decimal_value
|
111
|
+
amount.split(".")[1] || "00"
|
108
112
|
end
|
109
113
|
|
110
114
|
def units_element
|
111
115
|
return "" if decimals == "matching" && !abbreviate && !unit
|
112
116
|
|
113
|
-
|
114
|
-
|
115
|
-
|
117
|
+
if unit.nil? && !abbreviate
|
118
|
+
if decimals == "matching"
|
119
|
+
""
|
120
|
+
else
|
121
|
+
".#{decimal_value}"
|
122
|
+
end
|
116
123
|
else
|
117
124
|
abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
|
118
125
|
end
|
119
126
|
end
|
120
127
|
|
128
|
+
def abbreviated_value(index = 0..-2)
|
129
|
+
value = amount.split(".").first.gsub(",", "").to_i
|
130
|
+
abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
|
131
|
+
abbreviated_num[index]
|
132
|
+
end
|
133
|
+
|
121
134
|
def size_value
|
122
135
|
case size
|
123
136
|
when "lg"
|
@@ -132,6 +145,20 @@ module Playbook
|
|
132
145
|
def dark_class
|
133
146
|
dark ? "dark" : nil
|
134
147
|
end
|
148
|
+
|
149
|
+
def formatted_amount
|
150
|
+
return abbreviated_value if abbreviate
|
151
|
+
|
152
|
+
if decimals == "matching"
|
153
|
+
if comma_separator
|
154
|
+
number_with_delimiter(amount.gsub(",", ""))
|
155
|
+
else
|
156
|
+
amount
|
157
|
+
end
|
158
|
+
else
|
159
|
+
whole_value
|
160
|
+
end
|
161
|
+
end
|
135
162
|
end
|
136
163
|
end
|
137
164
|
end
|
@@ -61,3 +61,38 @@ test('decimals default prop returns decimals as body text', () => {
|
|
61
61
|
expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
|
62
62
|
expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
|
63
63
|
})
|
64
|
+
|
65
|
+
|
66
|
+
test('commaSeparator prop returns comma separated amount', () => {
|
67
|
+
render(
|
68
|
+
<Currency
|
69
|
+
amount="1234567890"
|
70
|
+
commaSeparator
|
71
|
+
data={{ testid: 'comma-test' }}
|
72
|
+
/>
|
73
|
+
)
|
74
|
+
expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
|
75
|
+
})
|
76
|
+
|
77
|
+
test('commaSeparator prop returns comma separated amount with decimals', () => {
|
78
|
+
render(
|
79
|
+
<Currency
|
80
|
+
amount="1234567890.12"
|
81
|
+
commaSeparator
|
82
|
+
data={{ testid: 'comma-test-decimals' }}
|
83
|
+
/>
|
84
|
+
)
|
85
|
+
expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
|
86
|
+
})
|
87
|
+
|
88
|
+
test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
|
89
|
+
render(
|
90
|
+
<Currency
|
91
|
+
amount="1234567890.12"
|
92
|
+
commaSeparator
|
93
|
+
data={{ testid: 'comma-test-decimals-matching' }}
|
94
|
+
decimals="matching"
|
95
|
+
/>
|
96
|
+
)
|
97
|
+
expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
|
98
|
+
})
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from "react"
|
2
|
+
|
3
|
+
import Currency from "../_currency"
|
4
|
+
|
5
|
+
const CurrencyCommaSeparator = (props) => {
|
6
|
+
return (
|
7
|
+
<Currency
|
8
|
+
amount='1234567.89'
|
9
|
+
commaSeparator
|
10
|
+
decimals="matching"
|
11
|
+
emphasized={false}
|
12
|
+
size="lg"
|
13
|
+
{...props}
|
14
|
+
/>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
|
18
|
+
export default CurrencyCommaSeparator
|
@@ -8,7 +8,8 @@ examples:
|
|
8
8
|
- currency_abbreviated: Abbreviate Larger Amounts
|
9
9
|
- currency_matching_decimals: Matching Decimals
|
10
10
|
- currency_unstyled: Unstyled
|
11
|
-
|
11
|
+
- currency_comma_separator: Comma Separator
|
12
|
+
|
12
13
|
react:
|
13
14
|
- currency_variants: Variants
|
14
15
|
- currency_size: Size
|
@@ -17,6 +18,7 @@ examples:
|
|
17
18
|
- currency_abbreviated: Abbreviate Larger Amounts
|
18
19
|
- currency_matching_decimals: Matching Decimals
|
19
20
|
- currency_unstyled: Unstyled
|
21
|
+
- currency_comma_separator: Comma Separator
|
20
22
|
|
21
23
|
swift:
|
22
24
|
- currency_size_swift: Size
|
@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
|
|
5
5
|
export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
7
7
|
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
8
|
+
export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
|
@@ -25,15 +25,17 @@
|
|
25
25
|
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
26
26
|
tabindex: 0,
|
27
27
|
truncate: 1,
|
28
|
+
id: "truncation-1"
|
28
29
|
}) %>
|
29
30
|
<%= pb_rails("form_pill", props: {
|
30
31
|
icon: "badge-check",
|
31
32
|
text: "icon and a very long tag to show truncation",
|
32
33
|
tabindex: 0,
|
33
34
|
truncate: 1,
|
35
|
+
id: "truncation-2"
|
34
36
|
}) %>
|
35
37
|
<%= pb_rails("form_pill", props: {
|
36
|
-
text: "form pill
|
38
|
+
text: "form pill long tag no tooltip show truncation",
|
37
39
|
tabindex: 0,
|
38
40
|
truncate: 1,
|
39
41
|
}) %>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
2
|
+
|
3
|
+
__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
|
@@ -0,0 +1 @@
|
|
1
|
+
For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
@@ -1,24 +1,27 @@
|
|
1
1
|
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
|
2
2
|
<% if object.name.present? %>
|
3
3
|
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
|
4
|
-
<%
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
4
|
+
<% if object.truncate %>
|
5
|
+
<div>
|
6
|
+
<%= pb_rails("title", props: {
|
7
|
+
classname: "pb_form_pill_text truncate_#{object.truncate}",
|
8
|
+
id: object.id,
|
9
|
+
size: 4,
|
10
|
+
text: object.name,
|
11
|
+
}) %>
|
12
|
+
<% if object.id.present? %>
|
13
|
+
<%= pb_rails("tooltip", props: {
|
14
|
+
position: "top",
|
15
|
+
tooltip_id: "tooltip-#{object.id}",
|
16
|
+
trigger_element_selector: "##{object.id}"
|
17
|
+
}) do %>
|
18
|
+
<%= object.name %>
|
19
|
+
<% end %>
|
19
20
|
<% end %>
|
20
|
-
|
21
|
-
|
21
|
+
</div>
|
22
|
+
<% else %>
|
23
|
+
<%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
|
24
|
+
<% end %>
|
22
25
|
<% if object.icon.present? %>
|
23
26
|
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
24
27
|
<% end %>
|
@@ -26,24 +29,27 @@
|
|
26
29
|
<% if object.icon.present? %>
|
27
30
|
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
28
31
|
<% end %>
|
29
|
-
<%
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
32
|
+
<% if object.truncate %>
|
33
|
+
<div>
|
34
|
+
<%= pb_rails("title", props: {
|
35
|
+
classname: "pb_form_pill_tag truncate_#{object.truncate}",
|
36
|
+
id: object.id,
|
37
|
+
size: 4,
|
38
|
+
text: object.text,
|
39
|
+
}) %>
|
40
|
+
<% if object.id.present? %>
|
41
|
+
<%= pb_rails("tooltip", props: {
|
42
|
+
position: "top",
|
43
|
+
tooltip_id: "tooltip-#{object.id}",
|
44
|
+
trigger_element_selector: "##{object.id}"
|
45
|
+
}) do %>
|
46
|
+
<%= object.text %>
|
47
|
+
<% end %>
|
44
48
|
<% end %>
|
45
|
-
|
46
|
-
|
49
|
+
</div>
|
50
|
+
<% else %>
|
51
|
+
<%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
|
52
|
+
<% end %>
|
47
53
|
<% end %>
|
48
54
|
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
|
49
55
|
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
|