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,31 @@
1
+ <%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
2
+ <div data-polaris-popover-target="activator">
3
+ <% if activator.present? %>
4
+ <%= activator %>
5
+ <% elsif button.present? %>
6
+ <%= button %>
7
+ <% end %>
8
+ </div>
9
+
10
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
11
+ <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
12
+ <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
13
+ <div style="">
14
+ <div class="Polaris-Popover__Wrapper">
15
+ <%= render Polaris::BaseComponent.new(**content_arguments) do %>
16
+ <% if panes.present? %>
17
+ <% panes.each do |pane| %>
18
+ <%= pane %>
19
+ <% end %>
20
+ <% else %>
21
+ <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
22
+ <%= content %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+ </div>
27
+ </div>
28
+ <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
29
+ <% end %>
30
+ <% end %>
31
+ <% end %>
@@ -0,0 +1,113 @@
1
+ module Polaris
2
+ class PopoverComponent < Polaris::Component
3
+ ALIGNMENT_DEFAULT = :center
4
+ ALIGNMENT_OPTIONS = [:left, :right, :center]
5
+
6
+ POSITION_DEFAULT = :auto
7
+ POSITION_OPTIONS = [:auto, :above, :below]
8
+
9
+ renders_one :button, ->(**system_arguments) do
10
+ system_arguments[:data] ||= {}
11
+ prepend_option(system_arguments[:data], :action, "polaris-popover#toggle click@window->polaris-popover#hide")
12
+ Polaris::ButtonComponent.new(**system_arguments)
13
+ end
14
+ renders_one :activator
15
+ renders_many :panes, Polaris::Popover::PaneComponent
16
+
17
+ def initialize(
18
+ active: false,
19
+ inline: true,
20
+ fixed: false,
21
+ fluid_content: false,
22
+ full_height: false,
23
+ full_width: false,
24
+ sectioned: false,
25
+ alignment: ALIGNMENT_DEFAULT,
26
+ position: POSITION_DEFAULT,
27
+ wrapper_arguments: {},
28
+ **system_arguments
29
+ )
30
+ @active = active
31
+ @inline = inline
32
+ @fixed = fixed
33
+ @fluid_content = fluid_content
34
+ @full_height = full_height
35
+ @full_width = full_width
36
+ @sectioned = sectioned
37
+ @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
38
+ @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
39
+ @wrapper_arguments = wrapper_arguments
40
+ @system_arguments = system_arguments
41
+ @popover_arguments = {}
42
+ @content_arguments = {}
43
+ end
44
+
45
+ def wrapper_arguments
46
+ @wrapper_arguments.tap do |opts|
47
+ opts[:tag] = "div"
48
+ opts[:data] ||= {}
49
+ prepend_option(opts[:data], :controller, "polaris-popover")
50
+ opts[:data][:polaris_popover_active_value] = @active
51
+ opts[:data][:polaris_popover_placement_value] = popperjs_placement
52
+ opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
53
+ opts[:data][:polaris_popover_closed_class] = "Polaris-Popover__PopoverOverlay--closed"
54
+ if @inline
55
+ prepend_option(opts, :style, "display: inline-block;")
56
+ end
57
+ end
58
+ end
59
+
60
+ def system_arguments
61
+ @system_arguments.tap do |opts|
62
+ opts[:tag] = "div"
63
+ opts[:data] ||= {}
64
+ opts[:data]["polaris_popover_target"] = "popover"
65
+ opts[:classes] = class_names(
66
+ @system_arguments[:classes],
67
+ "Polaris-PositionedOverlay",
68
+ "Polaris-Popover__PopoverOverlay",
69
+ "Polaris-Popover__PopoverOverlay--closed",
70
+ "Polaris-Popover__PopoverOverlay--fixed": @fixed
71
+ )
72
+ end
73
+ end
74
+
75
+ def popover_arguments
76
+ @popover_arguments.tap do |opts|
77
+ opts[:tag] = "div"
78
+ opts[:classes] = class_names(
79
+ @content_arguments[:classes],
80
+ "Polaris-Popover",
81
+ "Polaris-Popover--fullWidth": @full_width,
82
+ "Polaris-Popover--positionedAbove": @position == :above
83
+ )
84
+ end
85
+ end
86
+
87
+ def content_arguments
88
+ @content_arguments.tap do |opts|
89
+ opts[:tag] = "div"
90
+ opts[:tabindex] ||= "-1"
91
+ opts[:classes] = class_names(
92
+ @content_arguments[:classes],
93
+ "Polaris-Popover__Content",
94
+ "Polaris-Popover__Content--fluidContent": @fluid_content,
95
+ "Polaris-Popover__Content--fullHeight": @full_height
96
+ )
97
+ end
98
+ end
99
+
100
+ def popperjs_placement
101
+ placement =
102
+ case @position
103
+ when :above then "top"
104
+ when :below then "bottom"
105
+ else
106
+ "auto"
107
+ end
108
+ placement += "-start" if @alignment == :left
109
+ placement += "-end" if @alignment == :right
110
+ placement
111
+ end
112
+ end
113
+ end
@@ -1,20 +1,20 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ProgressBarComponent < Polaris::NewComponent
4
+ class ProgressBarComponent < Polaris::Component
5
5
  COLOR_DEFAULT = :highlight
6
6
  COLOR_MAPPINGS = {
7
7
  COLOR_DEFAULT => "Polaris-ProgressBar--colorHighlight",
8
- primary: "Polaris-ProgressBar--colorPrimary",
9
- success: "Polaris-ProgressBar--colorSuccess",
8
+ :primary => "Polaris-ProgressBar--colorPrimary",
9
+ :success => "Polaris-ProgressBar--colorSuccess"
10
10
  }
11
11
  COLOR_OPTIONS = COLOR_MAPPINGS.keys
12
12
 
13
13
  SIZE_DEFAULT = :medium
14
14
  SIZE_MAPPINGS = {
15
15
  SIZE_DEFAULT => "Polaris-ProgressBar--sizeMedium",
16
- small: "Polaris-ProgressBar--sizeSmall",
17
- large: "Polaris-ProgressBar--sizeLarge",
16
+ :small => "Polaris-ProgressBar--sizeSmall",
17
+ :large => "Polaris-ProgressBar--sizeLarge"
18
18
  }
19
19
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
20
20
 
@@ -31,7 +31,7 @@ module Polaris
31
31
  @system_arguments[:classes],
32
32
  "Polaris-ProgressBar",
33
33
  COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
34
- SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
34
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
35
35
  )
36
36
 
37
37
  @animated = animated
@@ -1,11 +1,6 @@
1
1
  <%= render Polaris::ChoiceComponent.new(**wrapper_arguments) do %>
2
2
  <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
3
- <% if @form.present? && @attribute.present? %>
4
- <%= @form.radio_button(@attribute, @value, @input_options) %>
5
- <% else %>
6
- <%= radio_button_tag(@name, @value, @checked, @input_options) %>
7
- <% end %>
8
-
3
+ <%= radio_button %>
9
4
  <span class="Polaris-RadioButton__Backdrop"></span>
10
5
  <% end %>
11
6
  <% end %>
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class RadioButtonComponent < Polaris::NewComponent
4
+ class RadioButtonComponent < Polaris::Component
5
5
  def initialize(
6
6
  form: nil,
7
7
  attribute: nil,
@@ -20,6 +20,7 @@ module Polaris
20
20
  @attribute = attribute
21
21
  @name = name
22
22
  @checked = checked
23
+ @disabled = disabled
23
24
  @value = value
24
25
 
25
26
  @system_arguments = system_arguments
@@ -27,23 +28,20 @@ module Polaris
27
28
  @system_arguments[:classes] = class_names(
28
29
  @system_arguments[:classes],
29
30
  "Polaris-RadioButton",
30
- "Polaris-RadioButton--labelHidden": label_hidden,
31
+ "Polaris-RadioButton--labelHidden": label_hidden
31
32
  )
32
33
 
33
34
  @wrapper_arguments = {
34
35
  label: label,
35
36
  label_hidden: label_hidden,
36
37
  help_text: help_text,
37
- disabled: disabled,
38
+ disabled: disabled
38
39
  }.merge(wrapper_arguments)
39
40
 
40
41
  @input_options = input_options
41
- @input_options[:aria] ||= {}
42
- @input_options[:disabled] = true if disabled
43
- @input_options[:aria][:checked] = checked
44
- @input_options[:class] = class_names(
42
+ @input_options[:classes] = class_names(
45
43
  @input_options[:classes],
46
- "Polaris-RadioButton__Input",
44
+ "Polaris-RadioButton__Input"
47
45
  )
48
46
  end
49
47
 
@@ -51,5 +49,17 @@ module Polaris
51
49
  @wrapper_arguments[:children_content] = content
52
50
  @wrapper_arguments
53
51
  end
52
+
53
+ def radio_button
54
+ render Polaris::BaseRadioButton.new(
55
+ form: @form,
56
+ attribute: @attribute,
57
+ name: @name,
58
+ checked: @checked,
59
+ disabled: @disabled,
60
+ value: @value,
61
+ **@input_options
62
+ )
63
+ end
54
64
  end
55
65
  end
@@ -11,12 +11,22 @@
11
11
  <% end %>
12
12
 
13
13
  <%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
14
- <% if media.present? %>
15
- <div class="Polaris-ResourceItem__Owned">
16
- <div class="Polaris-ResourceItem__Media">
17
- <%= media %>
18
- </div>
19
- </div>
14
+ <% if owned? %>
15
+ <%= render(Polaris::BaseComponent.new(**owned_arguments)) do %>
16
+ <% if checkbox.present? || radio_button.present? %>
17
+ <div class="Polaris-ResourceItem__Handle">
18
+ <div class="Polaris-ResourceItem__CheckboxWrapper">
19
+ <%= checkbox.presence || radio_button %>
20
+ </div>
21
+ </div>
22
+ <% end %>
23
+
24
+ <% if media.present? %>
25
+ <div class="Polaris-ResourceItem__Media">
26
+ <%= media %>
27
+ </div>
28
+ <% end %>
29
+ <% end %>
20
30
  <% end %>
21
31
  <div class="Polaris-ResourceItem__Content">
22
32
  <%= content %>
@@ -1,28 +1,44 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ResourceItemComponent < Polaris::NewComponent
4
+ class ResourceItemComponent < Polaris::Component
5
5
  CURSOR_DEFAULT = :default
6
6
  CURSOR_OPTIONS = %i[default pointer]
7
7
 
8
8
  ALIGNMENT_DEFAULT = :default
9
9
  ALIGNMENT_MAPPINGS = {
10
10
  ALIGNMENT_DEFAULT => "",
11
- center: "Polaris-ResourceItem--alignmentCenter",
11
+ :center => "Polaris-ResourceItem--alignmentCenter"
12
12
  }
13
13
  ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
14
14
 
15
+ renders_one :checkbox, ->(**system_arguments) do
16
+ Polaris::CheckboxComponent.new(
17
+ label_hidden: true,
18
+ **system_arguments
19
+ )
20
+ end
21
+ renders_one :radio_button, ->(**system_arguments) do
22
+ Polaris::RadioButtonComponent.new(
23
+ label_hidden: true,
24
+ **system_arguments
25
+ )
26
+ end
15
27
  renders_one :media
16
28
 
17
29
  def initialize(
18
30
  url: nil,
19
31
  vertical_alignment: ALIGNMENT_DEFAULT,
32
+ selectable: false,
33
+ offset: false,
20
34
  wrapper_arguments: {},
21
35
  container_arguments: {},
22
36
  **system_arguments
23
37
  )
24
38
  @url = url
25
39
  @vertical_alignment = vertical_alignment
40
+ @selectable = selectable
41
+ @offset = offset
26
42
  @wrapper_arguments = wrapper_arguments
27
43
  @container_arguments = container_arguments
28
44
  @system_arguments = system_arguments
@@ -31,11 +47,11 @@ module Polaris
31
47
  def wrapper_arguments
32
48
  {
33
49
  tag: "li",
34
- data: {},
50
+ data: {}
35
51
  }.deep_merge(@wrapper_arguments).tap do |args|
36
52
  args[:classes] = class_names(
37
53
  args[:classes],
38
- "Polaris-ResourceItem__ListItem",
54
+ "Polaris-ResourceItem__ListItem"
39
55
  )
40
56
  prepend_option(args[:data], :controller, "polaris-resource-item")
41
57
  end
@@ -43,12 +59,12 @@ module Polaris
43
59
 
44
60
  def container_arguments
45
61
  {
46
- tag: "div",
62
+ tag: "div"
47
63
  }.deep_merge(@container_arguments).tap do |args|
48
64
  args[:classes] = class_names(
49
65
  args[:classes],
50
66
  "Polaris-ResourceItem__Container",
51
- ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)],
67
+ ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)]
52
68
  )
53
69
  end
54
70
  end
@@ -56,20 +72,37 @@ module Polaris
56
72
  def system_arguments
57
73
  {
58
74
  tag: "div",
59
- data: {},
75
+ data: {}
60
76
  }.deep_merge(@system_arguments).tap do |args|
61
77
  args[:classes] = class_names(
62
78
  args[:classes],
63
79
  "Polaris-ResourceItem",
80
+ "Polaris-ResourceItem--selectable": @selectable
64
81
  )
65
82
  prepend_option(args, :style, "cursor: #{cursor};")
66
83
  prepend_option(args[:data], :action, "click->polaris-resource-item#open")
67
84
  end
68
85
  end
69
86
 
87
+ def owned?
88
+ checkbox.present? || radio_button.present? || media.present?
89
+ end
90
+
91
+ def owned_arguments
92
+ {
93
+ tag: "div",
94
+ classes: class_names(
95
+ "Polaris-ResourceItem__Owned",
96
+ "Polaris-ResourceItem__OwnedNoMedia": media.blank?,
97
+ "Polaris-ResourceItem__Owned--offset": @offset
98
+ )
99
+ }
100
+ end
101
+
70
102
  private
71
- def cursor
72
- @url.present? ? "pointer" : "default"
73
- end
103
+
104
+ def cursor
105
+ @url.present? ? "pointer" : "default"
106
+ end
74
107
  end
75
108
  end
@@ -0,0 +1,10 @@
1
+ <%= render(Polaris::BaseComponent.new(**@wrapper_arguments)) do %>
2
+ <% if filters.present? %>
3
+ <div class="Polaris-ResourceList__FiltersWrapper">
4
+ <%= filters %>
5
+ </div>
6
+ <% end %>
7
+ <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
8
+ <%= content %>
9
+ <% end %>
10
+ <% end %>
@@ -1,7 +1,9 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ResourceListComponent < Polaris::NewComponent
4
+ class ResourceListComponent < Polaris::Component
5
+ renders_one :filters, Polaris::FiltersComponent
6
+
5
7
  def initialize(
6
8
  wrapper_arguments: {},
7
9
  **system_arguments
@@ -10,23 +12,15 @@ module Polaris
10
12
  @wrapper_arguments[:tag] = "div"
11
13
  @wrapper_arguments[:classes] = class_names(
12
14
  @wrapper_arguments[:classes],
13
- "Polaris-ResourceList__ResourceListWrapper",
15
+ "Polaris-ResourceList__ResourceListWrapper"
14
16
  )
15
17
 
16
18
  @system_arguments = system_arguments
17
19
  @system_arguments[:tag] = "ul"
18
20
  @system_arguments[:classes] = class_names(
19
21
  @system_arguments[:classes],
20
- "Polaris-ResourceList",
22
+ "Polaris-ResourceList"
21
23
  )
22
24
  end
23
-
24
- def call
25
- render(Polaris::BaseComponent.new(**@wrapper_arguments)) do
26
- render(Polaris::BaseComponent.new(**@system_arguments)) do
27
- content
28
- end
29
- end
30
- end
31
25
  end
32
26
  end
@@ -0,0 +1,5 @@
1
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
2
+ <span data-polaris-scrollable-target="topEdge"></span>
3
+ <%= content %>
4
+ <span data-polaris-scrollable-target="bottomEdge"></span>
5
+ <% end %>
@@ -0,0 +1,48 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Polaris
4
+ class ScrollableComponent < Polaris::Component
5
+ def initialize(
6
+ height: nil,
7
+ width: nil,
8
+ vertical: true,
9
+ horizontal: false,
10
+ shadow: false,
11
+ focusable: false,
12
+ **system_arguments
13
+ )
14
+ @height = height
15
+ @width = width
16
+ @vertical = vertical
17
+ @horizontal = horizontal
18
+ @shadow = shadow
19
+ @focusable = focusable
20
+ @system_arguments = system_arguments
21
+ end
22
+
23
+ def system_arguments
24
+ {
25
+ tag: "div",
26
+ data: {
27
+ polaris_scrollable_shadow_value: @shadow,
28
+ polaris_scrollable_top_shadow_class: "Polaris-Scrollable--hasTopShadow",
29
+ polaris_scrollable_bottom_shadow_class: "Polaris-Scrollable--hasBottomShadow"
30
+ }
31
+ }.deep_merge(@system_arguments).tap do |opts|
32
+ prepend_option(opts[:data], :controller, "polaris-scrollable")
33
+ opts[:tabindex] = "0" if @focusable
34
+ opts[:classes] = class_names(
35
+ @system_arguments[:classes],
36
+ "Polaris-Scrollable",
37
+ "Polaris-Scrollable--horizontal" => @horizontal,
38
+ "Polaris-Scrollable--vertical" => @vertical
39
+ )
40
+ opts[:style] = class_names(
41
+ @system_arguments[:style],
42
+ "height: #{@height};" => @height.present?,
43
+ "width: #{@width};" => @width.present?
44
+ )
45
+ end
46
+ end
47
+ end
48
+ end
@@ -1,12 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class SelectComponent < Polaris::NewComponent
4
+ class SelectComponent < Polaris::Component
5
5
  def initialize(
6
+ options:,
6
7
  form: nil,
7
8
  attribute: nil,
8
9
  name: nil,
9
- options:,
10
10
  selected: nil,
11
11
  disabled_options: nil,
12
12
  label: nil,
@@ -37,11 +37,12 @@ module Polaris
37
37
  @system_arguments[:tag] = "div"
38
38
  @system_arguments[:data] ||= {}
39
39
  prepend_option(@system_arguments[:data], :controller, "polaris-select")
40
+ prepend_option(@system_arguments[:data], :selected_value, @selected)
40
41
  @system_arguments[:classes] = class_names(
41
42
  @system_arguments[:classes],
42
43
  "Polaris-Select",
43
44
  "Polaris-Select--disabled": disabled,
44
- "Polaris-Select--error": error,
45
+ "Polaris-Select--error": error
45
46
  )
46
47
 
47
48
  @wrapper_arguments = {
@@ -53,15 +54,17 @@ module Polaris
53
54
  label_action: label_action,
54
55
  required: required,
55
56
  help_text: help_text,
56
- error: error,
57
+ error: error
57
58
  }.merge(wrapper_arguments)
58
59
 
59
- @select_options = {}
60
+ @select_options = select_options
60
61
 
61
62
  @input_options = input_options
63
+ @input_options.deep_merge!(select_options) unless @form
62
64
  @input_options[:class] = class_names(@input_options[:classes], "Polaris-Select__Input")
63
65
  @input_options[:disabled] = disabled
64
66
  @input_options[:data] ||= {}
67
+ prepend_option(@input_options[:data], :polaris_select_target, "select")
65
68
  prepend_option(@input_options[:data], :action, "polaris-select#update")
66
69
  end
67
70
 
@@ -71,7 +74,9 @@ module Polaris
71
74
 
72
75
  def selected_option
73
76
  option = @options.to_a.find { |i| i.last.to_s == @selected.to_s }
74
- option ? option.first : @options.first.first
77
+ return unless option
78
+
79
+ option.first
75
80
  end
76
81
  end
77
82
  end
@@ -0,0 +1,10 @@
1
+ <%= polaris_card do %>
2
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
3
+ <div class="Polaris-SettingAction__Setting">
4
+ <%= content %>
5
+ </div>
6
+ <div class="Polaris-SettingAction__Action">
7
+ <%= action %>
8
+ </div>
9
+ <% end %>
10
+ <% end %>
@@ -0,0 +1,24 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Polaris
4
+ class SettingToggleComponent < Polaris::Component
5
+ renders_one :action, ->(**system_arguments) do
6
+ Polaris::ButtonComponent.new(primary: !@enabled, **system_arguments)
7
+ end
8
+
9
+ def initialize(enabled: false, **system_arguments)
10
+ @enabled = enabled
11
+ @system_arguments = system_arguments
12
+ end
13
+
14
+ def system_arguments
15
+ @system_arguments.tap do |opts|
16
+ opts[:tag] = "div"
17
+ opts[:classes] = class_names(
18
+ @system_arguments[:classes],
19
+ "Polaris-SettingAction"
20
+ )
21
+ end
22
+ end
23
+ end
24
+ end
@@ -1,8 +1,8 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ShopifyNavigationComponent < Polaris::NewComponent
5
- renders_many :links, -> (**system_arguments) do
4
+ class ShopifyNavigationComponent < Polaris::Component
5
+ renders_many :links, ->(**system_arguments) do
6
6
  ShopifyNavigationLinkComponent.new(auto_detect_active: @auto_detect_active, **system_arguments)
7
7
  end
8
8
 
@@ -13,7 +13,7 @@ module Polaris
13
13
  @system_arguments[:tag] = "div"
14
14
  @system_arguments[:classes] = class_names(
15
15
  @system_arguments[:classes],
16
- "shp-Navigation",
16
+ "shp-Navigation"
17
17
  )
18
18
  end
19
19
 
@@ -21,7 +21,7 @@ module Polaris
21
21
  links.any?
22
22
  end
23
23
 
24
- class ShopifyNavigationLinkComponent < Polaris::NewComponent
24
+ class ShopifyNavigationLinkComponent < Polaris::Component
25
25
  def initialize(url:, auto_detect_active:, active: false, **system_arguments)
26
26
  @url = url
27
27
  @auto_detect_active = auto_detect_active
@@ -42,13 +42,13 @@ module Polaris
42
42
  tag: "a",
43
43
  href: @url,
44
44
  role: "tab",
45
- data: { polaris_unstyled: true },
46
- aria: {},
45
+ data: {polaris_unstyled: true},
46
+ aria: {}
47
47
  }.deep_merge(@system_arguments).tap do |args|
48
48
  args[:aria][:selected] = @active || detect_active(@url)
49
49
  args[:classes] = class_names(
50
50
  args[:classes],
51
- "shp-Navigation_Link",
51
+ "shp-Navigation_Link"
52
52
  )
53
53
  end
54
54
  end
@@ -56,7 +56,7 @@ module Polaris
56
56
  def detect_active(url)
57
57
  return unless @auto_detect_active
58
58
 
59
- request.path.include?(url.split('?').first)
59
+ request.path.include?(url.split("?").first)
60
60
  end
61
61
  end
62
62
  end
@@ -1,14 +1,14 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class SkeletonBodyTextComponent < Polaris::NewComponent
4
+ class SkeletonBodyTextComponent < Polaris::Component
5
5
  def initialize(lines: 3, **system_arguments)
6
6
  @lines = lines
7
7
  @system_arguments = system_arguments
8
8
  @system_arguments[:tag] = "div"
9
9
  @system_arguments[:classes] = class_names(
10
10
  @system_arguments[:classes],
11
- "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
11
+ "Polaris-SkeletonBodyText__SkeletonBodyTextContainer"
12
12
  )
13
13
  end
14
14
  end