playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4303 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316

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: 0e0a61942ce72178bc4995507346515c1ca4a4347152d168cc9e84061d66231f
4
- data.tar.gz: b40339fc9adb7796cdb029c5450f3f3d9065ca3122f3659692bbfd42a94c3c67
3
+ metadata.gz: 845eb3cdd33a7fef9c5af145bcf680907b6c74d5126bba69805acf33f3ff6a48
4
+ data.tar.gz: 18d01e30a45050069d838577a03df29a892c7ebe042ca8a252ed68b665fd7c56
5
5
  SHA512:
6
- metadata.gz: 0dba16c359445b2daebcfcd0f56b4cfd50a678fdf09959ed37cbda194900cabaa6da73d557fe064f1e9f9c89eda514341bf72e7db65df606cd2d96039518c3af
7
- data.tar.gz: 2bd784894bceafb2c1fdf90aa9aea4f69d19020e2017c900e03a5f87846b7c04b32cf8c4f1fa5113db4853d4db266978c5836556f9b87af16e529cc0bbaa2dcd
6
+ metadata.gz: 06afa342868f031819a728684e905aaeb09445e855ac28938e3b746deb93e37bc0b0ff22f6d133d9b80f005c420cb3e500b3081f12e688844238658ba8ded457
7
+ data.tar.gz: '08f62a0749684bc633d09aed01b768aae32d2569fa0ee13224647bce0152ccce9016931104990822e12218c46e955cee0b81baafec0897c710407a979b7007b1'
@@ -28,8 +28,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
28
28
 
29
29
  @mixin pb_card_selected($border_color: $primary) {
30
30
  border-color: $border_color;
31
- border-width: $pb_card_border_width;
32
- outline: 1px solid $border_color;
31
+ border-width: $pb_card_border_width * 2;
33
32
  }
34
33
 
35
34
  @mixin pb_card_selected_dark {
@@ -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'
@@ -47,7 +47,7 @@ interface DropdownComponent
47
47
  Container: typeof DropdownContainer;
48
48
  }
49
49
 
50
- const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props, ref) => {
50
+ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
51
51
  const {
52
52
  aria = {},
53
53
  autocomplete = false,
@@ -260,8 +260,7 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
260
260
  <DropdownContainer>
261
261
  {optionsWithBlankSelection &&
262
262
  optionsWithBlankSelection?.map((option: GenericObject) => (
263
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
264
- <ForwardedDropdown.Option key={option.id}
263
+ <DropdownOption key={option.id}
265
264
  option={option}
266
265
  />
267
266
  ))}
@@ -281,10 +280,10 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
281
280
  )
282
281
  }
283
282
 
284
- const ForwardedDropdown = forwardRef(Dropdown) as DropdownComponent;
285
- ForwardedDropdown.displayName = "Dropdown";
286
- ForwardedDropdown.Option = DropdownOption;
287
- ForwardedDropdown.Trigger = DropdownTrigger;
288
- ForwardedDropdown.Container = DropdownContainer;
283
+ Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
284
+ (Dropdown as DropdownComponent).displayName = "Dropdown";
285
+ (Dropdown as DropdownComponent).Option = DropdownOption;
286
+ (Dropdown as DropdownComponent).Trigger = DropdownTrigger;
287
+ (Dropdown as DropdownComponent).Container = DropdownContainer;
289
288
 
290
- export default ForwardedDropdown;
289
+ export default Dropdown;
@@ -10,6 +10,24 @@
10
10
  $pb_selectable_card_indicator_size: 22px;
11
11
  $pb_selectable_card_border: 2px;
12
12
 
13
+ $pb_selectable_space_classes: (
14
+ xxs: $space_xxs,
15
+ xs: $space_xs,
16
+ sm: $space_sm,
17
+ md: $space_md,
18
+ lg: $space_lg,
19
+ xl: $space_xl,
20
+ );
21
+ $pb_selectable_paddings: (
22
+ p: "padding",
23
+ pr: "padding-right",
24
+ pl: "padding-left",
25
+ pt: "padding-top",
26
+ pb: "padding-bottom",
27
+ px: ("padding-left", "padding-right"),
28
+ py: ("padding-top", "padding-bottom")
29
+ );
30
+
13
31
  [class^=pb_selectable_card_kit] {
14
32
  display: block;
15
33
  margin-bottom: 0;
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
28
46
  padding: $space_sm;
29
47
  margin-bottom: $space_sm;
30
48
  cursor: pointer;
31
- outline: 1px solid transparent;
32
49
 
33
50
  @media (hover:hover) {
34
51
  &:hover {
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
74
91
 
75
92
  position: relative;
76
93
  @include pb_card_selected;
94
+ padding: calc(#{$space_sm} - 1px);
77
95
  transition-property: none;
78
96
  transition-duration: 0s;
79
97
 
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
88
106
  background-color: $royal;
89
107
  }
90
108
  }
109
+
110
+ // Selected card has 1px more border
111
+ // Remove 1px so content does not "jump"
112
+ @each $position_name,
113
+ $position in $pb_selectable_paddings {
114
+ @each $space_name,
115
+ $space in $pb_selectable_space_classes {
116
+ ~ label.#{$position_name}_#{$space_name} {
117
+ @if type-of($position)=="list" {
118
+ @each $coordinate in $position {
119
+ #{$coordinate}: calc(#{$space} - 1px) !important;
120
+ }
121
+ }
122
+
123
+ @else {
124
+ #{$position}: calc(#{$space} - 1px) !important;
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
131
+
132
+ &.display_input {
133
+ input[type="checkbox"],
134
+ input[type="radio"] {
135
+ &:checked {
136
+ ~label {
137
+ border-width: $pb_card_border_width;
138
+ outline: 1px solid $primary;
139
+ }
140
+
141
+ }
142
+ }
143
+
144
+ > label {
145
+ outline: 1px solid transparent;
146
+ padding: $space_sm;
147
+ }
148
+
149
+ &.dark {
150
+ input[type="checkbox"],
151
+ input[type="radio"] {
152
+ &:checked ~ label {
153
+ border-width: $pb_card_border_width;
154
+ outline: 1px solid $primary;
155
+ }
156
+ }
91
157
  }
92
158
  }
93
159
 
@@ -67,6 +67,7 @@ const SelectableCard = (props: SelectableCardProps) => {
67
67
  'disabled': disabled,
68
68
  'enabled': !disabled,
69
69
  }),
70
+ variant === 'displayInput' ? 'display_input' : '',
70
71
  { error },
71
72
  dark ? 'dark' : '',
72
73
  className
@@ -25,7 +25,7 @@
25
25
  <% end %>
26
26
  <div class="separator"></div>
27
27
  <div class="psuedo_separator"></div>
28
- <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
28
+ <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
29
29
  <% if content.nil? %>
30
30
  <%= pb_rails("body", props: { text: object.text }) %>
31
31
  <% else %>
@@ -25,7 +25,7 @@ module Playbook
25
25
 
26
26
  def classname
27
27
  [
28
- generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
28
+ generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
29
29
  error_class,
30
30
  dark_props,
31
31
  ].compact.join(" ")
@@ -79,6 +79,10 @@ module Playbook
79
79
  def error_class
80
80
  error ? "error" : nil
81
81
  end
82
+
83
+ def display_input_class
84
+ variant == "display_input" ? " display_input" : ""
85
+ end
82
86
  end
83
87
  end
84
88
  end