playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4303 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4305
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_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/dist/chunks/_weekday_stacked-BCRN4gY0.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 +5 -2
- data/dist/chunks/_weekday_stacked-BeZ0h2P0.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: 31ad89e3fa840597a7d38316aea7fcdd57bf7c4c1352e762d2845fc689346231
|
4
|
+
data.tar.gz: 519831d474fdc0187abeadbdc328f4653fdaf566195596ca5f5c600be3214d1d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a0538a8f59b5c77c623501feb8f0b75a5cb39aa3238debd67ca27ec09f3ddbd59bb4562c14fd54edd6bf3fdd3ca86a570ecf4d71a998bcc68e6b7992be2731e7
|
7
|
+
data.tar.gz: 9f7217f4ef982eb0e30e0f96687e8dfd0f281267397698e576d5a3af4462b07c2bab5a11877057936d8f829c3df83e6f6d60ea903ecdf13c416d4d56a552aeb2
|
@@ -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'
|