polaris_view_components 0.4.0 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (169) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +12 -2
  3. data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js +136 -0
  4. data/app/assets/javascripts/polaris_view_components/button_controller.js +47 -0
  5. data/app/assets/javascripts/polaris_view_components/dropzone_controller.js +495 -0
  6. data/app/assets/javascripts/polaris_view_components/frame_controller.js +41 -0
  7. data/app/assets/javascripts/polaris_view_components/index.js +21 -1
  8. data/app/assets/javascripts/polaris_view_components/modal_controller.js +25 -0
  9. data/app/assets/javascripts/polaris_view_components/option_list_controller.js +41 -0
  10. data/app/assets/javascripts/polaris_view_components/polaris_controller.js +28 -0
  11. data/app/assets/javascripts/polaris_view_components/popover_controller.js +56 -0
  12. data/app/assets/javascripts/polaris_view_components/scrollable_controller.js +60 -0
  13. data/app/assets/javascripts/polaris_view_components/select_controller.js +6 -4
  14. data/app/assets/javascripts/polaris_view_components/text_field_controller.js +4 -0
  15. data/app/assets/javascripts/polaris_view_components/toast_controller.js +68 -0
  16. data/app/assets/javascripts/polaris_view_components/utils.js +23 -0
  17. data/app/assets/javascripts/polaris_view_components.js +2406 -5
  18. data/app/assets/stylesheets/polaris_view_components/custom.css +123 -0
  19. data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css +0 -4
  20. data/app/assets/stylesheets/polaris_view_components.css +2162 -2019
  21. data/app/assets/stylesheets/polaris_view_components.postcss.css +1 -1
  22. data/app/components/polaris/action.rb +3 -3
  23. data/app/components/polaris/action_list/item_component.html.erb +35 -0
  24. data/app/components/polaris/action_list/item_component.rb +41 -0
  25. data/app/components/polaris/action_list/section_component.html.erb +16 -0
  26. data/app/components/polaris/action_list/section_component.rb +26 -0
  27. data/app/components/polaris/action_list_component.html.erb +13 -0
  28. data/app/components/polaris/action_list_component.rb +25 -0
  29. data/app/components/polaris/autocomplete/action_component.rb +7 -0
  30. data/app/components/polaris/autocomplete/option_component.rb +35 -0
  31. data/app/components/polaris/autocomplete/section_component.html.erb +9 -0
  32. data/app/components/polaris/autocomplete/section_component.rb +12 -0
  33. data/app/components/polaris/autocomplete_component.html.erb +30 -0
  34. data/app/components/polaris/autocomplete_component.rb +65 -0
  35. data/app/components/polaris/avatar_component.rb +2 -2
  36. data/app/components/polaris/badge_component.rb +2 -2
  37. data/app/components/polaris/banner_component.rb +8 -8
  38. data/app/components/polaris/base_button.rb +2 -2
  39. data/app/components/polaris/base_checkbox.rb +48 -0
  40. data/app/components/polaris/base_component.rb +1 -1
  41. data/app/components/polaris/base_radio_button.rb +38 -0
  42. data/app/components/polaris/button_component.html.erb +13 -0
  43. data/app/components/polaris/button_group_component.rb +8 -8
  44. data/app/components/polaris/callout_card_component.rb +6 -6
  45. data/app/components/polaris/caption_component.rb +3 -3
  46. data/app/components/polaris/card/header_component.rb +2 -2
  47. data/app/components/polaris/card/section_component.rb +8 -4
  48. data/app/components/polaris/card_component.html.erb +4 -0
  49. data/app/components/polaris/card_component.rb +6 -5
  50. data/app/components/polaris/character_count.rb +10 -10
  51. data/app/components/polaris/checkbox_component.html.erb +1 -5
  52. data/app/components/polaris/checkbox_component.rb +20 -13
  53. data/app/components/polaris/choice_component.rb +2 -2
  54. data/app/components/polaris/choice_list_component.rb +6 -6
  55. data/app/components/polaris/component.rb +6 -1
  56. data/app/components/polaris/data_table/cell_component.rb +4 -4
  57. data/app/components/polaris/data_table/column_component.rb +1 -1
  58. data/app/components/polaris/data_table_component.rb +4 -4
  59. data/app/components/polaris/description_list_component.rb +5 -5
  60. data/app/components/polaris/display_text_component.rb +3 -3
  61. data/app/components/polaris/dropzone_component.html.erb +156 -0
  62. data/app/components/polaris/dropzone_component.rb +150 -0
  63. data/app/components/polaris/empty_state_component.rb +4 -4
  64. data/app/components/polaris/exception_list/item_component.rb +3 -3
  65. data/app/components/polaris/exception_list_component.rb +2 -2
  66. data/app/components/polaris/filters_component.html.erb +35 -0
  67. data/app/components/polaris/filters_component.rb +91 -0
  68. data/app/components/polaris/footer_help_component.rb +2 -2
  69. data/app/components/polaris/form_layout/group_component.rb +5 -5
  70. data/app/components/polaris/form_layout/item_component.rb +2 -2
  71. data/app/components/polaris/form_layout_component.rb +4 -4
  72. data/app/components/polaris/frame/save_bar_component.html.erb +23 -0
  73. data/app/components/polaris/frame/save_bar_component.rb +31 -0
  74. data/app/components/polaris/frame/top_bar_component.html.erb +30 -0
  75. data/app/components/polaris/frame/top_bar_component.rb +18 -0
  76. data/app/components/polaris/frame_component.html.erb +44 -0
  77. data/app/components/polaris/frame_component.rb +33 -0
  78. data/app/components/polaris/heading_component.rb +2 -2
  79. data/app/components/polaris/headless_button.html.erb +13 -0
  80. data/app/components/polaris/headless_button.rb +18 -6
  81. data/app/components/polaris/icon_component.rb +3 -3
  82. data/app/components/polaris/index_table/cell_component.rb +22 -0
  83. data/app/components/polaris/index_table/column_component.rb +13 -0
  84. data/app/components/polaris/index_table_component.html.erb +28 -0
  85. data/app/components/polaris/index_table_component.rb +25 -0
  86. data/app/components/polaris/inline_error_component.html.erb +2 -2
  87. data/app/components/polaris/inline_error_component.rb +8 -2
  88. data/app/components/polaris/label_component.rb +3 -3
  89. data/app/components/polaris/labelled_component.rb +3 -3
  90. data/app/components/polaris/layout/annotated_section.rb +2 -2
  91. data/app/components/polaris/layout/section.rb +2 -2
  92. data/app/components/polaris/layout_component.rb +4 -4
  93. data/app/components/polaris/link_component.rb +4 -4
  94. data/app/components/polaris/list_component.rb +5 -5
  95. data/app/components/polaris/logo.rb +13 -0
  96. data/app/components/polaris/modal/section_component.rb +19 -0
  97. data/app/components/polaris/modal_component.html.erb +79 -0
  98. data/app/components/polaris/modal_component.rb +98 -0
  99. data/app/components/polaris/navigation/item_component.html.erb +31 -0
  100. data/app/components/polaris/navigation/item_component.rb +85 -0
  101. data/app/components/polaris/navigation/section_component.html.erb +17 -0
  102. data/app/components/polaris/navigation/section_component.rb +64 -0
  103. data/app/components/polaris/navigation_component.html.erb +29 -0
  104. data/app/components/polaris/navigation_component.rb +15 -0
  105. data/app/components/polaris/option_list/checkbox_component.html.erb +14 -0
  106. data/app/components/polaris/option_list/checkbox_component.rb +37 -0
  107. data/app/components/polaris/option_list/option_component.rb +24 -0
  108. data/app/components/polaris/option_list/radio_button_component.rb +54 -0
  109. data/app/components/polaris/option_list/section_component.html.erb +14 -0
  110. data/app/components/polaris/option_list/section_component.rb +53 -0
  111. data/app/components/polaris/option_list_component.html.erb +15 -0
  112. data/app/components/polaris/option_list_component.rb +67 -0
  113. data/app/components/polaris/page_actions_component.rb +22 -7
  114. data/app/components/polaris/page_component.rb +5 -5
  115. data/app/components/polaris/pagination_component.rb +2 -6
  116. data/app/components/polaris/popover/pane_component.html.erb +25 -0
  117. data/app/components/polaris/popover/pane_component.rb +20 -0
  118. data/app/components/polaris/popover/section_component.rb +19 -0
  119. data/app/components/polaris/popover_component.html.erb +31 -0
  120. data/app/components/polaris/popover_component.rb +113 -0
  121. data/app/components/polaris/progress_bar_component.rb +6 -6
  122. data/app/components/polaris/radio_button_component.html.erb +1 -6
  123. data/app/components/polaris/radio_button_component.rb +18 -8
  124. data/app/components/polaris/resource_item_component.html.erb +16 -6
  125. data/app/components/polaris/resource_item_component.rb +43 -10
  126. data/app/components/polaris/resource_list_component.html.erb +10 -0
  127. data/app/components/polaris/resource_list_component.rb +5 -11
  128. data/app/components/polaris/scrollable_component.html.erb +5 -0
  129. data/app/components/polaris/scrollable_component.rb +48 -0
  130. data/app/components/polaris/select_component.rb +11 -6
  131. data/app/components/polaris/setting_toggle_component.html.erb +10 -0
  132. data/app/components/polaris/setting_toggle_component.rb +24 -0
  133. data/app/components/polaris/shopify_navigation_component.rb +8 -8
  134. data/app/components/polaris/skeleton_body_text_component.rb +2 -2
  135. data/app/components/polaris/spacer_component.rb +4 -4
  136. data/app/components/polaris/spinner_component.rb +3 -3
  137. data/app/components/polaris/stack/item_component.rb +15 -0
  138. data/app/components/polaris/stack_component.rb +6 -22
  139. data/app/components/polaris/subheading_component.rb +2 -2
  140. data/app/components/polaris/tabs/tab_component.html.erb +10 -0
  141. data/app/components/polaris/tabs/tab_component.rb +34 -0
  142. data/app/components/polaris/tabs_component.html.erb +7 -0
  143. data/app/components/polaris/tabs_component.rb +37 -0
  144. data/app/components/polaris/tag_component.rb +3 -2
  145. data/app/components/polaris/text_container_component.rb +3 -3
  146. data/app/components/polaris/text_field_component.rb +25 -11
  147. data/app/components/polaris/text_style_component.rb +12 -3
  148. data/app/components/polaris/thumbnail_component.rb +3 -3
  149. data/app/components/polaris/toast_component.html.erb +21 -0
  150. data/app/components/polaris/toast_component.rb +40 -0
  151. data/app/components/polaris/top_bar/user_menu_component.html.erb +19 -0
  152. data/app/components/polaris/top_bar/user_menu_component.rb +9 -0
  153. data/app/components/polaris/visually_hidden_component.rb +1 -1
  154. data/app/helpers/polaris/form_builder.rb +44 -8
  155. data/app/helpers/polaris/url_helper.rb +3 -3
  156. data/app/helpers/polaris/view_helper.rb +37 -7
  157. data/app/validators/type_validator.rb +2 -2
  158. data/lib/generators/polaris_view_components/install_generator.rb +5 -5
  159. data/lib/polaris/view_components/engine.rb +16 -2
  160. data/lib/polaris/view_components/version.rb +1 -1
  161. data/lib/polaris_view_components.rb +1 -1
  162. metadata +85 -16
  163. data/app/components/polaris/application_component.rb +0 -35
  164. data/app/components/polaris/dropzone/component.html.erb +0 -72
  165. data/app/components/polaris/dropzone/component.rb +0 -128
  166. data/app/components/polaris/dropzone/controller.js +0 -226
  167. data/app/components/polaris/dropzone/utils.js +0 -57
  168. data/app/components/polaris/new_component.rb +0 -10
  169. data/app/helpers/polaris/conditional_helper.rb +0 -11
@@ -0,0 +1,150 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Polaris
4
+ # Lets users upload files by dragging and dropping the files into an area on a page, or activating a button.
5
+ class DropzoneComponent < Polaris::Component
6
+ include ActiveModel::Validations
7
+
8
+ SIZE_DEFAULT = :extra_large
9
+ SIZE_MAPPINGS = {
10
+ small: "Polaris-DropZone--sizeSmall",
11
+ medium: "Polaris-DropZone--sizeMedium",
12
+ large: "Polaris-DropZone--sizeLarge",
13
+ extra_large: "Polaris-DropZone--sizeExtraLarge"
14
+ }
15
+ SIZE_OPTIONS = SIZE_MAPPINGS.keys
16
+
17
+ attr_reader :label_action
18
+
19
+ validates :label_action, type: Action, allow_nil: true
20
+
21
+ def initialize(
22
+ form: nil,
23
+ attribute: nil,
24
+ name: nil,
25
+ accept: "",
26
+ direct_upload: false,
27
+ multiple: true,
28
+ size: SIZE_DEFAULT,
29
+ drop_on_page: false,
30
+ preview: true,
31
+ outline: true,
32
+ overlay_text: "Drop files to upload",
33
+ error_overlay_text: "This file type isn't accepted",
34
+ upload_error_text: "File upload failed",
35
+ label: nil,
36
+ label_hidden: true,
37
+ label_action: nil,
38
+ disabled: false,
39
+ error: false,
40
+ file_upload_button: nil,
41
+ file_upload_help: "or drop files to upload",
42
+ file_upload_arguments: {},
43
+ wrapper_arguments: {},
44
+ input_options: {},
45
+ **system_arguments
46
+ )
47
+ @form = form
48
+ @attribute = attribute
49
+ @name = name
50
+ @accept = accept
51
+ @direct_upload = direct_upload
52
+ @multiple = multiple
53
+ @size = size
54
+ @drop_on_page = drop_on_page
55
+ @preview = preview
56
+ @outline = outline
57
+ @overlay_text = overlay_text
58
+ @error_overlay_text = error_overlay_text
59
+ @upload_error_text = upload_error_text
60
+ @label = label
61
+ @label_hidden = label_hidden
62
+ @label_action = label_action
63
+ @disabled = disabled
64
+ @error = error
65
+ @file_upload_button = file_upload_button
66
+ @file_upload_button ||= "Add #{multiple ? "files" : "file"}"
67
+ @file_upload_help = file_upload_help
68
+ @file_upload_arguments = file_upload_arguments
69
+ @wrapper_arguments = wrapper_arguments
70
+ @input_options = input_options
71
+ @system_arguments = system_arguments
72
+ end
73
+
74
+ def system_arguments
75
+ {
76
+ tag: "div",
77
+ data: {
78
+ polaris_dropzone_accept_value: @accept,
79
+ polaris_dropzone_allow_multiple_value: @multiple.to_s,
80
+ polaris_dropzone_disabled_value: @disabled.to_s,
81
+ polaris_dropzone_disabled_class: "Polaris-DropZone--isDisabled",
82
+ polaris_dropzone_focused_value: "false",
83
+ polaris_dropzone_drop_on_page_value: @drop_on_page,
84
+ polaris_dropzone_render_preview_value: @preview,
85
+ polaris_dropzone_size_value: @size
86
+ }
87
+ }.deep_merge(@system_arguments).tap do |opts|
88
+ prepend_option(opts[:data], :controller, "polaris-dropzone")
89
+ prepend_option(opts[:data], :action, "click->polaris-dropzone#onClick #{drop_actions}")
90
+ opts[:classes] = class_names(
91
+ opts[:classes],
92
+ "Polaris-DropZone",
93
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)],
94
+ "Polaris-DropZone--hasOutline": @outline,
95
+ "Polaris-DropZone--isDisabled": @disabled,
96
+ "Polaris-DropZone--hasError": @error
97
+ )
98
+ end
99
+ end
100
+
101
+ def wrapper_arguments
102
+ {
103
+ form: @form,
104
+ attribute: @attribute,
105
+ name: @name,
106
+ label: @label,
107
+ label_hidden: @label_hidden,
108
+ label_action: @label_action,
109
+ error: @error
110
+ }.deep_merge(@wrapper_arguments)
111
+ end
112
+
113
+ def input_options
114
+ {
115
+ accept: @accept,
116
+ direct_upload: @direct_upload,
117
+ disabled: @disabled,
118
+ multiple: @multiple,
119
+ data: {polaris_dropzone_target: "input"}
120
+ }.deep_merge(@input_options).tap do |opts|
121
+ prepend_option(opts[:data], :action, "focus->polaris-dropzone#onFocus blur->polaris-dropzone#onBlur change->polaris-dropzone#onChange")
122
+ end
123
+ end
124
+
125
+ def file_upload_arguments
126
+ {
127
+ tag: "div",
128
+ classes: class_names(
129
+ "Polaris-DropZone-FileUpload",
130
+ "Polaris-DropZone-FileUpload--large": @size.in?(%i[large extra_large]),
131
+ "Polaris-DropZone-FileUpload--small": @size == :small
132
+ ),
133
+ data: {
134
+ polaris_dropzone_target: "fileUpload"
135
+ }
136
+ }.deep_merge(@file_upload_arguments.except(:language))
137
+ end
138
+
139
+ def drop_actions
140
+ event_scope = @drop_on_page ? "@document" : ""
141
+
142
+ [
143
+ "drop#{event_scope}->polaris-dropzone#onDrop",
144
+ "dragover#{event_scope}->polaris-dropzone#onDragOver",
145
+ "dragenter#{event_scope}->polaris-dropzone#onDragEnter",
146
+ "dragleave#{event_scope}->polaris-dropzone#onDragLeave"
147
+ ].join(" ")
148
+ end
149
+ end
150
+ end
@@ -1,15 +1,15 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class EmptyStateComponent < Polaris::NewComponent
4
+ class EmptyStateComponent < Polaris::Component
5
5
  WITHIN_DEFAULT = :page
6
6
  WITHIN_MAPPINGS = {
7
7
  WITHIN_DEFAULT => "",
8
- container: "Polaris-EmptyState--withinContentContainer",
8
+ :container => "Polaris-EmptyState--withinContentContainer"
9
9
  }
10
10
  WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
11
11
 
12
- renders_one :primary_action, -> (primary: true, **system_arguments) do
12
+ renders_one :primary_action, ->(primary: true, **system_arguments) do
13
13
  Polaris::ButtonComponent.new(primary: primary, **system_arguments)
14
14
  end
15
15
  renders_one :secondary_action, Polaris::ButtonComponent
@@ -32,7 +32,7 @@ module Polaris
32
32
  @system_arguments[:classes],
33
33
  "Polaris-EmptyState",
34
34
  WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
35
- "Polaris-EmptyState--fullWidth": full_width,
35
+ "Polaris-EmptyState--fullWidth": full_width
36
36
  )
37
37
  end
38
38
  end
@@ -1,9 +1,9 @@
1
- class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
1
+ class Polaris::ExceptionList::ItemComponent < Polaris::Component
2
2
  STATUS_DEFAULT = :default
3
3
  STATUS_MAPPINGS = {
4
4
  STATUS_DEFAULT => "",
5
5
  :critical => "Polaris-ExceptionList--statusCritical",
6
- :warning => "Polaris-ExceptionList--statusWarning",
6
+ :warning => "Polaris-ExceptionList--statusWarning"
7
7
  }
8
8
  STATUS_OPTIONS = STATUS_MAPPINGS.keys
9
9
 
@@ -21,7 +21,7 @@ class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
21
21
  @system_arguments[:classes] = class_names(
22
22
  @system_arguments[:classes],
23
23
  "Polaris-ExceptionList__Item",
24
- STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
24
+ STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)]
25
25
  )
26
26
  end
27
27
  end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ExceptionListComponent < Polaris::NewComponent
4
+ class ExceptionListComponent < Polaris::Component
5
5
  renders_many :items, Polaris::ExceptionList::ItemComponent
6
6
 
7
7
  def initialize(**system_arguments)
@@ -9,7 +9,7 @@ module Polaris
9
9
  @system_arguments[:tag] = "ul"
10
10
  @system_arguments[:classes] = class_names(
11
11
  @system_arguments[:classes],
12
- "Polaris-ExceptionList",
12
+ "Polaris-ExceptionList"
13
13
  )
14
14
  end
15
15
 
@@ -0,0 +1,35 @@
1
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
2
+ <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
3
+ <div class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right">
4
+ <% if query.present? %>
5
+ <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
6
+ <div class="Polaris-Filters-ConnectedFilterControl__Item">
7
+ <%= query %>
8
+ </div>
9
+ </div>
10
+ <% end %>
11
+ <% if items.present? %>
12
+ <div class="<%= items_wrapper_classes %>">
13
+ <% items.each do |item| %>
14
+ <%= item %>
15
+ <% end %>
16
+ </div>
17
+ <% end %>
18
+ </div>
19
+ <% if content.present? %>
20
+ <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
21
+ <%= content %>
22
+ </div>
23
+ <% end %>
24
+ </div>
25
+ <% if tags.present? %>
26
+ <div class="Polaris-Filters__TagsContainer">
27
+ <%= tags %>
28
+ </div>
29
+ <% end %>
30
+ <% if @help_text.present? %>
31
+ <div class="Polaris-Filters__HelpText">
32
+ <%= polaris_text_subdued { @help_text } %>
33
+ </div>
34
+ <% end %>
35
+ <% end %>
@@ -0,0 +1,91 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Polaris
4
+ class FiltersComponent < Polaris::Component
5
+ renders_one :query, ->(**system_arguments) do
6
+ QueryComponent.new(disabled: @disabled, **system_arguments)
7
+ end
8
+ renders_many :items, ->(**system_arguments) do
9
+ ItemComponent.new(disabled: @disabled, **system_arguments)
10
+ end
11
+ renders_one :tags
12
+
13
+ def initialize(disabled: false, help_text: nil, **system_arguments)
14
+ @disabled = disabled
15
+ @help_text = help_text
16
+ @system_arguments = system_arguments
17
+ end
18
+
19
+ def system_arguments
20
+ @system_arguments.tap do |opts|
21
+ opts[:tag] = "div"
22
+ opts[:classes] = class_names(
23
+ @system_arguments[:classes],
24
+ "Polaris-Filters"
25
+ )
26
+ end
27
+ end
28
+
29
+ def items_wrapper_classes
30
+ class_names(
31
+ "Polaris-Filters-ConnectedFilterControl__RightContainer",
32
+ "Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
33
+ "Polaris-Filters-ConnectedFilterControl--queryFieldHidden": @query.blank?
34
+ )
35
+ end
36
+
37
+ class QueryComponent < Polaris::Component
38
+ def initialize(clear_button: true, disabled: false, **system_arguments)
39
+ @disabled = disabled
40
+ @system_arguments = system_arguments.merge(
41
+ label_hidden: true,
42
+ clear_button: clear_button
43
+ )
44
+ end
45
+
46
+ def call
47
+ polaris_text_field(disabled: @disabled, **@system_arguments) do |text_field|
48
+ text_field.prefix do
49
+ polaris_icon(name: "SearchMinor")
50
+ end
51
+ end
52
+ end
53
+ end
54
+
55
+ class ItemComponent < Polaris::Component
56
+ def initialize(label:, sectioned: true, width: nil, disabled: false, **system_arguments)
57
+ @label = label
58
+ @sectioned = sectioned
59
+ @width = width
60
+ @disabled = disabled
61
+ @system_arguments = system_arguments
62
+ end
63
+
64
+ def system_arguments
65
+ @system_arguments.tap do |opts|
66
+ opts[:tag] = "div"
67
+ opts[:classes] = class_names(
68
+ @system_arguments[:classes],
69
+ "Polaris-Filters-ConnectedFilterControl__Item"
70
+ )
71
+ end
72
+ end
73
+
74
+ def popover_arguments
75
+ {
76
+ sectioned: @sectioned,
77
+ style: ("width: #{@width}" if @width.present?)
78
+ }
79
+ end
80
+
81
+ def call
82
+ render(Polaris::BaseComponent.new(**system_arguments)) do
83
+ render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover|
84
+ popover.button(disclosure: true, disabled: @disabled) { @label }
85
+ content
86
+ end
87
+ end
88
+ end
89
+ end
90
+ end
91
+ end
@@ -1,12 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class FooterHelpComponent < Polaris::NewComponent
4
+ class FooterHelpComponent < Polaris::Component
5
5
  def initialize(**system_arguments)
6
6
  @system_arguments = system_arguments
7
7
  @system_arguments[:classes] = class_names(
8
8
  @system_arguments[:classes],
9
- "Polaris-FooterHelp",
9
+ "Polaris-FooterHelp"
10
10
  )
11
11
  end
12
12
  end
@@ -1,4 +1,4 @@
1
- class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
1
+ class Polaris::FormLayout::GroupComponent < Polaris::Component
2
2
  attr_reader :position
3
3
 
4
4
  renders_many :items, "GroupItemComponent"
@@ -10,7 +10,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
10
10
  @system_arguments[:tag] = "div"
11
11
  @system_arguments[:classes] = class_names(
12
12
  @system_arguments[:classes],
13
- "Polaris-FormLayout__Items",
13
+ "Polaris-FormLayout__Items"
14
14
  )
15
15
 
16
16
  @wrapper_arguments = {}
@@ -18,17 +18,17 @@ class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
18
18
  @wrapper_arguments[:role] = "group"
19
19
  @wrapper_arguments[:classes] = class_names(
20
20
  "Polaris-FormLayout--grouped": !condensed,
21
- "Polaris-FormLayout--condensed": condensed,
21
+ "Polaris-FormLayout--condensed": condensed
22
22
  )
23
23
  end
24
24
 
25
- class GroupItemComponent < Polaris::NewComponent
25
+ class GroupItemComponent < Polaris::Component
26
26
  def initialize(**system_arguments)
27
27
  @system_arguments = system_arguments
28
28
  @system_arguments[:tag] = "div"
29
29
  @system_arguments[:classes] = class_names(
30
30
  @system_arguments[:classes],
31
- "Polaris-FormLayout__Item",
31
+ "Polaris-FormLayout__Item"
32
32
  )
33
33
  end
34
34
 
@@ -1,4 +1,4 @@
1
- class Polaris::FormLayout::ItemComponent < Polaris::NewComponent
1
+ class Polaris::FormLayout::ItemComponent < Polaris::Component
2
2
  attr_reader :position
3
3
 
4
4
  def initialize(position:, **system_arguments)
@@ -8,7 +8,7 @@ class Polaris::FormLayout::ItemComponent < Polaris::NewComponent
8
8
  @system_arguments[:tag] = "div"
9
9
  @system_arguments[:classes] = class_names(
10
10
  @system_arguments[:classes],
11
- "Polaris-FormLayout__Item",
11
+ "Polaris-FormLayout__Item"
12
12
  )
13
13
  end
14
14
 
@@ -1,12 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class FormLayoutComponent < Polaris::NewComponent
5
- renders_many :items, -> (**system_arguments) do
4
+ class FormLayoutComponent < Polaris::Component
5
+ renders_many :items, ->(**system_arguments) do
6
6
  @counter += 1
7
7
  Polaris::FormLayout::ItemComponent.new(position: @counter, **system_arguments)
8
8
  end
9
- renders_many :groups, -> (**system_arguments) do
9
+ renders_many :groups, ->(**system_arguments) do
10
10
  @counter += 1
11
11
  Polaris::FormLayout::GroupComponent.new(position: @counter, **system_arguments)
12
12
  end
@@ -18,7 +18,7 @@ module Polaris
18
18
  @system_arguments[:tag] = "div"
19
19
  @system_arguments[:classes] = class_names(
20
20
  @system_arguments[:classes],
21
- "Polaris-FormLayout",
21
+ "Polaris-FormLayout"
22
22
  )
23
23
  end
24
24
 
@@ -0,0 +1,23 @@
1
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
2
+ <% if @logo.present? && !@flush %>
3
+ <div class="Polaris-Frame-ContextualSaveBar__LogoContainer" style="width: <%= @logo.width %>">
4
+ <%= image_tag @logo.src, style: "width: #{@logo.width}", alt: @logo.alt %>
5
+ </div>
6
+ <% end %>
7
+
8
+ <div class="<%= content_classes %>">
9
+ <h2 class="Polaris-Frame-ContextualSaveBar__Message">
10
+ <%= @message %>
11
+ </h2>
12
+ <div class="Polaris-Frame-ContextualSaveBar__ActionContainer">
13
+ <%= polaris_stack(spacing: :tight) do |stack| %>
14
+ <% stack.item do %>
15
+ <%= discard_action %>
16
+ <% end %>
17
+ <% stack.item do %>
18
+ <%= save_action %>
19
+ <% end %>
20
+ <% end %>
21
+ </div>
22
+ </div>
23
+ <% end %>
@@ -0,0 +1,31 @@
1
+ class Polaris::Frame::SaveBarComponent < Polaris::Component
2
+ renders_one :save_action, ->(**system_arguments) do
3
+ Polaris::ButtonComponent.new(primary: true, **system_arguments)
4
+ end
5
+ renders_one :discard_action, Polaris::ButtonComponent
6
+
7
+ def initialize(message:, flush: false, full_width: false, logo: nil, **system_arguments)
8
+ @message = message
9
+ @flush = flush
10
+ @full_width = full_width
11
+ @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
12
+ @system_arguments = system_arguments
13
+ end
14
+
15
+ def system_arguments
16
+ @system_arguments.tap do |opts|
17
+ opts[:tag] = "div"
18
+ opts[:classes] = class_names(
19
+ @system_arguments[:classes],
20
+ "Polaris-Frame-ContextualSaveBar"
21
+ )
22
+ end
23
+ end
24
+
25
+ def content_classes
26
+ class_names(
27
+ "Polaris-Frame-ContextualSaveBar__Contents",
28
+ "Polaris-Frame-ContextualSaveBar--fullWidth": @full_width
29
+ )
30
+ end
31
+ end
@@ -0,0 +1,30 @@
1
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
2
+ <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
3
+ <%= polaris_icon(name: "MobileHamburgerMajor") %>
4
+ </button>
5
+
6
+ <% if @logo.present? %>
7
+ <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
8
+ <%= link_to(@logo.url,
9
+ class: "Polaris-TopBar__LogoLink",
10
+ style: "width: #{@logo.width}"
11
+ ) do %>
12
+ <%= image_tag @logo.src,
13
+ class: "Polaris-TopBar__Logo",
14
+ style: "width: #{@logo.width}",
15
+ alt: @logo.alt %>
16
+ <% end %>
17
+ </div>
18
+ <% end %>
19
+
20
+ <div class="Polaris-TopBar__Contents">
21
+ <%# FIXME: Not implemented yet %>
22
+ <div class="Polaris-TopBar__SearchField"></div>
23
+ <div class="Polaris-TopBar__SecondaryMenu"></div>
24
+ <div>
25
+ <div class="Polaris-TopBar-Menu__ActivatorWrapper">
26
+ <%= user_menu %>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ <% end %>
@@ -0,0 +1,18 @@
1
+ class Polaris::Frame::TopBarComponent < Polaris::Component
2
+ renders_one :user_menu, Polaris::TopBar::UserMenuComponent
3
+
4
+ def initialize(logo:, **system_arguments)
5
+ @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
6
+ @system_arguments = system_arguments
7
+ end
8
+
9
+ def system_arguments
10
+ @system_arguments.tap do |opts|
11
+ opts[:tag] = "div"
12
+ opts[:classes] = class_names(
13
+ @system_arguments[:classes],
14
+ "Polaris-TopBar"
15
+ )
16
+ end
17
+ end
18
+ end
@@ -0,0 +1,44 @@
1
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
2
+ <% if top_bar.present? %>
3
+ <div class="Polaris-Frame__TopBar">
4
+ <%= top_bar %>
5
+ </div>
6
+ <% end %>
7
+
8
+ <% if navigation.present? %>
9
+ <div data-polaris-frame-target="navigation" class="Polaris-Frame__Navigation">
10
+ <%= navigation %>
11
+ <button
12
+ data-action="polaris-frame#closeMenu"
13
+ type="button"
14
+ class="Polaris-Frame__NavigationDismiss"
15
+ tabindex="-1"
16
+ >
17
+ <%= polaris_icon(name: "MobileCancelMajor") %>
18
+ </button>
19
+ </div>
20
+ <% end %>
21
+
22
+ <% if save_bar.present? %>
23
+ <div
24
+ data-polaris-frame-target="saveBar"
25
+ class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"
26
+ >
27
+ <%= save_bar %>
28
+ </div>
29
+ <% end %>
30
+
31
+ <div data-polaris-frame-target="navigationOverlay"></div>
32
+
33
+ <main class="Polaris-Frame__Main">
34
+ <div class="Polaris-Frame__Content">
35
+ <%= content %>
36
+ </div>
37
+ </main>
38
+ <% end %>
39
+
40
+ <% if toasts.present? %>
41
+ <div class="Polaris-Frame-ToastManager">
42
+ <%= toasts %>
43
+ </div>
44
+ <% end %>
@@ -0,0 +1,33 @@
1
+ module Polaris
2
+ class FrameComponent < Polaris::Component
3
+ renders_one :top_bar, ->(**system_arguments) do
4
+ Polaris::Frame::TopBarComponent.new(logo: @logo, **system_arguments)
5
+ end
6
+ renders_one :navigation, ->(**system_arguments) do
7
+ Polaris::NavigationComponent.new(logo: @logo, **system_arguments)
8
+ end
9
+ renders_one :save_bar, ->(**system_arguments) do
10
+ Polaris::Frame::SaveBarComponent.new(logo: @logo, **system_arguments)
11
+ end
12
+ renders_one :toasts
13
+
14
+ def initialize(logo: nil, **system_arguments)
15
+ @logo = logo && Polaris::Logo.new(**logo)
16
+ @system_arguments = system_arguments
17
+ end
18
+
19
+ def system_arguments
20
+ @system_arguments.tap do |opts|
21
+ opts[:tag] = "div"
22
+ opts[:data] ||= {}
23
+ prepend_option(@system_arguments[:data], :controller, "polaris-frame")
24
+ opts[:classes] = class_names(
25
+ opts[:classes],
26
+ "Polaris-Frame",
27
+ "Polaris-Frame--hasNav": navigation.present?,
28
+ "Polaris-Frame--hasTopBar": top_bar.present?
29
+ )
30
+ end
31
+ end
32
+ end
33
+ end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class HeadingComponent < Polaris::NewComponent
4
+ class HeadingComponent < Polaris::Component
5
5
  ELEMENT_DEFAULT = :h2
6
6
  ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
7
7
 
@@ -13,7 +13,7 @@ module Polaris
13
13
  @system_arguments[:tag] = element
14
14
  @system_arguments[:classes] = class_names(
15
15
  @system_arguments[:classes],
16
- 'Polaris-Heading'
16
+ "Polaris-Heading"
17
17
  )
18
18
  end
19
19
 
@@ -19,4 +19,17 @@
19
19
  <%= content %>
20
20
  </div>
21
21
  <% end %>
22
+
23
+ <% if @disclosure.present? %>
24
+ <div class="Polaris-Button__Icon">
25
+ <% case @disclosure %>
26
+ <% when :down %>
27
+ <%= polaris_icon(name: "CaretDownMinor") %>
28
+ <% when :up %>
29
+ <%= polaris_icon(name: "CaretUpMinor") %>
30
+ <% when :select %>
31
+ <%= polaris_icon(name: "SelectMinor") %>
32
+ <% end %>
33
+ </div>
34
+ <% end %>
22
35
  </span>