ariadne_view_components 0.0.59 → 0.0.64

Sign up to get free protection for your applications and to get access to all the features.
Files changed (264) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +68 -0
  3. data/LICENSE.txt +661 -49
  4. data/README.md +52 -4
  5. data/app/assets/javascripts/ariadne_view_components.js +98 -7
  6. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  7. data/app/assets/stylesheets/ariadne_view_components.css +1 -7
  8. data/app/components/ariadne/base_component.rb +79 -27
  9. data/app/components/ariadne/behaviors/tooltipable.rb +120 -0
  10. data/app/components/ariadne/conditional_wrapper.rb +21 -0
  11. data/app/components/ariadne/form/base_component.rb +74 -0
  12. data/app/components/ariadne/form/base_input_component.rb +60 -0
  13. data/app/components/ariadne/form/caption/component.html.erb +10 -0
  14. data/app/components/ariadne/form/caption/component.rb +29 -0
  15. data/app/components/ariadne/form/form_control/component.html.erb +19 -0
  16. data/app/components/ariadne/form/form_control/component.rb +27 -0
  17. data/app/components/ariadne/form/form_reference/component.html.erb +1 -0
  18. data/app/components/ariadne/form/form_reference/component.rb +18 -0
  19. data/app/components/ariadne/form/group/component.html.erb +5 -0
  20. data/app/components/ariadne/form/group/component.rb +27 -0
  21. data/app/components/ariadne/form/hidden_field/component.html.erb +1 -0
  22. data/app/components/ariadne/form/hidden_field/component.rb +15 -0
  23. data/app/components/ariadne/form/separator/component.html.erb +1 -0
  24. data/app/components/ariadne/form/separator/component.rb +8 -0
  25. data/app/components/ariadne/form/spacing_wrapper/component.html.erb +3 -0
  26. data/app/components/ariadne/form/spacing_wrapper/component.rb +8 -0
  27. data/app/components/ariadne/form/text_field/component.html.erb +25 -0
  28. data/app/components/ariadne/form/text_field/component.rb +132 -0
  29. data/app/components/ariadne/form/validation_message/component.html.erb +5 -0
  30. data/app/components/ariadne/form/validation_message/component.rb +14 -0
  31. data/app/components/ariadne/layout/narrow/component.html.erb +10 -0
  32. data/app/components/ariadne/layout/narrow/component.rb +24 -0
  33. data/app/components/ariadne/layout/nav_bar/component.css +0 -0
  34. data/app/components/ariadne/layout/nav_bar/component.html.erb +123 -0
  35. data/app/components/ariadne/layout/nav_bar/component.rb +77 -0
  36. data/app/components/ariadne/ui/button/component.html.erb +5 -0
  37. data/app/components/ariadne/ui/button/component.rb +184 -0
  38. data/app/components/ariadne/ui/clipboard_copy/component.html.erb +8 -0
  39. data/app/components/ariadne/ui/clipboard_copy/component.rb +102 -0
  40. data/app/components/ariadne/ui/clipboard_copy/component.ts +54 -0
  41. data/app/components/ariadne/ui/combobox/component.html.erb +32 -0
  42. data/app/components/ariadne/ui/combobox/component.rb +83 -0
  43. data/app/components/ariadne/ui/combobox/component.ts +119 -0
  44. data/app/components/ariadne/ui/combobox/menu_item/component.html.erb +9 -0
  45. data/app/components/ariadne/ui/combobox/menu_item/component.rb +53 -0
  46. data/app/components/ariadne/ui/combobox/option/component.html.erb +11 -0
  47. data/app/components/ariadne/ui/combobox/option/component.rb +45 -0
  48. data/app/components/ariadne/ui/heroicon/component.html.erb +3 -0
  49. data/app/components/ariadne/ui/heroicon/component.rb +141 -0
  50. data/app/components/ariadne/ui/image/component.rb +69 -0
  51. data/app/components/ariadne/ui/link/component.html.erb +3 -0
  52. data/app/components/ariadne/ui/link/component.rb +56 -0
  53. data/app/components/ariadne/ui/typography/component.html.erb +3 -0
  54. data/app/components/ariadne/ui/typography/component.rb +41 -0
  55. data/app/lib/ariadne/attributes_helper.rb +119 -0
  56. data/app/lib/ariadne/fetch_or_fallback_helper.rb +1 -1
  57. data/app/lib/ariadne/form.rb +16 -0
  58. data/app/lib/ariadne/view_helper.rb +2 -5
  59. data/app/lib/view_components_contrib/html_attrs.rb +64 -0
  60. data/app/lib/view_components_contrib/style_variants.rb +14 -0
  61. data/lib/ariadne/forms/acts_as_component.rb +125 -0
  62. data/lib/ariadne/forms/base.html.erb +8 -0
  63. data/lib/ariadne/forms/base.rb +132 -0
  64. data/lib/ariadne/forms/buffer_rewriter.rb +51 -0
  65. data/lib/ariadne/forms/builder.rb +88 -0
  66. data/lib/ariadne/forms/dsl/button_input.rb +33 -0
  67. data/lib/ariadne/forms/dsl/form_object.rb +26 -0
  68. data/lib/ariadne/forms/dsl/input.rb +322 -0
  69. data/lib/ariadne/forms/dsl/input_group.rb +34 -0
  70. data/lib/ariadne/forms/dsl/input_methods.rb +157 -0
  71. data/lib/ariadne/forms/dsl/submit_button_input.rb +36 -0
  72. data/lib/ariadne/forms/dsl/text_field_input.rb +73 -0
  73. data/lib/ariadne/forms/utils.rb +34 -0
  74. data/lib/ariadne/generate.rb +11 -0
  75. data/lib/ariadne/view_components/engine.rb +24 -7
  76. data/lib/ariadne/view_components/version.rb +1 -1
  77. data/lib/ariadne/view_components.rb +1 -1
  78. data/lib/ariadne/yard/backend.rb +24 -0
  79. data/lib/ariadne/yard/component_manifest.rb +148 -0
  80. data/lib/ariadne/yard/component_ref.rb +49 -0
  81. data/lib/ariadne/yard/docs_helper.rb +98 -0
  82. data/lib/ariadne/yard/info_arch_docs_helper.rb +31 -0
  83. data/lib/ariadne/yard/lookbook_docs_helper.rb +32 -0
  84. data/lib/ariadne/yard/lookbook_pages_backend.rb +235 -0
  85. data/lib/ariadne/yard/registry.rb +136 -0
  86. data/lib/ariadne/yard/renders_many_handler.rb +23 -0
  87. data/lib/ariadne/yard/renders_one_handler.rb +23 -0
  88. data/lib/ariadne/yard.rb +19 -0
  89. data/static/arguments.yml +141 -48
  90. data/static/audited_at.json +0 -9
  91. data/static/classes.yml +210 -209
  92. data/static/constants.json +2 -209
  93. data/static/statuses.json +0 -9
  94. metadata +125 -210
  95. data/app/assets/builds/ariadne_view_components.css +0 -2202
  96. data/app/assets/javascripts/components/ariadne/accumulator_controller/accumulator_controller.d.ts +0 -22
  97. data/app/assets/javascripts/components/ariadne/ariadne-form.d.ts +0 -22
  98. data/app/assets/javascripts/components/ariadne/ariadne.d.ts +0 -2
  99. data/app/assets/javascripts/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +0 -4
  100. data/app/assets/javascripts/components/ariadne/dropdown/menu_component.d.ts +0 -1
  101. data/app/assets/javascripts/components/ariadne/events_controller/events_controller.d.ts +0 -4
  102. data/app/assets/javascripts/components/ariadne/options_controller/options_controller.d.ts +0 -39
  103. data/app/assets/javascripts/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts +0 -42
  104. data/app/assets/javascripts/components/ariadne/slideover_component/slideover-component.d.ts +0 -9
  105. data/app/assets/javascripts/components/ariadne/string_match_controller/string_match_controller.d.ts +0 -27
  106. data/app/assets/javascripts/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts +0 -48
  107. data/app/assets/javascripts/components/ariadne/tab_container_component/tab-container-component.d.ts +0 -1
  108. data/app/assets/javascripts/components/ariadne/tab_nav_component/tab-nav-component.d.ts +0 -9
  109. data/app/assets/javascripts/components/ariadne/time_ago_component/time-ago-component.d.ts +0 -1
  110. data/app/assets/javascripts/components/ariadne/toggleable_controller/toggleable_controller.d.ts +0 -34
  111. data/app/assets/javascripts/components/ariadne/tooltip_component/tooltip-component.d.ts +0 -24
  112. data/app/assets/stylesheets/dropdown.css +0 -46
  113. data/app/assets/stylesheets/prosemirror.css +0 -323
  114. data/app/assets/stylesheets/tooltip-component.css +0 -37
  115. data/app/components/ariadne/accumulator_controller/accumulator_controller.d.ts +0 -22
  116. data/app/components/ariadne/accumulator_controller/accumulator_controller.js +0 -39
  117. data/app/components/ariadne/accumulator_controller/accumulator_controller.ts +0 -48
  118. data/app/components/ariadne/action_card_component.html.erb +0 -13
  119. data/app/components/ariadne/action_card_component.rb +0 -88
  120. data/app/components/ariadne/ariadne-form.d.ts +0 -22
  121. data/app/components/ariadne/ariadne-form.js +0 -85
  122. data/app/components/ariadne/ariadne.d.ts +0 -2
  123. data/app/components/ariadne/ariadne.js +0 -24
  124. data/app/components/ariadne/ariadne.ts +0 -29
  125. data/app/components/ariadne/avatar_component.rb +0 -81
  126. data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +0 -12
  127. data/app/components/ariadne/avatar_stack_component.rb +0 -75
  128. data/app/components/ariadne/base_button.rb +0 -70
  129. data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +0 -26
  130. data/app/components/ariadne/blankslate_component.rb +0 -148
  131. data/app/components/ariadne/body_component.rb +0 -30
  132. data/app/components/ariadne/bottom_tab_component.html.erb +0 -4
  133. data/app/components/ariadne/bottom_tab_component.rb +0 -44
  134. data/app/components/ariadne/bottom_tab_nav_component.html.erb +0 -5
  135. data/app/components/ariadne/bottom_tab_nav_component.rb +0 -33
  136. data/app/components/ariadne/breadcrumbs_component.html.erb +0 -13
  137. data/app/components/ariadne/breadcrumbs_component.rb +0 -31
  138. data/app/components/ariadne/button_component/button_component.html.erb +0 -4
  139. data/app/components/ariadne/button_component.rb +0 -165
  140. data/app/components/ariadne/checkbox_component.html.erb +0 -5
  141. data/app/components/ariadne/checkbox_component.rb +0 -43
  142. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +0 -4
  143. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.js +0 -18
  144. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +0 -19
  145. data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +0 -9
  146. data/app/components/ariadne/clipboard_copy_component.rb +0 -90
  147. data/app/components/ariadne/close_button_component.html.erb +0 -4
  148. data/app/components/ariadne/close_button_component.rb +0 -33
  149. data/app/components/ariadne/combobox_component.html.erb +0 -14
  150. data/app/components/ariadne/combobox_component.rb +0 -76
  151. data/app/components/ariadne/component.rb +0 -127
  152. data/app/components/ariadne/container_component/container_component.html.erb +0 -3
  153. data/app/components/ariadne/container_component.rb +0 -25
  154. data/app/components/ariadne/content.rb +0 -12
  155. data/app/components/ariadne/counter_component.rb +0 -100
  156. data/app/components/ariadne/details_component/details_component.html.erb +0 -4
  157. data/app/components/ariadne/details_component.rb +0 -81
  158. data/app/components/ariadne/dropdown/menu_component.d.ts +0 -1
  159. data/app/components/ariadne/dropdown/menu_component.html.erb +0 -20
  160. data/app/components/ariadne/dropdown/menu_component.js +0 -1
  161. data/app/components/ariadne/dropdown/menu_component.rb +0 -101
  162. data/app/components/ariadne/dropdown/menu_component.ts +0 -1
  163. data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +0 -8
  164. data/app/components/ariadne/dropdown_component.rb +0 -172
  165. data/app/components/ariadne/events_controller/events_controller.d.ts +0 -4
  166. data/app/components/ariadne/events_controller/events_controller.js +0 -6
  167. data/app/components/ariadne/events_controller/events_controller.ts +0 -7
  168. data/app/components/ariadne/flash_component/flash_component.html.erb +0 -31
  169. data/app/components/ariadne/flash_component.rb +0 -128
  170. data/app/components/ariadne/flex_component/flex_component.html.erb +0 -5
  171. data/app/components/ariadne/flex_component.rb +0 -56
  172. data/app/components/ariadne/footer_component/footer_component.html.erb +0 -7
  173. data/app/components/ariadne/footer_component.rb +0 -23
  174. data/app/components/ariadne/grid_component/grid_component.html.erb +0 -26
  175. data/app/components/ariadne/grid_component.rb +0 -67
  176. data/app/components/ariadne/header_component/header_component.html.erb +0 -29
  177. data/app/components/ariadne/header_component.rb +0 -111
  178. data/app/components/ariadne/heading_component.rb +0 -49
  179. data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +0 -4
  180. data/app/components/ariadne/heroicon_component.rb +0 -166
  181. data/app/components/ariadne/image_component.rb +0 -53
  182. data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +0 -6
  183. data/app/components/ariadne/inline_flex_component.rb +0 -72
  184. data/app/components/ariadne/layout_component.html.erb +0 -21
  185. data/app/components/ariadne/layout_component.rb +0 -69
  186. data/app/components/ariadne/link_component.rb +0 -65
  187. data/app/components/ariadne/list_component/list_component.html.erb +0 -3
  188. data/app/components/ariadne/list_component.rb +0 -70
  189. data/app/components/ariadne/modal_component.html.erb +0 -11
  190. data/app/components/ariadne/modal_component.rb +0 -88
  191. data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +0 -3
  192. data/app/components/ariadne/narrow_container_component.rb +0 -30
  193. data/app/components/ariadne/options_controller/options_controller.d.ts +0 -39
  194. data/app/components/ariadne/options_controller/options_controller.js +0 -89
  195. data/app/components/ariadne/options_controller/options_controller.ts +0 -122
  196. data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts +0 -42
  197. data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.js +0 -237
  198. data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.ts +0 -278
  199. data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +0 -20
  200. data/app/components/ariadne/panel_bar_component.rb +0 -80
  201. data/app/components/ariadne/pill_component/pill_component.html.erb +0 -3
  202. data/app/components/ariadne/pill_component.rb +0 -44
  203. data/app/components/ariadne/popover_component.html.erb +0 -10
  204. data/app/components/ariadne/popover_component.rb +0 -81
  205. data/app/components/ariadne/progress_bar_component.html.erb +0 -5
  206. data/app/components/ariadne/progress_bar_component.rb +0 -63
  207. data/app/components/ariadne/relative_time_component.html.erb +0 -3
  208. data/app/components/ariadne/relative_time_component.rb +0 -61
  209. data/app/components/ariadne/show_more_button_component.html.erb +0 -11
  210. data/app/components/ariadne/show_more_button_component.rb +0 -47
  211. data/app/components/ariadne/slideover_component/slideover-component.d.ts +0 -9
  212. data/app/components/ariadne/slideover_component/slideover-component.js +0 -11
  213. data/app/components/ariadne/slideover_component/slideover-component.ts +0 -17
  214. data/app/components/ariadne/slideover_component/slideover_component.html.erb +0 -9
  215. data/app/components/ariadne/slideover_component.rb +0 -66
  216. data/app/components/ariadne/spinner_component.html.erb +0 -16
  217. data/app/components/ariadne/spinner_component.rb +0 -45
  218. data/app/components/ariadne/string_match_controller/string_match_controller.d.ts +0 -27
  219. data/app/components/ariadne/string_match_controller/string_match_controller.js +0 -51
  220. data/app/components/ariadne/string_match_controller/string_match_controller.ts +0 -65
  221. data/app/components/ariadne/subheader_component.html.erb +0 -11
  222. data/app/components/ariadne/subheader_component.rb +0 -65
  223. data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts +0 -48
  224. data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.js +0 -207
  225. data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.ts +0 -256
  226. data/app/components/ariadne/tab_component/tab_component.html.erb +0 -3
  227. data/app/components/ariadne/tab_component.rb +0 -98
  228. data/app/components/ariadne/tab_container_component/tab-container-component.d.ts +0 -1
  229. data/app/components/ariadne/tab_container_component/tab-container-component.js +0 -23
  230. data/app/components/ariadne/tab_container_component/tab-container-component.ts +0 -24
  231. data/app/components/ariadne/tab_container_component.erb +0 -10
  232. data/app/components/ariadne/tab_container_component.rb +0 -68
  233. data/app/components/ariadne/tab_nav_component/tab-nav-component.d.ts +0 -9
  234. data/app/components/ariadne/tab_nav_component/tab-nav-component.js +0 -33
  235. data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +0 -34
  236. data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +0 -7
  237. data/app/components/ariadne/tab_nav_component.rb +0 -72
  238. data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +0 -52
  239. data/app/components/ariadne/table_nav_component.rb +0 -338
  240. data/app/components/ariadne/text.rb +0 -25
  241. data/app/components/ariadne/time_ago_component/time-ago-component.d.ts +0 -1
  242. data/app/components/ariadne/time_ago_component/time-ago-component.js +0 -1
  243. data/app/components/ariadne/time_ago_component/time-ago-component.ts +0 -1
  244. data/app/components/ariadne/time_ago_component.rb +0 -56
  245. data/app/components/ariadne/timeline_component/timeline_component.html.erb +0 -19
  246. data/app/components/ariadne/timeline_component.rb +0 -34
  247. data/app/components/ariadne/toggle_component/toggle_component.html.erb +0 -15
  248. data/app/components/ariadne/toggle_component.rb +0 -95
  249. data/app/components/ariadne/toggleable_controller/toggleable_controller.d.ts +0 -34
  250. data/app/components/ariadne/toggleable_controller/toggleable_controller.js +0 -54
  251. data/app/components/ariadne/toggleable_controller/toggleable_controller.ts +0 -77
  252. data/app/components/ariadne/tooltip_component/tooltip-component.d.ts +0 -24
  253. data/app/components/ariadne/tooltip_component/tooltip-component.js +0 -43
  254. data/app/components/ariadne/tooltip_component/tooltip-component.ts +0 -57
  255. data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +0 -4
  256. data/app/components/ariadne/tooltip_component.rb +0 -108
  257. data/app/lib/ariadne/action_view_extensions/form_helper.rb +0 -30
  258. data/app/lib/ariadne/audited/dsl.rb +0 -32
  259. data/app/lib/ariadne/form_builder.rb +0 -80
  260. data/app/lib/ariadne/status/dsl.rb +0 -41
  261. data/config/importmap.rb +0 -3
  262. data/exe/tailwindcss +0 -21
  263. data/lib/rubocop/cop/ariadne/base_cop.rb +0 -26
  264. data/tailwind.config.js +0 -70
@@ -1,29 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: :header, classes: @classes, attributes: @attributes) do |header| %>
2
- <%= render Ariadne::ContainerComponent.new do |container| %>
3
- <nav class="ariadne-relative ariadne-z-50 ariadne-flex ariadne-justify-between">
4
- <div class="ariadne-flex ariadne-items-center md:ariadne-gap-x-12">
5
- <% if has_logo? %>
6
- <%= render Ariadne::LinkComponent.new(href: @href, classes: "ariadne-text-billy-purple") do %>
7
- <% if has_image_logo? %>
8
- <span class="ariadne-sr-only"><%= @text %></span>
9
- <% end %>
10
- <%= logo %>
11
- <% end %>
12
- <% end %>
13
- <div class="md:ariadne-flex md:ariadne-gap-x-6">
14
- <% navigation_links.each do |link| %>
15
- <%= link %>
16
- <% end %>
17
- </div>
18
- </div>
19
- <div class="ariadne-flex ariadne-items-center ariadne-gap-x-5 md:ariadne-gap-x-8">
20
- <div class="md:ariadne-block">
21
- <% action_links.each do |link| %>
22
- <%= link %>
23
- <% end %>
24
- </div>
25
- <%= signup_link if has_signup_link? %>
26
- <%= profile_link if has_profile_link? %>
27
- </nav>
28
- <% end %>
29
- <% end %>
@@ -1,111 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Represents the top navigation bar on every page.
5
- class HeaderComponent < Ariadne::Component
6
- DEFAULT_CLASSES = "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-pt-4 ariadne-h-16 ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500"
7
- LINK_CLASSES = "ariadne-rounded-lg ariadne-py-1 ariadne-px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
8
-
9
- DEFAULT_TEXT_LOGO_CLASSES = "ariadne-flex ariadne-items-center ariadne-font-bold ariadne-text-xl"
10
- DEFAULT_IMAGE_LOGO_CLASSES = "ariadne-h-10 ariadne-w-auto"
11
-
12
- # Leading visuals at the far left of the header. You can pass either
13
- # `src` or `as_text` but not both.
14
- #
15
- # @param href [String] Where the logo should link to.
16
- # @param src [String] The URL of the image logo.
17
- # @param alt [String] Alt text for accessibility.
18
- # @param text [Boolean] The text to display
19
- # @param classes [String] <%= link_to_classes_docs %>
20
- # @param attributes [Hash] <%= link_to_attributes_docs %>
21
- renders_one :logo, lambda { |href: nil, src: nil, alt: nil, text: "", classes: "", attributes: {}|
22
- @href = href
23
- @text = text
24
-
25
- if src.blank?
26
- actual_classes = merge_class_names(DEFAULT_TEXT_LOGO_CLASSES, classes)
27
- Ariadne::Text.new(tag: :span, classes: actual_classes, attributes: attributes)
28
- else
29
- actual_classes = merge_class_names(DEFAULT_IMAGE_LOGO_CLASSES, classes)
30
- actual_attributes = { width: 40, height: 40 }.merge(attributes)
31
- @image_logo = Ariadne::ImageComponent.new(src: src, alt: alt, classes: actual_classes, attributes: actual_attributes)
32
- end
33
- }
34
-
35
- # Text within the header, representing navigation.
36
- #
37
- # @param tag [String, Symbol] The tag to use for the link.
38
- # @param href [String] The link destination.
39
- # @param classes [String] <%= link_to_classes_docs %>
40
- # @param attributes [Hash] <%= link_to_attributes_docs %>
41
- DEFAULT_NAV_LINK_CLASSES = "ariadne-inline-block ariadne-rounded-lg ariadne-py-1 ariadne-px-2 ariadne-text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
42
- renders_many :navigation_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
43
- actual_classes = merge_class_names(DEFAULT_NAV_LINK_CLASSES, classes)
44
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
45
- }
46
-
47
- # Text within the header, representing actions.
48
- #
49
- # @param tag [String, Symbol] The tag to use for the link.
50
- # @param href [String] The link destination.
51
- # @param classes [String] <%= link_to_classes_docs %>
52
- # @param attributes [Hash] <%= link_to_attributes_docs %>
53
- renders_many :action_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
54
- actual_classes = merge_class_names(DEFAULT_NAV_LINK_CLASSES, classes)
55
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
56
- }
57
-
58
- # Text within the header, representing a signup.
59
- #
60
- # @param tag [String, Symbol] The tag to use for the link.
61
- # @param href [String] The link destination.
62
- # @param classes [String] <%= link_to_classes_docs %>
63
- # @param attributes [Hash] <%= link_to_attributes_docs %>
64
- DEFAULT_SIGNUP_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2"
65
- renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
66
- actual_classes = merge_class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
67
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
68
- }
69
-
70
- DEFAULT_PROFILE_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2"
71
- renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
72
- actual_classes = merge_class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
73
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
74
- }
75
-
76
- # @example Basic example
77
- #
78
- # <%= render(Ariadne::HeaderComponent.new) do |header| %>
79
- # <%= header.logo(text: true) { "GitHub" } %>
80
- # <%= header.navigation_link(href: "#features") { "Features" } %>
81
- # <%= header.login_link(href: "/login") { "Login" } %>
82
- # <% end %>
83
- #
84
- # @param classes [String] <%= link_to_classes_docs %>
85
- # @param attributes [Hash] <%= link_to_attributes_docs %>
86
- def initialize(classes: "", attributes: {})
87
- @classes = merge_class_names(
88
- DEFAULT_CLASSES,
89
- classes,
90
- )
91
-
92
- @attributes = attributes
93
- end
94
-
95
- private def has_logo?
96
- logo.present?
97
- end
98
-
99
- private def has_image_logo?
100
- has_logo? && @image_logo.present?
101
- end
102
-
103
- private def has_signup_link?
104
- signup_link.present?
105
- end
106
-
107
- private def has_profile_link?
108
- profile_link.present?
109
- end
110
- end
111
- end
@@ -1,49 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # `Heading` should be used to communicate page organization and hierarchy.
5
- #
6
- # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
7
- # - Use `Heading` as the title of a section or sub section.
8
- # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Ariadne::Text) %> with relevant <%= link_to_typography_docs %>
9
- # such as `font_size` and `font_weight`.
10
- # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
11
- #
12
- # @accessibility
13
- # While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
14
- # When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
15
- # consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
16
- #
17
- # Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
18
- # <%= link_to_heading_practices %>
19
- class HeadingComponent < Ariadne::Component
20
- TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
21
-
22
- TAG_TO_CLASSES = {
23
- h1: "ariadne-font-bold ariadne-leading-7 sm:ariadne-text-3xl",
24
- h2: "ariadne-text-3xl ariadne-font-extrabold",
25
- h3: "ariadne-text-2xl ariadne-font-extrabold",
26
- }
27
- # @example Default
28
- # <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
29
- # <%= render(Ariadne::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
30
- # <%= render(Ariadne::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
31
- # <%= render(Ariadne::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
32
- # <%= render(Ariadne::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
33
- # <%= render(Ariadne::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
34
- #
35
- # @param tag [String] <%= one_of(Ariadne::HeadingComponent::TAG_OPTIONS) %>
36
- # @param classes [String] <%= link_to_classes_docs %>
37
- # @param attributes [Hash] <%= link_to_attributes_docs %>
38
- def initialize(tag: nil, classes: "", attributes: {})
39
- @tag = fetch_or_raise(TAG_OPTIONS, tag)
40
- @attributes = attributes
41
-
42
- @classes = merge_class_names(*TAG_TO_CLASSES[tag], classes)
43
- end
44
-
45
- def call
46
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
47
- end
48
- end
49
- end
@@ -1,4 +0,0 @@
1
- <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
2
- <%= @icon.path %>
3
- <% end %>
4
- <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @text_attributes)) { content } if content.present? %>
@@ -1,166 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- require "heroicons_helper"
4
-
5
- module Ariadne
6
- # `Heroicon` renders an <%= link_to_heroicons %> with <%= link_to_attributes_docs %>.
7
- # `Heroicon` can also be rendered with the `heroicon` helper.
8
- class HeroiconComponent < Ariadne::Component
9
- DEFAULT_TEXT_CLASSES = "ariadne-pl-2"
10
-
11
- include IconHelper
12
- include HeroiconsHelper
13
-
14
- SIZE_XSMALL = :xs
15
- SIZE_SMALL = :sm
16
- SIZE_DEFAULT = :md
17
- SIZE_LARGE = :lg
18
-
19
- SIZE_MAPPINGS = {
20
- SIZE_XSMALL => 16,
21
- SIZE_SMALL => 20,
22
- SIZE_DEFAULT => 24,
23
- SIZE_LARGE => 128,
24
- }.freeze
25
- SIZE_OPTIONS = SIZE_MAPPINGS.keys
26
-
27
- PRELOADED_ICONS = [
28
- {
29
- name: "bell",
30
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
31
- },
32
- {
33
- name: "check",
34
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
35
- },
36
- {
37
- name: "chevron-down",
38
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
39
- },
40
- {
41
- name: "clipboard",
42
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
43
- },
44
- {
45
- name: "clock",
46
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
47
- },
48
- {
49
- name: "information-circle",
50
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
51
- },
52
- {
53
- name: "dots-horizontal",
54
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
55
- },
56
- {
57
- name: "link",
58
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
59
- },
60
- {
61
- name: "lock-closed",
62
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
63
- },
64
- {
65
- name: "mail",
66
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
67
- },
68
- {
69
- name: "menu",
70
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
71
- },
72
- {
73
- name: "pencil",
74
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
75
- },
76
- {
77
- name: "plus-sm",
78
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
79
- },
80
- {
81
- name: "question-mark-circle",
82
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
83
- },
84
- {
85
- name: "search",
86
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
87
- },
88
- {
89
- name: "search",
90
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
91
- },
92
- {
93
- name: "trash",
94
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
95
- },
96
- {
97
- name: "x-mark",
98
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
99
- },
100
- ].freeze
101
-
102
- # @example Default
103
- # <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)) %>
104
- # <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
105
- #
106
- # @example Medium
107
- # <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :md)) %>
108
- #
109
- # @example Helper
110
- # <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
111
- #
112
- # @param tag [Symbol, String] The rendered tag name
113
- # @param classes [String] <%= link_to_classes_docs %>
114
- # @param icon [Symbol, String] Name of <%= link_to_heroicons %> to use.
115
- # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
116
- # @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
117
- # @param attributes [Hash] <%= link_to_attributes_docs %>
118
- # @param text_classes [String] <%= link_to_classes_docs %>
119
- # @param text_attributes [Hash] <%= link_to_attributes_docs %>
120
- def initialize(tag: :svg, icon:, variant:, size: SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {})
121
- @tag = check_incoming_tag(:svg, tag)
122
-
123
- check_icon_presence!(icon, variant)
124
-
125
- @attributes = attributes
126
- @attributes[:aria] ||= {}
127
-
128
- if @attributes[:aria][:label] || @attributes[:"aria-label"]
129
- @attributes[:role] = "img"
130
- else
131
- @attributes[:aria][:hidden] = true
132
- end
133
-
134
- # Don't allow sizes under 16px
135
- if attributes[:height].present? && attributes[:height].to_i < 16 || attributes[:width].present? && attributes[:width].to_i < 16
136
- attributes.delete(:height)
137
- attributes.delete(:width)
138
- end
139
-
140
- # Filter out classify options to prevent them from becoming invalid html attributes.
141
- # Note height and width are both classify options and valid html attributes.
142
- attributes = {
143
- height: @attributes[:height] || SIZE_MAPPINGS[fetch_or_raise(SIZE_OPTIONS, size)],
144
- width: @attributes[:width],
145
- }
146
-
147
- @icon = heroicon(icon, variant: variant, **attributes)
148
- @classes = merge_class_names(
149
- @icon.attributes[:class],
150
- classes,
151
- )
152
- @attributes.merge!(@icon.attributes.except(:class, :"aria-hidden"))
153
-
154
- @text_classes = merge_class_names(DEFAULT_TEXT_CLASSES, text_classes)
155
- @text_attributes = text_attributes
156
- end
157
-
158
- class << self
159
- def _after_compile
160
- HeroiconsHelper::Cache.preload!(PRELOADED_ICONS) do |found, icon|
161
- HeroiconComponent.new(icon: icon[:name], variant: icon[:variant]) unless found
162
- end
163
- end
164
- end
165
- end
166
- end
@@ -1,53 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Use `Image` to render images.
5
- #
6
- # @accessibility
7
- # Always provide a meaningful `alt`.
8
- class ImageComponent < Ariadne::Component
9
- DEFAULT_TAG = :img
10
-
11
- # @example Default
12
- #
13
- # <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
14
- #
15
- # @example Helper
16
- #
17
- # <%= ariadne_image(src: "https://github.com/github.png", alt: "GitHub") %>
18
- #
19
- # @example Lazy loading
20
- #
21
- # <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
22
- #
23
- # @example Custom size
24
- #
25
- # <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
26
- #
27
- # @param tag [Symbol, String] The rendered tag name
28
- # @param src [String] The source url of the image.
29
- # @param alt [String] Specifies an alternate text for the image.
30
- # @param lazy [Boolean] Whether or not to lazily load the image.
31
- # @param classes [String] <%= link_to_classes_docs %>
32
- # @param attributes [Hash] <%= link_to_attributes_docs %>
33
- def initialize(tag: DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {})
34
- @attributes = attributes
35
-
36
- @src = src
37
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
38
- @classes = classes
39
-
40
- @attributes[:alt] = alt
41
- @attributes[:src] = @src
42
-
43
- return unless lazy
44
-
45
- @attributes[:loading] = :lazy
46
- @attributes[:decoding] = :async
47
- end
48
-
49
- def call
50
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes))
51
- end
52
- end
53
- end
@@ -1,6 +0,0 @@
1
- <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @classes, attributes: @attributes)) do |component| %>
2
- <%= icon %>
3
- <%= item %>
4
- <%= text %>
5
- <%= dropdown %>
6
- <% end %>
@@ -1,72 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon)
5
- # with optional text.
6
- #
7
- # InlineFlexComponent differs from HeroiconComponent in that it is intended to be
8
- # used within (or next to) text, whereas HeroiconComponent is intended to only
9
- # present a static list of SVG images (and can be embedded in buttons or shown alone).
10
- class InlineFlexComponent < Ariadne::Component
11
- DEFAULT_TAG = :span
12
- DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-baseline"
13
-
14
- STATE_OPTIONS = [:closed, :open].freeze
15
-
16
- STATE_OPEN_SVG = <<~MSG
17
- <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
18
- <circle cx="12" cy="12" r="10"></circle>
19
- </svg>
20
- MSG
21
- STATE_CLOSED_SVG = <<~MSG
22
- <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed ariadne-fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
23
- <circle cx="12" cy="12" r="10"></circle>
24
- </svg>
25
- MSG
26
-
27
- DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
28
- DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
29
- DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
30
- renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
31
- actual_text_classes = merge_class_names(DEFAULT_TEXT_CLASSES, text_classes)
32
- Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
33
- }
34
-
35
- renders_one :item, lambda { |classes: "", attributes: {}|
36
- Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
37
- }
38
-
39
- DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
40
- renders_one :text, lambda { |classes: "", attributes: {}|
41
- actual_classes = merge_class_names(DEFAULT_LABEL_CLASSES, classes)
42
- Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
43
- }
44
-
45
- renders_one :dropdown, "Ariadne::DropdownComponent"
46
-
47
- # @example Default
48
- #
49
- # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
50
- # <% c.with_item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
51
- # <% end %>
52
- #
53
- # # TODO: STATE_CLOSED_SVG colors didn't show until it was listed in an example
54
- # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
55
- # <% c.with_item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
56
- # <% end %>
57
- #
58
- # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
59
- # <% c.with_icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
60
- # <% c.with_text { "Closed" } %>
61
- # <% end %>
62
- #
63
- # @param tag [Symbol, String] The rendered tag name
64
- # @param classes [String] <%= link_to_classes_docs %>
65
- # @param attributes [Hash] <%= link_to_attributes_docs %>
66
- def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
67
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
68
- @classes = merge_class_names(DEFAULT_CLASSES, classes)
69
- @attributes = attributes
70
- end
71
- end
72
- end
@@ -1,21 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
2
- <% if sidecars? %>
3
- <%= render Ariadne::BaseComponent.new(tag: @sidecar_tag, classes: @sidecar_classes, attributes: @sidecar_attributes) do %>
4
- <% sidecars.each do |sidecar| %>
5
- <%= sidecar %>
6
- <% end %>
7
- <% end %>
8
- <% end %>
9
- <%= render Ariadne::BaseComponent.new(tag: @main_tag, classes: @main_classes, attributes: @main_attributes) do %>
10
- <% mains.each do |main| %>
11
- <%= main %>
12
- <% end %>
13
- <% end %>
14
- <% if asides? %>
15
- <%= render Ariadne::BaseComponent.new(tag: @aside_tag, classes: @aside_classes, attributes: @aside_attributes) do %>
16
- <% asides.each do |aside| %>
17
- <%= aside %>
18
- <% end %>
19
- <% end %>
20
- <% end %>
21
- <% end %>
@@ -1,69 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Layout component to control the widths of 1-3 columns
5
- class LayoutComponent < Ariadne::Component
6
- DEFAULT_TAG = :div
7
- DEFAULT_SIDECAR_TAG = :div
8
- DEFAULT_ASIDE_TAG = :div
9
- DEFAULT_MAIN_TAG = :div
10
-
11
- DEFAULT_CLASSES = {
12
- wrapper: "ariadne-group ariadne-flex ariadne-gap-2 ariadne-flex-col md:ariadne-flex-row",
13
- sidecar: "ariadne-w-full md:ariadne-w-1/6",
14
- main: "ariadne-grow",
15
- aside: "ariadne-w-full md:ariadne-w-1/6",
16
- }
17
-
18
- DEFAULT_ATTRIBUTES = {
19
- wrapper: {},
20
- sidecar: {},
21
- main: {},
22
- aside: {},
23
- }
24
-
25
- renders_many :sidecars
26
-
27
- renders_many :mains
28
-
29
- renders_many :asides
30
-
31
- # @example Default
32
- #
33
- # <%= render(Ariadne::LayoutComponent.new) { "Example" } %>
34
- #
35
- # @param tag [Symbol, String] The rendered tag name.
36
- # @param classes [String] <%= link_to_classes_docs %>
37
- # @param attributes [Hash] <%= link_to_attributes_docs %>
38
- def initialize(
39
- tag: DEFAULT_TAG,
40
- classes: "",
41
- attributes: {},
42
- main_tag: DEFAULT_MAIN_TAG,
43
- main_classes: "",
44
- main_attributes: {},
45
- sidecar_tag: DEFAULT_SIDECAR_TAG,
46
- sidecar_classes: "",
47
- sidecar_attributes: {},
48
- aside_tag: DEFAULT_ASIDE_TAG,
49
- aside_classes: "",
50
- aside_attributes: {}
51
- )
52
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
53
- @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
54
- @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
55
-
56
- @sidecar_tag = check_incoming_tag(DEFAULT_SIDECAR_TAG, tag)
57
- @sidecar_attributes = DEFAULT_ATTRIBUTES[:sidecar].merge(sidecar_attributes)
58
- @sidecar_classes = merge_class_names(DEFAULT_CLASSES[:sidecar], sidecar_classes)
59
-
60
- @main_tag = check_incoming_tag(DEFAULT_MAIN_TAG, tag)
61
- @main_attributes = DEFAULT_ATTRIBUTES[:main].merge(main_attributes)
62
- @main_classes = merge_class_names(DEFAULT_CLASSES[:main], main_classes)
63
-
64
- @aside_tag = check_incoming_tag(DEFAULT_ASIDE_TAG, tag)
65
- @aside_attributes = DEFAULT_ATTRIBUTES[:aside].merge(aside_attributes)
66
- @aside_classes = merge_class_names(DEFAULT_CLASSES[:aside], aside_classes)
67
- end
68
- end
69
- end
@@ -1,65 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default styling and hover text-decoration.
5
- class LinkComponent < Ariadne::Component
6
- DEFAULT_TAG = :a
7
- TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
8
-
9
- DEFAULT_CLASSES = "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
10
- DEFAULT_ACTIONABLE_CLASSES = "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double"
11
-
12
- # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
13
- # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
14
- # Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
15
- #
16
- # @param tag [Symbol, String] The rendered tag name
17
- # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
18
- # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
19
- # @param classes [String] <%= link_to_classes_docs %>
20
- # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>.
21
- renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, type: Ariadne::TooltipComponent::TYPE_DEFAULT, classes: "", attributes: {}|
22
- raise ArgumentError, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." if @id.blank?
23
-
24
- Ariadne::TooltipComponent.new(tag: tag, for_id: @id, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
25
- }
26
-
27
- # @example Default
28
- # <%= render(Ariadne::LinkComponent.new(href: "#")) { "Link" } %>
29
- #
30
- # @example Span as link
31
- # <%= render(Ariadne::LinkComponent.new(tag: :span, href: "#")) { "Span as a link" } %>
32
- #
33
- # @example With tooltip
34
- # @description
35
- # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
36
- # @code
37
- # <%= render(Ariadne::LinkComponent.new(href: "#", attributes: { id: "link-with-tooltip" })) do |c| %>
38
- # <% c.with_tooltip(text: "Tooltip text") %>
39
- # Link
40
- # <% end %>
41
- #
42
- # @param tag [String] <%= one_of(Ariadne::LinkComponent::TAG_OPTIONS) %>
43
- # @param href [String] URL to be used for the link.
44
- # @param actionable [Boolean] If true, adds additional classes to the link to make it more aware.
45
- # @param classes [String] <%= link_to_classes_docs %>
46
- # @param attributes [Hash] <%= link_to_attributes_docs %>
47
- def initialize(tag: DEFAULT_TAG, href:, actionable: false, classes: "", attributes: {})
48
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
49
-
50
- @attributes = attributes
51
- @attributes[:href] = href
52
-
53
- @id = @attributes[:id]
54
-
55
- @classes = merge_class_names(DEFAULT_CLASSES, classes)
56
- @classes << DEFAULT_ACTIONABLE_CLASSES if actionable
57
- end
58
-
59
- def call
60
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do
61
- content.to_s + tooltip.to_s
62
- end
63
- end
64
- end
65
- end
@@ -1,3 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
2
- <%= content %>
3
- <% end %>