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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2ecc1c466ffb02f3bc53b3e5237a09734fa63537829c7a4602ea17c2cf54f8d4
4
- data.tar.gz: 90a09dc18273b805231bc2657bb1d4cb953329a2e56bc8018002fbf31f65bb71
3
+ metadata.gz: 03dac86a0a0da2ba84586aec1ddf5be7d28e1c20c24be64fcff49492d0b67014
4
+ data.tar.gz: 7ed399f489ac3f76d72c3b9d5d190c6bf2407ce57cddb04f15b9c60758f2b083
5
5
  SHA512:
6
- metadata.gz: 991aee43ea52beb462030837fff91e73869d23cc1121188427c880b67a77db574b8ff9b56686e054e66f744afe5f6d2a71bf55c29d761073e478280d7e70dff7
7
- data.tar.gz: ec959956157c06abfd37e1fb04e118c012c067229045251faf52202c40bb205924702991409a7de939e016d8c8507ae37682ccd694c2cd63c89c8c0f4e122072
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 ) => new Intl.NumberFormat('en-US', {
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
- getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
93
+ const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
94
+ const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
93
95
 
94
- const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
95
- getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
96
- getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
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 : whole_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
- return amount if decimals == "matching"
100
-
101
- amount.split(".").first.to_s
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 abbreviated_value(index = 0..-2)
105
- value = amount.split(".").first.split(",").join("")
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
- _, decimal_part = amount.split(".")
114
- if unit.nil? && abbreviate == false
115
- decimal_part.nil? ? ".00" : ".#{decimal_part}"
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,7 @@
1
+ <%= pb_rails("currency", props: {
2
+ amount: '1234567.89',
3
+ comma_separator: true,
4
+ size: 'lg',
5
+ emphasized: false,
6
+ decimals: 'matching',
7
+ }) %>
@@ -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
@@ -0,0 +1,3 @@
1
+ The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator.
2
+
3
+ **NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
@@ -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 with a very long tag to show truncation",
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
- <% element_id = "pill_#{object.name.parameterize}" %>
5
- <div>
6
- <%= pb_rails("title", props: {
7
- classname: "pb_form_pill_text #{object.truncate ? "truncate_#{object.truncate}" : ""}",
8
- id: element_id,
9
- size: 4,
10
- text: object.name,
11
- }) %>
12
- <% if object.truncate %>
13
- <%= pb_rails("tooltip", props: {
14
- position: "top",
15
- tooltip_id: "tooltip-#{element_id}",
16
- trigger_element_selector: "##{element_id}"
17
- }) do %>
18
- <%= object.name %>
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
- <% end %>
21
- </div>
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
- <% element_id = "pill_#{object.text.parameterize}" %>
30
- <div>
31
- <%= pb_rails("title", props: {
32
- classname: "pb_form_pill_tag #{object.truncate ? "truncate_#{object.truncate}" : ""}",
33
- id: element_id,
34
- size: 4,
35
- text: object.text
36
- }) %>
37
- <% if object.truncate %>
38
- <%= pb_rails("tooltip", props: {
39
- position: "top",
40
- tooltip_id: "tooltip-#{element_id}",
41
- trigger_element_selector: "##{element_id}"
42
- }) do %>
43
- <%= object.text %>
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
- <% end %>
46
- </div>
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 }) %>