playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1097linterenhancedelement1728

Sign up to get free protection for your applications and to get access to all the features.
Files changed (167) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +5 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +6 -2
  4. data/app/pb_kits/playbook/pb_background/_background.tsx +9 -5
  5. data/app/pb_kits/playbook/pb_badge/_badge.tsx +5 -1
  6. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +6 -2
  7. data/app/pb_kits/playbook/pb_body/_body.tsx +5 -1
  8. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +5 -1
  9. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx +5 -2
  10. data/app/pb_kits/playbook/pb_button/_button.tsx +8 -1
  11. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +5 -1
  12. data/app/pb_kits/playbook/pb_caption/_caption.tsx +6 -1
  13. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  14. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +7 -2
  15. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +7 -2
  16. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +5 -3
  17. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +5 -1
  18. data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -1
  19. data/app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md +14 -0
  20. data/app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md +6 -0
  21. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md +14 -0
  22. data/app/pb_kits/playbook/pb_contact/docs/example.yml +6 -0
  23. data/app/pb_kits/playbook/pb_currency/_currency.tsx +5 -1
  24. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx +5 -1
  25. data/app/pb_kits/playbook/pb_date/_date.tsx +12 -7
  26. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +11 -0
  27. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +16 -0
  28. data/app/pb_kits/playbook/pb_date/docs/_date_props_swift.md +8 -0
  29. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled_swift.md +11 -0
  30. data/app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md +14 -0
  31. data/app/pb_kits/playbook/pb_date/docs/example.yml +7 -0
  32. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +5 -1
  33. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +5 -1
  34. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +15 -4
  35. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +12 -5
  36. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +5 -1
  37. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +5 -1
  38. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +15 -4
  39. data/app/pb_kits/playbook/pb_detail/_detail.tsx +5 -1
  40. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +11 -3
  41. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +8 -3
  42. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +5 -1
  43. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.tsx +8 -1
  44. data/app/pb_kits/playbook/pb_enhanced_element/element_observer.ts +1 -1
  45. data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
  46. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +6 -2
  47. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.md +1 -0
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +6 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex.tsx +6 -1
  50. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +6 -1
  51. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +5 -1
  52. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -1
  53. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +6 -2
  54. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +5 -1
  55. data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +5 -0
  56. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -3
  57. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default_swift.md +18 -0
  58. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md +34 -0
  59. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link_swift.md +18 -0
  60. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified_swift.md +13 -0
  61. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_props_swift.md +14 -0
  62. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +6 -0
  63. data/app/pb_kits/playbook/pb_icon/_icon.tsx +7 -1
  64. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +5 -1
  65. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -1
  66. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +5 -1
  67. data/app/pb_kits/playbook/pb_image/_image.tsx +6 -1
  68. data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx +5 -1
  69. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +6 -2
  70. data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
  71. data/app/pb_kits/playbook/pb_legend/_legend.tsx +5 -1
  72. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +6 -1
  73. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -1
  74. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +9 -3
  75. data/app/pb_kits/playbook/pb_list/_list.tsx +7 -2
  76. data/app/pb_kits/playbook/pb_list/_list_item.tsx +5 -1
  77. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +5 -1
  78. data/app/pb_kits/playbook/pb_map/_map.tsx +6 -1
  79. data/app/pb_kits/playbook/pb_message/_message.tsx +5 -1
  80. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +5 -1
  81. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +5 -1
  82. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +5 -1
  83. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
  84. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
  85. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
  86. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
  87. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
  88. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +5 -1
  89. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
  90. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
  91. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
  92. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
  93. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
  94. data/app/pb_kits/playbook/pb_nav/_item.tsx +7 -2
  95. data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -1
  96. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +5 -1
  97. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +6 -2
  98. data/app/pb_kits/playbook/pb_person/_person.tsx +5 -0
  99. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +5 -1
  100. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +8 -2
  101. data/app/pb_kits/playbook/pb_pill/_pill.tsx +5 -1
  102. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -1
  103. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +5 -1
  104. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +9 -3
  105. data/app/pb_kits/playbook/pb_progress_step/_progress_step.tsx +5 -1
  106. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx +6 -2
  107. data/app/pb_kits/playbook/pb_radio/_radio.tsx +5 -1
  108. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +7 -1
  109. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -1
  110. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md +14 -0
  111. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md +7 -0
  112. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md +8 -0
  113. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md +8 -0
  114. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md +7 -0
  115. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md +18 -0
  116. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +8 -0
  117. data/app/pb_kits/playbook/pb_select/_select.tsx +6 -1
  118. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +6 -2
  119. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +5 -0
  120. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +5 -0
  121. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +11 -3
  122. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +5 -1
  123. data/app/pb_kits/playbook/pb_source/_source.tsx +5 -1
  124. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +5 -1
  125. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +14 -2
  126. data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx +6 -0
  127. data/app/pb_kits/playbook/pb_table/_table.tsx +5 -1
  128. data/app/pb_kits/playbook/pb_table/_table_row.tsx +5 -1
  129. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
  130. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
  131. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
  132. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
  133. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
  134. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
  135. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
  136. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +5 -2
  137. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md +27 -0
  138. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md +11 -0
  139. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md +9 -0
  140. data/app/pb_kits/playbook/pb_textarea/docs/example.yml +5 -0
  141. data/app/pb_kits/playbook/pb_time/_time.tsx +9 -2
  142. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +5 -1
  143. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -2
  144. data/app/pb_kits/playbook/pb_timeline/_item.tsx +9 -2
  145. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +5 -1
  146. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +5 -1
  147. data/app/pb_kits/playbook/pb_title/_title.tsx +5 -1
  148. data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +5 -1
  149. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +16 -3
  150. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +5 -0
  151. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
  152. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
  153. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
  154. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
  155. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +5 -1
  156. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +9 -3
  157. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +7 -2
  158. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -2
  159. data/app/pb_kits/playbook/pb_user/_user.tsx +5 -1
  160. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +5 -1
  161. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +5 -1
  162. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +5 -1
  163. data/app/pb_kits/playbook/utilities/props.ts +16 -0
  164. data/dist/menu.yml +240 -168
  165. data/dist/playbook-rails.js +5 -5
  166. data/lib/playbook/version.rb +2 -2
  167. metadata +46 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5274804bb3a050a4c0649d20d667e714fed94f191bb3dbb8bf2476198a83e0a7
4
- data.tar.gz: e6ea6a7dbfff42131377ee9ee4a6ecbac3bee1a69f34923dbb0e11c44ff25911
3
+ metadata.gz: 6f4b2939c8a4d8207ab6b673b4f633d0b5e9b9738799acfe71803d200ac7a686
4
+ data.tar.gz: ace506a329f694cc1f17f97ced51ec85548fe3a4d22218c7037db4a5937bc5f1
5
5
  SHA512:
6
- metadata.gz: a69c18f1d029ac13eaff14aceda3b01e96004eab1621cdccfc9c46e47a6041f83bfa797cb422221c4604c306da163dc8248e775ac1606377ee3e586a3989879d
7
- data.tar.gz: 975179da601fbf2a3a3abf924c59e4bc307938dfa9fabbd45ddee638d1bd2729f8dd62d256eba2a4e0d2a0884c29d8d8d5b8ca6d106c6ef51301a0a0dfb9fd45
6
+ metadata.gz: 9a4e0ae49ac9279da799a3a65989071012f212ab29eaa5ef4bb6f0dda5bc6debaccd72112d424bc72713c93dcfa3d928c1683bb5045b6a814e8c3e1d9b561eb4
7
+ data.tar.gz: d370c0379961c3dd5a12706ed3c76f4be09c6e29a1f6598ce01878e73836583da65090717acc800b7e55f3421929834af2a91d910834d8d3357fc3e83adb09d9
@@ -1,7 +1,7 @@
1
1
  import React, { useState } 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, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Image from '../pb_image/_image'
@@ -12,6 +12,7 @@ export type AvatarProps = {
12
12
  className?: string,
13
13
  data?: {[key: string]: string},
14
14
  dark?: boolean,
15
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
15
16
  id?: string,
16
17
  imageAlt?: string,
17
18
  imageUrl?: string,
@@ -30,6 +31,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
30
31
  aria = {},
31
32
  className,
32
33
  data = {},
34
+ htmlOptions = {},
33
35
  name = null,
34
36
  id = '',
35
37
  imageAlt = '',
@@ -40,6 +42,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
40
42
  } = props
41
43
  const dataProps: {[key: string]: any} = buildDataProps(data)
42
44
  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
45
+ const htmlProps = buildHtmlProps(htmlOptions);
43
46
  const classes = classnames(
44
47
  buildCss('pb_avatar_kit', `size_${size}`),
45
48
  globalProps(props),
@@ -58,6 +61,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
58
61
  <div
59
62
  {...ariaProps}
60
63
  {...dataProps}
64
+ {...htmlProps}
61
65
  className={classes}
62
66
  id={id}
63
67
  >
@@ -6,8 +6,8 @@ import classnames from 'classnames'
6
6
  import {
7
7
  buildAriaProps,
8
8
  buildCss,
9
- buildDataProps,
10
- } from '../utilities/props'
9
+ buildDataProps,
10
+ buildHtmlProps } from '../utilities/props'
11
11
  import { globalProps } from '../utilities/globalProps'
12
12
 
13
13
  import Avatar from '../pb_avatar/_avatar'
@@ -20,6 +20,7 @@ type AvatarActionButtonProps = {
20
20
  className?: string,
21
21
  dark?: boolean,
22
22
  data?: Object,
23
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
23
24
  id?: string,
24
25
  imageAlt?: string,
25
26
  imageUrl?: string,
@@ -38,6 +39,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
38
39
  className,
39
40
  dark = false,
40
41
  data = {},
42
+ htmlOptions = {},
41
43
  id,
42
44
  imageAlt = '',
43
45
  imageUrl,
@@ -50,6 +52,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
50
52
 
51
53
  const ariaProps = buildAriaProps(aria)
52
54
  const dataProps = buildDataProps(data)
55
+ const htmlProps = buildHtmlProps(htmlOptions)
53
56
 
54
57
  const classes = classnames(buildCss(
55
58
  'pb_avatar_action_button_kit',
@@ -68,6 +71,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
68
71
  <div
69
72
  {...ariaProps}
70
73
  {...dataProps}
74
+ {...htmlProps}
71
75
  className={classes}
72
76
  id={id}
73
77
  >
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useState } 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 { GlobalProps, globalProps } from '../utilities/globalProps'
5
5
 
6
6
  type BackgroundProps = {
@@ -23,6 +23,7 @@ type BackgroundProps = {
23
23
  className?: string,
24
24
  customColor?: string,
25
25
  data?: {[key: string]: string},
26
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
26
27
  id?: string,
27
28
  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
28
29
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -74,6 +75,7 @@ const Background = (props: BackgroundProps) => {
74
75
  className,
75
76
  customColor,
76
77
  data = {},
78
+ htmlOptions = {},
77
79
  id,
78
80
  imageUrl = '',
79
81
  tag = 'div',
@@ -113,6 +115,7 @@ const Background = (props: BackgroundProps) => {
113
115
  imageUrl: resImageUrl,
114
116
  } = responsiveProps;
115
117
 
118
+
116
119
  // Build CSS classes and styles using responsive values.
117
120
  const classes = classnames(
118
121
  buildCss('pb_background_kit'),
@@ -137,16 +140,17 @@ const Background = (props: BackgroundProps) => {
137
140
  const Tag: React.ReactElement | any = `${tag}`;
138
141
  const ariaProps = buildAriaProps(aria);
139
142
  const dataProps = buildDataProps(data);
140
-
141
-
143
+ const htmlProps = buildHtmlProps(htmlOptions);
144
+
142
145
  return (
143
146
  <Tag
144
- alt={alt}
145
- style={backgroundStyle}
146
147
  {...ariaProps}
147
148
  {...dataProps}
149
+ {...htmlProps}
150
+ alt={alt}
148
151
  className={classes}
149
152
  id={id}
153
+ style={backgroundStyle}
150
154
  >
151
155
  {children}
152
156
  </Tag>
@@ -6,7 +6,7 @@ import {
6
6
  buildAriaProps,
7
7
  buildCss,
8
8
  buildDataProps,
9
- } from '../utilities/props'
9
+ buildHtmlProps } from '../utilities/props'
10
10
 
11
11
  import Icon from '../pb_icon/_icon'
12
12
 
@@ -19,6 +19,7 @@ type BadgeProps = {
19
19
  onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
20
20
  },
21
21
  data?: {[key: string]: string},
22
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
22
23
  id?: string,
23
24
  removeIcon?: boolean,
24
25
  removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -32,6 +33,7 @@ const Badge = (props: BadgeProps) => {
32
33
  className,
33
34
  closeProps = {},
34
35
  data = {},
36
+ htmlOptions = {},
35
37
  id,
36
38
  removeIcon = false,
37
39
  removeOnClick,
@@ -41,6 +43,7 @@ const Badge = (props: BadgeProps) => {
41
43
  } = props
42
44
  const ariaProps = buildAriaProps(aria)
43
45
  const dataProps = buildDataProps(data)
46
+ const htmlProps = buildHtmlProps(htmlOptions)
44
47
  const css = classnames(
45
48
  buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
46
49
  globalProps(props),
@@ -51,6 +54,7 @@ const Badge = (props: BadgeProps) => {
51
54
  <div
52
55
  {...ariaProps}
53
56
  {...dataProps}
57
+ {...htmlProps}
54
58
  className={css}
55
59
  id={id}
56
60
  >
@@ -1,6 +1,6 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { globalProps } from "../utilities/globalProps";
3
- import { buildAriaProps, buildDataProps } from "../utilities/props";
3
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
4
4
 
5
5
  import HighchartsReact from "highcharts-react-official";
6
6
  import Highcharts from "highcharts";
@@ -19,6 +19,7 @@ type BarGraphProps = {
19
19
  yAxisMax: number;
20
20
  chartData: { name: string; data: number[] }[];
21
21
  className?: string;
22
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
22
23
  id: any;
23
24
  pointStart: number | any;
24
25
  subTitle?: string;
@@ -46,6 +47,7 @@ const BarGraph = ({
46
47
  chartData,
47
48
  className = "pb_bar_graph",
48
49
  colors,
50
+ htmlOptions = {},
49
51
  id,
50
52
  pointStart,
51
53
  subTitle,
@@ -64,7 +66,8 @@ const BarGraph = ({
64
66
  ...props
65
67
  }: BarGraphProps): React.ReactElement => {
66
68
  const ariaProps = buildAriaProps(aria);
67
- const dataProps = buildDataProps(data);
69
+ const dataProps = buildDataProps(data)
70
+ const htmlProps = buildHtmlProps(htmlOptions);
68
71
  const setupTheme = () => {
69
72
  dark
70
73
  ? Highcharts.setOptions(highchartsDarkTheme)
@@ -135,6 +138,7 @@ const BarGraph = ({
135
138
  id: id,
136
139
  ...ariaProps,
137
140
  ...dataProps,
141
+ ...htmlProps
138
142
  }}
139
143
  highcharts={Highcharts}
140
144
  options={options}
@@ -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 { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Highlight from '../pb_highlight/_highlight'
@@ -15,6 +15,7 @@ type BodyProps = {
15
15
  data?: {[key: string]: string},
16
16
  highlightedText?: string[],
17
17
  highlighting?: boolean,
18
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
18
19
  id?: string,
19
20
  status?: 'neutral' | 'negative' | 'positive',
20
21
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -33,6 +34,7 @@ const Body = (props: BodyProps): React.ReactElement => {
33
34
  data = {},
34
35
  highlightedText = [],
35
36
  highlighting = false,
37
+ htmlOptions = {},
36
38
  id = '',
37
39
  status = null,
38
40
  tag = 'div',
@@ -43,6 +45,7 @@ const Body = (props: BodyProps): React.ReactElement => {
43
45
 
44
46
  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
45
47
  const dataProps: {[key: string]: any} = buildDataProps(data)
48
+ const htmlProps = buildHtmlProps(htmlOptions);
46
49
  const isTruncated = truncate ? `truncate_${truncate}` : ''
47
50
  const classes = classnames(
48
51
  buildCss('pb_body_kit', color, variant, status, isTruncated),
@@ -56,6 +59,7 @@ const Body = (props: BodyProps): React.ReactElement => {
56
59
  <Tag
57
60
  {...ariaProps}
58
61
  {...dataProps}
62
+ {...htmlProps}
59
63
  className={classes}
60
64
  id={id}
61
65
  >
@@ -8,12 +8,13 @@ import {
8
8
  buildAriaProps,
9
9
  buildCss,
10
10
  buildDataProps,
11
- } from '../utilities/props'
11
+ buildHtmlProps } from '../utilities/props'
12
12
 
13
13
  type BreadCrumbItemProps = {
14
14
  aria?: {[key: string]: string},
15
15
  className?: string,
16
16
  data?: object,
17
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
17
18
  id?: string,
18
19
  component?: "a" | "span",
19
20
  [x:string]: any;
@@ -25,12 +26,14 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
25
26
  aria = {},
26
27
  className,
27
28
  data = {},
29
+ htmlOptions = {},
28
30
  id,
29
31
  component = 'a',
30
32
  ...rest
31
33
  } = props
32
34
  const ariaProps = buildAriaProps(aria)
33
35
  const dataProps = buildDataProps(data)
36
+ const htmlProps = buildHtmlProps(htmlOptions)
34
37
  const Component = component || 'span';
35
38
  const css = classnames(
36
39
  buildCss('pb_bread_crumb_item_kit'),
@@ -42,6 +45,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
42
45
  <div
43
46
  {...ariaProps}
44
47
  {...dataProps}
48
+ {...htmlProps}
45
49
  className={css}
46
50
  id={id}
47
51
  >
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { globalProps } from '../utilities/globalProps'
@@ -8,12 +6,14 @@ import {
8
6
  buildAriaProps,
9
7
  buildCss,
10
8
  buildDataProps,
9
+ buildHtmlProps
11
10
  } from '../utilities/props'
12
11
 
13
12
  type BreadCrumbsProps = {
14
13
  aria?: {[key: string]: string},
15
14
  className?: string,
16
15
  data?: object,
16
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
17
17
  id?: string,
18
18
  text?: string,
19
19
  children?: React.ReactChild[] | React.ReactNode,
@@ -23,11 +23,13 @@ const BreadCrumbs = (props: BreadCrumbsProps) => {
23
23
  aria = { label: 'Breadcrumb Navigation' },
24
24
  className,
25
25
  data = {},
26
+ htmlOptions = {},
26
27
  id,
27
28
  children,
28
29
  } = props
29
30
  const ariaProps = buildAriaProps(aria)
30
31
  const dataProps = buildDataProps(data)
32
+ const htmlProps = buildHtmlProps(htmlOptions)
31
33
  const css = classnames(
32
34
  buildCss('pb_bread_crumbs_kit'),
33
35
  globalProps(props),
@@ -38,6 +40,7 @@ const BreadCrumbs = (props: BreadCrumbsProps) => {
38
40
  <nav
39
41
  {...ariaProps}
40
42
  {...dataProps}
43
+ {...htmlProps}
41
44
  className={css}
42
45
  id={id}
43
46
  >
@@ -1,6 +1,6 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
- import { buildAriaProps, buildDataProps } from '../utilities/props'
3
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
4
  import { GlobalProps, globalProps } from '../utilities/globalProps'
5
5
  import { isValidEmoji } from '../utilities/validEmojiChecker'
6
6
 
@@ -21,6 +21,7 @@ type ButtonPropTypes = {
21
21
  form?: string,
22
22
  fullWidth?: boolean,
23
23
  highlight?: boolean,
24
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
24
25
  icon?: string,
25
26
  iconRight?: boolean,
26
27
  id?: string,
@@ -73,6 +74,7 @@ const Button = (props: ButtonPropTypes) => {
73
74
  count,
74
75
  data = {},
75
76
  disabled,
77
+ htmlOptions = {},
76
78
  icon = null,
77
79
  iconRight = false,
78
80
  id,
@@ -91,6 +93,8 @@ const Button = (props: ButtonPropTypes) => {
91
93
 
92
94
  const ariaProps = buildAriaProps(aria)
93
95
  const dataProps = buildDataProps(data)
96
+ const htmlProps = buildHtmlProps(htmlOptions)
97
+
94
98
  const css = classnames(
95
99
  buttonClassName(props),
96
100
  globalProps(props),
@@ -148,6 +152,7 @@ const Button = (props: ButtonPropTypes) => {
148
152
  <a
149
153
  {...ariaProps}
150
154
  {...dataProps}
155
+ {...htmlProps}
151
156
  className={css}
152
157
  href={link}
153
158
  id={id}
@@ -164,6 +169,7 @@ const Button = (props: ButtonPropTypes) => {
164
169
  <button
165
170
  {...ariaProps}
166
171
  {...dataProps}
172
+ {...htmlProps}
167
173
  className={css}
168
174
  disabled={disabled}
169
175
  form={form}
@@ -199,6 +205,7 @@ const Button = (props: ButtonPropTypes) => {
199
205
  <button
200
206
  {...ariaProps}
201
207
  {...dataProps}
208
+ {...htmlProps}
202
209
  className={css}
203
210
  disabled={disabled}
204
211
  form={form}
@@ -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
 
8
8
  import { globalProps } from '../utilities/globalProps'
9
9
 
@@ -13,6 +13,7 @@ type ButtonToolbarProps = {
13
13
  className?: string,
14
14
  connected?: boolean,
15
15
  data?: object,
16
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
16
17
  id?: string,
17
18
  onClick?: React.MouseEventHandler<HTMLSpanElement>,
18
19
  orientation?: "horizontal" | "vertical",
@@ -26,6 +27,7 @@ const ButtonToolbar = (props: ButtonToolbarProps) => {
26
27
  children,
27
28
  className,
28
29
  data = {},
30
+ htmlOptions = {},
29
31
  id,
30
32
  orientation = 'horizontal',
31
33
  text,
@@ -34,6 +36,7 @@ const ButtonToolbar = (props: ButtonToolbarProps) => {
34
36
 
35
37
  const ariaProps = buildAriaProps(aria)
36
38
  const dataProps = buildDataProps(data)
39
+ const htmlProps = buildHtmlProps(htmlOptions)
37
40
 
38
41
  const classes = classnames(
39
42
  buildCss('pb_button_toolbar_kit', orientation, variant),
@@ -45,6 +48,7 @@ const ButtonToolbar = (props: ButtonToolbarProps) => {
45
48
  <div
46
49
  {...ariaProps}
47
50
  {...dataProps}
51
+ {...htmlProps}
48
52
  className={classes}
49
53
  id={id}
50
54
  >
@@ -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 CaptionProps = {
@@ -9,6 +9,7 @@ type CaptionProps = {
9
9
  className?: string,
10
10
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
11
11
  data?: {[key: string]: string},
12
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
12
13
  id?: string,
13
14
  size?: "xs" | "sm" | "md" | "lg" | "xl",
14
15
  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
@@ -24,6 +25,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
24
25
  className,
25
26
  color,
26
27
  data = {},
28
+ htmlOptions = {},
27
29
  id,
28
30
  size = 'md',
29
31
  tag = 'div',
@@ -47,6 +49,8 @@ const Caption = (props: CaptionProps): React.ReactElement => {
47
49
 
48
50
  const ariaProps = buildAriaProps(aria)
49
51
  const dataProps = buildDataProps(data)
52
+ const htmlProps = buildHtmlProps(htmlOptions)
53
+
50
54
  const css = classnames(
51
55
  buildCss('pb_caption_kit', size, variant, color),
52
56
  globalProps(props),
@@ -57,6 +61,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
57
61
  <Tag
58
62
  {...ariaProps}
59
63
  {...dataProps}
64
+ {...htmlProps}
60
65
  className={css}
61
66
  id={id}
62
67
  >
@@ -4,7 +4,7 @@ import React from 'react'
4
4
  import { get } from 'lodash'
5
5
  import classnames from 'classnames'
6
6
 
7
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
8
8
  import { GlobalProps, globalProps } from '../utilities/globalProps'
9
9
  import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
10
10
 
@@ -16,6 +16,7 @@ type CardPropTypes = {
16
16
  children: React.ReactChild[] | React.ReactChild | number,
17
17
  className?: string,
18
18
  data?: {[key: string]: string},
19
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
19
20
  highlight?: {
20
21
  position?: "side" | "top",
21
22
  color?: string,
@@ -78,6 +79,7 @@ const Card = (props: CardPropTypes) => {
78
79
  className,
79
80
  data = {},
80
81
  highlight = {},
82
+ htmlOptions = {},
81
83
  selected = false,
82
84
  tag = 'div',
83
85
  } = props
@@ -90,6 +92,7 @@ const Card = (props: CardPropTypes) => {
90
92
  })
91
93
  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
92
94
  const dataProps: {[key: string]: string} = buildDataProps(data)
95
+ const htmlProps = buildHtmlProps(htmlOptions);
93
96
 
94
97
  // coerce to array
95
98
  const cardChildren = React.Children.toArray(children)
@@ -113,6 +116,7 @@ const Card = (props: CardPropTypes) => {
113
116
  <Tag
114
117
  {...ariaProps}
115
118
  {...dataProps}
119
+ {...htmlProps}
116
120
  className={classnames(cardCss, globalProps(props), className)}
117
121
  >
118
122
  {subComponentTags('Header')}
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useRef } from 'react'
2
2
  import Body from '../pb_body/_body'
3
3
  import Icon from '../pb_icon/_icon'
4
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
4
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import classnames from 'classnames'
6
6
  import { globalProps, GlobalProps } from '../utilities/globalProps'
7
7
 
@@ -13,6 +13,7 @@ type CheckboxProps = {
13
13
  dark?: boolean,
14
14
  data?: {[key: string]: string},
15
15
  error?: boolean,
16
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
16
17
  id?: string,
17
18
  indeterminate?: boolean,
18
19
  name?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
31
32
  dark = false,
32
33
  data = {},
33
34
  error = false,
35
+ htmlOptions = {},
34
36
  id,
35
37
  indeterminate = false,
36
38
  name = '',
@@ -41,8 +43,10 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
41
43
  } = props
42
44
 
43
45
  const checkRef = useRef(null)
44
- const dataProps = buildDataProps(data)
45
46
  const ariaProps = buildAriaProps(aria)
47
+ const dataProps = buildDataProps(data)
48
+ const htmlProps = buildHtmlProps(htmlOptions)
49
+
46
50
  const classes = classnames(
47
51
  buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
48
52
  globalProps(props),
@@ -76,6 +80,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
76
80
  <label
77
81
  {...ariaProps}
78
82
  {...dataProps}
83
+ {...htmlProps}
79
84
  className={classes}
80
85
  id={id}
81
86
  >
@@ -9,7 +9,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
9
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
10
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
11
  import { globalProps } from "../utilities/globalProps";
12
- import { buildAriaProps, buildDataProps } from "../utilities/props";
12
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
13
13
 
14
14
  type CircleChartProps = {
15
15
  align?: "left" | "right" | "center";
@@ -23,6 +23,7 @@ type CircleChartProps = {
23
23
  dataLabelHtml?: string;
24
24
  dataLabels?: boolean;
25
25
  height?: string;
26
+ htmlOptions?: { [key: string]: string | number | boolean | Function };
26
27
  id?: string;
27
28
  innerSize?: "sm" | "md" | "lg" | "none";
28
29
  legend?: boolean;
@@ -71,6 +72,7 @@ const CircleChart = ({
71
72
  dataLabelHtml = "<div>{point.name}</div>",
72
73
  dataLabels = false,
73
74
  height,
75
+ htmlOptions = {},
74
76
  id,
75
77
  innerSize = "md",
76
78
  legend = false,
@@ -89,7 +91,8 @@ const CircleChart = ({
89
91
  ...props
90
92
  }: CircleChartProps) => {
91
93
  const ariaProps = buildAriaProps(aria);
92
- const dataProps = buildDataProps(data);
94
+ const dataProps = buildDataProps(data)
95
+ const htmlProps = buildHtmlProps(htmlOptions);
93
96
  highchartsMore(Highcharts);
94
97
 
95
98
  const setupTheme = () => {
@@ -182,6 +185,7 @@ const CircleChart = ({
182
185
  id: id,
183
186
  ...ariaProps,
184
187
  ...dataProps,
188
+ ...htmlProps,
185
189
  }}
186
190
  highcharts={Highcharts}
187
191
  options={options}
@@ -195,6 +199,7 @@ const CircleChart = ({
195
199
  id: id,
196
200
  ...ariaProps,
197
201
  ...dataProps,
202
+ ...htmlProps,
198
203
  }}
199
204
  highcharts={Highcharts}
200
205
  options={options}
@@ -1,8 +1,6 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
4
-
5
- import { noop } from '../utilities/props'
3
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps, noop } from '../utilities/props'
6
4
  import { globalProps } from '../utilities/globalProps'
7
5
 
8
6
  import Button from '../pb_button/_button'
@@ -15,6 +13,7 @@ type CircleIconButtonProps = {
15
13
  data?: { [key: string]: string },
16
14
  disabled?: boolean,
17
15
  icon: string,
16
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
18
17
  id?: string,
19
18
  link?: string,
20
19
  onClick?: React.MouseEventHandler<HTMLElement>,
@@ -30,6 +29,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
30
29
  dark,
31
30
  data = {},
32
31
  disabled,
32
+ htmlOptions = {},
33
33
  icon,
34
34
  id,
35
35
  onClick = noop,
@@ -41,6 +41,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
41
41
 
42
42
  const ariaProps = buildAriaProps(aria)
43
43
  const dataProps = buildDataProps(data)
44
+ const htmlProps = buildHtmlProps(htmlOptions)
44
45
  const classes = classnames(
45
46
  buildCss('pb_circle_icon_button_kit'),
46
47
  globalProps(props),
@@ -51,6 +52,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
51
52
  <div
52
53
  {...ariaProps}
53
54
  {...dataProps}
55
+ {...htmlProps}
54
56
  className={classes}
55
57
  id={id}
56
58
  >