playbook_ui 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936 → 13.27.0.pre.alpha.PLAY11782916

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +5 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +5 -1
  6. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +6 -1
  7. data/app/pb_kits/playbook/pb_badge/badge.html.erb +6 -1
  8. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -1
  9. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +6 -1
  10. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +2 -0
  11. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +6 -1
  12. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +10 -21
  13. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +75 -3
  14. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +6 -1
  15. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +6 -1
  16. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +6 -1
  17. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -7
  18. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -3
  19. data/app/pb_kits/playbook/pb_collapsible/index.js +6 -16
  20. data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -1
  21. data/app/pb_kits/playbook/pb_currency/currency.html.erb +6 -1
  22. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +6 -1
  23. data/app/pb_kits/playbook/pb_date/date.html.erb +6 -1
  24. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +5 -1
  25. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +1 -4
  26. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +5 -1
  27. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +5 -1
  28. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +0 -7
  29. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +6 -1
  30. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +0 -6
  31. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +6 -1
  32. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +5 -1
  33. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +0 -4
  34. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -1
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +3 -6
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +6 -11
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +2 -5
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +8 -13
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +2 -5
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +8 -13
  42. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +8 -2
  44. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +5 -1
  45. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +12 -2
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -9
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +6 -1
  48. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  49. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  50. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  51. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +6 -1
  52. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +6 -1
  53. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +6 -1
  54. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +6 -1
  55. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +6 -1
  56. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +5 -1
  57. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +6 -6
  58. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +6 -1
  59. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -1
  60. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -1
  61. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +6 -1
  62. data/app/pb_kits/playbook/pb_person/person.html.erb +6 -1
  63. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +6 -1
  64. data/app/pb_kits/playbook/pb_pill/pill.html.erb +6 -1
  65. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +6 -1
  66. data/app/pb_kits/playbook/pb_select/_select.scss +0 -8
  67. data/app/pb_kits/playbook/pb_select/_select.tsx +13 -1
  68. data/app/pb_kits/playbook/pb_source/source.html.erb +5 -1
  69. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +5 -1
  70. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +5 -1
  71. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -19
  72. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +5 -1
  73. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +5 -1
  74. data/app/pb_kits/playbook/pb_timeline/item.html.erb +5 -1
  75. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +5 -1
  76. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +6 -1
  77. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +6 -1
  78. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +5 -1
  79. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +6 -1
  80. data/dist/playbook-rails.js +5 -5
  81. data/lib/playbook/forms/builder.rb +0 -1
  82. data/lib/playbook/kit_base.rb +1 -1
  83. data/lib/playbook/version.rb +1 -1
  84. metadata +2 -32
  85. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +0 -92
  86. data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb +0 -15
  87. data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb +0 -37
  88. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +0 -72
  89. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +0 -3
  90. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +0 -19
  91. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +0 -3
  92. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +0 -73
  93. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +0 -3
  94. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +0 -20
  95. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +0 -3
  96. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +0 -61
  97. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +0 -11
  98. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +0 -32
  99. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +0 -17
  100. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +0 -19
  101. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +0 -10
  102. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +0 -17
  103. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +0 -39
  104. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +0 -39
  105. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +0 -15
  106. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +0 -78
  107. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +0 -23
  108. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +0 -7
  109. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +0 -9
  110. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +0 -22
  111. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +0 -9
  112. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +0 -62
  113. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +0 -8
  114. data/lib/playbook/forms/builder/phone_number_field.rb +0 -12
@@ -12,7 +12,6 @@ module Playbook
12
12
  require_relative "builder/typeahead_field"
13
13
  require_relative "builder/intl_telephone_field"
14
14
  require_relative "builder/multi_level_select_field"
15
- require_relative "builder/phone_number_field"
16
15
 
17
16
  prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
18
17
  prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
@@ -81,7 +81,7 @@ module Playbook
81
81
  end
82
82
 
83
83
  # rubocop:disable Style/OptionalBooleanParameter
84
- def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
84
+ def pb_content_tag(name, content_or_options_with_block = nil, options = {}, escape = true, &block)
85
85
  combined_options = options
86
86
  .merge(combined_html_options)
87
87
  .merge(default_options.merge(content_or_options_with_block))
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.27.0"
5
- VERSION = "13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936"
5
+ VERSION = "13.27.0.pre.alpha.PLAY11782916"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936
4
+ version: 13.27.0.pre.alpha.PLAY11782916
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-05-21 00:00:00.000000000 Z
12
+ date: 2024-05-16 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -673,15 +673,12 @@ files:
673
673
  - app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
674
674
  - app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
675
675
  - app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
676
- - app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx
677
676
  - app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx
678
677
  - app/pb_kits/playbook/pb_collapsible/collapsible.html.erb
679
678
  - app/pb_kits/playbook/pb_collapsible/collapsible.rb
680
679
  - app/pb_kits/playbook/pb_collapsible/collapsible.test.js
681
680
  - app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb
682
681
  - app/pb_kits/playbook/pb_collapsible/collapsible_content.rb
683
- - app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb
684
- - app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb
685
682
  - app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb
686
683
  - app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
687
684
  - app/pb_kits/playbook/pb_collapsible/context.ts
@@ -689,14 +686,6 @@ files:
689
686
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
690
687
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
691
688
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md
692
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
693
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md
694
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb
695
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md
696
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx
697
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md
698
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb
699
- - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md
700
689
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
701
690
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
702
691
  - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md
@@ -900,8 +889,6 @@ files:
900
889
  - app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js
901
890
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb
902
891
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx
903
- - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md
904
- - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md
905
892
  - app/pb_kits/playbook/pb_date_range_inline/docs/_description.md
906
893
  - app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
907
894
  - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
@@ -925,17 +912,12 @@ files:
925
912
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
926
913
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
927
914
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
928
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md
929
915
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
930
916
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
931
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md
932
917
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
933
918
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx
934
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md
935
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md
936
919
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.html.erb
937
920
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx
938
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md
939
921
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.html.erb
940
922
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx
941
923
  - app/pb_kits/playbook/pb_date_stacked/docs/_description.md
@@ -949,14 +931,10 @@ files:
949
931
  - app/pb_kits/playbook/pb_date_time/date_time.rb
950
932
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
951
933
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
952
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md
953
934
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
954
935
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
955
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md
956
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md
957
936
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
958
937
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
959
- - app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md
960
938
  - app/pb_kits/playbook/pb_date_time/docs/_description.md
961
939
  - app/pb_kits/playbook/pb_date_time/docs/example.yml
962
940
  - app/pb_kits/playbook/pb_date_time/docs/index.js
@@ -1188,22 +1166,15 @@ files:
1188
1166
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
1189
1167
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
1190
1168
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md
1191
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md
1192
1169
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
1193
1170
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
1194
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md
1195
1171
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
1196
1172
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx
1197
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md
1198
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md
1199
1173
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb
1200
1174
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
1201
1175
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
1202
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
1203
1176
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
1204
1177
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
1205
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
1206
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md
1207
1178
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
1208
1179
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
1209
1180
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb
@@ -2933,7 +2904,6 @@ files:
2933
2904
  - lib/playbook/forms/builder/form_field_builder.rb
2934
2905
  - lib/playbook/forms/builder/intl_telephone_field.rb
2935
2906
  - lib/playbook/forms/builder/multi_level_select_field.rb
2936
- - lib/playbook/forms/builder/phone_number_field.rb
2937
2907
  - lib/playbook/forms/builder/select_field.rb
2938
2908
  - lib/playbook/forms/builder/typeahead_field.rb
2939
2909
  - lib/playbook/hover.rb
@@ -1,92 +0,0 @@
1
- import React from "react";
2
- import Icon, { IconSizes } from "../../pb_icon/_icon";
3
-
4
- type IconColors =
5
- | "default"
6
- | "light"
7
- | "lighter"
8
- | "link"
9
- | "error"
10
- | "success";
11
-
12
- type IconProps = {
13
- collapsed: boolean | (() => void);
14
- icon?: string[] | string;
15
- iconColor?: IconColors;
16
- iconSize?: IconSizes;
17
- onIconClick?: () => void;
18
- };
19
-
20
- type colorMap = {
21
- default: string;
22
- light: string;
23
- lighter: string;
24
- link: string;
25
- error: string;
26
- success: string;
27
- };
28
-
29
- const colorMap = {
30
- default: "#242B42",
31
- light: "#687887",
32
- lighter: "#C1CDD6",
33
- link: "#0056CF",
34
- error: "#FF2229",
35
- success: "#00CA74",
36
- };
37
-
38
- const CollapsibleIcon = ({
39
- collapsed,
40
- icon,
41
- iconSize,
42
- iconColor,
43
- onIconClick,
44
- }: IconProps) => {
45
- const color = colorMap[iconColor];
46
-
47
- const showIcon = (icon: string | string[]) => {
48
- if (typeof icon === "string") {
49
- return [icon, icon];
50
- }
51
- return icon;
52
- };
53
-
54
- const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
55
- if (onIconClick) {
56
- e.stopPropagation();
57
- onIconClick();
58
- }
59
- };
60
-
61
- return (
62
- <>
63
- {collapsed ? (
64
- <div
65
- className="icon_wrapper"
66
- key={icon ? showIcon(icon)[0] : "chevron-down"}
67
- onClick={(e) => handleIconClick(e)}
68
- style={{ verticalAlign: "middle", color: color }}
69
- >
70
- <Icon
71
- icon={icon ? showIcon(icon)[0] : "chevron-down"}
72
- size={iconSize}
73
- />
74
- </div>
75
- ) : (
76
- <div
77
- className="icon_wrapper"
78
- key={icon ? showIcon(icon)[1] : "chevron-up"}
79
- onClick={(e) => handleIconClick(e)}
80
- style={{ verticalAlign: "middle", color: color }}
81
- >
82
- <Icon
83
- icon={icon ? showIcon(icon)[1] : "chevron-up"}
84
- size={iconSize}
85
- />
86
- </div>
87
- )}
88
- </>
89
- );
90
- };
91
-
92
- export default CollapsibleIcon;
@@ -1,15 +0,0 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- style: "color: #{object.icon_color};",
7
- **combined_html_options) do %>
8
- <% if object.icon.present? %>
9
- <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
10
- <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
11
- <% else %>
12
- <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
13
- <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
14
- <% end %>
15
- <% end %>
@@ -1,37 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbCollapsible
5
- class CollapsibleIcon < Playbook::KitBase
6
- prop :collapsed, type: Playbook::Props::Boolean,
7
- default: true
8
- prop :color, type: Playbook::Props::Enum,
9
- values: %w[default light lighter link success error],
10
- default: "default"
11
- prop :icon
12
- prop :size, type: Playbook::Props::Enum,
13
- values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
14
- default: nil
15
-
16
- def classname
17
- generate_classname("pb_collapsible_icon_kit", separator: " ")
18
- end
19
-
20
- def show_icon(icon)
21
- case icon
22
- when ::String
23
- [icon, icon]
24
- when ::Array
25
- icon
26
- end
27
- end
28
-
29
- def icon_color
30
- return "" if color.nil?
31
-
32
- color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
33
- color_object[color.to_sym]
34
- end
35
- end
36
- end
37
- end
@@ -1,72 +0,0 @@
1
- import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
3
-
4
- const CollapsibleCustomMain = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
-
7
- return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- </Flex>
29
- </Background>
30
- <Collapsible.Content padding="none">
31
- <div>
32
- <List>
33
- <ListItem
34
- align="stretch"
35
- flexDirection="column"
36
- >
37
- Checklist item
38
- </ListItem>
39
- <ListItem
40
- align="stretch"
41
- flexDirection="column"
42
- >
43
- Checklist item
44
- </ListItem>
45
- <ListItem
46
- align="stretch"
47
- flexDirection="column"
48
- >
49
- Checklist item
50
- </ListItem>
51
- <ListItem
52
- align="stretch"
53
- flexDirection="column"
54
- >
55
- Checklist item
56
- </ListItem>
57
- <ListItem
58
- align="stretch"
59
- flexDirection="column"
60
- >
61
- Checklist item
62
- </ListItem>
63
- </List>
64
- </div>
65
- </Collapsible.Content>
66
- </Collapsible>
67
-
68
- </>
69
- )
70
- }
71
-
72
- export default CollapsibleCustomMain
@@ -1,3 +0,0 @@
1
- Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
-
3
- __NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.
@@ -1,19 +0,0 @@
1
- <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
- <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
- <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
- <% end %>
6
- <% end %>
7
- <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
8
- <% end %>
9
- <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
10
- <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
11
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
12
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
13
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
14
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
15
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
16
- <% end %>
17
- <% end %>
18
- <% end %>
19
-
@@ -1,3 +0,0 @@
1
- Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
2
-
3
- __NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.
@@ -1,73 +0,0 @@
1
- import React from 'react'
2
- import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
3
-
4
- const CollapsibleCustomMainWithIcon = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
-
7
- return (
8
- <>
9
- <Collapsible
10
- collapsed={isCollapsed}
11
- >
12
- <Background
13
- backgroundColor="white"
14
- cursor="pointer"
15
- htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
16
- position="sticky"
17
- top="0"
18
- >
19
- <Flex
20
- align="center"
21
- gap="sm"
22
- justify="between"
23
- >
24
- <Title
25
- size={4}
26
- text="Custom Main Section"
27
- />
28
- <Collapsible.Icon collapsed={isCollapsed}/>
29
- </Flex>
30
- </Background>
31
- <Collapsible.Content padding="none">
32
- <div>
33
- <List>
34
- <ListItem
35
- align="stretch"
36
- flexDirection="column"
37
- >
38
- Checklist item
39
- </ListItem>
40
- <ListItem
41
- align="stretch"
42
- flexDirection="column"
43
- >
44
- Checklist item
45
- </ListItem>
46
- <ListItem
47
- align="stretch"
48
- flexDirection="column"
49
- >
50
- Checklist item
51
- </ListItem>
52
- <ListItem
53
- align="stretch"
54
- flexDirection="column"
55
- >
56
- Checklist item
57
- </ListItem>
58
- <ListItem
59
- align="stretch"
60
- flexDirection="column"
61
- >
62
- Checklist item
63
- </ListItem>
64
- </List>
65
- </div>
66
- </Collapsible.Content>
67
- </Collapsible>
68
-
69
- </>
70
- )
71
- }
72
-
73
- export default CollapsibleCustomMainWithIcon
@@ -1,3 +0,0 @@
1
- When using a custom Main Section, you can also use the optional `Collapsible.Icon`.
2
-
3
- __NOTE__: The optional icon subcomponent must receive the `collapsed` state of the collapsible in order to toggle correctly. It also accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
@@ -1,20 +0,0 @@
1
- <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
2
- <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
3
- <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
4
- <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
5
- <%= pb_rails("collapsible/collapsible_icon") %>
6
- <% end %>
7
- <% end %>
8
- <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
9
- <% end %>
10
- <%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
11
- <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
12
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
13
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
14
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
15
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
16
- <%= pb_rails("list/item") do %> Checklist Item <% end %>
17
- <% end %>
18
- <% end %>
19
- <% end %>
20
-
@@ -1,3 +0,0 @@
1
- When using a custom Main Section, you can also use the optional `collapsible/collapsible_icon` subcomponent.
2
-
3
- __NOTE__: The optional icon subcomponent accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.
@@ -1,61 +0,0 @@
1
- ![Date-Range-Inline-Default](https://github.com/powerhome/playbook-swift/assets/54749071/793dc133-b2a8-4283-96e1-c8b19065392d)
2
-
3
- ```swift
4
- VStack(alignment: .leading, spacing: Spacing.large) {
5
- VStack(alignment: .leading, spacing: Spacing.small) {
6
- PBDateRangeInline(
7
- size: .caption,
8
- iconSize: .xSmall,
9
- startDate: "18 Jun 2013",
10
- endDate: "20 Mar 2015",
11
- startVariant: .standard
12
- )
13
- PBDateRangeInline(
14
- size: .body,
15
- iconSize: .x1,
16
- startDate: "18 Jun 2013",
17
- endDate: "20 Mar 2015",
18
- startVariant: .standard
19
- )
20
- }
21
- .frame(maxWidth: .infinity, alignment: .leading)
22
- VStack(alignment: .center, spacing: Spacing.small) {
23
- PBDateRangeInline(
24
- size: .caption,
25
- iconSize: .xSmall,
26
- startDate: "15 Jan 2013",
27
- endDate: "15 Aug 2015",
28
- startVariant: .short(showIcon: true),
29
- endVariant: .short(showIcon: false)
30
- )
31
- PBDateRangeInline(
32
- size: .body,
33
- iconSize: .x1,
34
- startDate: "15 Jan 2013",
35
- endDate: "15 Aug 2015",
36
- startVariant: .short(showIcon: true),
37
- endVariant: .short(showIcon: false)
38
- )
39
- }
40
- .frame(maxWidth: .infinity, alignment: .center)
41
- VStack(alignment: .trailing, spacing: Spacing.small) {
42
- PBDateRangeInline(
43
- size: .caption,
44
- iconSize: .xSmall,
45
- startDate: "15 Jan 2013",
46
- endDate: "15 Aug 2015",
47
- startVariant: .short(showIcon: true),
48
- endVariant: .short(showIcon: false)
49
- )
50
- PBDateRangeInline(
51
- size: .body,
52
- iconSize: .x1,
53
- startDate: "15 Jan 2013",
54
- endDate: "15 Aug 2015",
55
- startVariant: .short(showIcon: true),
56
- endVariant: .short(showIcon: false)
57
- )
58
- }
59
- .frame(maxWidth: .infinity, alignment: .trailing)
60
- }
61
- ```
@@ -1,11 +0,0 @@
1
- ### Props
2
- | Name | Type | Description | Default | Values |
3
- | --- | ----------- | --------- | --------- | --------- |
4
- | **date** | `Date` | Sets the date | `Date()` | |
5
- | **size** | `PBFont` | Sets the font size | `.body` | `.body` `.caption` `.subcaption` |
6
- | **iconSize** | `PBIcon.IconSize` | Sets the icon size | `.xSmall` | `xSmall` `small` `large` `x1` |
7
- | **startDate** | `String` | Takes a string value to set the starting date range value | | |
8
- | **endDate** | `String` | Takes a string value to set the ending date range value | | |
9
- | **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
10
- | **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
11
- | **isArrowIconBold** | `Bool` | Determines if the date range arrow is bold | `false` | `true` `false` |
@@ -1,32 +0,0 @@
1
- ![Date-Stacked-Bold](https://github.com/powerhome/playbook-swift/assets/54749071/e241e4b8-efce-4872-99f9-aefb1e3007d2)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- alignment: .leading,
6
- date: Date(),
7
- variant: .short(showIcon: false),
8
- dateSize: .title4,
9
- isMonthStacked: true,
10
- isMonthBold: true
11
- )
12
- PBDateStacked(
13
- alignment: .center,
14
- date: Date().makeDate(year: 2018, month: 3, day: 20),
15
- variant: .standard,
16
- dateSize: .title4,
17
- isStandardStacked: true,
18
- isYearBold: true,
19
- isMonthBold: true
20
- )
21
- .frame(maxWidth: .infinity, alignment: .center)
22
- PBDateStacked(
23
- alignment: .trailing,
24
- date: Date(),
25
- variant: .short(showIcon: false),
26
- dateSize: .title4,
27
- isMonthStacked: true,
28
- isMonthBold: true
29
- )
30
- .frame(maxWidth: .infinity, alignment: .trailing)
31
- }
32
- ```
@@ -1,17 +0,0 @@
1
- ![Date-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/5185a6b6-534a-43c0-8c87-abecf770b8f5)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- date: Date(),
6
- variant: .short(showIcon: false),
7
- dateSize: .title4,
8
- isMonthStacked: true
9
- )
10
- PBDateStacked(
11
- date: Date(),
12
- variant: .short(showIcon: false),
13
- dateSize: .title3,
14
- isMonthStacked: true
15
- )
16
- }
17
- ```
@@ -1,19 +0,0 @@
1
- ![Date-Stacked-Not-Current-Year](https://github.com/powerhome/playbook-swift/assets/54749071/f778f10f-21c3-42b9-b660-9def6c75ecf3)
2
- ```swift
3
- VStack(alignment: .leading, spacing: Spacing.small) {
4
- PBDateStacked(
5
- alignment: .leading,
6
- date: Date().makeDate(year: 2018, month: 3, day: 20),
7
- variant: .standard,
8
- dateSize: .title4,
9
- isStandardStacked: true
10
- )
11
- PBDateStacked(
12
- alignment: .leading,
13
- date: Date().makeDate(year: 2018, month: 3, day: 20),
14
- variant: .standard,
15
- dateSize: .title3,
16
- isStandardStacked: true
17
- )
18
- }
19
- ```
@@ -1,10 +0,0 @@
1
- ### Props
2
- | Name | Type | Description | Default | Values |
3
- | --- | ----------- | --------- | --------- | --------- |
4
- | **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
5
- | **dateSize** | `PBFont` |Sets the size of the date | `.body` | `.subcaption` `.caption` `.body` |
6
- | **isReversed** | `Bool` | Boolean value that determines whether or not the month and date are reversed. | `false` | `true` `false` |
7
- | **isMonthStacked** | `Bool` | Boolean value that determines whether or not the month is stacked | `false` | `true` `false` |
8
- | **isStandardStacked** | `Bool` | Boolean value that determines whether or not the standard date variant is stacked. | `false` | `true` `false` |
9
- | **isYearBold** | `Bool` | Boolean value that determines whether or not the the year is bold | `false` | `true` `false` |
10
- | **isMonthBold** | `Bool` | Boolean value that determines whether or not the month is bold. | `false` | `true` `false` |