playbook_ui 13.24.0 → 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 (194) 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 +10 -14
  5. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +2 -6
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -6
  8. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -6
  9. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -6
  10. data/app/pb_kits/playbook/pb_background/_background.tsx +7 -5
  11. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
  12. data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -6
  13. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +41 -6
  14. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +4 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -0
  25. data/app/pb_kits/playbook/pb_body/_body.scss +3 -3
  26. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
  28. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
  29. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -7
  30. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  31. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
  32. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -7
  33. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
  34. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
  35. data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -6
  36. data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -6
  37. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
  38. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -6
  39. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -6
  40. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -6
  41. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -7
  42. data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -6
  43. data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -6
  44. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  45. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  46. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  47. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  48. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -6
  49. data/app/pb_kits/playbook/pb_date/date.html.erb +1 -6
  50. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -6
  51. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -5
  52. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -5
  53. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  54. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  55. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  56. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -5
  57. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -6
  58. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -7
  59. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -5
  60. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
  61. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  62. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
  63. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
  64. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
  65. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -6
  66. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
  67. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +181 -0
  68. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +266 -0
  69. data/app/pb_kits/playbook/pb_dropdown/context/index.tsx +5 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +38 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +87 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  74. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +102 -0
  75. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  76. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
  77. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  78. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +63 -0
  79. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  80. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  81. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  82. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
  83. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  84. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +62 -0
  85. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +75 -0
  86. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  87. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  88. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +15 -0
  89. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +10 -0
  90. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +207 -0
  91. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +17 -0
  92. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +61 -0
  93. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +109 -0
  94. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +116 -0
  95. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +190 -0
  96. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +61 -0
  97. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -6
  98. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -5
  99. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -6
  100. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
  101. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -6
  102. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -6
  103. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  104. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
  105. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
  106. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
  107. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -1
  108. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  109. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -7
  110. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  111. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +3 -3
  112. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -6
  113. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -6
  114. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -6
  115. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -6
  116. data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -5
  117. data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -5
  118. data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -5
  119. data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -5
  120. data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -5
  121. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -5
  122. data/app/pb_kits/playbook/pb_list/_list_item.tsx +2 -2
  123. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -8
  124. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -8
  125. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -6
  126. data/app/pb_kits/playbook/pb_message/message.html.erb +1 -6
  127. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -6
  128. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  129. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -6
  130. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -6
  131. data/app/pb_kits/playbook/pb_nav/item.html.erb +3 -14
  132. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -6
  133. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -6
  134. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -6
  135. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  136. data/app/pb_kits/playbook/pb_person/person.html.erb +7 -12
  137. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -6
  138. data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -6
  139. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  140. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -6
  141. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +3 -6
  142. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  143. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
  144. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -8
  145. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  146. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  147. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -6
  148. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -5
  149. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -5
  150. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -4
  151. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -5
  152. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -6
  153. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -6
  154. data/app/pb_kits/playbook/pb_source/source.html.erb +1 -5
  155. data/app/pb_kits/playbook/pb_source/source.test.js +2 -2
  156. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -5
  157. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -5
  158. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -5
  159. data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
  160. data/app/pb_kits/playbook/pb_table/table_body.html.erb +6 -16
  161. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +6 -16
  162. data/app/pb_kits/playbook/pb_table/table_head.html.erb +6 -16
  163. data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -13
  164. data/app/pb_kits/playbook/pb_table/table_row.html.erb +6 -16
  165. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
  166. data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
  167. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -5
  168. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -5
  169. data/app/pb_kits/playbook/pb_timeline/item.html.erb +3 -7
  170. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -5
  171. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -6
  172. data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
  173. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -6
  174. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -5
  175. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
  176. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -5
  177. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +27 -19
  178. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +4 -2
  179. data/app/pb_kits/playbook/pb_typeahead/components/index.tsx +19 -0
  180. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
  181. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
  182. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  183. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  184. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  185. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  186. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -6
  187. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  188. data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
  189. data/dist/menu.yml +5 -1
  190. data/dist/playbook-rails.js +6 -6
  191. data/lib/playbook/kit_base.rb +21 -1
  192. data/lib/playbook/version.rb +2 -2
  193. metadata +51 -6
  194. /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md → _dialog_props_swift.md} +0 -0
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= content.presence || object.text %>
8
3
  <% end %>
@@ -1,10 +1,4 @@
1
- <%= content_tag(object.tag,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- dark: object.dark,
7
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
8
2
  <%= content.presence %>
9
3
  <% end %>
10
4
 
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:label, aria: object.aria,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options
6
- ) do %>
1
+ <%= pb_content_tag(:label) do %>
7
2
  <%= content.presence || object.input %>
8
3
  <% if object.indeterminate %>
9
4
  <span class="pb_checkbox_indeterminate">
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
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 %>
8
3
  <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
9
4
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= content.presence %>
8
3
  <% end %>
@@ -1,10 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
-
1
+ <%= pb_content_tag do %>
8
2
  <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
9
3
  <%= pb_rails("flex/flex_item") do %>
10
4
  <%= content.presence %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= pb_rails("body", props: {
8
3
  tag: "span",
9
4
  classname: "pb_contact_kit",
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= pb_rails("caption", props: object.caption_props) %>
8
3
 
9
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,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% if object.stat_label.present? %>
8
3
  <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
9
4
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
 
8
3
  <% if object.unstyled %>
9
4
  <!-- icon -->
@@ -1,9 +1,5 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname + object.error_class,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:div,
2
+ class: object.classname + object.error_class) do %>
7
3
  <div class="input_wrapper">
8
4
  <% if content.present? %>
9
5
  <%= content %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <div class="pb_date_range_inline_wrapper">
7
3
  <% if object.icon == true %>
8
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,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
 
7
3
  <%= pb_rails("flex", props: {vertical: "center"}) do %>
8
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,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
 
7
3
  <% if object.bold == false %>
8
4
 
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
 
8
3
  <%= pb_rails("flex", props: {
9
4
  orientation: "row",
@@ -1,10 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
-
1
+ <%= pb_content_tag do %>
8
2
  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
9
3
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
10
4
  <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
7
3
  <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
8
4
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= object.content %>
8
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,10 +1,5 @@
1
1
  <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
2
- <%= content_tag(:dialog,
3
- aria: object.aria,
4
- data: object.data,
5
- id: object.id,
6
- class: object.classname,
7
- **combined_html_options) do %>
2
+ <%= pb_content_tag(:dialog) do %>
8
3
  <% if object.status === "" && object.title %>
9
4
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
10
5
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
7
- <%= content.presence || object.text %>
1
+ <%= pb_content_tag do %>
2
+ <%= content.presence || object.text %>
8
3
  <% end %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- aria: object.aria,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <% if object.confirm_button && object.cancel_button %>
7
3
  <div class="dialog-pseudo-footer"></div>
8
4
  <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
@@ -1,9 +1,5 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.sticky_header,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:div,
2
+ class: object.sticky_header) do %>
7
3
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
8
4
  <%= content.presence || object.title %>
9
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
 
@@ -0,0 +1,181 @@
1
+ @import "../tokens/colors";
2
+ @import "../tokens/spacing";
3
+ @import "../tokens/typography";
4
+ @import "../tokens/border_radius";
5
+ @import "../tokens/shadows";
6
+ @import "../tokens/positioning";
7
+ @import "../pb_body/body_mixins";
8
+ @import "../pb_textarea/textarea_mixin";
9
+
10
+ @keyframes fadeIn {
11
+ from {
12
+ opacity: 0;
13
+ }
14
+
15
+ to {
16
+ opacity: 1;
17
+ }
18
+ }
19
+ @keyframes fadeOut {
20
+ from {
21
+ opacity: 1;
22
+ }
23
+
24
+ to {
25
+ opacity: 0;
26
+ }
27
+ }
28
+
29
+ .pb_dropdown {
30
+ .dropdown_wrapper {
31
+ [class*=dropdown_trigger_wrapper] {
32
+ @include pb_body;
33
+ border: 1px solid $border_light;
34
+ background-color: $white;
35
+ height: 45px;
36
+ @media (hover: hover) {
37
+ &:hover,
38
+ &:active,
39
+ &:focus {
40
+ background-color: $focus_input_light;
41
+ input {
42
+ background-color: $focus_input_light;
43
+ }
44
+ }
45
+ }
46
+
47
+ .dropdown_input {
48
+ @include pb_body;
49
+ border: unset;
50
+ border-radius: $border_rad_heavier;
51
+ padding: 0;
52
+ background-color: $white;
53
+ &:focus-visible {
54
+ outline: none;
55
+ }
56
+ }
57
+ &:focus {
58
+ box-shadow: 0px 0px 0 1px $primary;
59
+ outline: unset;
60
+ transition: box-shadow 0.15s ease-in-out;
61
+ }
62
+
63
+ &[class*=_select_only] {
64
+ box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
65
+ }
66
+
67
+ &[class*=_focus] {
68
+ box-shadow: 0px 0px 0 1px $primary;
69
+ transition: box-shadow 0.1s ease-in-out;
70
+ }
71
+ }
72
+
73
+ .pb_dropdown_container {
74
+ background-color: $white;
75
+ overflow: hidden;
76
+ box-shadow: $shadow_deep;
77
+ border-radius: $border_rad_heavier;
78
+ border: 1px solid $border_light;
79
+ margin-top: $space_xs;
80
+ z-index: $z_1;
81
+ width: 100%;
82
+
83
+ .pb_dropdown_option {
84
+ cursor: pointer;
85
+ &:hover {
86
+ background-color: $border_light;
87
+ }
88
+ }
89
+
90
+ .dropdown_option_focused {
91
+ background-color: $border_light;
92
+ }
93
+
94
+ .dropdown_option {
95
+ width: 100%;
96
+ }
97
+
98
+ .dropdown_option_list {
99
+ border-bottom: 1px solid $border_light;
100
+ }
101
+ .dropdown_option_selected {
102
+ background-color: $primary;
103
+ [class^="pb_body"],
104
+ [class^="pb_title_kit"] {
105
+ color: $white !important;
106
+ }
107
+ &:hover {
108
+ background-color: $primary !important;
109
+ }
110
+ }
111
+ }
112
+ .close {
113
+ display: none;
114
+ animation-name: fadeOut;
115
+ animation-duration: 150ms;
116
+ animation-timing-function: linear;
117
+ animation-fill-mode: forwards;
118
+ }
119
+
120
+ .open {
121
+ display: block;
122
+ animation-name: fadeIn;
123
+ animation-duration: 150ms;
124
+ animation-timing-function: linear;
125
+ animation-fill-mode: forwards;
126
+ }
127
+ }
128
+
129
+ &.dark {
130
+ .dropdown_wrapper {
131
+ [class*=dropdown_trigger_wrapper] {
132
+ @include pb_body_light_dark;
133
+ background-color: rgba($white, 0.1) !important;
134
+ background: none;
135
+ border-color: rgba($white, 0.15);
136
+ @media (hover: hover) {
137
+ &:hover,
138
+ &:active,
139
+ &:focus {
140
+ background-color: rgba($white, 0.05) !important;
141
+ }
142
+ }
143
+ [class^="pb_body"] {
144
+ color: $white;
145
+ }
146
+ &[class*=_select_only] {
147
+ box-shadow: inset 0 -11px 20px rgba($white, 0.05) !important;
148
+ }
149
+
150
+ .dropdown_input {
151
+ background-color: unset;
152
+ color: $white;
153
+ }
154
+ }
155
+ }
156
+ .pb_dropdown_container {
157
+ background-color: $bg_dark !important;
158
+ border-color: rgba($white, 0.15);
159
+ color: $white;
160
+ .dropdown_option_list {
161
+ border-color: rgba($white, 0.15);
162
+ }
163
+ [class^="pb_body"],
164
+ [class^="pb_title_kit"] {
165
+ color: $white !important;
166
+ }
167
+
168
+ .pb_dropdown_option {
169
+ &:hover {
170
+ background-color: $hover_dark;
171
+ }
172
+ }
173
+ .dropdown_option_focused {
174
+ background-color: $hover_dark;
175
+ }
176
+ .dropdown_option_selected {
177
+ background-color: $primary;
178
+ }
179
+ }
180
+ }
181
+ }