playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596
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_avatar/_avatar.tsx +5 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +6 -2
- data/app/pb_kits/playbook/pb_background/_background.tsx +9 -5
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +5 -1
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +39 -39
- data/app/pb_kits/playbook/pb_body/_body.tsx +5 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +5 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx +5 -2
- data/app/pb_kits/playbook/pb_button/_button.tsx +8 -1
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +5 -1
- data/app/pb_kits/playbook/pb_caption/_caption.tsx +6 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +7 -2
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +71 -71
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +5 -3
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +5 -1
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -1
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +5 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +208 -210
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +207 -209
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx +5 -1
- data/app/pb_kits/playbook/pb_date/_date.tsx +12 -7
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +15 -4
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +12 -5
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +15 -4
- data/app/pb_kits/playbook/pb_detail/_detail.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +11 -3
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +8 -3
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +5 -1
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.tsx +8 -1
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +6 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +6 -1
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +6 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +6 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +5 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -1
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +54 -62
- data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +5 -1
- data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +5 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -3
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +7 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +5 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -1
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +5 -1
- data/app/pb_kits/playbook/pb_image/_image.tsx +6 -1
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx +5 -1
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +6 -2
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +5 -1
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +6 -1
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +44 -44
- data/app/pb_kits/playbook/pb_list/_list.tsx +7 -2
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +5 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +5 -1
- data/app/pb_kits/playbook/pb_map/_map.tsx +6 -1
- data/app/pb_kits/playbook/pb_message/_message.tsx +5 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +5 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_nav/_item.tsx +7 -2
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +5 -1
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +6 -2
- data/app/pb_kits/playbook/pb_person/_person.tsx +5 -0
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +5 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +8 -2
- data/app/pb_kits/playbook/pb_pill/_pill.tsx +5 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -1
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +5 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +9 -3
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.tsx +5 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx +6 -2
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +5 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +7 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -1
- data/app/pb_kits/playbook/pb_select/_select.tsx +6 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +6 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +5 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +5 -0
- data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +11 -3
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +5 -1
- data/app/pb_kits/playbook/pb_source/_source.tsx +5 -1
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +5 -1
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +14 -2
- data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx +6 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +5 -1
- data/app/pb_kits/playbook/pb_table/_table_row.tsx +5 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +5 -2
- data/app/pb_kits/playbook/pb_time/_time.tsx +9 -2
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +5 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -2
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +9 -2
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +5 -1
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +5 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +5 -1
- data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +5 -1
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +16 -3
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +5 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +5 -1
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +38 -38
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +7 -2
- data/app/pb_kits/playbook/pb_user/_user.tsx +5 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +5 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +5 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +5 -1
- data/app/pb_kits/playbook/utilities/props.ts +16 -0
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +18 -2
@@ -0,0 +1,13 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **title** | `String` | Adds a title | `nil` | |
|
5
|
+
| **placeholder** | `String` | Adds placeholder text | `""` | |
|
6
|
+
| **error** | `(Bool, String)` | Changes the style of the Text Input | `nil` | |
|
7
|
+
| **style** | `Style` | Changes the style of the Text Input | `.default` | `.default` `.rightIcon` `.leftIcon` `.inline` `.disabled` |
|
8
|
+
| **onChange** | `Bool` | Adds an event handler | `nil` | |
|
9
|
+
| **keyboardType** | `UIKeyboardType` | Speficies the keyboard type (ios only) | `.default` | |
|
10
|
+
| **text** | `String` | Sets the Text Input's text value | | |
|
11
|
+
| **selected** | `Bool` | Changes the style of the Text Input | | `true` `false` |
|
12
|
+
| **isHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
|
13
|
+
| **isIconHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
|
@@ -16,3 +16,10 @@ examples:
|
|
16
16
|
- text_input_add_on: Add On
|
17
17
|
- text_input_inline: Inline
|
18
18
|
- text_input_no_label: No Label
|
19
|
+
|
20
|
+
swift:
|
21
|
+
- text_input_default_swift: Default
|
22
|
+
- text_input_error_swift: With Error
|
23
|
+
- text_input_disabled_swift: Disabled
|
24
|
+
- text_input_add_on_swift: Add On
|
25
|
+
- text_input_props_swift: ""
|
@@ -6,7 +6,7 @@ import classnames from 'classnames'
|
|
6
6
|
import PbTextarea from '.'
|
7
7
|
import type { InputCallback } from '../types'
|
8
8
|
|
9
|
-
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
9
|
+
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
10
10
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
11
11
|
|
12
12
|
import Body from '../pb_body/_body'
|
@@ -22,6 +22,7 @@ type TextareaProps = {
|
|
22
22
|
data?: {[key: string]: string},
|
23
23
|
disabled?: boolean,
|
24
24
|
error?: string,
|
25
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
25
26
|
id?: string,
|
26
27
|
inline?: boolean,
|
27
28
|
object?: string,
|
@@ -44,6 +45,7 @@ const Textarea = ({
|
|
44
45
|
children,
|
45
46
|
data = {},
|
46
47
|
disabled,
|
48
|
+
htmlOptions = {},
|
47
49
|
inline = false,
|
48
50
|
resize = 'none',
|
49
51
|
error,
|
@@ -71,7 +73,7 @@ const Textarea = ({
|
|
71
73
|
const noCount = typeof characterCount !== 'undefined'
|
72
74
|
const ariaProps: {[key: string]: any} = buildAriaProps(aria)
|
73
75
|
const dataProps: {[key: string]: any} = buildDataProps(data)
|
74
|
-
|
76
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
75
77
|
const characterCounter = () => {
|
76
78
|
return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
|
77
79
|
}
|
@@ -84,6 +86,7 @@ const Textarea = ({
|
|
84
86
|
<div
|
85
87
|
{...ariaProps}
|
86
88
|
{...dataProps}
|
89
|
+
{...htmlProps}
|
87
90
|
className={classes}
|
88
91
|
>
|
89
92
|
<Caption text={label} />
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import classnames from "classnames";
|
3
3
|
|
4
|
-
import { buildCss } from "../utilities/props";
|
4
|
+
import { buildCss, buildHtmlProps } from "../utilities/props";
|
5
5
|
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
6
6
|
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
@@ -16,6 +16,7 @@ type TimeProps = {
|
|
16
16
|
date: Date;
|
17
17
|
dark?: boolean;
|
18
18
|
id?: string;
|
19
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function};
|
19
20
|
showIcon?: boolean;
|
20
21
|
size?: "md" | "sm";
|
21
22
|
showTimezone?: boolean;
|
@@ -28,6 +29,7 @@ const Time = (props: TimeProps) => {
|
|
28
29
|
align,
|
29
30
|
className,
|
30
31
|
date,
|
32
|
+
htmlOptions = {},
|
31
33
|
showIcon,
|
32
34
|
size,
|
33
35
|
timeZone,
|
@@ -41,8 +43,13 @@ const Time = (props: TimeProps) => {
|
|
41
43
|
className
|
42
44
|
);
|
43
45
|
|
46
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
47
|
+
|
44
48
|
return (
|
45
|
-
<div
|
49
|
+
<div
|
50
|
+
{...htmlProps}
|
51
|
+
className={classes}
|
52
|
+
>
|
46
53
|
{showIcon && (
|
47
54
|
unstyled
|
48
55
|
? (
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
4
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
|
-
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
5
|
+
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
6
6
|
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Body from '../pb_body/_body'
|
@@ -12,6 +12,7 @@ import Icon from '../pb_icon/_icon'
|
|
12
12
|
type TimeRangeInlineProps = {
|
13
13
|
aria?: { [key: string]: string },
|
14
14
|
className?: string,
|
15
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
15
16
|
id?: string,
|
16
17
|
data?: { [key: string]: string },
|
17
18
|
alignment?: "left" | "center" | "vertical",
|
@@ -41,6 +42,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
|
|
41
42
|
className,
|
42
43
|
data = {},
|
43
44
|
alignment = 'left',
|
45
|
+
htmlOptions = {},
|
44
46
|
size = 'sm',
|
45
47
|
dark = false,
|
46
48
|
icon = false,
|
@@ -52,6 +54,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
|
|
52
54
|
|
53
55
|
const dataProps: { [key: string]: string } = buildDataProps(data)
|
54
56
|
const ariaProps: { [key: string]: string } = buildAriaProps(aria)
|
57
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
55
58
|
|
56
59
|
const separator = (
|
57
60
|
<Body color="light">
|
@@ -87,6 +90,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
|
|
87
90
|
<div
|
88
91
|
{...ariaProps}
|
89
92
|
{...dataProps}
|
93
|
+
{...htmlProps}
|
90
94
|
className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
|
91
95
|
id={id}
|
92
96
|
>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildCss, buildDataProps } from '../utilities/props'
|
4
|
+
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
5
|
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
6
6
|
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
@@ -14,6 +14,7 @@ type TimeStackedProps = {
|
|
14
14
|
dark?: boolean,
|
15
15
|
data?: { [key: string]: string },
|
16
16
|
date?: Date,
|
17
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
17
18
|
id?: string,
|
18
19
|
time?: number | Date,
|
19
20
|
timeZone?: string,
|
@@ -28,6 +29,7 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
|
|
28
29
|
dark,
|
29
30
|
data = {},
|
30
31
|
date,
|
32
|
+
htmlOptions = {},
|
31
33
|
time,
|
32
34
|
timeZone,
|
33
35
|
} = props
|
@@ -37,12 +39,14 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
|
|
37
39
|
globalProps(props),
|
38
40
|
className
|
39
41
|
)
|
40
|
-
|
42
|
+
const dataProps = buildDataProps(data)
|
43
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
41
44
|
|
42
45
|
return (
|
43
46
|
<div
|
44
47
|
className={classes}
|
45
48
|
{...dataProps}
|
49
|
+
{...htmlProps}
|
46
50
|
>
|
47
51
|
<Body
|
48
52
|
className={classnames('pb_time_stacked', 'time-spacing')}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildCss } from '../utilities/props'
|
4
|
+
import { buildCss, buildHtmlProps } from '../utilities/props'
|
5
5
|
|
6
6
|
import DateStacked from '../pb_date_stacked/_date_stacked'
|
7
7
|
import IconCircle from '../pb_icon_circle/_icon_circle'
|
@@ -10,6 +10,7 @@ type ItemProps = {
|
|
10
10
|
className?: string,
|
11
11
|
children?: React.ReactNode[] | React.ReactNode,
|
12
12
|
date?: Date,
|
13
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
13
14
|
icon?: string,
|
14
15
|
iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
|
15
16
|
lineStyle?: 'solid' | 'dotted',
|
@@ -19,6 +20,7 @@ const TimelineItem = ({
|
|
19
20
|
className,
|
20
21
|
children,
|
21
22
|
date,
|
23
|
+
htmlOptions = {},
|
22
24
|
icon = 'user',
|
23
25
|
iconColor = 'default',
|
24
26
|
lineStyle = 'solid',
|
@@ -26,8 +28,13 @@ const TimelineItem = ({
|
|
26
28
|
}: ItemProps) => {
|
27
29
|
const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
|
28
30
|
|
31
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
32
|
+
|
29
33
|
return (
|
30
|
-
<div
|
34
|
+
<div
|
35
|
+
{...htmlProps}
|
36
|
+
className={classnames(timelineItemCss, className)}
|
37
|
+
>
|
31
38
|
<div className="pb_timeline_item_left_block">
|
32
39
|
{date &&
|
33
40
|
<DateStacked
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
5
|
|
6
6
|
import TimelineItem from './_item'
|
7
7
|
|
@@ -10,6 +10,7 @@ type TimelineProps = {
|
|
10
10
|
children?: React.ReactChild[] | React.ReactChild,
|
11
11
|
className?: string,
|
12
12
|
data?: { [key: string]: string },
|
13
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
13
14
|
id?: string,
|
14
15
|
orientation?: string,
|
15
16
|
showDate?: boolean,
|
@@ -20,18 +21,21 @@ const Timeline = ({
|
|
20
21
|
className,
|
21
22
|
children,
|
22
23
|
data = {},
|
24
|
+
htmlOptions = {},
|
23
25
|
id,
|
24
26
|
orientation = 'horizontal',
|
25
27
|
showDate = false,
|
26
28
|
}: TimelineProps) => {
|
27
29
|
const ariaProps = buildAriaProps(aria)
|
28
30
|
const dataProps = buildDataProps(data)
|
31
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
29
32
|
const dateStyle = showDate === true ? '_with_date' : ''
|
30
33
|
const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
|
31
34
|
return (
|
32
35
|
<div
|
33
36
|
{...ariaProps}
|
34
37
|
{...dataProps}
|
38
|
+
{...htmlProps}
|
35
39
|
className={classnames(timelineCss, className)}
|
36
40
|
id={id}
|
37
41
|
>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
5
|
import { globalProps } from '../utilities/globalProps'
|
6
6
|
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
@@ -16,6 +16,7 @@ type TimestampProps = {
|
|
16
16
|
text: string,
|
17
17
|
timestamp: Date | string,
|
18
18
|
timezone: string,
|
19
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
19
20
|
id?: string,
|
20
21
|
showDate?: boolean,
|
21
22
|
showUser?: boolean,
|
@@ -32,6 +33,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
32
33
|
className,
|
33
34
|
dark = false,
|
34
35
|
data = {},
|
36
|
+
htmlOptions = {},
|
35
37
|
text,
|
36
38
|
timezone,
|
37
39
|
timestamp,
|
@@ -45,6 +47,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
45
47
|
|
46
48
|
const ariaProps = buildAriaProps(aria)
|
47
49
|
const dataProps = buildDataProps(data)
|
50
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
48
51
|
const classes = classnames(
|
49
52
|
buildCss('pb_timestamp_kit', align, {
|
50
53
|
dark: dark,
|
@@ -101,6 +104,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
101
104
|
<div
|
102
105
|
{...ariaProps}
|
103
106
|
{...dataProps}
|
107
|
+
{...htmlProps}
|
104
108
|
className={classes}
|
105
109
|
>
|
106
110
|
<div className="pb_timestamp_kit">
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
|
6
6
|
type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
|
@@ -13,6 +13,7 @@ type TitleProps = {
|
|
13
13
|
className?: string,
|
14
14
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
15
15
|
data?: {[key: string]: string},
|
16
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
16
17
|
id?: string,
|
17
18
|
size?: SizeType | SizeResponsiveType,
|
18
19
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
|
@@ -29,6 +30,7 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
29
30
|
className,
|
30
31
|
color,
|
31
32
|
data = {},
|
33
|
+
htmlOptions = {},
|
32
34
|
id,
|
33
35
|
size = 3,
|
34
36
|
bold = true,
|
@@ -40,6 +42,7 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
40
42
|
|
41
43
|
const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
|
42
44
|
const dataProps: {[key: string]: string | number} = buildDataProps(data)
|
45
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
43
46
|
const getBold = bold ? '' : 'thin'
|
44
47
|
const isTruncated = truncate ? `truncate-${truncate}` : null
|
45
48
|
const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
|
@@ -68,6 +71,7 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
68
71
|
<Tag
|
69
72
|
{...ariaProps}
|
70
73
|
{...dataProps}
|
74
|
+
{...htmlProps}
|
71
75
|
className={classes}
|
72
76
|
id={id}
|
73
77
|
>
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
|
6
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
7
7
|
import { globalProps } from '../utilities/globalProps'
|
8
8
|
|
9
9
|
import Body from '../pb_body/_body'
|
@@ -16,6 +16,7 @@ type TitleCountProps = {
|
|
16
16
|
count?: number,
|
17
17
|
dark?: boolean,
|
18
18
|
data?: { [key: string]: string },
|
19
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
19
20
|
id?: string,
|
20
21
|
title?: string,
|
21
22
|
size?: "lg" | "sm",
|
@@ -28,12 +29,14 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
|
|
28
29
|
className,
|
29
30
|
dark = false,
|
30
31
|
data = {},
|
32
|
+
htmlOptions = {},
|
31
33
|
count,
|
32
34
|
id,
|
33
35
|
title,
|
34
36
|
size = 'sm' } = props
|
35
37
|
const ariaProps = buildAriaProps(aria)
|
36
38
|
const dataProps = buildDataProps(data)
|
39
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
37
40
|
|
38
41
|
const css = classnames(
|
39
42
|
buildCss('pb_title_count_kit', align, size),
|
@@ -47,6 +50,7 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
|
|
47
50
|
<div
|
48
51
|
{...ariaProps}
|
49
52
|
{...dataProps}
|
53
|
+
{...htmlProps}
|
50
54
|
className={css}
|
51
55
|
id={id}
|
52
56
|
>
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
4
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
6
6
|
|
7
7
|
import Body from '../pb_body/_body'
|
8
8
|
import Title from '../pb_title/_title'
|
@@ -13,20 +13,33 @@ type TitleDetailProps = {
|
|
13
13
|
className?: string,
|
14
14
|
data?: { [key: string]: string },
|
15
15
|
detail: string,
|
16
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
16
17
|
id?: string,
|
17
18
|
title: string,
|
18
19
|
} & GlobalProps
|
19
20
|
|
20
21
|
const TitleDetail = (props: TitleDetailProps) => {
|
21
|
-
const {
|
22
|
+
const {
|
23
|
+
align = "left",
|
24
|
+
aria = {},
|
25
|
+
className,
|
26
|
+
data = {},
|
27
|
+
detail,
|
28
|
+
htmlOptions = {},
|
29
|
+
id,
|
30
|
+
title,
|
31
|
+
} = props
|
32
|
+
|
22
33
|
const ariaProps = buildAriaProps(aria)
|
23
34
|
const dataProps = buildDataProps(data)
|
24
|
-
const
|
35
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
36
|
+
const pbCss = buildCss("pb_title_detail_kit", align)
|
25
37
|
|
26
38
|
return (
|
27
39
|
<div
|
28
40
|
{...ariaProps}
|
29
41
|
{...dataProps}
|
42
|
+
{...htmlProps}
|
30
43
|
className={classnames(pbCss, globalProps(props), className)}
|
31
44
|
id={id}
|
32
45
|
>
|
@@ -6,6 +6,7 @@ import {
|
|
6
6
|
buildAriaProps,
|
7
7
|
buildCss,
|
8
8
|
buildDataProps,
|
9
|
+
buildHtmlProps,
|
9
10
|
} from '../utilities/props'
|
10
11
|
|
11
12
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
@@ -16,6 +17,7 @@ type Props = {
|
|
16
17
|
children?: React.ReactNode | React.ReactNode[],
|
17
18
|
className?: string,
|
18
19
|
data?: { [key: string]: string },
|
20
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
19
21
|
id?: string,
|
20
22
|
name?: string,
|
21
23
|
onChange?: InputCallback<HTMLInputElement>,
|
@@ -30,6 +32,7 @@ const Toggle = ({
|
|
30
32
|
className,
|
31
33
|
data = {},
|
32
34
|
id,
|
35
|
+
htmlOptions = {},
|
33
36
|
name,
|
34
37
|
onChange = () => { },
|
35
38
|
size = 'sm',
|
@@ -38,6 +41,7 @@ const Toggle = ({
|
|
38
41
|
}: Props) => {
|
39
42
|
const ariaProps = buildAriaProps(aria)
|
40
43
|
const dataProps = buildDataProps(data)
|
44
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
41
45
|
const css = classnames(
|
42
46
|
buildCss('pb_toggle_kit',
|
43
47
|
size,
|
@@ -51,6 +55,7 @@ const Toggle = ({
|
|
51
55
|
<div
|
52
56
|
{...ariaProps}
|
53
57
|
{...dataProps}
|
58
|
+
{...htmlProps}
|
54
59
|
className={classnames(css, globalProps(props), className)}
|
55
60
|
id={id}
|
56
61
|
>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **isHovering** | `Bool` | Changes the style of the Toggle | `false` | `true` `false` |
|
5
|
+
| **label** | `String` | Adds a label to the Toggle | `nil` | |
|
6
|
+
| **checked** | `Bool` | Changes the style of the Toggle | | `true` `false` |
|
@@ -14,7 +14,7 @@ import {
|
|
14
14
|
|
15
15
|
import classnames from "classnames"
|
16
16
|
import { GlobalProps, globalProps } from "../utilities/globalProps"
|
17
|
-
import { buildAriaProps, buildDataProps } from "../utilities/props"
|
17
|
+
import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
|
18
18
|
import Flex from "../pb_flex/_flex"
|
19
19
|
|
20
20
|
type TooltipProps = {
|
@@ -23,6 +23,7 @@ type TooltipProps = {
|
|
23
23
|
children: JSX.Element,
|
24
24
|
data?: { [key: string]: string },
|
25
25
|
delay?: number | Partial<{open: number; close: number}>,
|
26
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
26
27
|
icon?: string,
|
27
28
|
interaction?: boolean,
|
28
29
|
placement?: Placement,
|
@@ -38,6 +39,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
38
39
|
children,
|
39
40
|
data = {},
|
40
41
|
delay = 0,
|
42
|
+
htmlOptions = {},
|
41
43
|
icon = null,
|
42
44
|
interaction = false,
|
43
45
|
placement: preferredPlacement = "top",
|
@@ -50,6 +52,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
50
52
|
|
51
53
|
const dataProps: { [key: string]: any } = buildDataProps(data)
|
52
54
|
const ariaProps: { [key: string]: any } = buildAriaProps(aria)
|
55
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
53
56
|
|
54
57
|
const css = classnames(
|
55
58
|
globalProps({...rest}),
|
@@ -127,6 +130,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
127
130
|
style={{ display: "inline-flex" }}
|
128
131
|
{...ariaProps}
|
129
132
|
{...dataProps}
|
133
|
+
{...htmlProps}
|
130
134
|
>
|
131
135
|
{children}
|
132
136
|
</div>
|
@@ -1,11 +1,11 @@
|
|
1
|
-
/* eslint-disable */
|
2
1
|
import React, { useState, useEffect } from "react";
|
3
2
|
import classnames from "classnames";
|
4
3
|
|
5
4
|
import { globalProps } from "../utilities/globalProps";
|
6
|
-
import { buildAriaProps, buildDataProps } from "../utilities/props";
|
5
|
+
import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
|
7
6
|
|
8
7
|
import HighchartsReact from "highcharts-react-official";
|
8
|
+
import Highcharts from "highcharts";
|
9
9
|
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
10
10
|
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
11
11
|
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
@@ -13,24 +13,25 @@ import treemap from 'highcharts/modules/treemap'
|
|
13
13
|
|
14
14
|
type TreemapChartProps = {
|
15
15
|
chartData: {
|
16
|
-
name: string
|
17
|
-
parent?: string | number
|
18
|
-
value: number
|
19
|
-
color?: string
|
20
|
-
id?: string | number
|
21
|
-
}[]
|
22
|
-
className?: string
|
23
|
-
colors: string[]
|
24
|
-
dark?: boolean
|
25
|
-
drillable: boolean
|
26
|
-
grouped: boolean
|
27
|
-
height?: string
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
16
|
+
name: string;
|
17
|
+
parent?: string | number;
|
18
|
+
value: number;
|
19
|
+
color?: string;
|
20
|
+
id?: string | number;
|
21
|
+
}[];
|
22
|
+
className?: string;
|
23
|
+
colors: string[];
|
24
|
+
dark?: boolean;
|
25
|
+
drillable: boolean;
|
26
|
+
grouped: boolean;
|
27
|
+
height?: string;
|
28
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function};
|
29
|
+
id: number | string;
|
30
|
+
title?: string;
|
31
|
+
tooltipHtml: string;
|
32
|
+
type?: string;
|
33
|
+
aria?: { [key: string]: string };
|
34
|
+
data?: { [key: string]: string };
|
34
35
|
};
|
35
36
|
|
36
37
|
const TreemapChart = ({
|
@@ -42,14 +43,25 @@ const TreemapChart = ({
|
|
42
43
|
drillable = false,
|
43
44
|
grouped = false,
|
44
45
|
height,
|
46
|
+
htmlOptions = {},
|
45
47
|
id,
|
46
48
|
title = "",
|
47
49
|
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
|
48
50
|
type = "treemap",
|
49
51
|
...props
|
50
52
|
}: TreemapChartProps) => {
|
51
|
-
|
52
|
-
const
|
53
|
+
|
54
|
+
const ariaProps = buildAriaProps(aria)
|
55
|
+
const dataProps = buildDataProps(data)
|
56
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
57
|
+
|
58
|
+
const setupTheme = () => {
|
59
|
+
dark
|
60
|
+
? Highcharts.setOptions(highchartsDarkTheme)
|
61
|
+
: Highcharts.setOptions(highchartsTheme);
|
62
|
+
};
|
63
|
+
treemap(Highcharts)
|
64
|
+
setupTheme();
|
53
65
|
|
54
66
|
const staticOptions = {
|
55
67
|
title: {
|
@@ -75,40 +87,28 @@ const TreemapChart = ({
|
|
75
87
|
colors:
|
76
88
|
colors !== undefined && colors.length > 0
|
77
89
|
? mapColors(colors)
|
78
|
-
: highchartsTheme
|
90
|
+
: highchartsTheme.colors,
|
79
91
|
},
|
80
92
|
},
|
81
93
|
};
|
82
94
|
|
83
95
|
const [options, setOptions] = useState({});
|
84
|
-
const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
|
85
96
|
|
86
97
|
useEffect(() => {
|
98
|
+
|
87
99
|
setOptions({ ...staticOptions });
|
88
|
-
|
89
|
-
const interval = setInterval(() => {
|
90
|
-
if (window.Highcharts) {
|
91
|
-
clearInterval(interval)
|
92
|
-
dark
|
93
|
-
? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
|
94
|
-
: window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
|
95
|
-
|
96
|
-
treemap(window.Highcharts)
|
97
|
-
setIsHighchartsLoaded(true)
|
98
|
-
}
|
99
|
-
}, 0)
|
100
100
|
}, [chartData]);
|
101
101
|
|
102
102
|
return (
|
103
|
-
isHighchartsLoaded &&
|
104
103
|
<HighchartsReact
|
105
104
|
containerProps={{
|
106
105
|
className: classnames(globalProps(props), "pb_treemap_chart"),
|
107
106
|
id: id,
|
108
107
|
...ariaProps,
|
109
108
|
...dataProps,
|
109
|
+
...htmlProps
|
110
110
|
}}
|
111
|
-
highcharts={
|
111
|
+
highcharts={Highcharts}
|
112
112
|
options={options}
|
113
113
|
/>
|
114
114
|
);
|