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

Sign up to get free protection for your applications and to get access to all the features.
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` |