playbook_ui 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036 → 14.5.0.pre.rc.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +4 -23
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_button/_button.tsx +2 -6
  6. data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -17
  7. data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -14
  8. data/app/pb_kits/playbook/pb_contact/contact.rb +0 -4
  9. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +6 -2
  11. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +7 -2
  12. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -4
  13. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -4
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +3 -6
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +2 -6
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +0 -2
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -10
  21. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +1 -5
  22. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +1 -5
  23. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +1 -5
  24. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +1 -5
  25. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +1 -5
  26. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +1 -5
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +1 -5
  28. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  29. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  30. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  31. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +1 -7
  32. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +232 -210
  33. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
  36. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +1 -12
  37. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -3
  38. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +2 -10
  39. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +13 -14
  40. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  41. data/app/pb_kits/playbook/pb_radio/_radio.tsx +33 -92
  42. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +0 -2
  43. data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -1
  44. data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
  45. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +5 -12
  46. data/app/pb_kits/playbook/pb_select/_select.tsx +2 -5
  47. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_select/select.rb +0 -4
  49. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -0
  50. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +13 -17
  51. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -0
  52. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +0 -14
  53. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -7
  54. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +5 -6
  55. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  56. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  57. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  58. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -2
  59. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -9
  60. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +13 -136
  61. data/dist/chunks/_typeahead-B2zRxReA.js +22 -0
  62. data/dist/chunks/_weekday_stacked-Co95UEiW.js +45 -0
  63. data/dist/chunks/lib-D2U4I1U6.js +16 -0
  64. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-zV9OpdSt.js} +1 -1
  65. data/dist/chunks/vendor.js +1 -1
  66. data/dist/menu.yml +1 -3
  67. data/dist/playbook-doc.js +1 -1
  68. data/dist/playbook-rails-react-bindings.js +1 -1
  69. data/dist/playbook-rails.js +1 -1
  70. data/dist/playbook.css +1 -1
  71. data/lib/playbook/pagination_renderer.rb +2 -10
  72. data/lib/playbook/pb_doc_helper.rb +5 -5
  73. data/lib/playbook/version.rb +2 -2
  74. metadata +6 -35
  75. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +0 -25
  76. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +0 -465
  77. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +0 -195
  78. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +0 -3
  79. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +0 -117
  80. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +0 -43
  81. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +0 -1
  82. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +0 -63
  83. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +0 -55
  84. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +0 -113
  85. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +0 -12
  86. data/app/pb_kits/playbook/pb_drawer/docs/index.js +0 -5
  87. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +0 -12
  88. data/app/pb_kits/playbook/pb_drawer/drawer.rb +0 -8
  89. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +0 -77
  90. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
  91. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
  92. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
  93. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
  94. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
  95. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
  96. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
  97. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
  98. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
  99. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +0 -62
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +0 -88
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +0 -60
  102. data/app/pb_kits/playbook/utilities/icons/angle-down.svg +0 -3
  103. data/app/pb_kits/playbook/utilities/icons/envelope.svg +0 -3
  104. data/dist/chunks/_typeahead-CT2ByCBK.js +0 -22
  105. data/dist/chunks/_weekday_stacked-Bwdy1TtH.js +0 -45
  106. data/dist/chunks/lib-CEpcaI8y.js +0 -29
@@ -29,20 +29,12 @@ module Playbook
29
29
 
30
30
  def previous_page
31
31
  num = @collection.current_page > 1 && @collection.current_page - 1
32
- previous_or_next_page(
33
- num,
34
- "<svg xmlns='http://www.w3.org/2000/svg' width='auto' height='auto' viewBox='0 0 30 24' fill='none' class='pb_custom_icon svg-inline--fa pb_icon_kit svg_fw svg_xs' id='' data='{}' aria='{:label=>&quot;away&quot;}' tabindex=''><path d='M8.20312 11.2031L17.2031 2.25C17.625 1.78125 18.3281 1.78125 18.7969 2.25C19.2188 2.67188 19.2188 3.375 18.7969 3.79688L10.5469 12L18.75 20.25C19.2188 20.6719 19.2188 21.375 18.75 21.7969C18.3281 22.2656 17.625 22.2656 17.2031 21.7969L8.20312 12.7969C7.73438 12.375 7.73438 11.6719 8.20312 11.2031Z' fill='currentColor'></path></svg>",
35
- "prev"
36
- )
32
+ previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
37
33
  end
38
34
 
39
35
  def next_page
40
36
  num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
41
- previous_or_next_page(
42
- num,
43
- "<svg xmlns='http://www.w3.org/2000/svg' width='auto' height='auto' viewBox='0 0 30 24' fill='none' class='pb_custom_icon svg-inline--fa pb_icon_kit svg_fw svg_xs' id='' data='{}' aria='{:label=>&quot;away&quot;}' tabindex=''><path d='M21.7969 11.2031C22.2188 11.6719 22.2188 12.375 21.7969 12.7969L12.7969 21.7969C12.3281 22.2656 11.625 22.2656 11.2031 21.7969C10.7344 21.375 10.7344 20.6719 11.2031 20.25L19.4062 12.0469L11.2031 3.79688C10.7344 3.375 10.7344 2.67188 11.2031 2.25C11.625 1.78125 12.3281 1.78125 12.75 2.25L21.7969 11.2031Z' fill='currentColor'></path></svg>",
44
- "next"
45
- )
37
+ previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
46
38
  end
47
39
  end
48
40
  end
@@ -45,7 +45,7 @@ module Playbook
45
45
 
46
46
  # rubocop:disable Naming/AccessorMethodName
47
47
  def get_kits
48
- menu = ActiveSupport::ConfigurationFile.parse(Playbook::Engine.root.join("dist/menu.yml"))
48
+ menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
49
49
  all_kits = []
50
50
  menu["kits"].each do |kit|
51
51
  kit_name = kit["name"]
@@ -61,7 +61,7 @@ module Playbook
61
61
  end
62
62
 
63
63
  def get_kits_pb_website
64
- menu = ActiveSupport::ConfigurationFile.parse(Rails.root.join("config/menu.yml"))
64
+ menu = YAML.load_file(Rails.root.join("config/menu.yml"))
65
65
  menu["kits"]
66
66
  end
67
67
  # rubocop:enable Naming/AccessorMethodName
@@ -84,9 +84,9 @@ module Playbook
84
84
  def pb_doc_kit_examples(kit, type)
85
85
  example_file = pb_doc_kit_path(kit, "example.yml")
86
86
  if File.exist?(example_file)
87
- ActiveSupport::ConfigurationFile.parse(example_file)
88
- .transform_keys(&:to_sym)
89
- .dig(:examples, type) || []
87
+ examples_list = YAML.load_file(example_file)
88
+ .inject({}) { |item, (k, v)| item[k.to_sym] = v; item }
89
+ examples_list.dig(:examples, type) || []
90
90
  else
91
91
  []
92
92
  end
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "14.5.0"
5
- VERSION = "14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036"
4
+ PREVIOUS_VERSION = "14.4.0"
5
+ VERSION = "14.5.0.pre.rc.0"
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: 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036
4
+ version: 14.5.0.pre.rc.0
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-10-14 00:00:00.000000000 Z
12
+ date: 2024-09-19 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1106,21 +1106,6 @@ files:
1106
1106
  - app/pb_kits/playbook/pb_draggable/draggable.test.jsx
1107
1107
  - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx
1108
1108
  - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx
1109
- - app/pb_kits/playbook/pb_drawer/_close_icon.tsx
1110
- - app/pb_kits/playbook/pb_drawer/_drawer.scss
1111
- - app/pb_kits/playbook/pb_drawer/_drawer.tsx
1112
- - app/pb_kits/playbook/pb_drawer/_drawer_context.tsx
1113
- - app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
1114
- - app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
1115
- - app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
1116
- - app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx
1117
- - app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx
1118
- - app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx
1119
- - app/pb_kits/playbook/pb_drawer/docs/example.yml
1120
- - app/pb_kits/playbook/pb_drawer/docs/index.js
1121
- - app/pb_kits/playbook/pb_drawer/drawer.html.erb
1122
- - app/pb_kits/playbook/pb_drawer/drawer.rb
1123
- - app/pb_kits/playbook/pb_drawer/drawer.test.jsx
1124
1109
  - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
1125
1110
  - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
1126
1111
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
@@ -1364,9 +1349,6 @@ files:
1364
1349
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
1365
1350
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
1366
1351
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
1367
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
1368
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
1369
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
1370
1352
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
1371
1353
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
1372
1354
  - app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -1796,7 +1778,6 @@ files:
1796
1778
  - app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
1797
1779
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
1798
1780
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
1799
- - app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
1800
1781
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb
1801
1782
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx
1802
1783
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md
@@ -1817,17 +1798,12 @@ files:
1817
1798
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
1818
1799
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
1819
1800
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
1820
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
1821
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
1822
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
1823
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
1824
1801
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
1825
1802
  - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
1826
1803
  - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
1827
1804
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
1828
1805
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
1829
1806
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
1830
- - app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
1831
1807
  - app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
1832
1808
  - app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx
1833
1809
  - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
@@ -2183,7 +2159,6 @@ files:
2183
2159
  - app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb
2184
2160
  - app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx
2185
2161
  - app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
2186
- - app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx
2187
2162
  - app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md
2188
2163
  - app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md
2189
2164
  - app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb
@@ -2890,8 +2865,6 @@ files:
2890
2865
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
2891
2866
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
2892
2867
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
2893
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
2894
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
2895
2868
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
2896
2869
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
2897
2870
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
@@ -3056,9 +3029,7 @@ files:
3056
3029
  - app/pb_kits/playbook/utilities/globalPropNames.mjs
3057
3030
  - app/pb_kits/playbook/utilities/globalProps.ts
3058
3031
  - app/pb_kits/playbook/utilities/icons/allicons.tsx
3059
- - app/pb_kits/playbook/utilities/icons/angle-down.svg
3060
3032
  - app/pb_kits/playbook/utilities/icons/clock.svg
3061
- - app/pb_kits/playbook/utilities/icons/envelope.svg
3062
3033
  - app/pb_kits/playbook/utilities/icons/spinner.svg
3063
3034
  - app/pb_kits/playbook/utilities/icons/times.svg
3064
3035
  - app/pb_kits/playbook/utilities/object.ts
@@ -3079,11 +3050,11 @@ files:
3079
3050
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3080
3051
  - app/pb_kits/playbook/utilities/text.ts
3081
3052
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3082
- - dist/chunks/_typeahead-CT2ByCBK.js
3083
- - dist/chunks/_weekday_stacked-Bwdy1TtH.js
3053
+ - dist/chunks/_typeahead-B2zRxReA.js
3054
+ - dist/chunks/_weekday_stacked-Co95UEiW.js
3084
3055
  - dist/chunks/lazysizes-B7xYodB-.js
3085
- - dist/chunks/lib-CEpcaI8y.js
3086
- - dist/chunks/pb_form_validation-D9zkwt2b.js
3056
+ - dist/chunks/lib-D2U4I1U6.js
3057
+ - dist/chunks/pb_form_validation-zV9OpdSt.js
3087
3058
  - dist/chunks/vendor.js
3088
3059
  - dist/menu.yml
3089
3060
  - dist/playbook-doc.js
@@ -1,25 +0,0 @@
1
- import React from 'react'
2
- import Icon from '../pb_icon/_icon'
3
-
4
- import { getAllIcons } from "../utilities/icons/allicons"
5
-
6
- type CloseIconProps = {
7
- onClose: () => void,
8
- }
9
-
10
- export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
11
- const { onClose } = props
12
- const timesIcon = getAllIcons()["times"]
13
- return (
14
- <div
15
- className="pb_dialog_close_icon"
16
- onClick={onClose}
17
- >
18
- <Icon
19
- className="svg-inline--fa"
20
- customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
21
- fixedWidth
22
- />
23
- </div>
24
- )
25
- }
@@ -1,465 +0,0 @@
1
- @import "../tokens/positioning";
2
- @import "../tokens/colors";
3
- @import "../pb_card/card_mixin";
4
- @import "../tokens/shadows";
5
- @import "../tokens/border_radius";
6
- @import "../tokens/spacing";
7
- @import "../tokens/animation-curves";
8
- @import "../tokens/positioning";
9
-
10
- // Drawer animations
11
- // Drawer animations for fading in and out from the center
12
- @keyframes modalFadeIn {
13
- from {
14
- transform: translate3d(0, -100%, 0);
15
- opacity: 0;
16
- }
17
- to {
18
- transform: translate3d(0, 0, 0);
19
- opacity: 1;
20
- }
21
- }
22
-
23
- @keyframes modalFadeOut {
24
- from {
25
- transform: translate3d(0, 0, 0);
26
- opacity: 1;
27
- }
28
- to {
29
- transform: translate3d(0, -50%, 0);
30
- opacity: 0;
31
- }
32
- }
33
-
34
- // Drawer animations for fading in and out from the right side
35
-
36
- @keyframes overlayFade {
37
- from {
38
- opacity: 0;
39
- transform: translateY(0);
40
- }
41
- to {
42
- opacity: 1;
43
- transform: translateY(0);
44
- }
45
- }
46
-
47
- @keyframes overlayFadeOut {
48
- from {
49
- opacity: 1;
50
- }
51
- to {
52
- opacity: 0;
53
- }
54
- }
55
-
56
- body.ReactModal__Body--open {
57
- transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
58
- }
59
-
60
- .pb_drawer_lg_left.pb_drawer {
61
- transform: translateX(-100%);
62
- }
63
-
64
- .pb_drawer_lg_right.pb_drawer {
65
- transform: translateX(100%);
66
- }
67
-
68
- .pb_drawer.pb_drawer_after_open {
69
- transform: translateX(0); /* Slide in */
70
- }
71
- // Drawer Styles
72
- .pb_drawer {
73
-
74
- // Local Variables
75
- $gutter: $space_lg;
76
- $xsmall: 64px;
77
- $small: 200px;
78
- $medium: 250px;
79
- $large: 300px;
80
- $xlarge: 365px;
81
- $animation-duration: .2s;
82
- $z-index: 100;
83
- $opacity_visible: 1;
84
- $opacity_hidden: 0;
85
-
86
- .drawer {
87
- position: sticky;
88
- top: 0;
89
- background-color: $white;
90
- z-index: $z_8;
91
- }
92
-
93
- // @include pb_card;
94
- background-color: $white;
95
- border: 0;
96
- box-shadow: $shadow_deepest; // border class here
97
- max-height: calc(100vh - #{$gutter * 2});
98
- max-width: calc(100vw - #{$gutter * 2});
99
- overflow: auto;
100
- animation-name: modalFadeIn;
101
- animation-duration: $animation-duration;
102
- outline: none;
103
- animation-timing-function: $easeInOutQuint;
104
- transition: transform 0.3s ease-in-out;
105
-
106
- &.drawer_border_full {
107
- box-shadow: none;
108
- border: 2px solid #f3f7fb;
109
- }
110
-
111
- &.drawer_border_right {
112
- border-right: 2px solid #f3f7fb;
113
- }
114
-
115
- &.drawer_border_left {
116
- border-left: 2px solid #f3f7fb;
117
- }
118
-
119
- &[class*="_left"] {
120
- animation-name: modalFadeInLeft;
121
- &[class*="_before_close"] {
122
- animation-name: modalFadeOutLeft;
123
- animation-duration: $animation-duration;
124
- opacity: $opacity_hidden;
125
- }
126
- }
127
-
128
- &[class*="_right"] {
129
- animation-name: modalFadeInRight;
130
- &[class*="_before_close"] {
131
- animation-name: modalFadeOutRight;
132
- animation-duration: $animation-duration;
133
- opacity: $opacity_hidden;
134
- }
135
- }
136
-
137
- &[class*="_xs_"] {
138
- width: $xsmall;
139
- max-width: $xsmall;
140
- }
141
-
142
- &[class*="_sm_"] {
143
- width: $small;
144
- max-width: $small;
145
- }
146
-
147
- &[class*="_md_"] {
148
- width: $medium;
149
- max-width: $medium;
150
- }
151
-
152
- &[class*="_lg_"] {
153
- width: $large;
154
- max-width: $large;
155
- }
156
-
157
- &[class*="_xl_"] {
158
- width: $xlarge;
159
- max-width: $xlarge;
160
- }
161
-
162
- &_body_open {
163
- overflow: hidden;
164
- }
165
-
166
- &_after_open {
167
- opacity: $opacity_visible;
168
- }
169
-
170
- &.no-background {
171
- background-color: transparent;
172
- }
173
-
174
- &[class*="_before_close"] {
175
- animation-name: modalFadeOut;
176
- animation-duration: $animation-duration;
177
- opacity: $opacity_hidden;
178
- }
179
-
180
- &_close_icon {
181
- cursor: pointer;
182
- }
183
-
184
- &_overlay {
185
- position: fixed;
186
- top: 0;
187
- left: 0;
188
- right: 0;
189
- bottom: 0;
190
- display: flex;
191
- align-items: center;
192
- justify-content: center;
193
- background-color: rgba($bg_dark, $opacity_4);
194
- z-index: $z-index;
195
- animation-name: overlayFade;
196
- animation-duration: $animation-duration;
197
-
198
- &_after_open {
199
- opacity: $opacity_visible;
200
- }
201
- &_before_close {
202
- animation-name: overlayFadeOut;
203
- animation-duration: $animation-duration;
204
- opacity: $opacity_hidden;
205
- }
206
- &[class*="full_height"] {
207
- &[class*="_left"]{
208
- justify-content: flex-start;
209
- }
210
-
211
- &[class*="_center"]{
212
- justify-content: center;
213
- }
214
-
215
- &[class*="_right"]{
216
- justify-content: flex-end;
217
- }
218
-
219
- .pb_drawer {
220
- height: 100%;
221
- max-height: 100%;
222
- max-width: none;
223
- // This empty div only has height when drawer is full height
224
- // Fix for drawer body content disappearing behind sticky footer
225
- .drawer-pseudo-footer {
226
- height: $space_xl * 2;
227
- }
228
- .drawer_footer {
229
- position: fixed;
230
- bottom: 0;
231
- background-color: $white;
232
- max-width: 100%;
233
- }
234
- &[class*="_xs_"] {
235
- width: $xsmall;
236
- .dialog_footer {
237
- width: $xsmall;
238
- }
239
- }
240
- &[class*="_sm_"] {
241
- width: $small;
242
- .dialog_footer {
243
- width: $small;
244
- }
245
- }
246
- &[class*="_md_"] {
247
- width: $medium;
248
- .dialog_footer {
249
- width: $medium;
250
- }
251
- }
252
- &[class*="_lg_"] {
253
- width: $large;
254
- .dialog_footer {
255
- width: $large;
256
- }
257
- }
258
- &[class*="_xl_"] {
259
- width: $xlarge;
260
- .dialog_footer {
261
- width: $xlarge;
262
- }
263
- }
264
- }
265
- }
266
- }
267
-
268
- &_no_overlay {
269
- position: fixed;
270
- top: 0;
271
- left: 0;
272
- right: 0;
273
- bottom: 0;
274
- display: flex;
275
- align-items: center;
276
- justify-content: center;
277
- z-index: $z-index;
278
- animation-name: overlayFade;
279
- animation-duration: $animation-duration;
280
- overflow: none; /* Ensure body remains scrollable */
281
- pointer-events: none; /* Allow interaction inside the drawer itself */
282
-
283
- body.ReactModal__Body--open {
284
- overflow: none; /* Ensure body remains scrollable */
285
- pointer-events: none; /* Allow interaction inside the drawer itself */
286
- }
287
-
288
- &_after_open {
289
- opacity: $opacity_visible;
290
- overflow: none; /* Ensure body remains scrollable */
291
- pointer-events: none; /* Allow interaction inside the drawer itself */
292
- }
293
- &_before_close {
294
- animation-name: overlayFadeOut;
295
- animation-duration: $animation-duration;
296
- opacity: $opacity_hidden;
297
- }
298
- &[class*="full_height"] {
299
- &[class*="_left"]{
300
- justify-content: flex-start;
301
- }
302
-
303
- &[class*="_center"]{
304
- justify-content: center;
305
- }
306
-
307
- &[class*="_right"]{
308
- justify-content: flex-end;
309
- }
310
-
311
- .pb_drawer {
312
- height: 100%;
313
- max-height: 100%;
314
- max-width: none;
315
- // This empty div only has height when drawer is full height
316
- // Fix for drawer body content disappearing behind sticky footer
317
- .drawer-pseudo-footer {
318
- height: $space_xl * 2;
319
- }
320
- .drawer_footer {
321
- position: fixed;
322
- bottom: 0;
323
- background-color: $white;
324
- max-width: 100%;
325
- }
326
- &[class*="_xs_"] {
327
- width: $xsmall;
328
- .dialog_footer {
329
- width: $xsmall;
330
- }
331
- }
332
- &[class*="_sm_"] {
333
- width: $small;
334
- .dialog_footer {
335
- width: $small;
336
- }
337
- }
338
- &[class*="_md_"] {
339
- width: $medium;
340
- .dialog_footer {
341
- width: $medium;
342
- }
343
- }
344
- &[class*="_lg_"] {
345
- width: $large;
346
- .dialog_footer {
347
- width: $large;
348
- }
349
- }
350
- &[class*="_xl_"] {
351
- width: $xlarge;
352
- .dialog_footer {
353
- width: $xlarge;
354
- }
355
- }
356
- }
357
- }
358
- }
359
-
360
- [class*="drawer_body"] {
361
- padding: $space_sm;
362
- }
363
-
364
- [class*="drawer_header"] {
365
- padding: $space_sm;
366
- }
367
-
368
- [class*="drawer_footer"] {
369
- padding: $space_sm;
370
- }
371
-
372
- //styles specific to rails version of kit
373
- // rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
374
- .pb_drawer_wrapper_rails {
375
- $medium: 500px;
376
- $large: 800px;
377
- $xlarge: 1150px;
378
-
379
- &[class*="full_height"] {
380
- &[class*="_left"]{
381
- .pb_drawer_rails {
382
- margin: unset !important;
383
- margin-right: auto !important;
384
- }
385
- }
386
-
387
- &[class*="_center"]{
388
- justify-content: center;
389
- }
390
-
391
- &[class*="_right"]{
392
- .pb_drawer_rails {
393
- margin: unset !important;
394
- margin-left: auto !important;
395
- }
396
- }
397
-
398
- .pb_drawer {
399
- height: 100% !important;
400
- max-height: 100% !important;
401
- max-width: 100%;
402
- // This empty div only has height when drawer is full height.
403
- // Fix for drawer body content disappearing behind sticky footer
404
- .drawer-pseudo-footer {
405
- height: $space_xl * 2;
406
- }
407
- .drawer_footer {
408
- position:fixed;
409
- bottom: 0;
410
- background-color: $white;
411
- max-width: 100%;
412
- }
413
- &[class*="_sm"] {
414
- width: $medium;
415
- .drawer_footer {
416
- width: $medium;
417
- }
418
- }
419
- &[class*="_md"] {
420
- width: $large;
421
- .drawer_footer {
422
- width: $large;
423
- }
424
- }
425
- &[class*="_lg"] {
426
- width: $xlarge;
427
- .drawer_footer {
428
- width: $xlarge;
429
- }
430
- }
431
- }
432
- }
433
-
434
- // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
435
- // Conflicts were only apparent in nitro, not in playbook local env
436
- .pb_drawer_rails {
437
- position: fixed !important;
438
- top: 0 !important;
439
- padding: unset !important;
440
- margin: auto;
441
-
442
- }
443
-
444
- // Overlay for rails kit
445
- drawer::backdrop {
446
- position: fixed;
447
- top: 0;
448
- left: 0;
449
- right: 0;
450
- bottom: 0;
451
- display: flex;
452
- align-items: center;
453
- justify-content: center;
454
- background-color: rgba($bg_dark, $opacity_4);
455
- animation-name: overlayFade;
456
- animation-duration: 0.2s;
457
- }
458
-
459
- .drawer-button-class {
460
- background-color: unset;
461
- border: none;
462
- cursor: pointer;
463
- }
464
- }
465
- }