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
@@ -1,12 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class HeadlessButton < Polaris::NewComponent
4
+ class HeadlessButton < Polaris::Component
5
5
  SIZE_DEFAULT = :medium
6
6
  SIZE_MAPPINGS = {
7
7
  SIZE_DEFAULT => "",
8
8
  :slim => "Polaris-Button--sizeSlim",
9
- :large => "Polaris-Button--sizeLarge",
9
+ :large => "Polaris-Button--sizeLarge"
10
10
  }
11
11
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
12
12
 
@@ -15,10 +15,13 @@ module Polaris
15
15
  TEXT_ALIGN_DEFAULT => "",
16
16
  :left => "Polaris-Button--textAlignLeft",
17
17
  :center => "Polaris-Button--textAlignCenter",
18
- :right => "Polaris-Button--textAlignRight",
18
+ :right => "Polaris-Button--textAlignRight"
19
19
  }
20
20
  TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
21
21
 
22
+ DISCLOSURE_DEFAULT = false
23
+ DISCLOSURE_OPTIONS = [true, false, :down, :up, :select]
24
+
22
25
  renders_one :icon, IconComponent
23
26
 
24
27
  def initialize(
@@ -31,6 +34,8 @@ module Polaris
31
34
  loading: false,
32
35
  destructive: false,
33
36
  disabled: false,
37
+ disable_with_loader: false,
38
+ disclosure: DISCLOSURE_DEFAULT,
34
39
  external: false,
35
40
  full_width: false,
36
41
  submit: false,
@@ -39,15 +44,17 @@ module Polaris
39
44
  text_align: TEXT_ALIGN_DEFAULT,
40
45
  **system_arguments
41
46
  )
42
- @tag = url.present? ? 'a' : 'button'
47
+ @tag = url.present? ? "a" : "button"
43
48
  @text_classes = class_names(
44
49
  "Polaris-Button__Text",
45
50
  "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
46
51
  )
47
52
  @loading = loading
53
+ @disclosure = fetch_or_fallback(DISCLOSURE_OPTIONS, disclosure, DISCLOSURE_DEFAULT)
54
+ @disclosure = :down if @disclosure === true
48
55
 
49
56
  @system_arguments = system_arguments
50
- @system_arguments[:type] = submit ? 'submit' : 'button'
57
+ @system_arguments[:type] = submit ? "submit" : "button"
51
58
  if loading
52
59
  @system_arguments[:disabled] = true
53
60
  end
@@ -59,6 +66,11 @@ module Polaris
59
66
  if disabled
60
67
  @system_arguments[:disabled] = disabled
61
68
  end
69
+ @system_arguments[:data] ||= {}
70
+ prepend_option(@system_arguments[:data], :controller, "polaris-button")
71
+ if disable_with_loader
72
+ prepend_option(@system_arguments[:data], :action, "polaris-button#disable")
73
+ end
62
74
  @system_arguments[:classes] = class_names(
63
75
  @system_arguments[:classes],
64
76
  "Polaris-Button",
@@ -80,7 +92,7 @@ module Polaris
80
92
  def system_arguments
81
93
  @system_arguments[:classes] = class_names(
82
94
  @system_arguments[:classes],
83
- "Polaris-Button--iconOnly": icon.present? && content.blank?,
95
+ "Polaris-Button--iconOnly": icon.present? && content.blank?
84
96
  )
85
97
  @system_arguments
86
98
  end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class IconComponent < Polaris::NewComponent
4
+ class IconComponent < Polaris::Component
5
5
  COLOR_DEFAULT = :default
6
6
  COLOR_MAPPINGS = {
7
7
  COLOR_DEFAULT => "",
@@ -11,7 +11,7 @@ module Polaris
11
11
  :warning => "Polaris-Icon--colorWarning",
12
12
  :highlight => "Polaris-Icon--colorHighlight",
13
13
  :success => "Polaris-Icon--colorSuccess",
14
- :primary => "Polaris-Icon--colorPrimary",
14
+ :primary => "Polaris-Icon--colorPrimary"
15
15
  }
16
16
  COLOR_OPTIONS = COLOR_MAPPINGS.keys
17
17
 
@@ -29,7 +29,7 @@ module Polaris
29
29
  "Polaris-Icon",
30
30
  COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
31
31
  "Polaris-Icon--hasBackdrop" => backdrop,
32
- "Polaris-Icon--applyColor" => color != :default,
32
+ "Polaris-Icon--applyColor" => color != :default
33
33
  )
34
34
  end
35
35
  end
@@ -0,0 +1,22 @@
1
+ class Polaris::IndexTable::CellComponent < Polaris::Component
2
+ def initialize(flush: false, **system_arguments)
3
+ @flush = flush
4
+ @system_arguments = system_arguments
5
+ end
6
+
7
+ def system_arguments
8
+ {tag: "td"}.deep_merge(@system_arguments).tap do |args|
9
+ args[:classes] = class_names(
10
+ args[:classes],
11
+ "Polaris-IndexTable__TableCell",
12
+ "Polaris-IndexTable__TableCell--flush": @flush
13
+ )
14
+ end
15
+ end
16
+
17
+ def call
18
+ render(Polaris::BaseComponent.new(**system_arguments)) do
19
+ content
20
+ end
21
+ end
22
+ end
@@ -0,0 +1,13 @@
1
+ class Polaris::IndexTable::ColumnComponent < Polaris::Component
2
+ attr_reader :title, :flush
3
+
4
+ def initialize(title, flush: false, **system_arguments, &block)
5
+ @title = title
6
+ @flush = flush
7
+ @block = block
8
+ end
9
+
10
+ def call(row)
11
+ @block.call(row)
12
+ end
13
+ end
@@ -0,0 +1,28 @@
1
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
2
+ <div class="Polaris-IndexTable-ScrollContainer">
3
+ <table class="Polaris-IndexTable__Table">
4
+ <thead>
5
+ <tr>
6
+ <% columns.each_with_index do |column, index| %>
7
+ <th class="Polaris-IndexTable__TableHeading">
8
+ <%= column.title %>
9
+ </th>
10
+ <% end %>
11
+ </tr>
12
+ </thead>
13
+ <tbody>
14
+ <% @data.each do |row| %>
15
+ <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
16
+ <% columns.each_with_index do |column, index| %>
17
+ <%= render_cell(
18
+ flush: column.flush,
19
+ ) do %>
20
+ <%= column.call(row) %>
21
+ <% end %>
22
+ <% end %>
23
+ </tr>
24
+ <% end %>
25
+ </tbody>
26
+ </table>
27
+ </div>
28
+ <% end %>
@@ -0,0 +1,25 @@
1
+ module Polaris
2
+ class IndexTableComponent < Polaris::Component
3
+ renders_many :columns, ->(title, **system_arguments, &block) do
4
+ IndexTable::ColumnComponent.new(title, **system_arguments, &block)
5
+ end
6
+
7
+ def initialize(data, **system_arguments)
8
+ @data = data
9
+ @system_arguments = system_arguments
10
+ end
11
+
12
+ def system_arguments
13
+ {tag: "div"}.deep_merge(@system_arguments).tap do |args|
14
+ args[:classes] = class_names(
15
+ args[:classes],
16
+ "Polaris-IndexTable"
17
+ )
18
+ end
19
+ end
20
+
21
+ def render_cell(**arguments, &block)
22
+ render(IndexTable::CellComponent.new(**arguments), &block)
23
+ end
24
+ end
25
+ end
@@ -1,6 +1,6 @@
1
- <div class="Polaris-InlineError">
1
+ <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
2
2
  <div class="Polaris-InlineError__Icon">
3
3
  <%= polaris_icon(name: "AlertMinor") %>
4
4
  </div>
5
5
  <%= content %>
6
- </div>
6
+ <% end %>
@@ -1,8 +1,14 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class InlineErrorComponent < Polaris::NewComponent
5
- def initialize
4
+ class InlineErrorComponent < Polaris::Component
5
+ def initialize(**system_arguments)
6
+ @system_arguments = system_arguments
7
+ @system_arguments[:tag] = "div"
8
+ @system_arguments[:classes] = class_names(
9
+ @system_arguments[:classes],
10
+ "Polaris-InlineError"
11
+ )
6
12
  end
7
13
 
8
14
  def renders?
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class LabelComponent < Polaris::NewComponent
4
+ class LabelComponent < Polaris::Component
5
5
  def initialize(
6
6
  form: nil,
7
7
  attribute: nil,
@@ -19,13 +19,13 @@ module Polaris
19
19
  @system_arguments[:tag] = "div"
20
20
  @system_arguments[:classes] = class_names(
21
21
  @system_arguments[:classes],
22
- "Polaris-Label",
22
+ "Polaris-Label"
23
23
  )
24
24
 
25
25
  @label_options = {}
26
26
  @label_options[:class] = class_names(
27
27
  "Polaris-Label__Text",
28
- "Polaris-Label__RequiredIndicator": required,
28
+ "Polaris-Label__RequiredIndicator": required
29
29
  )
30
30
  end
31
31
 
@@ -1,8 +1,8 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class LabelledComponent < Polaris::NewComponent
5
- renders_one :label_action, -> (**system_arguments) do
4
+ class LabelledComponent < Polaris::Component
5
+ renders_one :label_action, ->(**system_arguments) do
6
6
  Polaris::ButtonComponent.new(plain: true, **system_arguments)
7
7
  end
8
8
 
@@ -38,7 +38,7 @@ module Polaris
38
38
  attribute: attribute,
39
39
  name: name,
40
40
  label: label,
41
- required: required,
41
+ required: required
42
42
  }
43
43
  end
44
44
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  module Polaris
4
4
  module Layout
5
- class AnnotatedSection < Polaris::NewComponent
5
+ class AnnotatedSection < Polaris::Component
6
6
  attr_reader :position
7
7
 
8
8
  def initialize(position:, title:, description: nil, **system_arguments)
@@ -13,7 +13,7 @@ module Polaris
13
13
  @system_arguments = system_arguments
14
14
  @system_arguments[:classes] = class_names(
15
15
  @system_arguments[:classes],
16
- "Polaris-Layout__AnnotatedSection",
16
+ "Polaris-Layout__AnnotatedSection"
17
17
  )
18
18
  end
19
19
  end
@@ -2,7 +2,7 @@
2
2
 
3
3
  module Polaris
4
4
  module Layout
5
- class Section < Polaris::NewComponent
5
+ class Section < Polaris::Component
6
6
  attr_reader :position
7
7
 
8
8
  def initialize(
@@ -25,7 +25,7 @@ module Polaris
25
25
  "Polaris-Layout__Section--fullWidth" => full_width,
26
26
  "Polaris-Layout__Section--oneHalf" => one_half,
27
27
  "Polaris-Layout__Section--oneThird" => one_third,
28
- "Polaris-Layout__Section--oneFourth" => one_fourth,
28
+ "Polaris-Layout__Section--oneFourth" => one_fourth
29
29
  )
30
30
  end
31
31
 
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class LayoutComponent < Polaris::NewComponent
4
+ class LayoutComponent < Polaris::Component
5
5
  # A list of sections
6
6
  #
7
7
  # @param secondary [Boolean] The section will act like a sidebar
@@ -9,7 +9,7 @@ module Polaris
9
9
  # @param one_half [Boolean] The section will only take up 50% of the width
10
10
  # @param one_third [Boolean] The section will only take up 33.33% of the width
11
11
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
12
- renders_many :sections, -> (**system_arguments) do
12
+ renders_many :sections, ->(**system_arguments) do
13
13
  @counter += 1
14
14
  Layout::Section.new(position: @counter, **system_arguments)
15
15
  end
@@ -19,7 +19,7 @@ module Polaris
19
19
  # @param title [String] Title
20
20
  # @param description [String] Description
21
21
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
22
- renders_many :annotated_sections, -> (**system_arguments) do
22
+ renders_many :annotated_sections, ->(**system_arguments) do
23
23
  @counter += 1
24
24
  Layout::AnnotatedSection.new(position: @counter, **system_arguments)
25
25
  end
@@ -29,7 +29,7 @@ module Polaris
29
29
  @system_arguments = system_arguments
30
30
  @system_arguments[:classes] = class_names(
31
31
  @system_arguments[:classes],
32
- 'Polaris-Layout'
32
+ "Polaris-Layout"
33
33
  )
34
34
  end
35
35
 
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class LinkComponent < Polaris::NewComponent
4
+ class LinkComponent < Polaris::Component
5
5
  def initialize(
6
6
  url:,
7
7
  external: false,
@@ -24,7 +24,7 @@ module Polaris
24
24
  @system_arguments[:classes],
25
25
  "Polaris-Link",
26
26
  "Polaris-Link--monochrome" => monochrome,
27
- "Polaris-Link--removeUnderline" => no_underline,
27
+ "Polaris-Link--removeUnderline" => no_underline
28
28
  )
29
29
  end
30
30
 
@@ -32,7 +32,7 @@ module Polaris
32
32
  render(Polaris::BaseComponent.new(**@system_arguments)) do
33
33
  safe_join [
34
34
  content.strip.html_safe,
35
- (external_icon if @external),
35
+ (external_icon if @external)
36
36
  ].compact
37
37
  end
38
38
  end
@@ -42,7 +42,7 @@ module Polaris
42
42
  def external_icon
43
43
  tag.span(class: "Polaris-Link__IconLockup") do
44
44
  tag.span(class: "Polaris-Link__IconLayout") do
45
- polaris_icon(name: "ExternalSmallMinor", aria: { label: "(opens a new window)" })
45
+ polaris_icon(name: "ExternalSmallMinor", aria: {label: "(opens a new window)"})
46
46
  end
47
47
  end
48
48
  end
@@ -1,17 +1,17 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ListComponent < Polaris::NewComponent
4
+ class ListComponent < Polaris::Component
5
5
  renders_many :items, "ListItemComponent"
6
6
 
7
7
  TYPE_DEFAULT = :bullet
8
8
  TYPE_TAG_MAPPINGS = {
9
9
  bullet: :ul,
10
- number: :ol,
10
+ number: :ol
11
11
  }
12
12
  TYPE_CLASS_MAPPINGS = {
13
13
  bullet: "",
14
- number: "Polaris-List--typeNumber",
14
+ number: "Polaris-List--typeNumber"
15
15
  }
16
16
  TYPE_OPTIONS = TYPE_TAG_MAPPINGS.keys
17
17
 
@@ -24,11 +24,11 @@ module Polaris
24
24
  @system_arguments[:classes] = class_names(
25
25
  @system_arguments[:classes],
26
26
  "Polaris-List",
27
- TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")],
27
+ TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")]
28
28
  )
29
29
  end
30
30
 
31
- class ListItemComponent < Polaris::NewComponent
31
+ class ListItemComponent < Polaris::Component
32
32
  def initialize(**system_arguments)
33
33
  @system_arguments = system_arguments
34
34
  @system_arguments[:tag] = :li
@@ -0,0 +1,13 @@
1
+ class Polaris::Logo
2
+ attr_reader :src
3
+ attr_reader :url
4
+ attr_reader :alt
5
+ attr_reader :width
6
+
7
+ def initialize(src:, url: nil, alt: nil, width: "125px")
8
+ @url = url
9
+ @src = src
10
+ @alt = alt
11
+ @width = width
12
+ end
13
+ end
@@ -0,0 +1,19 @@
1
+ class Polaris::Modal::SectionComponent < Polaris::Component
2
+ def initialize(**system_arguments)
3
+ @system_arguments = system_arguments
4
+ end
5
+
6
+ def system_arguments
7
+ @system_arguments.tap do |opts|
8
+ opts[:tag] = "div"
9
+ opts[:classes] = class_names(
10
+ @system_arguments[:classes],
11
+ "Polaris-Modal-Section"
12
+ )
13
+ end
14
+ end
15
+
16
+ def call
17
+ render(Polaris::BaseComponent.new(**system_arguments)) { content }
18
+ end
19
+ end
@@ -0,0 +1,79 @@
1
+ <% modal_content = capture do %>
2
+ <% if sections.present? %>
3
+ <% sections.each do |section| %>
4
+ <%= section %>
5
+ <% end %>
6
+ <% end %>
7
+
8
+ <% if content.present? %>
9
+ <% if @sectioned %>
10
+ <%= render Polaris::Modal::SectionComponent.new do %>
11
+ <%= content %>
12
+ <% end %>
13
+ <% else %>
14
+ <%= content %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+
19
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
20
+ <div>
21
+ <%= render(Polaris::BaseComponent.new(**dialog_arguments)) do %>
22
+ <div class="<%= modal_classes %>">
23
+ <div class="<%= header_classes %>">
24
+ <div class="Polaris-Modal-Header__Title">
25
+ <%= polaris_display_text(element: :h2, size: :small) do %>
26
+ <%= @title %>
27
+ <% end %>
28
+ </div>
29
+ <% if close_button.present? %>
30
+ <%= close_button %>
31
+ <% else %>
32
+ <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
33
+ <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
34
+ <% end %>
35
+ <% end %>
36
+ </div>
37
+
38
+ <div class="Polaris-Modal__BodyWrapper">
39
+ <% if @scrollable %>
40
+ <%= polaris_scrollable(classes: "Polaris-Modal__Body") do %>
41
+ <%= modal_content %>
42
+ <% end %>
43
+ <% else %>
44
+ <%= modal_content %>
45
+ <% end %>
46
+ </div>
47
+
48
+ <% if render_footer? %>
49
+ <div class="Polaris-Modal-Footer">
50
+ <div class="Polaris-Modal-Footer__FooterContent">
51
+ <%= polaris_stack(alignment: :center) do |stack| %>
52
+ <% stack.item(fill: true) do %>
53
+ <% end %>
54
+
55
+ <% stack.item do %>
56
+ <%= polaris_button_group do |group| %>
57
+ <% if secondary_actions %>
58
+ <% secondary_actions.each do |action| %>
59
+ <% group.item do %>
60
+ <%= action %>
61
+ <% end %>
62
+ <% end %>
63
+
64
+ <% if primary_action %>
65
+ <% group.item do %>
66
+ <%= primary_action %>
67
+ <% end %>
68
+ <% end %>
69
+ <% end %>
70
+ <% end %>
71
+ <% end %>
72
+ <% end %>
73
+ </div>
74
+ </div>
75
+ <% end %>
76
+ </div>
77
+ <% end %>
78
+ </div>
79
+ <% end %>
@@ -0,0 +1,98 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Polaris
4
+ class ModalComponent < Polaris::Component
5
+ renders_one :close_button, ->(**system_arguments) do
6
+ button_arguments = @close_button_arguments.deep_merge(system_arguments)
7
+ render(Polaris::BaseComponent.new(**button_arguments)) do
8
+ polaris_icon(name: "MobileCancelMajor", color: :base)
9
+ end
10
+ end
11
+ renders_many :sections, Polaris::Modal::SectionComponent
12
+ renders_one :primary_action, ->(primary: true, **system_arguments) do
13
+ Polaris::ButtonComponent.new(primary: primary, **system_arguments)
14
+ end
15
+ renders_many :secondary_actions, Polaris::ButtonComponent
16
+
17
+ def initialize(
18
+ title:,
19
+ open: false,
20
+ sectioned: true,
21
+ scrollable: true,
22
+ large: false,
23
+ small: false,
24
+ limit_height: false,
25
+ dialog_arguments: {},
26
+ **system_arguments
27
+ )
28
+ @title = title
29
+ @open = open
30
+ @sectioned = sectioned
31
+ @scrollable = scrollable
32
+ @large = large
33
+ @small = small
34
+ @limit_height = limit_height
35
+ @dialog_arguments = dialog_arguments
36
+ @system_arguments = system_arguments
37
+ @close_button_arguments = {
38
+ tag: "button",
39
+ type: "button",
40
+ classes: "Polaris-Modal-CloseButton",
41
+ aria: {label: "Close"}
42
+ }
43
+ end
44
+
45
+ def system_arguments
46
+ @system_arguments.tap do |opts|
47
+ opts[:tag] = "div"
48
+ opts[:data] ||= {}
49
+ prepend_option(opts[:data], :controller, "polaris-modal")
50
+ opts[:data][:polaris_modal_open_value] = @open
51
+ opts[:data][:polaris_modal_hidden_class] = "Polaris--hidden"
52
+ opts[:data][:polaris_modal_backdrop_class] = "Polaris-Backdrop"
53
+ opts[:classes] = class_names(
54
+ @system_arguments[:classes],
55
+ "Polaris-Modal-Dialog__Container",
56
+ "Polaris--hidden"
57
+ )
58
+ end
59
+ end
60
+
61
+ def dialog_arguments
62
+ @dialog_arguments.tap do |opts|
63
+ opts[:tag] = "div"
64
+ opts[:role] = "dialog"
65
+ opts[:aria] ||= {}
66
+ opts[:aria][:modal] = "true"
67
+ opts[:tabindex] = "-1"
68
+ opts[:classes] = class_names(
69
+ @dialog_arguments[:classes],
70
+ "Polaris-Modal-Dialog"
71
+ )
72
+ end
73
+ end
74
+
75
+ def close_button_arguments
76
+ @close_button_arguments.deep_merge({
77
+ data: {action: "polaris-modal#close"}
78
+ })
79
+ end
80
+
81
+ def modal_classes
82
+ class_names(
83
+ "Polaris-Modal-Dialog__Modal",
84
+ "Polaris-Modal-Dialog--sizeLarge": @large,
85
+ "Polaris-Modal-Dialog--sizeSmall": @small,
86
+ "Polaris-Modal-Dialog--limitHeight": @limit_height
87
+ )
88
+ end
89
+
90
+ def header_classes
91
+ @title.present? ? "Polaris-Modal-Header" : "Polaris-Modal-Header--titleHidden"
92
+ end
93
+
94
+ def render_footer?
95
+ primary_action.present? || secondary_actions.any?
96
+ end
97
+ end
98
+ end
@@ -0,0 +1,31 @@
1
+ <%= render Polaris::BaseComponent.new(**system_arguments) do %>
2
+ <div class="Polaris-Navigation__ItemWrapper">
3
+ <%= link_to @url, class: link_classes, tabindex: "0" do %>
4
+ <% if @icon.present? %>
5
+ <div class="Polaris-Navigation__Icon">
6
+ <%= polaris_icon(name: @icon) %>
7
+ </div>
8
+ <% end %>
9
+ <span class="Polaris-Navigation__Text">
10
+ <%= @label %>
11
+ </span>
12
+ <% if @badge.present? %>
13
+ <div class="Polaris-Navigation__Badge">
14
+ <%= polaris_badge { @badge } %>
15
+ </div>
16
+ <% end %>
17
+ <% end %>
18
+ <%= secondary_action %>
19
+ </div>
20
+ <% if sub_items.present? %>
21
+ <div class="Polaris-Navigation__SecondaryNavigation Polaris-Navigation--isExpanded">
22
+ <div class="Polaris-Collapsible" style="max-height: none; overflow: visible;">
23
+ <ul class="Polaris-Navigation__List">
24
+ <% sub_items.each do |sub_item| %>
25
+ <%= sub_item %>
26
+ <% end %>
27
+ </ul>
28
+ </div>
29
+ </div>
30
+ <% end %>
31
+ <% end %>