playbook_ui 14.6.0.pre.alpha.PBNTR5554223 → 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222

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: 00b10f6b6dc5d613f9eaea588e3ea97f5d4045cebe40f1f26252eecb1feb7fc7
4
- data.tar.gz: 9340cc23fb8ef18ec04416f0ec585b47a925b1f92bb1dd28db98ca15f2c3ab93
3
+ metadata.gz: d63cd70fa0e0f14b032f5ecf9797821a9d220c73c30daa8b3c930835621e4375
4
+ data.tar.gz: '0983801b52c3b009e241a4bacf55ae0184d7a50e4ce54279bae09ba8bee19414'
5
5
  SHA512:
6
- metadata.gz: 839f0192c8d7db7090c6ea683470f1f57eed6b6b9949fb3b2c0d4febddd3ea6780acf437928f3933c9574d15f64ac4c492f8edc7f2b413771ff09111db8820b3
7
- data.tar.gz: 8a1ae795effa6c4a5fe482748cdab3c7f6ce0526c764e3273ca33fafd60916ed612cb5b2e406005460c6d5a6c55c18a2389f3fb70428be04981fd35db8473a86
6
+ metadata.gz: 3c179daad11db77a567d9964a4ff9cdb90efab24cdb88b7b8059579ef9592146d0deaa03e02765cd817e5730527e280796387f516974325ee80e644ae29f04da
7
+ data.tar.gz: 8e2b6701b47d392cda459d528dfbde3ff3c0703a6a5152fe73b77506013b5055d5f6e95c0bf41617b4b0dd8b03fbf666292573e99f4624386aff58deb6971ec8
@@ -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,7 +26,6 @@ type CurrencyProps = {
26
26
  variant?: 'default' | 'light' | 'bold',
27
27
  unit?: string,
28
28
  unstyled?: boolean,
29
- commaSeparator?: boolean,
30
29
  }
31
30
 
32
31
  const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -54,7 +53,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
54
53
  variant = 'default',
55
54
  dark = false,
56
55
  unstyled = false,
57
- commaSeparator = false,
58
56
  } = props
59
57
 
60
58
  const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -76,7 +74,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
76
74
  className
77
75
  )
78
76
 
79
- const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
77
+ const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
80
78
  notation: 'compact',
81
79
  maximumFractionDigits: 1,
82
80
  }).format(input)
@@ -90,20 +88,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
90
88
  return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
91
89
  }
92
90
 
93
- const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
94
- const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
91
+ const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
92
+ getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
95
93
 
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
94
+ const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
95
+ getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
96
+ getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
107
97
 
108
98
  return (
109
99
  <div
@@ -43,9 +43,6 @@ 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
-
49
46
  def classname
50
47
  generate_classname("pb_currency_kit", align, size, dark_class)
51
48
  end
@@ -68,7 +65,7 @@ module Playbook
68
65
  def title_props
69
66
  {
70
67
  size: size_value,
71
- text: abbreviate ? abbreviated_value : formatted_amount,
68
+ text: abbreviate ? abbreviated_value : whole_value,
72
69
  classname: "pb_currency_value",
73
70
  dark: dark,
74
71
  }
@@ -99,38 +96,28 @@ module Playbook
99
96
  private
100
97
 
101
98
  def whole_value
102
- value = amount.split(".").first
103
- if comma_separator
104
- number_with_delimiter(value.gsub(",", ""))
105
- else
106
- value
107
- end
99
+ return amount if decimals == "matching"
100
+
101
+ amount.split(".").first.to_s
108
102
  end
109
103
 
110
- def decimal_value
111
- amount.split(".")[1] || "00"
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]
112
108
  end
113
109
 
114
110
  def units_element
115
111
  return "" if decimals == "matching" && !abbreviate && !unit
116
112
 
117
- if unit.nil? && !abbreviate
118
- if decimals == "matching"
119
- ""
120
- else
121
- ".#{decimal_value}"
122
- end
113
+ _, decimal_part = amount.split(".")
114
+ if unit.nil? && abbreviate == false
115
+ decimal_part.nil? ? ".00" : ".#{decimal_part}"
123
116
  else
124
117
  abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
125
118
  end
126
119
  end
127
120
 
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
-
134
121
  def size_value
135
122
  case size
136
123
  when "lg"
@@ -145,20 +132,6 @@ module Playbook
145
132
  def dark_class
146
133
  dark ? "dark" : nil
147
134
  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
162
135
  end
163
136
  end
164
137
  end
@@ -61,38 +61,3 @@ 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
- })
@@ -8,8 +8,7 @@ examples:
8
8
  - currency_abbreviated: Abbreviate Larger Amounts
9
9
  - currency_matching_decimals: Matching Decimals
10
10
  - currency_unstyled: Unstyled
11
- - currency_comma_separator: Comma Separator
12
-
11
+
13
12
  react:
14
13
  - currency_variants: Variants
15
14
  - currency_size: Size
@@ -18,7 +17,6 @@ examples:
18
17
  - currency_abbreviated: Abbreviate Larger Amounts
19
18
  - currency_matching_decimals: Matching Decimals
20
19
  - currency_unstyled: Unstyled
21
- - currency_comma_separator: Comma Separator
22
20
 
23
21
  swift:
24
22
  - currency_size_swift: Size
@@ -5,4 +5,3 @@ 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'
@@ -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
+ &[class*=_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
 
@@ -66,6 +66,7 @@ const SelectableCard = (props: SelectableCardProps) => {
66
66
  'checked': checked,
67
67
  'disabled': disabled,
68
68
  'enabled': !disabled,
69
+ 'display_input': variant === 'displayInput',
69
70
  }),
70
71
  { error },
71
72
  dark ? 'dark' : '',
@@ -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" : nil
85
+ end
82
86
  end
83
87
  end
84
88
  end