playbook_ui 10.23.0.pre.cachetest → 10.24.0
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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/index.js +0 -3
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +2 -2
- data/app/pb_kits/playbook/pb_avatar/{_avatar.jsx → _avatar.tsx} +13 -14
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +1 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +1 -1
- data/app/pb_kits/playbook/pb_background/_background.jsx +18 -4
- data/app/pb_kits/playbook/pb_background/_background.scss +23 -7
- data/app/pb_kits/playbook/pb_background/background.html.erb +5 -2
- data/app/pb_kits/playbook/pb_background/background.rb +33 -6
- data/app/pb_kits/playbook/pb_background/background.test.js +17 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +50 -2
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +71 -28
- data/app/pb_kits/playbook/pb_background/docs/_background_image.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_size.html.erb +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +36 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_size.md +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +5 -1
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx +2 -2
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/_button.jsx +8 -4
- data/app/pb_kits/playbook/pb_button/_button.scss +18 -1
- data/app/pb_kits/playbook/pb_button/button.rb +13 -3
- data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +14 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +1 -1
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/_card.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +88 -0
- data/app/pb_kits/playbook/pb_card/card_body.rb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx +1 -1
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +24 -3
- data/app/pb_kits/playbook/pb_currency/currency.rb +12 -3
- data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb +27 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx +44 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +215 -0
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +1 -1
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +13 -1
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb +13 -6
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +9 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +3 -3
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md +2 -2
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +1 -1
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +17 -10
- data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +40 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -24
- data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +2 -2
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +1 -0
- data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx +1 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +3 -3
- data/app/pb_kits/playbook/pb_image/{_image.jsx → _image.tsx} +11 -15
- data/app/pb_kits/playbook/pb_image/docs/{_default_image.jsx → _default_image.tsx} +1 -1
- data/app/pb_kits/playbook/pb_image/docs/index.js +4 -4
- data/app/pb_kits/playbook/pb_image/image.rb +1 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +1 -1
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +1 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +5 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_list/_list.jsx +1 -1
- data/app/pb_kits/playbook/pb_list/_list_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +1 -1
- data/app/pb_kits/playbook/pb_online_status/{_online_status.jsx → _online_status.tsx} +4 -6
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +2 -2
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -5
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
- data/app/pb_kits/playbook/pb_popover/index.js +4 -9
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +83 -93
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +15 -8
- data/app/pb_kits/playbook/pb_select/_select.jsx +2 -2
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_stat_value/stat_value.rb +2 -2
- data/app/pb_kits/playbook/pb_table/_table.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/_table_row.jsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +24 -19
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +14 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +1 -0
- data/app/pb_kits/playbook/pb_time/_time.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.jsx +1 -1
- data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +1 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +8 -4
- data/app/pb_kits/playbook/utilities/_align_content.scss +29 -0
- data/app/pb_kits/playbook/utilities/_align_items.scss +35 -0
- data/app/pb_kits/playbook/utilities/_align_self.scss +29 -0
- data/app/pb_kits/playbook/utilities/_flex.scss +15 -0
- data/app/pb_kits/playbook/utilities/_flex_direction.scss +19 -0
- data/app/pb_kits/playbook/utilities/_flex_grow.scss +9 -0
- data/app/pb_kits/playbook/utilities/_flex_shrink.scss +9 -0
- data/app/pb_kits/playbook/utilities/_flex_wrap.scss +14 -0
- data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -0
- data/app/pb_kits/playbook/utilities/_justify_content.scss +23 -0
- data/app/pb_kits/playbook/utilities/_justify_self.scss +19 -0
- data/app/pb_kits/playbook/utilities/_order.scss +55 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +297 -0
- data/app/pb_kits/playbook/utilities/{props.js → props.ts} +9 -7
- data/lib/playbook/align_content.rb +29 -0
- data/lib/playbook/align_items.rb +29 -0
- data/lib/playbook/align_self.rb +29 -0
- data/lib/playbook/classnames.rb +11 -0
- data/lib/playbook/flex.rb +29 -0
- data/lib/playbook/flex_direction.rb +29 -0
- data/lib/playbook/flex_grow.rb +29 -0
- data/lib/playbook/flex_shrink.rb +29 -0
- data/lib/playbook/flex_wrap.rb +29 -0
- data/lib/playbook/justify_content.rb +29 -0
- data/lib/playbook/justify_self.rb +29 -0
- data/lib/playbook/kit_base.rb +22 -0
- data/lib/playbook/order.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- metadata +47 -11
- data/app/pb_kits/playbook/types.js +0 -4
- data/app/pb_kits/playbook/utilities/globalProps.js +0 -97
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import { globalProps } from '../utilities/globalProps
|
5
|
+
import { globalProps, domSafeProps } from '../utilities/globalProps'
|
6
6
|
|
7
7
|
import {
|
8
8
|
buildAriaProps,
|
@@ -43,7 +43,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
|
|
43
43
|
>
|
44
44
|
<Component
|
45
45
|
className="pb_bread_crumb_item"
|
46
|
-
{...rest}
|
46
|
+
{...domSafeProps(rest)}
|
47
47
|
/>
|
48
48
|
</div>
|
49
49
|
)
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
import Icon from '../pb_icon/_icon.jsx'
|
9
9
|
|
@@ -15,6 +15,7 @@ type ButtonPropTypes = {
|
|
15
15
|
data?: object,
|
16
16
|
disabled?: boolean,
|
17
17
|
fixedWidth?: boolean,
|
18
|
+
form?: string,
|
18
19
|
fullWidth?: boolean,
|
19
20
|
icon?: string,
|
20
21
|
id?: string,
|
@@ -22,7 +23,7 @@ type ButtonPropTypes = {
|
|
22
23
|
loading?: boolean,
|
23
24
|
newWindow?: boolean,
|
24
25
|
onClick?: EventHandler,
|
25
|
-
size
|
26
|
+
size?: 'sm' | 'md' | 'lg',
|
26
27
|
text?: string,
|
27
28
|
type: 'inline' | null,
|
28
29
|
htmlType: string | 'button',
|
@@ -36,19 +37,19 @@ const buttonClassName = (props: ButtonPropTypes) => {
|
|
36
37
|
disabled = false,
|
37
38
|
fullWidth = false,
|
38
39
|
loading = false,
|
39
|
-
size = null,
|
40
40
|
type = 'inline',
|
41
41
|
variant = 'primary',
|
42
|
+
size = null,
|
42
43
|
} = props
|
43
44
|
|
44
45
|
let className = 'pb_button_kit'
|
45
46
|
|
46
47
|
className += `${variant !== null ? `_${variant}` : ''}`
|
47
48
|
className += `${type !== null ? `_${type}` : ''}`
|
48
|
-
className += `${size !== null ? `_${size}` : ''}`
|
49
49
|
className += `${fullWidth ? '_block' : ''}`
|
50
50
|
className += disabled ? '_disabled' : '_enabled'
|
51
51
|
className += loading ? '_loading' : ''
|
52
|
+
className += `${size !== null ? ` size_${size}` : ''}`
|
52
53
|
|
53
54
|
return className
|
54
55
|
}
|
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
69
70
|
text,
|
70
71
|
htmlType = 'button',
|
71
72
|
value,
|
73
|
+
form = null
|
72
74
|
} = props
|
73
75
|
|
74
76
|
const ariaProps = buildAriaProps(aria)
|
@@ -106,6 +108,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
106
108
|
className={css}
|
107
109
|
href={link}
|
108
110
|
id={id}
|
111
|
+
rel="noreferrer"
|
109
112
|
role="link"
|
110
113
|
target={newWindow ? '_blank' : null}
|
111
114
|
>
|
@@ -118,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
118
121
|
{...dataProps}
|
119
122
|
className={css}
|
120
123
|
disabled={disabled}
|
124
|
+
form={form}
|
121
125
|
id={id}
|
122
126
|
onClick={onClick}
|
123
127
|
role="button"
|
@@ -1,7 +1,24 @@
|
|
1
1
|
@import "./button_mixins";
|
2
2
|
|
3
|
-
|
3
|
+
$pb_button_sizes: (
|
4
|
+
"sm": 0.75rem,
|
5
|
+
"md": 0.875rem,
|
6
|
+
"lg": 1.125rem,
|
7
|
+
);
|
8
|
+
|
9
|
+
[class*=pb_button_kit]{
|
4
10
|
@include pb_button;
|
11
|
+
// Size =================
|
12
|
+
@each $name, $size in $pb_button_sizes {
|
13
|
+
&[class*=size_#{$name}] {
|
14
|
+
font-size: $size;
|
15
|
+
padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
|
16
|
+
@if $name == "sm" {
|
17
|
+
min-height: 0;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
5
22
|
// Variants =================
|
6
23
|
&[class*=_primary] {
|
7
24
|
@include pb_button_primary;
|
@@ -18,6 +18,10 @@ module Playbook
|
|
18
18
|
prop :text
|
19
19
|
prop :type
|
20
20
|
prop :value
|
21
|
+
prop :size, type: Playbook::Props::Enum,
|
22
|
+
values: ["sm", "md", "lg", nil],
|
23
|
+
default: nil
|
24
|
+
prop :form, default: nil
|
21
25
|
|
22
26
|
def options
|
23
27
|
{
|
@@ -29,6 +33,7 @@ module Playbook
|
|
29
33
|
role: "button",
|
30
34
|
type: type,
|
31
35
|
value: value,
|
36
|
+
form: form,
|
32
37
|
}.compact
|
33
38
|
end
|
34
39
|
|
@@ -44,12 +49,13 @@ module Playbook
|
|
44
49
|
link ? "a" : "button"
|
45
50
|
end
|
46
51
|
|
47
|
-
private
|
48
|
-
|
49
52
|
def classname
|
50
|
-
generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
|
53
|
+
button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
|
54
|
+
button_class + size_class
|
51
55
|
end
|
52
56
|
|
57
|
+
private
|
58
|
+
|
53
59
|
def disabled_class
|
54
60
|
disabled ? "disabled" : "enabled"
|
55
61
|
end
|
@@ -61,6 +67,10 @@ module Playbook
|
|
61
67
|
def loading_class
|
62
68
|
loading ? "loading" : nil
|
63
69
|
end
|
70
|
+
|
71
|
+
def size_class
|
72
|
+
size ? " size_#{size}" : ""
|
73
|
+
end
|
64
74
|
end
|
65
75
|
end
|
66
76
|
end
|
@@ -89,3 +89,16 @@ test('click event', async () => {
|
|
89
89
|
|
90
90
|
expect(screen.getByText('clicked button!')).toBeInTheDocument()
|
91
91
|
})
|
92
|
+
|
93
|
+
test('size prop', () => {
|
94
|
+
render(
|
95
|
+
<Button
|
96
|
+
data={{ testid: 'size-test' }}
|
97
|
+
size="sm"
|
98
|
+
/>
|
99
|
+
)
|
100
|
+
|
101
|
+
const kit = screen.getByTestId('size-test')
|
102
|
+
|
103
|
+
expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
|
104
|
+
})
|
@@ -1 +1 @@
|
|
1
|
-
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"
|
1
|
+
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button } from '../../'
|
3
|
+
|
4
|
+
const ButtonSize = (props) => (
|
5
|
+
<div>
|
6
|
+
<Button
|
7
|
+
size="sm"
|
8
|
+
text="Button sm size"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
{' '}
|
12
|
+
<Button
|
13
|
+
size="md"
|
14
|
+
text="Button md size"
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
{' '}
|
18
|
+
<Button
|
19
|
+
size="lg"
|
20
|
+
text="Button lg size"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
</div>
|
24
|
+
)
|
25
|
+
|
26
|
+
export default ButtonSize
|
@@ -0,0 +1 @@
|
|
1
|
+
By default button has the `md` size style, even if you don't explicitly pass a size prop.
|
@@ -7,6 +7,8 @@ examples:
|
|
7
7
|
- button_block_content: Button Block Content
|
8
8
|
- button_accessibility: Button Accessibility Options
|
9
9
|
- button_options: Button Additional Options
|
10
|
+
- button_size: Button Size
|
11
|
+
- button_form: Button Form Attribute
|
10
12
|
react:
|
11
13
|
- button_default: Button Variants
|
12
14
|
- button_full_width: Button Full Width
|
@@ -15,3 +17,5 @@ examples:
|
|
15
17
|
- button_block_content: Button Block Content
|
16
18
|
- button_accessibility: Button Accessibility Options
|
17
19
|
- button_options: Button Additional Options (onClick)
|
20
|
+
- button_size: Button Size
|
21
|
+
- button_form: Button Form Attribute
|
@@ -5,3 +5,5 @@ export { default as ButtonLoading } from './_button_loading.jsx'
|
|
5
5
|
export { default as ButtonBlockContent } from './_button_block_content.jsx'
|
6
6
|
export { default as ButtonAccessibility } from './_button_accessibility.jsx'
|
7
7
|
export { default as ButtonOptions } from './_button_options.jsx'
|
8
|
+
export { default as ButtonSize } from './_button_size.jsx'
|
9
|
+
export { default as ButtonForm } from './_button_form.jsx'
|
@@ -5,7 +5,7 @@ import classnames from 'classnames'
|
|
5
5
|
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
7
|
|
8
|
-
import { globalProps } from '../utilities/globalProps
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
9
9
|
|
10
10
|
type ButtonToolbarProps = {
|
11
11
|
aria?: object,
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { deprecatedProps, globalProps } from '../utilities/globalProps
|
6
|
+
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
type CaptionProps = {
|
9
9
|
aria?: object,
|
@@ -4,7 +4,7 @@ import React from 'react'
|
|
4
4
|
import { get } from 'lodash'
|
5
5
|
import classnames from 'classnames'
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
|
-
import { globalProps } from '../utilities/globalProps
|
7
|
+
import { globalProps } from '../utilities/globalProps'
|
8
8
|
|
9
9
|
type CardPropTypes = {
|
10
10
|
aria?: object,
|
@@ -4,7 +4,7 @@
|
|
4
4
|
class: object.classname,
|
5
5
|
aria: object.aria,
|
6
6
|
dark: object.dark) do %>
|
7
|
-
<%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
|
7
|
+
<%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
|
8
8
|
<%= content %>
|
9
9
|
<% end if content.present? %>
|
10
10
|
<% end %>
|
@@ -36,6 +36,94 @@ module Playbook
|
|
36
36
|
end
|
37
37
|
end
|
38
38
|
|
39
|
+
def body_flex_direction
|
40
|
+
if flex_direction.present?
|
41
|
+
"flex_direction_#{flex_direction}"
|
42
|
+
else
|
43
|
+
""
|
44
|
+
end
|
45
|
+
end
|
46
|
+
|
47
|
+
def body_flex_wrap
|
48
|
+
if flex_wrap.present?
|
49
|
+
"flex_wrap_#{flex_wrap}"
|
50
|
+
else
|
51
|
+
""
|
52
|
+
end
|
53
|
+
end
|
54
|
+
|
55
|
+
def body_justify_content
|
56
|
+
if justify_content.present?
|
57
|
+
"justify_content_#{justify_content}"
|
58
|
+
else
|
59
|
+
""
|
60
|
+
end
|
61
|
+
end
|
62
|
+
|
63
|
+
def body_justify_self
|
64
|
+
if justify_self.present?
|
65
|
+
"justify_self_#{justify_self}"
|
66
|
+
else
|
67
|
+
""
|
68
|
+
end
|
69
|
+
end
|
70
|
+
|
71
|
+
def body_align_items
|
72
|
+
if align_items.present?
|
73
|
+
"align_items_#{align_items}"
|
74
|
+
else
|
75
|
+
""
|
76
|
+
end
|
77
|
+
end
|
78
|
+
|
79
|
+
def body_align_content
|
80
|
+
if align_content.present?
|
81
|
+
"align_content_#{align_content}"
|
82
|
+
else
|
83
|
+
""
|
84
|
+
end
|
85
|
+
end
|
86
|
+
|
87
|
+
def body_align_self
|
88
|
+
if align_self.present?
|
89
|
+
"align_self_#{align_self}"
|
90
|
+
else
|
91
|
+
""
|
92
|
+
end
|
93
|
+
end
|
94
|
+
|
95
|
+
def body_flex
|
96
|
+
if flex.present?
|
97
|
+
"flex_#{flex}"
|
98
|
+
else
|
99
|
+
""
|
100
|
+
end
|
101
|
+
end
|
102
|
+
|
103
|
+
def body_flex_grow
|
104
|
+
if flex_grow.present?
|
105
|
+
"flex_grow_#{flex_grow}"
|
106
|
+
else
|
107
|
+
""
|
108
|
+
end
|
109
|
+
end
|
110
|
+
|
111
|
+
def body_flex_shrink
|
112
|
+
if flex_shrink.present?
|
113
|
+
"flex_shrink_#{flex_shrink}"
|
114
|
+
else
|
115
|
+
""
|
116
|
+
end
|
117
|
+
end
|
118
|
+
|
119
|
+
def body_order
|
120
|
+
if order.present?
|
121
|
+
"order_#{order}"
|
122
|
+
else
|
123
|
+
""
|
124
|
+
end
|
125
|
+
end
|
126
|
+
|
39
127
|
private
|
40
128
|
|
41
129
|
def selected_class
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbCard
|
5
5
|
class CardBody < Playbook::KitBase
|
6
6
|
def classname
|
7
|
-
generate_classname("pb_card_body_kit", padding, separator: " ")
|
7
|
+
generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
|
8
8
|
end
|
9
9
|
end
|
10
10
|
end
|
@@ -5,7 +5,7 @@ import Body from '../pb_body/_body.jsx'
|
|
5
5
|
import Icon from '../pb_icon/_icon.jsx'
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
7
|
import classnames from 'classnames'
|
8
|
-
import { globalProps } from '../utilities/globalProps
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
9
9
|
|
10
10
|
type CheckboxProps = {
|
11
11
|
aria?: object,
|
@@ -14,6 +14,7 @@ type CircleChartProps = {
|
|
14
14
|
children: Node,
|
15
15
|
className?: string,
|
16
16
|
colors: array,
|
17
|
+
dark?: Boolean,
|
17
18
|
data?: Object,
|
18
19
|
dataLabelHtml: string,
|
19
20
|
dataLabels: boolean,
|
@@ -40,6 +41,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
40
41
|
children,
|
41
42
|
className,
|
42
43
|
colors = [],
|
44
|
+
dark = false,
|
43
45
|
data = {},
|
44
46
|
dataLabelHtml = '<div>{point.name}</div>',
|
45
47
|
dataLabels = false,
|
@@ -81,6 +83,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
81
83
|
borderColor: roundedBorderColor,
|
82
84
|
borderWidth: roundedBorderWidth,
|
83
85
|
chartData: formattedChartData,
|
86
|
+
dark,
|
84
87
|
title,
|
85
88
|
type: style,
|
86
89
|
showInLegend: legend,
|
@@ -7,7 +7,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
7
7
|
import type { Callback } from '../types'
|
8
8
|
|
9
9
|
import { noop } from '../utilities/props'
|
10
|
-
import { globalProps } from '../utilities/globalProps
|
10
|
+
import { globalProps } from '../utilities/globalProps'
|
11
11
|
|
12
12
|
import Button from '../pb_button/_button'
|
13
13
|
import Icon from '../pb_icon/_icon'
|
@@ -4,7 +4,7 @@ import React, { useState } from 'react'
|
|
4
4
|
|
5
5
|
import classnames from 'classnames'
|
6
6
|
|
7
|
-
import { globalProps } from '../utilities/globalProps
|
7
|
+
import { globalProps } from '../utilities/globalProps'
|
8
8
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
9
9
|
|
10
10
|
import CollapsibleContent from './child_kits/CollapsibleContent'
|
@@ -4,7 +4,7 @@ import classnames from 'classnames'
|
|
4
4
|
import React, { useContext } from 'react'
|
5
5
|
import AnimateHeight from 'react-animate-height'
|
6
6
|
import { buildCss } from '../../utilities/props'
|
7
|
-
import { globalProps } from '../../utilities/globalProps
|
7
|
+
import { globalProps } from '../../utilities/globalProps'
|
8
8
|
|
9
9
|
import CollapsibleContext from '../context'
|
10
10
|
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
8
8
|
|
9
9
|
import Body from '../pb_body/_body'
|
@@ -11,6 +11,7 @@ import Caption from '../pb_caption/_caption'
|
|
11
11
|
import Title from '../pb_title/_title'
|
12
12
|
|
13
13
|
type CurrencyProps = {
|
14
|
+
abbreviate?: boolean,
|
14
15
|
align?: 'center' | 'left' | 'right',
|
15
16
|
amount: string,
|
16
17
|
aria?: object,
|
@@ -34,6 +35,7 @@ const sizes = {
|
|
34
35
|
|
35
36
|
const Currency = (props: CurrencyProps) => {
|
36
37
|
const {
|
38
|
+
abbreviate = false,
|
37
39
|
align = 'left',
|
38
40
|
aria = {},
|
39
41
|
amount,
|
@@ -69,6 +71,24 @@ const Currency = (props: CurrencyProps) => {
|
|
69
71
|
className
|
70
72
|
)
|
71
73
|
|
74
|
+
const getFormattedNumber = (input) => new Intl.NumberFormat('en-US', {
|
75
|
+
notation: 'compact',
|
76
|
+
maximumFractionDigits: 1,
|
77
|
+
}).format(input)
|
78
|
+
|
79
|
+
type AbbrType = 'amount' | 'unit'
|
80
|
+
|
81
|
+
const getAbbreviatedValue = (abbrType: AbbrType) => {
|
82
|
+
const num = `${getFormattedNumber(whole.split(',').join(''))}`,
|
83
|
+
isAmount = abbrType === 'amount',
|
84
|
+
isUnit = abbrType === 'unit'
|
85
|
+
return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
|
86
|
+
}
|
87
|
+
|
88
|
+
const getAmount = abbreviate ? getAbbreviatedValue('amount') : whole,
|
89
|
+
getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
|
90
|
+
getDecimalValue = abbreviate ? '' : `.${decimal}`
|
91
|
+
|
72
92
|
return (
|
73
93
|
<div
|
74
94
|
{...ariaProps}
|
@@ -92,7 +112,7 @@ const Currency = (props: CurrencyProps) => {
|
|
92
112
|
dark={dark}
|
93
113
|
size={sizes[size]}
|
94
114
|
>
|
95
|
-
{
|
115
|
+
{getAmount}
|
96
116
|
</Title>
|
97
117
|
|
98
118
|
<Body
|
@@ -100,10 +120,11 @@ const Currency = (props: CurrencyProps) => {
|
|
100
120
|
color="light"
|
101
121
|
dark={dark}
|
102
122
|
>
|
123
|
+
{getAbbreviation}
|
103
124
|
<If condition={unit}>
|
104
125
|
{unit}
|
105
126
|
<Else />
|
106
|
-
{
|
127
|
+
{getDecimalValue}
|
107
128
|
</If>
|
108
129
|
</Body>
|
109
130
|
</div>
|
@@ -33,6 +33,9 @@ module Playbook
|
|
33
33
|
prop :dark, type: Playbook::Props::Boolean,
|
34
34
|
default: false
|
35
35
|
|
36
|
+
prop :abbreviate, type: Playbook::Props::Boolean,
|
37
|
+
default: false
|
38
|
+
|
36
39
|
def classname
|
37
40
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
38
41
|
end
|
@@ -48,7 +51,7 @@ module Playbook
|
|
48
51
|
def title_props
|
49
52
|
{
|
50
53
|
size: size_value,
|
51
|
-
text: whole_value,
|
54
|
+
text: abbreviate ? abbreviated_value : whole_value,
|
52
55
|
classname: "pb_currency_value",
|
53
56
|
dark: dark,
|
54
57
|
}
|
@@ -84,12 +87,18 @@ module Playbook
|
|
84
87
|
amount.split(".").first.to_s
|
85
88
|
end
|
86
89
|
|
90
|
+
def abbreviated_value(index = 0..-2)
|
91
|
+
value = amount.split(".").first.split(",").join("")
|
92
|
+
abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
|
93
|
+
abbreviated_num[index]
|
94
|
+
end
|
95
|
+
|
87
96
|
def units_element
|
88
97
|
_, decimal_part = amount.split(".")
|
89
|
-
if unit.nil?
|
98
|
+
if unit.nil? && abbreviate == false
|
90
99
|
decimal_part.nil? ? ".00" : ".#{decimal_part}"
|
91
100
|
else
|
92
|
-
unit
|
101
|
+
abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
|
93
102
|
end
|
94
103
|
end
|
95
104
|
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
import Currency from './_currency'
|
4
|
+
|
5
|
+
test('abbreviate prop returns proper abbreviated amount', () => {
|
6
|
+
render(
|
7
|
+
<>
|
8
|
+
<Currency
|
9
|
+
abbreviate
|
10
|
+
amount="3200"
|
11
|
+
data={{ testid: 'test-thousands' }}
|
12
|
+
/>
|
13
|
+
<Currency
|
14
|
+
abbreviate
|
15
|
+
amount="3,200,000"
|
16
|
+
data={{ testid: 'test-millions' }}
|
17
|
+
/>
|
18
|
+
<Currency
|
19
|
+
abbreviate
|
20
|
+
amount="3200000000"
|
21
|
+
data={{ testid: 'test-billions' }}
|
22
|
+
/>
|
23
|
+
<Currency
|
24
|
+
abbreviate
|
25
|
+
amount="3,200,000,000,000"
|
26
|
+
data={{ testid: 'test-trillions' }}
|
27
|
+
/>
|
28
|
+
</>
|
29
|
+
)
|
30
|
+
|
31
|
+
expect(screen.getByTestId('test-thousands')).toHaveTextContent('$3.2K')
|
32
|
+
expect(screen.getByTestId('test-millions')).toHaveTextContent('$3.2M')
|
33
|
+
expect(screen.getByTestId('test-billions')).toHaveTextContent('$3.2B')
|
34
|
+
expect(screen.getByTestId('test-trillions')).toHaveTextContent('$3.2T')
|
35
|
+
})
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= pb_rails("currency", props: {
|
2
|
+
abbreviate: true,
|
3
|
+
amount: "2,200.50",
|
4
|
+
label: "Thousands (with Unit)",
|
5
|
+
margin_bottom: "md",
|
6
|
+
unit: "/mo",
|
7
|
+
}) %>
|
8
|
+
|
9
|
+
<%= pb_rails("currency", props: {
|
10
|
+
abbreviate: true,
|
11
|
+
amount: "3424123",
|
12
|
+
label: "Millions",
|
13
|
+
margin_bottom: "md",
|
14
|
+
}) %>
|
15
|
+
|
16
|
+
<%= pb_rails("currency", props: {
|
17
|
+
abbreviate: true,
|
18
|
+
amount: "45,300,000,000",
|
19
|
+
label: "Billions",
|
20
|
+
margin_bottom: "md",
|
21
|
+
}) %>
|
22
|
+
|
23
|
+
<%= pb_rails("currency", props: {
|
24
|
+
abbreviate: true,
|
25
|
+
amount: "983,200,000,000,000",
|
26
|
+
label: "Trillions",
|
27
|
+
}) %>
|