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 +4 -4
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -2
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
- data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
- data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +67 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -1
- data/dist/chunks/_weekday_stacked-DdxTfWNt.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -5
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
- data/dist/chunks/_weekday_stacked-DTjG8w_B.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: d63cd70fa0e0f14b032f5ecf9797821a9d220c73c30daa8b3c930835621e4375
|
4
|
+
data.tar.gz: '0983801b52c3b009e241a4bacf55ae0184d7a50e4ce54279bae09ba8bee19414'
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
|
91
|
+
const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
|
92
|
+
getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
|
95
93
|
|
96
|
-
const
|
97
|
-
|
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 :
|
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
|
-
|
103
|
-
|
104
|
-
|
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
|
111
|
-
amount.split(".")
|
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
|
-
|
118
|
-
|
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
|
-
|
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
|
|
@@ -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
|