playbook_ui 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784 → 13.14.0.pre.alpha.play1101betaicons1798

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
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
2
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
3
+ <%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>
@@ -0,0 +1,33 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconRotate = (props) => {
6
+ return (
7
+ <div>
8
+ <Icon
9
+ fixedWidth
10
+ icon="user"
11
+ rotation={90}
12
+ size="2x"
13
+ {...props}
14
+ />
15
+ <Icon
16
+ fixedWidth
17
+ icon="user"
18
+ rotation={180}
19
+ size="2x"
20
+ {...props}
21
+ />
22
+ <Icon
23
+ fixedWidth
24
+ icon="user"
25
+ rotation={270}
26
+ size="2x"
27
+ {...props}
28
+ />
29
+ </div>
30
+ )
31
+ }
32
+
33
+ export default IconRotate
@@ -0,0 +1,11 @@
1
+ ![icon-rotate](https://github.com/powerhome/playbook/assets/92755007/29a6c127-a8a0-4dd9-a8cb-6401f772f11e)
2
+
3
+ ```swift
4
+
5
+ HStack(spacing: Spacing.xSmall) {
6
+ PbBetaIcon(FontAwesome.user, rotation: .right)
7
+ PbBetaIcon(FontAwesome.user, rotation: .zero)
8
+ PbBetaIcon(FontAwesome.user, rotation: .obtuse)
9
+ }
10
+
11
+ ```
@@ -0,0 +1,16 @@
1
+ <p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
2
+ <p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
3
+ <p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
4
+
5
+ <br/><br/>
6
+
7
+ <p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
8
+ <p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
9
+ <p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
10
+ <p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
11
+ <p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
12
+ <p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
13
+ <p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
14
+ <p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
15
+ <p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
16
+ <p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>
@@ -0,0 +1,133 @@
1
+ import React from 'react'
2
+
3
+ import Icon from '../_icon'
4
+
5
+ const IconSizes = (props) => {
6
+ return (
7
+ <div>
8
+ <p>
9
+ <Icon
10
+ icon="user"
11
+ size="lg"
12
+ {...props}
13
+ />
14
+ {' '}
15
+ <span>{'Large'}</span>
16
+ </p>
17
+ <p>
18
+ <Icon
19
+ icon="user"
20
+ size="sm"
21
+ {...props}
22
+ />
23
+ {' '}
24
+ <span>{'Small'}</span>
25
+ </p>
26
+ <p>
27
+ <Icon
28
+ icon="user"
29
+ size="xs"
30
+ {...props}
31
+ />
32
+ {' '}
33
+ <span>{'XSmall'}</span>
34
+ </p>
35
+
36
+ <br />
37
+ <br />
38
+
39
+ <p>
40
+ <Icon
41
+ icon="user"
42
+ size="1x"
43
+ {...props}
44
+ />
45
+ {' '}
46
+ <span>{'1x'}</span>
47
+ </p>
48
+ <p>
49
+ <Icon
50
+ icon="user"
51
+ size="2x"
52
+ {...props}
53
+ />
54
+ {' '}
55
+ <span>{'2x'}</span>
56
+ </p>
57
+ <p>
58
+ <Icon
59
+ icon="user"
60
+ size="3x"
61
+ {...props}
62
+ />
63
+ {' '}
64
+ <span>{'3x'}</span>
65
+ </p>
66
+ <p>
67
+ <Icon
68
+ icon="user"
69
+ size="4x"
70
+ {...props}
71
+ />
72
+ {' '}
73
+ <span>{'4x'}</span>
74
+ </p>
75
+ <p>
76
+ <Icon
77
+ icon="user"
78
+ size="5x"
79
+ {...props}
80
+ />
81
+ {' '}
82
+ <span>{'5x'}</span>
83
+ </p>
84
+ <p>
85
+ <Icon
86
+ icon="user"
87
+ size="6x"
88
+ {...props}
89
+ />
90
+ {' '}
91
+ <span>{'6x'}</span>
92
+ </p>
93
+ <p>
94
+ <Icon
95
+ icon="user"
96
+ size="7x"
97
+ {...props}
98
+ />
99
+ {' '}
100
+ <span>{'7x'}</span>
101
+ </p>
102
+ <p>
103
+ <Icon
104
+ icon="user"
105
+ size="8x"
106
+ {...props}
107
+ />
108
+ {' '}
109
+ <span>{'8x'}</span>
110
+ </p>
111
+ <p>
112
+ <Icon
113
+ icon="user"
114
+ size="9x"
115
+ {...props}
116
+ />
117
+ {' '}
118
+ <span>{'9x'}</span>
119
+ </p>
120
+ <p>
121
+ <Icon
122
+ icon="user"
123
+ size="10x"
124
+ {...props}
125
+ />
126
+ {' '}
127
+ <span>{'10x'}</span>
128
+ </p>
129
+ </div>
130
+ )
131
+ }
132
+
133
+ export default IconSizes
@@ -0,0 +1,46 @@
1
+ ![icon-size](https://github.com/powerhome/playbook/assets/92755007/b3aa3933-56b1-4fe4-bb8b-00d786abb23a)
2
+
3
+ ```swift
4
+
5
+ HStack(spacing: Spacing.xSmall) {
6
+ PbBetaIcon.fontAwesome(.atlas, size: .xSmall)
7
+ Text("xSmall")
8
+
9
+ PbBetaIcon.fontAwesome(.atlas, size: .small)
10
+ Text("small")
11
+
12
+ PbBetaIcon.fontAwesome(.atlas, size: .large)
13
+ Text("large")
14
+
15
+ PbBetaIcon.fontAwesome(.atlas, size: .x1)
16
+ Text("x1")
17
+
18
+ PbBetaIcon.fontAwesome(.atlas, size: .x2)
19
+ Text("x2")
20
+
21
+ PbBetaIcon.fontAwesome(.atlas, size: .x3)
22
+ Text("x3")
23
+
24
+ PbBetaIcon.fontAwesome(.atlas, size: .x4)
25
+ Text("x4")
26
+
27
+ PbBetaIcon.fontAwesome(.atlas, size: .x5)
28
+ Text("x5")
29
+
30
+ PbBetaIcon.fontAwesome(.atlas, size: .x6)
31
+ Text("x6")
32
+
33
+ PbBetaIcon.fontAwesome(.atlas, size: .x7)
34
+ Text("x7")
35
+
36
+ PbBetaIcon.fontAwesome(.atlas, size: .x8)
37
+ Text("x8")
38
+
39
+ PbBetaIcon.fontAwesome(.atlas, size: .x9)
40
+ Text("x9")
41
+
42
+ PbBetaIcon.fontAwesome(.atlas, size: .x10)
43
+ Text("x10")
44
+ }
45
+
46
+ ```
@@ -0,0 +1,30 @@
1
+ examples:
2
+ rails:
3
+ - icon_default: Icon Default
4
+ - icon_rotate: Icon Rotate
5
+ - icon_flip: Icon Flip
6
+ - icon_animate: Icon Animation
7
+ - icon_pull: Icon Pull
8
+ - icon_border: Icon Border
9
+ - icon_sizes: Icon Sizes
10
+ - icon_custom: Icon Custom
11
+ - icon_fa_kit: Icon with FontAwesome Kit
12
+
13
+ react:
14
+ - icon_default: Icon Default
15
+ - icon_rotate: Icon Rotate
16
+ - icon_flip: Icon Flip
17
+ - icon_animate: Icon Animation
18
+ - icon_pull: Icon Pull
19
+ - icon_border: Icon Border
20
+ - icon_sizes: Icon Sizes
21
+ - icon_custom: Icon Custom
22
+ - icon_fa_kit: Icon with FontAwesome Kit
23
+
24
+ swift:
25
+ - icon_default_swift: Icon Default
26
+ - icon_rotate_swift: Icon Rotate
27
+ - icon_flip_swift: Icon Flip
28
+ - icon_border_swift: Icon Border
29
+ - icon_sizes_swift: Icon Sizes
30
+ - icon_props_swift: Props
@@ -0,0 +1,9 @@
1
+ export { default as IconDefault } from './_icon_default.jsx'
2
+ export { default as IconRotate } from './_icon_rotate.jsx'
3
+ export { default as IconFlip } from './_icon_flip.jsx'
4
+ export { default as IconAnimate } from './_icon_animate.jsx'
5
+ export { default as IconPull } from './_icon_pull.jsx'
6
+ export { default as IconBorder } from './_icon_border.jsx'
7
+ export { default as IconSizes } from './_icon_sizes.jsx'
8
+ export { default as IconCustom } from './_icon_custom.jsx'
9
+ export { default as IconFaKit} from './_icon_fa_kit.jsx'
@@ -0,0 +1,15 @@
1
+ <% if object.custom_icon %>
2
+ <%= object.render_svg(object.custom_icon) %>
3
+ <% elsif object.valid_emoji(object.icon) %>
4
+ <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
5
+ <% else %>
6
+ <%= content_tag(:i, nil,
7
+ id: object.id,
8
+ data: object.data,
9
+ class: object.classname
10
+ ) %>
11
+ <%= content_tag(:span, nil,
12
+ aria: { label: "#{object.icon} icon" }.merge(object.aria),
13
+ hidden: true
14
+ ) %>
15
+ <% end %>
@@ -0,0 +1,153 @@
1
+ # frozen_string_literal: true
2
+
3
+ # rubocop:disable Style/StringConcatenation, Style/HashLikeCase
4
+
5
+ require "open-uri"
6
+
7
+ module Playbook
8
+ module PbBetaIcon
9
+ class Icon < Playbook::KitBase
10
+ prop :border, type: Playbook::Props::Boolean,
11
+ default: false
12
+ prop :fixed_width, type: Playbook::Props::Boolean,
13
+ default: false
14
+ prop :flip, type: Playbook::Props::Enum,
15
+ values: ["horizontal", "vertical", "both", nil],
16
+ default: nil
17
+ prop :icon
18
+ prop :custom_icon, type: Playbook::Props::String,
19
+ default: nil
20
+ prop :inverse, type: Playbook::Props::Boolean,
21
+ default: false
22
+ prop :list_item, type: Playbook::Props::Boolean,
23
+ default: false
24
+ prop :pull, type: Playbook::Props::Enum,
25
+ values: ["left", "right", nil],
26
+ default: nil
27
+ prop :pulse, type: Playbook::Props::Boolean,
28
+ default: false
29
+ prop :rotation, type: Playbook::Props::Enum,
30
+ values: [90, 180, 270, nil],
31
+ default: nil
32
+ prop :size, type: Playbook::Props::Enum,
33
+ values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
34
+ default: nil
35
+ prop :font_style, type: Playbook::Props::Enum,
36
+ values: %w[far fas fab fak],
37
+ default: "far"
38
+ prop :spin, type: Playbook::Props::Boolean,
39
+ default: false
40
+
41
+ def valid_emoji(icon)
42
+ emoji_regex = /\p{Emoji}/
43
+ emoji_regex.match?(icon)
44
+ end
45
+
46
+ def classname
47
+ generate_classname(
48
+ "pb_icon_kit",
49
+ font_style_class,
50
+ icon_class,
51
+ border_class,
52
+ fixed_width_class,
53
+ flip_class,
54
+ inverse_class,
55
+ list_item_class,
56
+ pull_class,
57
+ pulse_class,
58
+ rotation_class,
59
+ size_class,
60
+ spin_class,
61
+ separator: " "
62
+ )
63
+ end
64
+
65
+ def custom_icon_classname
66
+ generate_classname(
67
+ "pb_icon_kit",
68
+ border_class,
69
+ fixed_width_class,
70
+ flip_class,
71
+ inverse_class,
72
+ list_item_class,
73
+ pull_class,
74
+ pulse_class,
75
+ rotation_class,
76
+ size_class,
77
+ spin_class,
78
+ separator: " "
79
+ )
80
+ end
81
+
82
+ def render_svg(path)
83
+ if File.extname(path) == ".svg"
84
+ doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
85
+ svg = doc.at_css "svg"
86
+ svg["class"] = "pb_custom_icon " + object.custom_icon_classname
87
+ raw doc
88
+ else
89
+ raise("Custom icon must be an svg. Please check your path and file type.")
90
+ end
91
+ end
92
+
93
+ private
94
+
95
+ def border_class
96
+ border ? "fa-border" : nil
97
+ end
98
+
99
+ def fixed_width_class
100
+ fixed_width ? "fa-fw" : nil
101
+ end
102
+
103
+ def icon_class
104
+ icon ? "fa-#{icon}" : nil
105
+ end
106
+
107
+ def inverse_class
108
+ inverse ? "fa-inverse" : nil
109
+ end
110
+
111
+ def list_item_class
112
+ list_item ? "fa-li" : nil
113
+ end
114
+
115
+ def flip_class
116
+ case flip
117
+ when "horizontal"
118
+ "fa-flip-horizontal"
119
+ when "vertical"
120
+ "fa-flip-vertical"
121
+ when "both"
122
+ "fa-flip-horizontal fa-flip-vertical"
123
+ end
124
+ end
125
+
126
+ def pull_class
127
+ pull ? "fa-pull-#{pull}" : nil
128
+ end
129
+
130
+ def pulse_class
131
+ pulse ? "fa-pulse" : nil
132
+ end
133
+
134
+ def rotation_class
135
+ rotation ? "fa-rotate-#{rotation}" : nil
136
+ end
137
+
138
+ def size_class
139
+ size ? "fa-#{size}" : nil
140
+ end
141
+
142
+ def font_style_class
143
+ font_style ? font_style.to_s : "far"
144
+ end
145
+
146
+ def spin_class
147
+ spin ? "fa-spin" : nil
148
+ end
149
+ end
150
+ end
151
+ end
152
+
153
+ # rubocop:enable Style/StringConcatenation, Style/HashLikeCase
@@ -0,0 +1,155 @@
1
+ import React from 'react'
2
+ import { render, screen, cleanup } from '../utilities/test-utils'
3
+
4
+ import Icon from './_icon'
5
+
6
+ const testId = "icon-kit"
7
+
8
+ describe("Icon Kit", () => {
9
+ test("renders Icon classname", () => {
10
+ render(
11
+ <Icon
12
+ data={{ testid: testId }}
13
+ fixedWidth
14
+ icon="user"
15
+ />
16
+ )
17
+
18
+ const kit = screen.getByTestId(testId)
19
+ expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
20
+ })
21
+
22
+ test("renders rotate prop", () => {[
23
+ "90", "180", "270"].forEach((rotateProp)=> {
24
+ render(
25
+ <Icon
26
+ data={{ testid: testId }}
27
+ fixedWidth
28
+ icon="user"
29
+ rotation={rotateProp}
30
+ />
31
+ )
32
+
33
+ const kit = screen.getByTestId(testId)
34
+ expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
35
+
36
+ cleanup()
37
+ })
38
+ })
39
+
40
+ test("renders flip prop", () => {
41
+ render(
42
+ <Icon
43
+ data={{ testid: testId }}
44
+ fixedWidth
45
+ flip="horizontal"
46
+ icon="user"
47
+ />
48
+ )
49
+
50
+ const kit = screen.getByTestId(testId)
51
+ expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
52
+ })
53
+
54
+
55
+ test("renders spinning icon", () => {
56
+ render(
57
+ <Icon
58
+ data={{ testid: testId }}
59
+ fixedWidth
60
+ icon="spinner"
61
+ spin
62
+ />
63
+ )
64
+
65
+ const kit = screen.getByTestId(testId)
66
+ expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
67
+ })
68
+
69
+ test("renders pull icon", () => {
70
+ render(
71
+ <Icon
72
+ data={{ testid: testId }}
73
+ fixedWidth
74
+ icon="arrow-left"
75
+ pull="left"
76
+ />
77
+ )
78
+
79
+ const kit = screen.getByTestId(testId)
80
+ expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
81
+ })
82
+
83
+ test("renders pull icon", () => {
84
+ render(
85
+ <Icon
86
+ data={{ testid: testId }}
87
+ fixedWidth
88
+ icon="arrow-left"
89
+ pull="left"
90
+ />
91
+ )
92
+
93
+ const kit = screen.getByTestId(testId)
94
+ expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
95
+ })
96
+
97
+ test("renders border around icon", () => {
98
+ render(
99
+ <Icon
100
+ border
101
+ data={{ testid: testId }}
102
+ fixedWidth
103
+ icon="user"
104
+ />
105
+ )
106
+
107
+ const kit = screen.getByTestId(testId)
108
+ expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
109
+ })
110
+
111
+ test("renders size prop", () => {
112
+ ["lg",
113
+ "sm",
114
+ "xs",
115
+ "1x",
116
+ "2x",
117
+ "3x",
118
+ "4x",
119
+ "5x",
120
+ "6x",
121
+ "7x",
122
+ "8x",
123
+ "9x",
124
+ "10x"].forEach(
125
+ (sizeProp) => {
126
+ render(
127
+ <Icon
128
+ data={{ testid: testId }}
129
+ icon="user"
130
+ size={sizeProp}
131
+ />
132
+ )
133
+
134
+ const kit = screen.getByTestId(testId)
135
+ expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
136
+
137
+ cleanup()
138
+ })
139
+ })
140
+
141
+ test("renders fontStyle prop", () => {
142
+ render(
143
+ <Icon
144
+ data={{ testid: testId }}
145
+ fixedWidth
146
+ fontStyle="fas"
147
+ icon="user"
148
+ />
149
+ )
150
+
151
+ const kit = screen.getByTestId(testId)
152
+ expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
153
+ })
154
+
155
+ })
@@ -37,15 +37,10 @@
37
37
  font-size: $font_smaller;
38
38
  letter-spacing: $lspace_loose;
39
39
  }
40
-
41
- &[class*=_truncate] {
42
- @include body_truncate;
43
- }
44
40
 
45
41
  @each $status_name, $status_value in $pb_body_status {
46
42
  &[class*=#{$status_name}] {
47
43
  @include pb_body($status_value);
48
- @include body_truncate;
49
44
  }
50
45
  }
51
46
 
@@ -15,12 +15,11 @@ 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
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string,
20
20
  status?: 'neutral' | 'negative' | 'positive',
21
21
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
22
22
  text?: string,
23
- truncate?: null | '1' | '2' | '3' | '4' | '5',
24
23
  variant?: null | 'link',
25
24
  } & GlobalProps
26
25
 
@@ -39,21 +38,18 @@ const Body = (props: BodyProps): React.ReactElement => {
39
38
  status = null,
40
39
  tag = 'div',
41
40
  text = '',
42
- truncate = null,
43
41
  variant = null,
44
42
  } = props
45
43
 
46
- const ariaProps: {[key: string]: any} = buildAriaProps(aria)
47
- const dataProps: {[key: string]: any} = buildDataProps(data)
44
+ const ariaProps: {[key: string]: string} = buildAriaProps(aria)
45
+ const dataProps: {[key: string]: string} = buildDataProps(data)
48
46
  const htmlProps = buildHtmlProps(htmlOptions);
49
- const isTruncated = truncate ? `truncate_${truncate}` : ''
50
47
  const classes = classnames(
51
- buildCss('pb_body_kit', color, variant, status, isTruncated),
48
+ buildCss('pb_body_kit', color, variant, status),
52
49
  globalProps(props),
53
50
  className
54
51
  )
55
- const Tag: React.ReactElement | any = `${tag}`
56
-
52
+ const Tag: keyof JSX.IntrinsicElements = `${tag}`
57
53
 
58
54
  return (
59
55
  <Tag
@@ -36,26 +36,6 @@ $pb_body_status: (
36
36
  font-family: $font-family-base;
37
37
  }
38
38
 
39
- $pb_body_truncate: (
40
- truncate_1: 1,
41
- truncate_2: 2,
42
- truncate_3: 3,
43
- truncate_4: 4,
44
- truncate_5: 5
45
- );
46
-
47
- @mixin body_truncate {
48
- @each $name, $number in $pb_body_truncate {
49
- &[class*=_#{$name}] {
50
- overflow: hidden;
51
- display: -webkit-box;
52
- -webkit-line-clamp: $number;
53
- -webkit-box-orient: vertical;
54
- }
55
- }
56
- }
57
-
58
-
59
39
  // Colors ======================
60
40
  @mixin pb_body_light {
61
41
  @include pb_body($text_lt_light);