playbook_ui 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784 → 13.14.0.pre.alpha.play1101betaicons1825

Sign up to get free protection for your applications and to get access to all the features.
Files changed (194) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +5 -5
  5. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +3 -3
  6. data/app/pb_kits/playbook/pb_background/_background.tsx +9 -9
  7. data/app/pb_kits/playbook/pb_badge/_badge.tsx +2 -2
  8. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +3 -3
  9. data/app/pb_kits/playbook/pb_beta_icon/_icon.scss +12 -0
  10. data/app/pb_kits/playbook/pb_beta_icon/_icon.tsx +164 -0
  11. data/app/pb_kits/playbook/pb_beta_icon/docs/_description.md +1 -0
  12. data/app/pb_kits/playbook/pb_beta_icon/docs/_footer.md +2 -0
  13. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.html.erb +3 -0
  14. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.jsx +35 -0
  15. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.md +1 -0
  16. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.html.erb +1 -0
  17. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.jsx +19 -0
  18. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border_swift.md +7 -0
  19. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.html.erb +16 -0
  20. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.jsx +34 -0
  21. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.md +19 -0
  22. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.html.erb +1 -0
  23. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.jsx +17 -0
  24. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default_swift.md +7 -0
  25. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.jsx +21 -0
  27. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.md +7 -0
  28. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.html.erb +3 -0
  29. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.jsx +33 -0
  30. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip_swift.md +11 -0
  31. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_props_swift.md +8 -0
  32. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.html.erb +2 -0
  33. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.jsx +26 -0
  34. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.md +1 -0
  35. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.html.erb +3 -0
  36. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.jsx +33 -0
  37. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate_swift.md +11 -0
  38. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.html.erb +16 -0
  39. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.jsx +133 -0
  40. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes_swift.md +46 -0
  41. data/app/pb_kits/playbook/pb_beta_icon/docs/example.yml +30 -0
  42. data/app/pb_kits/playbook/pb_beta_icon/docs/index.js +9 -0
  43. data/app/pb_kits/playbook/pb_beta_icon/icon.html.erb +15 -0
  44. data/app/pb_kits/playbook/pb_beta_icon/icon.rb +153 -0
  45. data/app/pb_kits/playbook/pb_beta_icon/icon.test.js +155 -0
  46. data/app/pb_kits/playbook/pb_body/_body.scss +0 -5
  47. data/app/pb_kits/playbook/pb_body/_body.tsx +5 -9
  48. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +0 -20
  49. data/app/pb_kits/playbook/pb_body/body.rb +1 -8
  50. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +3 -4
  51. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx +3 -3
  52. data/app/pb_kits/playbook/pb_button/_button.tsx +40 -37
  53. data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +11 -0
  54. data/app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md +26 -0
  55. data/app/pb_kits/playbook/pb_button/docs/example.yml +1 -0
  56. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_card/_card.tsx +2 -2
  59. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +5 -4
  60. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -3
  61. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +9 -9
  62. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +1 -1
  63. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +5 -7
  64. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +2 -2
  65. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +5 -4
  66. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +16 -12
  67. data/app/pb_kits/playbook/pb_contact/_contact.tsx +3 -3
  68. data/app/pb_kits/playbook/pb_currency/_currency.tsx +2 -2
  69. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +1 -1
  70. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +4 -57
  71. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +4 -57
  72. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +20 -16
  73. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx +1 -1
  74. data/app/pb_kits/playbook/pb_date/_date.tsx +7 -7
  75. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -1
  76. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +2 -2
  77. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +2 -2
  78. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +8 -8
  79. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +2 -2
  80. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +1 -1
  81. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +2 -2
  82. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +6 -3
  83. data/app/pb_kits/playbook/pb_detail/_detail.tsx +3 -3
  84. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +2 -2
  85. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +42 -34
  86. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +1 -1
  87. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +4 -5
  88. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +4 -4
  89. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default_swift.md +11 -0
  90. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -4
  91. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -4
  92. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_props_table.md +13 -0
  93. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +4 -2
  94. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes_swift.md +18 -0
  95. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  96. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status_swift.md +14 -0
  97. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +7 -0
  98. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.tsx +5 -5
  99. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +1 -1
  100. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -1
  101. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  102. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -1
  103. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +1 -1
  104. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -1
  105. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +1 -1
  106. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +1 -1
  107. data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +1 -1
  108. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +1 -1
  109. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  110. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  111. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +1 -1
  112. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +1 -1
  113. data/app/pb_kits/playbook/pb_image/_image.tsx +1 -1
  114. data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx +1 -1
  115. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  116. data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -1
  117. data/app/pb_kits/playbook/pb_legend/_legend.tsx +1 -1
  118. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +1 -1
  119. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +1 -1
  120. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +1 -1
  121. data/app/pb_kits/playbook/pb_list/_list.tsx +1 -1
  122. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  123. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -1
  124. data/app/pb_kits/playbook/pb_map/_map.tsx +1 -1
  125. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  126. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +1 -1
  127. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +1 -1
  128. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +1 -1
  129. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +1 -1
  130. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  131. data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -1
  132. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  133. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +1 -1
  134. data/app/pb_kits/playbook/pb_person/_person.tsx +1 -1
  135. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +1 -1
  136. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +1 -1
  137. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  138. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
  139. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +1 -1
  140. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +1 -1
  141. data/app/pb_kits/playbook/pb_progress_step/_progress_step.tsx +1 -1
  142. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx +1 -1
  143. data/app/pb_kits/playbook/pb_radio/_radio.tsx +1 -1
  144. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +1 -1
  145. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +1 -1
  146. data/app/pb_kits/playbook/pb_select/_select.tsx +1 -1
  147. data/app/pb_kits/playbook/pb_select/docs/_select_default_swift.md +15 -0
  148. data/app/pb_kits/playbook/pb_select/docs/_select_error_swift.md +18 -0
  149. data/app/pb_kits/playbook/pb_select/docs/_select_props_table.md +8 -0
  150. data/app/pb_kits/playbook/pb_select/docs/example.yml +5 -0
  151. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
  152. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +1 -1
  153. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +1 -1
  154. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +1 -1
  155. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +1 -1
  156. data/app/pb_kits/playbook/pb_source/_source.tsx +1 -1
  157. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +1 -1
  158. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +1 -1
  159. data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx +1 -1
  160. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  161. data/app/pb_kits/playbook/pb_table/_table_row.tsx +1 -1
  162. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  163. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +1 -1
  164. data/app/pb_kits/playbook/pb_time/_time.tsx +1 -1
  165. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  166. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
  167. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  168. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  169. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +1 -1
  170. data/app/pb_kits/playbook/pb_title/_title.scss +0 -5
  171. data/app/pb_kits/playbook/pb_title/_title.tsx +2 -5
  172. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +0 -19
  173. data/app/pb_kits/playbook/pb_title/title.rb +2 -9
  174. data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +1 -1
  175. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +1 -1
  176. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  177. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
  178. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -1
  179. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -1
  180. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  181. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +1 -1
  182. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +1 -1
  183. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
  184. data/app/pb_kits/playbook/tokens/exports/exports.d.ts +1 -0
  185. data/app/pb_kits/playbook/utilities/_truncate.scss +20 -0
  186. data/app/pb_kits/playbook/utilities/globalProps.ts +13 -2
  187. data/app/pb_kits/playbook/utilities/props.ts +2 -2
  188. data/app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js +21 -0
  189. data/dist/playbook-rails.js +5 -5
  190. data/lib/playbook/classnames.rb +1 -0
  191. data/lib/playbook/kit_base.rb +2 -0
  192. data/lib/playbook/truncate.rb +29 -0
  193. data/lib/playbook/version.rb +1 -1
  194. metadata +51 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8ffc4f97c395ad7ccf46927ac7de9951900347fa14517d3b2eb2c630e22cb359
4
- data.tar.gz: '04629c19a8a33d87804cfec3191d24fd45e5014c29d869a291143255b89a39fe'
3
+ metadata.gz: c0691ea09bf36304c045cc08897545b9c002c1c4c31c9670566bfa92fcc42f66
4
+ data.tar.gz: 968247f2c5bc1d7ba589a63657ca4167c91fc63113e1c74009fda6bbe9b18525
5
5
  SHA512:
6
- metadata.gz: be32d4c62bbc74d86831742b40ac3d6d55539f75d6bd6a624ac07cccf4ce5ac6bc061390062f6c5774f2d4b7f8c48db59c414eaf20adc7c6ee73b406eeeb57d8
7
- data.tar.gz: 3eb126af7f71f54853bdc7810c0f67a312fbd4e182f04a65e8a4bfb076dc5b1354cbe5e458417632ff3baaa12772633db4396aef979022c72500f8c4fd14ff9d
6
+ metadata.gz: 3d1144ce8d889ad0f3e664b2b2b59f39fb311cc3ba7061a86c78aaf280576f06ad765882b33cfdb4057a60e9c0ebb55be088b48e9db4e337975f3ee690714f13
7
+ data.tar.gz: a13cf6459ce4f8b9d31357ec8ddd4ab433a59948dcbfeb91a89b33641ec3d2dab6ea9e397635b5b8424d7974bbdcfed8494439b12110b7da4690897ad4c06c6c
@@ -114,5 +114,6 @@
114
114
  @import './utilities/hover';
115
115
  @import './utilities/text_align';
116
116
  @import './utilities/overflow';
117
+ @import './utilities/truncate';
117
118
 
118
119
  @import 'pb_multi_level_select/multi_level_select';
@@ -9,6 +9,7 @@ export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar
9
9
  export { default as Background } from './pb_background/_background'
10
10
  export { default as Badge } from './pb_badge/_badge'
11
11
  export { default as BarGraph } from './pb_bar_graph/_bar_graph'
12
+ export { default as BetaIcon } from './pb_beta_icon/_icon'
12
13
  export { default as Body } from './pb_body/_body'
13
14
  export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
14
15
  export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
@@ -142,4 +143,4 @@ export { default as scale } from './tokens/exports/_scale.scss'
142
143
  export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
143
144
  export { default as shadows } from './tokens/exports/_shadows.scss'
144
145
  export { default as spacing } from './tokens/exports/_spacing.scss'
145
- export { default as typography } from './tokens/exports/_typography.scss'
146
+ export { default as typography } from './tokens/exports/_typography.scss'
@@ -12,7 +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
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  id?: string,
17
17
  imageAlt?: string,
18
18
  imageUrl?: string,
@@ -32,7 +32,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
32
32
  className,
33
33
  data = {},
34
34
  htmlOptions = {},
35
- name = null,
35
+ name = undefined,
36
36
  id = '',
37
37
  imageAlt = '',
38
38
  imageUrl,
@@ -40,8 +40,8 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
40
40
  status = null,
41
41
  dark = false,
42
42
  } = props
43
- const dataProps: {[key: string]: any} = buildDataProps(data)
44
- const ariaProps: {[key: string]: any} = buildAriaProps(aria)
43
+ const dataProps: {[key: string]: string} = buildDataProps(data)
44
+ const ariaProps: {[key: string]: string} = buildAriaProps(aria)
45
45
  const htmlProps = buildHtmlProps(htmlOptions);
46
46
  const classes = classnames(
47
47
  buildCss('pb_avatar_kit', `size_${size}`),
@@ -50,7 +50,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
50
50
  )
51
51
 
52
52
  const initials = name && firstTwoInitials(name)
53
- dataProps['data-initials'] = initials
53
+ dataProps['data-initials'] = (initials as string)
54
54
 
55
55
  const [error, setError] = useState(false)
56
56
  const handleError = () => setError(true)
@@ -19,8 +19,8 @@ type AvatarActionButtonProps = {
19
19
  linkAriaLabel?: string,
20
20
  className?: string,
21
21
  dark?: boolean,
22
- data?: Object,
23
- htmlOptions?: {[key: string]: string | number | boolean | Function},
22
+ data?: {[key: string]: string},
23
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
24
24
  id?: string,
25
25
  imageAlt?: string,
26
26
  imageUrl?: string,
@@ -31,7 +31,7 @@ type AvatarActionButtonProps = {
31
31
  size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
32
32
  }
33
33
 
34
- const AvatarActionButton = (props: AvatarActionButtonProps) => {
34
+ const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
35
35
  const {
36
36
  action = 'add',
37
37
  aria = {},
@@ -23,7 +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
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
27
27
  id?: string,
28
28
  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
29
29
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -63,7 +63,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
63
63
  return prop?.default || undefined;
64
64
  };
65
65
 
66
- const Background = (props: BackgroundProps) => {
66
+ const Background = (props: BackgroundProps): React.ReactElement => {
67
67
  const {
68
68
  alt = '',
69
69
  aria = {},
@@ -144,13 +144,13 @@ const Background = (props: BackgroundProps) => {
144
144
 
145
145
  return (
146
146
  <Tag
147
- {...ariaProps}
148
- {...dataProps}
149
- {...htmlProps}
150
- alt={alt}
151
- className={classes}
152
- id={id}
153
- style={backgroundStyle}
147
+ {...ariaProps}
148
+ {...dataProps}
149
+ {...htmlProps}
150
+ alt={alt}
151
+ className={classes}
152
+ id={id}
153
+ style={backgroundStyle}
154
154
  >
155
155
  {children}
156
156
  </Tag>
@@ -19,7 +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
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
23
23
  id?: string,
24
24
  removeIcon?: boolean,
25
25
  removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -27,7 +27,7 @@ type BadgeProps = {
27
27
  text?: string,
28
28
  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
29
29
  } & GlobalProps
30
- const Badge = (props: BadgeProps) => {
30
+ const Badge = (props: BadgeProps): React.ReactElement => {
31
31
  const {
32
32
  aria = {},
33
33
  className,
@@ -19,9 +19,9 @@ 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},
23
- id: any;
24
- pointStart: number | any;
22
+ id: string;
23
+ pointStart: number;
24
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
25
  subTitle?: string;
26
26
  title: string;
27
27
  type?: string;
@@ -0,0 +1,12 @@
1
+ // Rails custom icon styles
2
+ svg.pb_custom_icon {
3
+ width: 1em;
4
+ fill: currentColor;
5
+ path {
6
+ fill: currentColor;
7
+ }
8
+ }
9
+
10
+ .pb_icon_kit_emoji {
11
+ font-family: monospace;
12
+ }
@@ -0,0 +1,164 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
+ import { GlobalProps, globalProps } from '../utilities/globalProps'
5
+ import { isValidEmoji } from '../utilities/validEmojiChecker'
6
+
7
+ export type IconSizes = "lg"
8
+ | "xs"
9
+ | "sm"
10
+ | "1x"
11
+ | "2x"
12
+ | "3x"
13
+ | "4x"
14
+ | "5x"
15
+ | "6x"
16
+ | "7x"
17
+ | "8x"
18
+ | "9x"
19
+ | "10x"
20
+ | ""
21
+
22
+ type IconProps = {
23
+ aria?: {[key: string]: string},
24
+ border?: string,
25
+ className?: string,
26
+ customIcon?: {[key: string] :SVGElement},
27
+ data?: {[key: string]: string},
28
+ fixedWidth?: boolean,
29
+ flip?: "horizontal" | "vertical" | "both" | "none",
30
+ icon: string,
31
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
32
+ id?: string,
33
+ inverse?: boolean,
34
+ listItem?: boolean,
35
+ pull?: "left" | "right" | "none",
36
+ pulse?: boolean,
37
+ rotation?: 90 | 180 | 270,
38
+ size?: IconSizes,
39
+ fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
40
+ spin?: boolean,
41
+ } & GlobalProps
42
+
43
+ const flipMap = {
44
+ horizontal: 'fa-flip-horizontal',
45
+ vertical: 'fa-flip-vertical',
46
+ both: 'fa-flip-horizontal fa-flip-vertical',
47
+ none: ""
48
+ }
49
+
50
+ const Icon = (props: IconProps) => {
51
+ const {
52
+ aria = {},
53
+ border = false,
54
+ className,
55
+ customIcon,
56
+ data = {},
57
+ fixedWidth = true,
58
+ flip = "none",
59
+ htmlOptions = {},
60
+ icon,
61
+ id,
62
+ inverse = false,
63
+ listItem = false,
64
+ pull,
65
+ pulse = false,
66
+ rotation,
67
+ size,
68
+ fontStyle = 'far',
69
+ spin = false,
70
+ } = props
71
+
72
+ const faClasses = {
73
+ 'fa-border': border,
74
+ 'fa-fw': fixedWidth,
75
+ 'fa-inverse': inverse,
76
+ 'fa-li': listItem,
77
+ 'fa-pulse': pulse,
78
+ 'fa-spin': spin,
79
+ [`fa-${size}`]: size,
80
+ [`fa-pull-${pull}`]: pull,
81
+ [`fa-rotate-${rotation}`]: rotation,
82
+
83
+ }
84
+
85
+ // Lets check and see if the icon prop is referring to a custom Power icon...
86
+ // If so, then set fa-icon to "custom"
87
+ // this ensures the JS will not do any further operations
88
+ // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
89
+ if (!customIcon) faClasses[`fa-${icon}`] = icon
90
+
91
+ const classes = classnames(
92
+ flipMap[flip],
93
+ 'pb_icon_kit',
94
+ customIcon ? '' : fontStyle,
95
+ faClasses,
96
+ globalProps(props),
97
+ className
98
+ )
99
+
100
+ const classesEmoji = classnames(
101
+ 'pb_icon_kit_emoji',
102
+ globalProps(props),
103
+ className
104
+ )
105
+
106
+ aria.label ? null : aria.label = `${icon} icon`
107
+ const ariaProps: {[key: string]: any} = buildAriaProps(aria)
108
+ const dataProps: {[key: string]: any} = buildDataProps(data)
109
+ const htmlProps = buildHtmlProps(htmlOptions)
110
+
111
+ // Add a conditional here to show only the SVG if custom
112
+ const displaySVG = (customIcon: any) => {
113
+ if (customIcon)
114
+ return (
115
+ <>
116
+ {
117
+ React.cloneElement(customIcon, {
118
+ ...dataProps,
119
+ ...htmlProps,
120
+ className: classes,
121
+ id,
122
+ })
123
+ }
124
+ </>
125
+ )
126
+ else if (isValidEmoji(icon))
127
+ return (
128
+ <>
129
+ <span
130
+ {...dataProps}
131
+ {...htmlProps}
132
+ className={classesEmoji}
133
+ id={id}
134
+ >
135
+ {icon}
136
+ </span>
137
+ </>
138
+ )
139
+
140
+ else
141
+ return (
142
+ <>
143
+ <i
144
+ {...dataProps}
145
+ {...htmlProps}
146
+ className={classes}
147
+ id={id}
148
+ />
149
+ <span
150
+ {...ariaProps}
151
+ hidden
152
+ />
153
+ </>
154
+ )
155
+ }
156
+
157
+ return (
158
+ <>
159
+ {displaySVG(customIcon)}
160
+ </>
161
+ )
162
+ }
163
+
164
+ export default Icon
@@ -0,0 +1 @@
1
+ An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
@@ -0,0 +1,2 @@
1
+ ### Things to Avoid
2
+ Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.
@@ -0,0 +1,3 @@
1
+ <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
2
+ <br/>
3
+ <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconAnimate = (props) => {
6
+ return (
7
+ <div>
8
+ <p>
9
+ <Icon
10
+ fixedWidth
11
+ icon="spinner"
12
+ size="2x"
13
+ spin
14
+ {...props}
15
+ />
16
+ {' '}
17
+ <span>{'Spin'}</span>
18
+ </p>
19
+ <br />
20
+ <p>
21
+ <Icon
22
+ fixedWidth
23
+ icon="spinner"
24
+ pulse
25
+ size="2x"
26
+ {...props}
27
+ />
28
+ {' '}
29
+ <span>{'Pulse'}</span>
30
+ </p>
31
+ </div>
32
+ )
33
+ }
34
+
35
+ export default IconAnimate
@@ -0,0 +1 @@
1
+ A spinner icon can show a user that something is loading or saving.
@@ -0,0 +1 @@
1
+ <%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>
@@ -0,0 +1,19 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconBorder = (props) => {
6
+ return (
7
+ <div>
8
+ <Icon
9
+ border
10
+ fixedWidth
11
+ icon="user"
12
+ size="2x"
13
+ {...props}
14
+ />
15
+ </div>
16
+ )
17
+ }
18
+
19
+ export default IconBorder
@@ -0,0 +1,7 @@
1
+ ![card-border](https://github.com/powerhome/playbook/assets/92755007/442640c8-1b4f-455d-8517-5ca5cd120664)
2
+
3
+ ```swift
4
+
5
+ PbBetaIcon(FontAwesome.user, border: true)
6
+
7
+ ```
@@ -0,0 +1,16 @@
1
+ <%# SVG fill color inherited from css color property %>
2
+ <div class="icon-wrapper">
3
+
4
+ <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
5
+ <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
6
+ <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
7
+ <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
8
+ <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
9
+ <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
10
+
11
+ <%= pb_rails("body", props: {
12
+ text: "Custom icons are compatible with other icon props (size, rotation,
13
+ spin, flip, etc). Their SVG fill colors will be inherited from
14
+ parent element's css color properties."
15
+ } ) %>
16
+ </div>
@@ -0,0 +1,34 @@
1
+ import React from 'react'
2
+ import { Icon } from '../../'
3
+
4
+ // import Icons as config from 'power-icons'
5
+ const config = {
6
+ moon: (
7
+ <svg
8
+ ariaHidden="true"
9
+ focusable="false"
10
+ role="img"
11
+ viewBox="0 0 512 512"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ >
14
+ <path
15
+ d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
16
+ fill="currentColor"
17
+ />
18
+ </svg>
19
+ ),
20
+ }
21
+
22
+ const IconCustom = (props) => {
23
+ return (
24
+ <div>
25
+ <Icon
26
+ customIcon={config.moon}
27
+ size="7x"
28
+ {...props}
29
+ />
30
+ </div>
31
+ )
32
+ }
33
+
34
+ export default IconCustom
@@ -0,0 +1,19 @@
1
+ # Tips for Custom Icons
2
+
3
+ When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
4
+
5
+ Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
6
+
7
+ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
8
+
9
+ Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
10
+
11
+ You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
12
+
13
+ ### React
14
+
15
+ So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
16
+
17
+ ### Rails
18
+
19
+ Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
@@ -0,0 +1 @@
1
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconDefault = (props) => {
6
+ return (
7
+ <div>
8
+ <Icon
9
+ fixedWidth
10
+ icon="user"
11
+ {...props}
12
+ />
13
+ </div>
14
+ )
15
+ }
16
+
17
+ export default IconDefault
@@ -0,0 +1,7 @@
1
+ ![card-default](https://github.com/powerhome/playbook/assets/92755007/8c7e5454-1d42-4d13-9107-ffc5773a136a)
2
+
3
+ ```swift
4
+
5
+ PbBetaIcon.fontAwesome(.user, size: .x1)
6
+
7
+ ```
@@ -0,0 +1 @@
1
+ <%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x" }) %>
@@ -0,0 +1,21 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
6
+
7
+ const IconFaKit = (props) => {
8
+ return (
9
+ <div>
10
+ <Icon
11
+ {...props}
12
+ fixedWidth
13
+ fontStyle="fak"
14
+ icon="powergon"
15
+ size="5x"
16
+ />
17
+ </div>
18
+ )
19
+ }
20
+
21
+ export default IconFaKit
@@ -0,0 +1,7 @@
1
+ Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box.
2
+
3
+ All you need to do is 3 things:
4
+ 1) Import your custom-icon.js file as outlined in the FontAwesome docs.
5
+ 2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon.
6
+ 3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
7
+
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
2
+ <%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
3
+ <%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>
@@ -0,0 +1,33 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconFlip = (props) => {
6
+ return (
7
+ <div>
8
+ <Icon
9
+ fixedWidth
10
+ flip="horizontal"
11
+ icon="question-circle"
12
+ size="2x"
13
+ {...props}
14
+ />
15
+ <Icon
16
+ fixedWidth
17
+ flip="vertical"
18
+ icon="question-circle"
19
+ size="2x"
20
+ {...props}
21
+ />
22
+ <Icon
23
+ fixedWidth
24
+ flip="both"
25
+ icon="question-circle"
26
+ size="2x"
27
+ {...props}
28
+ />
29
+ </div>
30
+ )
31
+ }
32
+
33
+ export default IconFlip
@@ -0,0 +1,11 @@
1
+ ![icon-flipped](https://github.com/powerhome/playbook/assets/92755007/2776fb83-942d-4a38-9dff-9dcb73940dfe)
2
+
3
+ ```swift
4
+
5
+ HStack(spacing: Spacing.xSmall) {
6
+ PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal])
7
+ PbBetaIcon(FontAwesome.questionCircle, flipped: [.vertical])
8
+ PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
9
+ }
10
+
11
+ ```
@@ -0,0 +1,8 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon | | |
5
+ | **Size** | `IconSize` | Changes the size of the Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
6
+ | **Rotation** | `IconRotation` | Rotates the Icon | `.zero` | `.zero` `.right` `.straight` `.obtuse` |
7
+ | **Border** | `Bool` | Adds a border | `false` | `true` `false` |
8
+ | **Flipped** | `[Axis]` | Flips the Icon | `nil` | `[.horizontal]` `[.vertical]` `[.horizontal, .vertical]` |
@@ -0,0 +1,2 @@
1
+ <%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
2
+ <%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconPull = (props) => {
6
+ return (
7
+ <div>
8
+ <Icon
9
+ fixedWidth
10
+ icon="arrow-left"
11
+ pull="left"
12
+ size="2x"
13
+ {...props}
14
+ />
15
+ <Icon
16
+ fixedWidth
17
+ icon="arrow-right"
18
+ pull="right"
19
+ size="2x"
20
+ {...props}
21
+ />
22
+ </div>
23
+ )
24
+ }
25
+
26
+ export default IconPull
@@ -0,0 +1 @@
1
+ Icon Pull can be used to indicate that the user can perform a pull action.