playbook_ui 13.24.0.pre.alpha.play1305drycontenttag2689 → 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769

Sign up to get free protection for your applications and to get access to all the features.
Files changed (173) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/index.js +2 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_background/_background.tsx +7 -5
  10. data/app/pb_kits/playbook/pb_background/background.html.erb +0 -1
  11. data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -1
  16. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  17. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -2
  18. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -1
  25. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -1
  26. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -2
  28. data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -1
  30. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  31. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  32. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  33. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  34. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -1
  35. data/app/pb_kits/playbook/pb_date/date.html.erb +1 -1
  36. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -2
  37. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -1
  39. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  40. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  41. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  42. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -1
  43. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -1
  44. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -1
  45. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -1
  47. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  48. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  49. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +1 -1
  50. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -1
  51. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -2
  52. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
  53. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +181 -0
  54. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +266 -0
  55. data/app/pb_kits/playbook/pb_dropdown/context/index.tsx +5 -0
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +38 -0
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +87 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +102 -0
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +63 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  67. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +62 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +75 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  74. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +15 -0
  75. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +10 -0
  76. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +207 -0
  77. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +17 -0
  78. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +61 -0
  79. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +109 -0
  80. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +116 -0
  81. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +190 -0
  82. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +61 -0
  83. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -1
  84. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -1
  85. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -1
  86. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -1
  87. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +1 -2
  88. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -1
  89. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  90. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  91. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -1
  92. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -1
  93. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -1
  94. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  95. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
  96. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  97. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +3 -3
  98. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -1
  100. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -1
  101. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -1
  102. data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -1
  103. data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -1
  104. data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -1
  105. data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -1
  106. data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -1
  107. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -1
  108. data/app/pb_kits/playbook/pb_list/_list_item.tsx +2 -2
  109. data/app/pb_kits/playbook/pb_list/item.html.erb +1 -2
  110. data/app/pb_kits/playbook/pb_list/list.html.erb +1 -3
  111. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  112. data/app/pb_kits/playbook/pb_message/message.html.erb +1 -1
  113. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -1
  114. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -1
  115. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -1
  116. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -1
  117. data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -4
  118. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
  119. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -2
  120. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -1
  121. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  122. data/app/pb_kits/playbook/pb_person/person.html.erb +1 -1
  123. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -1
  124. data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -1
  125. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
  126. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -2
  127. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +1 -2
  128. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -1
  129. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -1
  130. data/app/pb_kits/playbook/pb_radio/radio.html.erb +1 -2
  131. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  132. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  133. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -1
  134. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  135. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  136. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -1
  137. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -1
  138. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -1
  139. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -1
  140. data/app/pb_kits/playbook/pb_source/source.html.erb +1 -1
  141. data/app/pb_kits/playbook/pb_source/source.test.js +2 -2
  142. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
  143. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -1
  144. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -1
  145. data/app/pb_kits/playbook/pb_table/table.html.erb +2 -8
  146. data/app/pb_kits/playbook/pb_table/table_body.html.erb +2 -2
  147. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +2 -2
  148. data/app/pb_kits/playbook/pb_table/table_head.html.erb +2 -2
  149. data/app/pb_kits/playbook/pb_table/table_header.html.erb +2 -3
  150. data/app/pb_kits/playbook/pb_table/table_row.html.erb +2 -2
  151. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +5 -1
  152. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -1
  153. data/app/pb_kits/playbook/pb_time/time.html.erb +1 -1
  154. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -1
  155. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -1
  156. data/app/pb_kits/playbook/pb_timeline/item.html.erb +1 -1
  157. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -1
  158. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -1
  159. data/app/pb_kits/playbook/pb_title/title.html.erb +1 -3
  160. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -1
  161. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -1
  162. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -1
  163. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -1
  164. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -1
  165. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -1
  166. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -1
  167. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  168. data/dist/menu.yml +5 -1
  169. data/dist/playbook-rails.js +5 -5
  170. data/lib/playbook/kit_base.rb +1 -1
  171. data/lib/playbook/version.rb +2 -2
  172. metadata +38 -3
  173. /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md → _dialog_props_swift.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c9fd50c8a90b4a615fce245543e5668f8b30db6d34a415f8b5a75c3a3d7c3145
4
- data.tar.gz: 98b7e0f546d36137d2806c0101abea334b0f6722d0d90b99367acea8a16fb609
3
+ metadata.gz: 71177d67df222d53293af018a05b5a4aa6e8c2320e2666e4a0fa306f9c7fa6b6
4
+ data.tar.gz: 4020bc3572296e4c84a58b117cd6b194d2875429baf2bcf606f5a9e2f3772b25
5
5
  SHA512:
6
- metadata.gz: 53f10ca101d6898a3fe39f89b85df6f449c79534d2c983547c0ade5dcbbe2131d42a6e405dfd3ce0cc5c4db24ac2595046983763b072f1c50025ecde65c36725
7
- data.tar.gz: 434818b51714ce97871413c231ed01fd810b544fd7efed8a697520eca886232587dd877689882aa0ece09222288e3075891c0178197cb188b53ef0f45423cbb1
6
+ metadata.gz: b628362eb09ed93b1084e3452766c4753edda243367d3217379e4ad4b83738567931f26af432583a7d38e34dcf8085c6ae05bb6415460a8cbf5b438a25ffd603
7
+ data.tar.gz: 1aed46186c6455ad3e8adb45e63fe1a55358237eec9c2fd72db3b12a4a9cdbc7031099be20d38e2e79a9bedf89b74cb97a96ed4cc67b05649e5d682064bfade0
@@ -1,5 +1,6 @@
1
1
 
2
2
 
3
+
3
4
  @import 'pb_advanced_table/advanced_table';
4
5
  @import 'pb_avatar/avatar';
5
6
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -30,6 +31,7 @@
30
31
  @import 'pb_detail/detail';
31
32
  @import 'pb_dialog/dialog';
32
33
  @import 'pb_distribution_bar/distribution_bar';
34
+ @import 'pb_dropdown/dropdown';
33
35
  @import 'pb_file_upload/file_upload';
34
36
  @import 'pb_filter/filter';
35
37
  @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -35,6 +35,7 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
35
35
  export { default as Detail} from './pb_detail/_detail'
36
36
  export { default as Dialog } from './pb_dialog/_dialog'
37
37
  export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
38
+ export { default as Dropdown} from './pb_dropdown/_dropdown'
38
39
  export { default as FileUpload } from './pb_file_upload/_file_upload'
39
40
  export { default as Filter } from './pb_filter/_filter'
40
41
  export { default as FixedConfirmationToast } from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
@@ -132,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
132
133
  //Theming
133
134
  export {default as mapTheme} from './pb_map/pbMapTheme'
134
135
  export {default as useCollapsible} from './pb_collapsible/useCollapsible'
136
+ export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
135
137
 
136
138
  // CSS Tokens
137
139
  export { default as borderRadius } from './tokens/exports/_border_radius.scss'
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
3
3
  <% if content.present? %>
4
4
  <% content.presence %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <% object.table_data.each do |row| %>
3
3
  <%= render_row_and_children(row, object.column_definitions) %>
4
4
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
3
3
  <% object.column_definitions.each_with_index do |item, index| %>
4
4
  <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <% object.column_definitions.each_with_index do |column, index| %>
3
3
  <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
4
4
  <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <% if object.tooltip_text.present? %>
3
3
  <%= pb_rails("tooltip", props: {
4
4
  trigger_element_id: object.tooltip_id,
@@ -65,7 +65,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
65
65
 
66
66
  const Background = (props: BackgroundProps): React.ReactElement => {
67
67
  const {
68
- alt = '',
68
+ alt = undefined,
69
69
  aria = {},
70
70
  backgroundColor = 'light',
71
71
  backgroundPosition = '',
@@ -130,11 +130,13 @@ const Background = (props: BackgroundProps): React.ReactElement => {
130
130
  );
131
131
 
132
132
  const backgroundStyle = {
133
- backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
134
- backgroundRepeat: resBackgroundRepeat || undefined,
135
- backgroundSize: resBackgroundSize || undefined,
136
- backgroundPosition: resBackgroundPosition || undefined,
137
133
  backgroundColor: customColor || undefined,
134
+ ...(resImageUrl !== '' ? {
135
+ backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
136
+ backgroundRepeat: resBackgroundRepeat || undefined,
137
+ backgroundPosition: resBackgroundPosition || undefined,
138
+ backgroundSize: resBackgroundSize || undefined,
139
+ } : {})
138
140
  };
139
141
 
140
142
  const Tag: React.ReactElement | any = `${tag}`;
@@ -4,7 +4,6 @@
4
4
  background-repeat: #{object.background_repeat};
5
5
  background-size: #{object.background_size};
6
6
  background-position: #{object.background_position};",
7
- **combined_html_options
8
7
  ) do %>
9
8
  <%= content.presence %>
10
9
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <span><%= object.text %></span>
3
3
  <% end %>
@@ -15,7 +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 | (() => void)},
18
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
19
19
  id?: string,
20
20
  status?: 'neutral' | 'negative' | 'positive',
21
21
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(object.tag, **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
2
2
  <%= object.content %>
3
3
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
3
3
  <%= content.presence %>
4
4
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:nav, **combined_html_options) do %>
1
+ <%= pb_content_tag(:nav) do %>
2
2
  <%= content.presence %>
3
3
  <% end %>
@@ -17,7 +17,7 @@ $pb_button_sizes: (
17
17
  @each $name, $size in $pb_button_sizes {
18
18
  &[class*=size_#{$name}] {
19
19
  font-size: $size;
20
- padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
20
+ padding: calc(#{$size} / 2) calc(#{$size} * 2.42);
21
21
  @if $name == "sm" {
22
22
  min-height: 0;
23
23
  }
@@ -1,6 +1,5 @@
1
1
  <%= pb_content_tag(object.tag,
2
- object.tag == "button" ? object.options : object.link_options,
3
- **combined_html_options) do %>
2
+ object.tag == "button" ? object.options : object.link_options) do %>
4
3
  <% if object.variant === "reaction" %>
5
4
  <% if icon && object.valid_emoji(object.icon) %>
6
5
  <%= pb_rails("flex", props:{ align: "center" }) do %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content.presence || object.text %>
3
3
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(object.tag, **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
2
2
  <%= content.presence || object.text %>
3
3
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(object.tag, **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
2
2
  <%= content.presence %>
3
3
  <% end %>
4
4
 
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content.presence %>
3
3
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content.presence %>
3
3
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:label, **combined_html_options) do %>
1
+ <%= pb_content_tag(:label) do %>
2
2
  <%= content.presence || object.input %>
3
3
  <% if object.indeterminate %>
4
4
  <span class="pb_checkbox_indeterminate">
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
3
3
  <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
4
4
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content.presence %>
3
3
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content.presence %>
3
3
  <% end %>
@@ -1,5 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
2
-
1
+ <%= pb_content_tag do %>
3
2
  <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
4
3
  <%= pb_rails("flex/flex_item") do %>
5
4
  <%= content.presence %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("body", props: {
3
3
  tag: "span",
4
4
  classname: "pb_contact_kit",
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("caption", props: object.caption_props) %>
3
3
 
4
4
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
@@ -0,0 +1,43 @@
1
+ [!Currency-Alignment](https://github.com/powerhome/playbook-swift/assets/112719604/d74a9c5a-c606-4cd0-bf70-20e9297ec246)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ HStack {
6
+ PBCurrency(
7
+ amount: "2,000",
8
+ decimalAmount: ".50",
9
+ label: "left",
10
+ size: .title4,
11
+ symbol: "en_US",
12
+ isEmphasized: true,
13
+ alignment: .leading
14
+ )
15
+ }
16
+ .frame(maxWidth: .infinity, alignment: .leading)
17
+ HStack {
18
+ PBCurrency(
19
+ amount: "342",
20
+ decimalAmount: ".00",
21
+ label: "center",
22
+ size: .title4,
23
+ symbol: "en_EU",
24
+ isEmphasized: true,
25
+ alignment: .center
26
+ )
27
+ }
28
+ .frame(maxWidth: .infinity, alignment: .center)
29
+ HStack {
30
+ PBCurrency(
31
+ amount: "45",
32
+ label: "right",
33
+ size: .title4,
34
+ symbol: "en_US",
35
+ unit: "/mo",
36
+ isEmphasized: true,
37
+ hasUnit: true,
38
+ alignment: .trailing
39
+ )
40
+ }
41
+ .frame(maxWidth: .infinity, alignment: .trailing)
42
+ }
43
+ ```
@@ -0,0 +1,12 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **amount** | `String` | Allows user to enter a currency amount | | |
5
+ | **decimalAmount** | `String` | Allows user to enter a decimal amount | | |
6
+ | **label** | `String` | Allows user to a descriptive label value | | |
7
+ | **size** | `PBFont` | Allows user to choose the size of the amount that is being displayed | `.title4` | `title4` `title3` `title4` |
8
+ | **symbol** | `String` | A string value used to produce the desired currency symbol | | |
9
+ | **unit** | `String` | Allows user to add a unit of measure instead of a decimal amount | | |
10
+ | **alignment** | `Alignment` | Sets alignment of content | `.leading` | `leading` `center` `trailing` |
11
+ | **isEmphasized** | `Bool` | Determines whether or not the currency that is being displayed is emphasized | `false` | `true` `false` |
12
+ | **hasUnit** | `Bool` | Determines whether or not the currency has a decimal value or a unit of measure | `false` | `true` `false` |
@@ -0,0 +1,31 @@
1
+ ![Currency-Default](https://github.com/powerhome/playbook-swift/assets/54749071/bf3810f9-6dd2-4bdd-b32a-14109f3a0b9a)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBCurrency(
6
+ amount: "2,000",
7
+ decimalAmount: ".50",
8
+ label: "small",
9
+ size: .title4,
10
+ symbol: "en_US",
11
+ isEmphasized: true
12
+ )
13
+ PBCurrency(
14
+ amount: "342",
15
+ decimalAmount: ".00",
16
+ label: "medium",
17
+ size: .title3,
18
+ symbol: "en_EU",
19
+ isEmphasized: true
20
+ )
21
+ PBCurrency(
22
+ amount: "45",
23
+ label: "large",
24
+ size: .title1,
25
+ symbol: "en_US",
26
+ unit: "/mo",
27
+ isEmphasized: true,
28
+ hasUnit: true
29
+ )
30
+ }
31
+ ```
@@ -17,3 +17,8 @@ examples:
17
17
  - currency_abbreviated: Abbreviate Larger Amounts
18
18
  - currency_matching_decimals: Matching Decimals
19
19
  - currency_unstyled: Unstyled
20
+
21
+ swift:
22
+ - currency_size_swift: Size
23
+ - currency_alignment_swift: Alignment
24
+ - currency_props_swift: ""
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <% if object.stat_label.present? %>
3
3
  <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
4
4
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
 
3
3
  <% if object.unstyled %>
4
4
  <!-- icon -->
@@ -1,6 +1,5 @@
1
1
  <%= pb_content_tag(:div,
2
- class: object.classname + object.error_class,
3
- **combined_html_options) do %>
2
+ class: object.classname + object.error_class) do %>
4
3
  <div class="input_wrapper">
5
4
  <% if content.present? %>
6
5
  <%= content %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <div class="pb_date_range_inline_wrapper">
3
3
  <% if object.icon == true %>
4
4
  <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
 
3
3
  <%= pb_rails("flex", props: {vertical: "center"}) do %>
4
4
  <%= pb_rails("flex/flex_item") do %>
@@ -0,0 +1,14 @@
1
+ ![Date-Range-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/ccb85e5d-0f6d-4ced-8154-aa9dfa72a131)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.small) {
5
+ PBDateRangeStacked(
6
+ startDate: Date().makeDate(year: 2019, month: 6, day: 18),
7
+ endDate: Date().makeDate(year: 2020, month: 3, day: 20),
8
+ startAlignment: .trailing,
9
+ endAlignment: .leading,
10
+ startVariant: .short(showIcon: false),
11
+ endVariant: .short(showIcon: false)
12
+ )
13
+ }
14
+ ```
@@ -0,0 +1,9 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **startDate** | `Date()` | Takes a string value to set the starting date range value | `Date()` | |
5
+ | **endDate** | `Date()` | Takes a string value to set the ending date range value | `Date()` | |
6
+ | **startAlignment** | `Alignment` | Changes the alignment of the starting date | `.leading` | `.leading` `.trailing` |
7
+ | **endAlignment** | `Alignment` | Changes the alignment of the ending date | `.leading` | `.leading` `.trailing` |
8
+ | **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
9
+ | **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
@@ -5,3 +5,7 @@ examples:
5
5
 
6
6
  react:
7
7
  - date_range_stacked_default: Default
8
+
9
+ swift:
10
+ - date_range_stacked_default_swift: Default
11
+ - date_range_stacked_props_swift: ""
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
 
3
3
  <% if object.bold == false %>
4
4
 
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
 
3
3
  <%= pb_rails("flex", props: {
4
4
  orientation: "row",
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
3
3
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
4
4
  <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
3
3
  <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
4
4
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(object.tag, **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
2
2
  <%= object.content %>
3
3
  <% end %>
@@ -235,11 +235,11 @@
235
235
  height: $space_xl * 2;
236
236
  }
237
237
  .dialog_footer {
238
- position:fixed;
238
+ position: fixed;
239
239
  bottom: 0;
240
240
  background-color: $white;
241
+ max-width: 100%;
241
242
  }
242
-
243
243
  &[class*="_sm"] {
244
244
  width: $medium;
245
245
  .dialog_footer {
@@ -319,6 +319,7 @@
319
319
  position:fixed;
320
320
  bottom: 0;
321
321
  background-color: $white;
322
+ max-width: 100%;
322
323
  }
323
324
  &[class*="_sm"] {
324
325
  width: $medium;
@@ -372,3 +373,4 @@
372
373
  cursor: pointer;
373
374
  }
374
375
  }
376
+
@@ -1,5 +1,5 @@
1
1
  <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
2
- <%= pb_content_tag(:dialog, **combined_html_options) do %>
2
+ <%= pb_content_tag(:dialog) do %>
3
3
  <% if object.status === "" && object.title %>
4
4
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
5
5
  <% end %>
@@ -1,3 +1,3 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <%= content.presence || object.text %>
3
3
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= pb_content_tag(:div, **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
2
2
  <% if object.confirm_button && object.cancel_button %>
3
3
  <div class="dialog-pseudo-footer"></div>
4
4
  <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
@@ -1,6 +1,5 @@
1
1
  <%= pb_content_tag(:div,
2
- class: object.sticky_header,
3
- **combined_html_options) do %>
2
+ class: object.sticky_header) do %>
4
3
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
5
4
  <%= content.presence || object.title %>
6
5
 
@@ -27,5 +27,5 @@ examples:
27
27
  - dialog_default_swift: Simple
28
28
  - dialog_sizes_swift: Sizes
29
29
  - dialog_status_swift: Status
30
- - dialog_props_table: ""
30
+ - dialog_props_swift: ""
31
31