ariadne_view_components 0.0.58 → 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 +70 -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,25 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # `Text` is a wrapper component that will apply typography styles to the text inside.
5
- class Text < Ariadne::Component
6
- DEFAULT_TAG = :span
7
-
8
- # @example Default
9
- # <%= render(Ariadne::Text.new(tag: :p, attributes: { font_weight: :bold })) { "Bold Text" } %>
10
- # <%= render(Ariadne::Text.new(tag: :p, attributes: { color: :danger })) { "Danger Text" } %>
11
- #
12
- # @param tag [Symbol, String] The rendered tag name
13
- # @param classes [String] <%= link_to_classes_docs %>
14
- # @param attributes [Hash] <%= link_to_attributes_docs %>
15
- def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
16
- @tag = tag
17
- @classes = classes
18
- @attributes = attributes
19
- end
20
-
21
- def call
22
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
23
- end
24
- end
25
- end
@@ -1 +0,0 @@
1
- import '@github/time-elements';
@@ -1 +0,0 @@
1
- import '@github/time-elements';
@@ -1 +0,0 @@
1
- import '@github/time-elements'
@@ -1,56 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Displays a time ariadne-relative to how long ago it was. This component requires JavaScript.
5
- class TimeAgoComponent < Ariadne::Component
6
- DEFAULT_TAG = :"time-ago"
7
- TAG_OPTIONS = [DEFAULT_TAG].freeze
8
-
9
- DEFAULT_CLASSES = "ariadne-whitespace-nowrap"
10
-
11
- # @example Default
12
- #
13
- # <%= render(Ariadne::TimeAgoComponent.new(time: Time.now)) %>
14
- #
15
- # @param tag [Symbol, String] The rendered tag name.
16
- # @param time [Time] The time to be formatted
17
- # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
18
- # @param classes [String] <%%= link_to_classes_docs %>
19
- # @param attributes [Hash] <%= link_to_attributes_docs %>
20
- def initialize(tag: DEFAULT_TAG, time:, micro: false, classes: "", attributes: {})
21
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
22
- @classes = merge_class_names(
23
- DEFAULT_CLASSES,
24
- classes,
25
- )
26
-
27
- @time = time
28
- @micro = micro
29
- @attributes = attributes
30
- @attributes[:datetime] = @time.utc.iso8601
31
- @attributes[:format] = "micro" if @micro
32
- end
33
-
34
- def call
35
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { time_in_words }
36
- end
37
-
38
- private def time_in_words
39
- return @time.in_time_zone.strftime("%b %-d, %Y") unless @micro
40
-
41
- seconds_ago = Time.current - @time
42
-
43
- if seconds_ago < 1.minute
44
- "1m"
45
- elsif seconds_ago >= 1.minute && seconds_ago < 1.hour
46
- "#{(seconds_ago / 60).floor}m"
47
- elsif seconds_ago >= 1.hour && seconds_ago < 1.day
48
- "#{(seconds_ago / 60 / 60).floor}h"
49
- elsif seconds_ago >= 1.day && seconds_ago < 1.year
50
- "#{(seconds_ago / 60 / 60 / 24).floor}d"
51
- elsif seconds_ago >= 1.year
52
- "#{(seconds_ago / 60 / 60 / 24 / 365).floor}y"
53
- end
54
- end
55
- end
56
- end
@@ -1,19 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
2
- <div>
3
- <div class="ariadne-divide-y ariadne-divide-gray-200">
4
- <div class="ariadne-pb-4">
5
- <h2 id="activity-title" class="ariadne-text-lg ariadne-font-medium ariadne-text-gray-900">Timeline</h2>
6
- </div>
7
- <div class="ariadne-pt-6">
8
- <!-- Activity feed-->
9
- <div class="ariadne-flow-root">
10
- <ul role="list" class="ariadne--mb-8">
11
- <% items.each do %>
12
- <%= items %>
13
- <% end %>
14
- </ul>
15
- </div>
16
- </div>
17
- </div>
18
- </div>
19
- <% end %>
@@ -1,34 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Represents a linear timeline of events. Typically, this is shown
5
- # as part of the Conversation component.
6
- class TimelineComponent < Ariadne::Component
7
- DEFAULT_TAG = :div
8
- DEFAULT_CLASSES = ""
9
-
10
- # The sub-items(s) to render
11
- renders_many :items, lambda { |static_content = nil, &block|
12
- next static_content if static_content.present?
13
-
14
- view_context.capture { block&.call }
15
- }
16
-
17
- # @example Default
18
- #
19
- # <%= render(Ariadne::TimelineComponent.new) { "Example" } %>
20
- #
21
- # @param tag [Symbol, String] The rendered tag name
22
- # @param classes [String] <%= link_to_classes_docs %>
23
- # @param attributes [Hash] <%= link_to_attributes_docs %>
24
- def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
25
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
26
- @classes = merge_class_names(
27
- DEFAULT_CLASSES,
28
- classes,
29
- )
30
-
31
- @attributes = attributes
32
- end
33
- end
34
- end
@@ -1,15 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |wrapper| %>
2
- <label class="ariadne-flex ariadne-w-fit ariadne-items-center <%= @label_classes %>">
3
- <% if content? %>
4
- <span class="group-data-[label-position=start]/wrapper:ariadne-mr-1.5 group-data-[label-position=end]/wrapper:ariadne-ml-1"><%= content %></span>
5
- <% end %>
6
- <%= render Ariadne::BaseComponent.new(tag: :button, classes: @button_classes, attributes: @button_attributes) do |button| %>
7
- <span class="ariadne-sr-only ariadne-translate-x-3">Use setting</span>
8
- <span aria-hidden="true" class="ariadne-pointer-events-none ariadne-absolute ariadne-h-full ariadne-w-full ariadne-rounded-md ariadne-bg-white"></span>
9
- <span aria-hidden="true"
10
- class="ariadne-bg-gray-200 ariadne-pointer-events-none ariadne-absolute ariadne-mx-auto ariadne-rounded-full ariadne-transition-colors ariadne-duration-200 ariadne-ease-in-out <%= @track_classes %>"></span>
11
- <span aria-hidden="true"
12
- class="ariadne-pointer-events-none ariadne-absolute ariadne-left-0 ariadne-inline-block ariadne-transform ariadne-rounded-full ariadne-border ariadne-border-gray-200 ariadne-bg-white ariadne-shadow ariadne-ring-0 ariadne-transition-transform ariadne-duration-200 ariadne-ease-in-out <%= @thumb_classes %>"></span>
13
- <% end %>
14
- </label>
15
- <% end %>
@@ -1,95 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Simple toggle switch with on/off state. The logic is controlled by toggleable_controller and styles applied through
5
- # tailwind's group+data attributes: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes
6
- class ToggleComponent < Ariadne::Component
7
- DEFAULT_TAG = :div
8
-
9
- DEFAULT_STATUS_LABEL_POSITION = :start
10
- STATUS_LABEL_POSITION_MAPPINGS = {
11
- start: "ariadne-flex-row",
12
- end: "ariadne-flex-row-reverse",
13
- }.freeze
14
- STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
15
-
16
- DEFAULT_SIZE = :md
17
- THUMB_SIZE_MAPPINGS = { sm: "ariadne-translate-x-0 ariadne-h-3 ariadne-w-3 group-aria-checked/toggle:ariadne-translate-x-3", md: "ariadne-translate-x-0 ariadne-h-5 ariadne-w-5 group-aria-checked/toggle:ariadne-translate-x-5" }.freeze
18
- TRACK_SIZE_MAPPINGS = { sm: "ariadne-h-2 ariadne-w-4", md: "ariadne-h-4 ariadne-w-9" }.freeze
19
- BUTTON_SIZE_MAPPINGS = { sm: "ariadne-h-3 ariadne-w-6", md: "ariadne-h-5 ariadne-w-10" }.freeze
20
- LABEL_SIZE_MAPPINGS = { sm: "ariadne-text-xs", md: "ariadne-text-lg" }.freeze
21
- SIZE_OPTIONS = THUMB_SIZE_MAPPINGS.keys.freeze
22
-
23
- DEFAULT_CLASSES = {
24
- wrapper: "ariadne-group/wrapper data-[disabled=true]:ariadne-opacity-50 data-[disabled=true]:ariadne-cursor-auto",
25
- button: "ariadne-flex ariadne-justify-center ariadne-group/toggle ariadne-relative ariadne-inline-flex ariadne-flex-shrink-0 group-data-[disabled=false]/wrapper:ariadne-cursor-pointer ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-focus:outline-none ariadne-focus:ring-2 ariadne-focus:ring-indigo-600 ariadne-focus:ring-offset-2 disabled:ariadne-cursor-auto",
26
- }
27
-
28
- DEFAULT_ATTRIBUTES = {
29
- wrapper: {}.freeze,
30
- button: {
31
- role: "switch",
32
- "data-controller": "toggleable",
33
- "data-toggleable-synced-attrs-value": '["aria-checked"]',
34
- "data-action": "click->toggleable#toggle",
35
- },
36
- }.freeze
37
-
38
- DEFAULT_TRACK_COLOR = :indigo
39
- TRACK_COLOR_MAPPINGS = {
40
- white: "group-aria-checked/toggle:ariadne-bg-white",
41
- green: "group-aria-checked/toggle:ariadne-bg-green-600",
42
- blue: "group-aria-checked/toggle:ariadne-bg-blue-600",
43
- billy_purple: "group-aria-checked/toggle:ariadne-bg-billy-purple",
44
- indigo: "group-aria-checked/toggle:ariadne-bg-indigo-600",
45
- }
46
- TRACK_COLOR_OPTIONS = TRACK_COLOR_MAPPINGS.keys.freeze
47
-
48
- # @example Default
49
- #
50
- # <%= render(Ariadne::ToggleComponent.new) { "Example" } %>
51
- #
52
- # @param classes [String] <%= link_to_classes_docs %>
53
- # @param color [String] <%= link_to_classes_docs %>
54
- # @param checked [Boolean] <%= link_to_classes_docs %>
55
- # @param disabled [Boolean] <%= link_to_classes_docs %>
56
- # @param size [String] <%= link_to_classes_docs %>
57
- # @param label [String] <%= link_to_classes_docs %>
58
- # @param status_label_position [String] <%= link_to_classes_docs %>
59
- # @param attributes [Hash] <%= link_to_attributes_docs %>
60
- def initialize(
61
- classes: nil,
62
- checked: false,
63
- disabled: false,
64
- size: DEFAULT_SIZE,
65
- color: DEFAULT_TRACK_COLOR,
66
- status_label_position: DEFAULT_STATUS_LABEL_POSITION,
67
- attributes: {}
68
- )
69
- @tag = DEFAULT_TAG
70
- @size = fetch_or_raise(SIZE_OPTIONS, size)
71
- @status_label_position = fetch_or_raise(STATUS_LABEL_POSITION_OPTIONS, status_label_position)
72
- @color = fetch_or_raise(TRACK_COLOR_OPTIONS, color)
73
- @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
74
- @checked = checked
75
- @disabled = disabled
76
- @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({ "data-label-position": @status_label_position, "data-disabled": @disabled }).merge(attributes)
77
-
78
- @label_classes = merge_class_names(STATUS_LABEL_POSITION_MAPPINGS.fetch(@status_label_position), LABEL_SIZE_MAPPINGS.fetch(@size))
79
-
80
- @button_classes = merge_class_names(DEFAULT_CLASSES[:button], BUTTON_SIZE_MAPPINGS.fetch(@size))
81
- @button_attributes = DEFAULT_ATTRIBUTES[:button].merge({ "aria-checked": @checked, "data-toggleable-state-value": @checked, disabled: @disabled })
82
-
83
- @thumb_classes = THUMB_SIZE_MAPPINGS.fetch(@size)
84
- @track_classes = merge_class_names(TRACK_SIZE_MAPPINGS.fetch(@size), TRACK_COLOR_MAPPINGS.fetch(@color))
85
- end
86
-
87
- def on?
88
- @checked
89
- end
90
-
91
- def disabled?
92
- @disabled
93
- end
94
- end
95
- end
@@ -1,34 +0,0 @@
1
- import type { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
2
- import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
3
- export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
4
- toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
5
- }
6
- export default class ToggleableController extends SyncedBooleanAttributesController<boolean> implements ToggleableOutlet {
7
- static outlets: string[];
8
- static values: {
9
- state: {
10
- type: BooleanConstructor;
11
- default: boolean;
12
- };
13
- closeOnOutsideClick: {
14
- type: BooleanConstructor;
15
- default: boolean;
16
- };
17
- syncedAttrs: ArrayConstructor;
18
- antiAttrs: ArrayConstructor;
19
- protectAttrs: BooleanConstructor;
20
- outletEvents: ArrayConstructor;
21
- };
22
- stateValue: boolean;
23
- readonly closeOnOutsideClickValue: boolean;
24
- connect(): void;
25
- toggle(event: Event, updateTo?: TOutletChangeData<boolean>): void;
26
- on(event: Event): void;
27
- off(event: Event): void;
28
- clickOutside(event: Event): void;
29
- getValueForElement(element: Element): boolean | null;
30
- getElementsToSync(): Element[] | null | undefined;
31
- getState(): boolean;
32
- get event_key_postfix(): "on" | "off";
33
- outletUpdate: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
34
- }
@@ -1,54 +0,0 @@
1
- import { useClickOutside } from 'stimulus-use';
2
- import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
3
- class ToggleableController extends SyncedBooleanAttributesController {
4
- constructor() {
5
- super(...arguments);
6
- this.outletUpdate = this.toggle;
7
- }
8
- connect() {
9
- this.syncElementAttributes();
10
- useClickOutside(this, { dispatchEvent: this.closeOnOutsideClickValue && this.stateValue });
11
- }
12
- toggle(event, updateTo = {}) {
13
- var _a;
14
- const v = (_a = updateTo.data) !== null && _a !== void 0 ? _a : !this.stateValue;
15
- this.updateAttributesForElement(this.element, v);
16
- this.stateValue = v;
17
- this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: v }));
18
- }
19
- on(event) {
20
- this.toggle(event, { data: true });
21
- }
22
- off(event) {
23
- this.toggle(event, { data: false });
24
- }
25
- clickOutside(event) {
26
- if (this.closeOnOutsideClickValue && this.stateValue) {
27
- this.toggle(event, { data: false });
28
- }
29
- }
30
- getValueForElement(element) {
31
- if (element !== this.element) {
32
- return null;
33
- }
34
- return this.stateValue;
35
- }
36
- getElementsToSync() {
37
- return [this.element];
38
- }
39
- getState() {
40
- return this.stateValue;
41
- }
42
- get event_key_postfix() {
43
- return this.stateValue ? 'on' : 'off';
44
- }
45
- }
46
- ToggleableController.outlets = SyncedBooleanAttributesController.outlets;
47
- ToggleableController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { state: {
48
- type: Boolean,
49
- default: false,
50
- }, closeOnOutsideClick: {
51
- type: Boolean,
52
- default: false,
53
- } });
54
- export default ToggleableController;
@@ -1,77 +0,0 @@
1
- import type {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
2
- import {useClickOutside} from 'stimulus-use'
3
- import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
4
-
5
- export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
6
- toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void
7
- }
8
-
9
- export default class ToggleableController
10
- extends SyncedBooleanAttributesController<boolean>
11
- implements ToggleableOutlet
12
- {
13
- static outlets = SyncedBooleanAttributesController.outlets
14
- static values = {
15
- ...SyncedBooleanAttributesController.values,
16
- state: {
17
- type: Boolean,
18
- default: false,
19
- },
20
- closeOnOutsideClick: {
21
- type: Boolean,
22
- default: false,
23
- },
24
- }
25
-
26
- declare stateValue: boolean
27
- declare readonly closeOnOutsideClickValue: boolean
28
-
29
- connect(): void {
30
- this.syncElementAttributes()
31
- useClickOutside(this, {dispatchEvent: this.closeOnOutsideClickValue && this.stateValue})
32
- }
33
-
34
- toggle(event: Event, updateTo: TOutletChangeData<boolean> = {}) {
35
- const v = updateTo.data ?? !this.stateValue
36
-
37
- this.updateAttributesForElement(this.element, v)
38
- this.stateValue = v
39
- this.sendToOutlets(event, {...updateTo, data: v})
40
- }
41
-
42
- on(event: Event) {
43
- this.toggle(event, {data: true})
44
- }
45
-
46
- off(event: Event) {
47
- this.toggle(event, {data: false})
48
- }
49
-
50
- clickOutside(event: Event) {
51
- if (this.closeOnOutsideClickValue && this.stateValue) {
52
- this.toggle(event, {data: false})
53
- }
54
- }
55
-
56
- getValueForElement(element: Element): boolean | null {
57
- if (element !== this.element) {
58
- return null
59
- }
60
-
61
- return this.stateValue
62
- }
63
-
64
- getElementsToSync(): Element[] | null | undefined {
65
- return [this.element]
66
- }
67
-
68
- getState() {
69
- return this.stateValue
70
- }
71
-
72
- get event_key_postfix() {
73
- return this.stateValue ? 'on' : 'off'
74
- }
75
-
76
- outletUpdate = this.toggle
77
- }
@@ -1,24 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import type { Instance, Placement } from '@popperjs/core';
3
- export default class TooltipComponent extends Controller {
4
- static targets: string[];
5
- readonly triggerTarget: HTMLElement;
6
- readonly tooltipTarget: HTMLElement;
7
- static values: {
8
- placement: {
9
- type: StringConstructor;
10
- default: string;
11
- };
12
- offset: {
13
- type: ArrayConstructor;
14
- default: number[];
15
- };
16
- };
17
- readonly placementValue: Placement;
18
- readonly offsetValue: Array<number>;
19
- popperInstance: Instance;
20
- connect(): void;
21
- disconnect(): void;
22
- show(): void;
23
- hide(): void;
24
- }
@@ -1,43 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import { createPopper } from '@popperjs/core';
3
- class TooltipComponent extends Controller {
4
- // Create a new Popper instance
5
- connect() {
6
- this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
7
- placement: this.placementValue,
8
- modifiers: [
9
- {
10
- name: 'offset',
11
- options: {
12
- offset: this.offsetValue,
13
- },
14
- },
15
- ],
16
- });
17
- }
18
- // Destroy the Popper instance
19
- disconnect() {
20
- if (this.popperInstance) {
21
- this.popperInstance.destroy();
22
- }
23
- }
24
- show() {
25
- this.tooltipTarget.setAttribute('data-tooltip-show', '');
26
- this.tooltipTarget.classList.remove('ariadne-invisible');
27
- // We need to tell Popper to update the tooltip position
28
- // after we show the tooltip, otherwise it will be incorrect
29
- this.popperInstance.update();
30
- this.dispatch('shown', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
31
- }
32
- hide() {
33
- this.tooltipTarget.removeAttribute('data-tooltip-show');
34
- this.tooltipTarget.classList.add('ariadne-invisible');
35
- this.dispatch('ariadne-hidden', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
36
- }
37
- }
38
- TooltipComponent.targets = ['trigger', 'tooltip'];
39
- TooltipComponent.values = {
40
- placement: { type: String, default: 'top' },
41
- offset: { type: Array, default: [0, 8] },
42
- };
43
- export default TooltipComponent;
@@ -1,57 +0,0 @@
1
- import {Controller} from '@hotwired/stimulus'
2
- import {createPopper} from '@popperjs/core'
3
- import type {Instance, Placement} from '@popperjs/core'
4
-
5
- export default class TooltipComponent extends Controller {
6
- static targets = ['trigger', 'tooltip']
7
- declare readonly triggerTarget: HTMLElement
8
- declare readonly tooltipTarget: HTMLElement
9
-
10
- static values = {
11
- placement: {type: String, default: 'top'},
12
- offset: {type: Array, default: [0, 8]},
13
- }
14
- declare readonly placementValue: Placement
15
- declare readonly offsetValue: Array<number>
16
-
17
- popperInstance: Instance
18
-
19
- // Create a new Popper instance
20
- connect() {
21
- this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
22
- placement: this.placementValue,
23
- modifiers: [
24
- {
25
- name: 'offset',
26
- options: {
27
- offset: this.offsetValue,
28
- },
29
- },
30
- ],
31
- })
32
- }
33
-
34
- // Destroy the Popper instance
35
- disconnect() {
36
- if (this.popperInstance) {
37
- this.popperInstance.destroy()
38
- }
39
- }
40
-
41
- show() {
42
- this.tooltipTarget.setAttribute('data-tooltip-show', '')
43
- this.tooltipTarget.classList.remove('ariadne-invisible')
44
-
45
- // We need to tell Popper to update the tooltip position
46
- // after we show the tooltip, otherwise it will be incorrect
47
- this.popperInstance.update()
48
- this.dispatch('shown', {detail: {trigger: this.triggerTarget, tooltip: this.tooltipTarget}})
49
- }
50
-
51
- hide() {
52
- this.tooltipTarget.removeAttribute('data-tooltip-show')
53
- this.tooltipTarget.classList.add('ariadne-invisible')
54
-
55
- this.dispatch('ariadne-hidden', {detail: {trigger: this.triggerTarget, tooltip: this.tooltipTarget}})
56
- }
57
- }
@@ -1,4 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
2
- <span><%= @text %></span>
3
- <span class="ariadne-tooltip-arrow ariadne-absolute ariadne-block" data-popper-arrow></span>
4
- <% end %>
@@ -1,108 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
5
- # Use tooltips sparingly and as a last resort.
6
- #
7
- # When using a tooltip, follow the provided guidelines to avoid accessibility issues.
8
- #
9
- # - Tooltip text should be brief and to the point. The tooltip content must be a string.
10
- # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
11
- # use tooltips to convey critical information.
12
- #
13
- # @accessibility
14
- # - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
15
- # and screen reader users.
16
- # - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
17
- # content.
18
- # ### Which `type` should I set?
19
- # Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
20
- #
21
- # The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
22
- # - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
23
- # The majority of tooltips will fall under this category.
24
- # - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
25
- # This type is usually only appropriate for an icon-only control.
26
- class TooltipComponent < Ariadne::Component
27
- DEFAULT_TAG = :tooltip
28
- DEFAULT_PLACEMENT = :top
29
- VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
30
-
31
- DEFAULT_CLASSES = "ariadne-invisible ariadne-absolute ariadne-bg-slate-900 ariadne-text-white ariadne-font-semibold ariadne-max-w-xs ariadne-py-1 ariadne-px-2 ariadne-rounded ariadne-z-max"
32
-
33
- DATA_CONTROLLER = "tooltip-component"
34
- DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
35
-
36
- TYPE_DEFAULT = :description
37
- VALID_TYPES = [:label, TYPE_DEFAULT].freeze
38
-
39
- # DEFAULT_DATA_ATTRIBUTES = {
40
- # "data-controller": DATA_CONTROLLER,
41
- # "data-action": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
42
- # "data-tooltip-component-placement": DEFAULT_PLACEMENT,
43
- # }
44
-
45
- # @example As a description for an icon-only button
46
- # @description
47
- # If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
48
- # The trigger element should also have a _concise_ accessible label via `aria-label`.
49
- # @code
50
- # <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
51
- # <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
52
- # @example As a label for an icon-only button
53
- # @description
54
- # If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
55
- # @code
56
- # <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
57
- # <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
58
- #
59
- # @example As a description for a button with visible label
60
- # @description
61
- # If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
62
- # @code
63
- # <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
64
- # <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
65
- # @example With direction
66
- # @description
67
- # Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
68
- # @code
69
- # <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
70
- # <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
71
- # <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
72
- # <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
73
- # <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
74
- # <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
75
- # <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
76
- # <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
77
- # @example With relative parent
78
- # @description
79
- # When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
80
- # @code
81
- # <span style="position: relative;">
82
- # <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
83
- # <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
84
- # </span>
85
- # @param tag [Symbol, String] The rendered tag name
86
- # @param for_id [String] The ID of the element that the tooltip should be attached to.
87
- # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
88
- # @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_TYPES) %>
89
- # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
90
- # @param classes [String] <%= link_to_classes_docs %>
91
- # @param attributes [Hash] <%= link_to_attributes_docs %>
92
- def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
93
- raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
94
-
95
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
96
-
97
- @text = text
98
- @classes = merge_class_names(DEFAULT_CLASSES, classes)
99
-
100
- @attributes = attributes
101
- @attributes[:for] = for_id
102
-
103
- @attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
104
- @attributes[:"data-type"] = fetch_or_raise(VALID_TYPES, type)
105
- @attributes[:"data-tooltip-component-target"] = "tooltip"
106
- end
107
- end
108
- end