ariadne_view_components 0.0.12-x64-mingw32 → 0.0.14-x64-mingw32

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ariadne.d.ts +1 -0
  3. data/app/assets/javascripts/ariadne_view_components.js +2 -2
  4. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  5. data/app/assets/javascripts/comment-component.d.ts +1 -2
  6. data/app/assets/javascripts/tab-container-component.d.ts +1 -0
  7. data/app/assets/javascripts/tab-nav-component.d.ts +9 -0
  8. data/app/assets/stylesheets/ariadne_view_components.css +1 -0
  9. data/app/assets/stylesheets/dropdown.css +46 -0
  10. data/app/assets/stylesheets/tooltip-component.css +8 -8
  11. data/app/components/ariadne/ariadne.ts +3 -2
  12. data/app/components/ariadne/avatar_component.rb +81 -0
  13. data/app/components/ariadne/avatar_stack_component.html.erb +12 -0
  14. data/app/components/ariadne/avatar_stack_component.rb +75 -0
  15. data/app/components/ariadne/base_button.rb +13 -4
  16. data/app/components/ariadne/blankslate_component.rb +4 -4
  17. data/app/components/ariadne/body_component.rb +1 -1
  18. data/app/components/ariadne/button_component.html.erb +1 -1
  19. data/app/components/ariadne/button_component.rb +11 -5
  20. data/app/components/ariadne/comment-component.ts +32 -50
  21. data/app/components/ariadne/comment_component.html.erb +31 -13
  22. data/app/components/ariadne/comment_component.rb +18 -6
  23. data/app/components/ariadne/component.rb +3 -5
  24. data/app/components/ariadne/container_component.rb +1 -1
  25. data/app/components/ariadne/counter_component.rb +1 -1
  26. data/app/components/ariadne/details_component.html.erb +4 -0
  27. data/app/components/ariadne/details_component.rb +80 -0
  28. data/app/components/ariadne/dropdown/menu_component.html.erb +20 -0
  29. data/app/components/ariadne/dropdown/menu_component.rb +101 -0
  30. data/app/components/ariadne/dropdown/menu_component.ts +1 -0
  31. data/app/components/ariadne/dropdown_component.html.erb +8 -0
  32. data/app/components/ariadne/dropdown_component.rb +172 -0
  33. data/app/components/ariadne/flash_component.rb +1 -1
  34. data/app/components/ariadne/flex_component.rb +2 -2
  35. data/app/components/ariadne/footer_component.html.erb +1 -1
  36. data/app/components/ariadne/footer_component.rb +1 -1
  37. data/app/components/ariadne/grid_component.html.erb +2 -2
  38. data/app/components/ariadne/grid_component.rb +10 -8
  39. data/app/components/ariadne/header_component.rb +3 -3
  40. data/app/components/ariadne/heroicon_component.html.erb +1 -1
  41. data/app/components/ariadne/heroicon_component.rb +7 -6
  42. data/app/components/ariadne/inline_flex_component.html.erb +1 -0
  43. data/app/components/ariadne/inline_flex_component.rb +8 -1
  44. data/app/components/ariadne/link_component.rb +2 -2
  45. data/app/components/ariadne/list_component.html.erb +2 -11
  46. data/app/components/ariadne/list_component.rb +11 -15
  47. data/app/components/ariadne/main_component.rb +2 -2
  48. data/app/components/ariadne/narrow_container_component.rb +1 -1
  49. data/app/components/ariadne/panel_bar_component.rb +2 -2
  50. data/app/components/ariadne/pill_component.rb +20 -6
  51. data/app/components/ariadne/rich-text-area-component.ts +4 -4
  52. data/app/components/ariadne/rich_text_area_component.html.erb +2 -2
  53. data/app/components/ariadne/rich_text_area_component.rb +2 -2
  54. data/app/components/ariadne/slideover_component.html.erb +1 -1
  55. data/app/components/ariadne/slideover_component.rb +2 -2
  56. data/app/components/ariadne/tab-container-component.ts +24 -0
  57. data/app/components/ariadne/tab-nav-component.ts +34 -0
  58. data/app/components/ariadne/tab_component.html.erb +2 -6
  59. data/app/components/ariadne/tab_component.rb +75 -19
  60. data/app/components/ariadne/tab_container_component.erb +12 -0
  61. data/app/components/ariadne/tab_container_component.rb +67 -0
  62. data/app/components/ariadne/tab_nav_component.html.erb +7 -0
  63. data/app/components/ariadne/tab_nav_component.rb +72 -0
  64. data/app/components/ariadne/table_nav_component.html.erb +52 -0
  65. data/app/components/ariadne/table_nav_component.rb +338 -0
  66. data/app/components/ariadne/time_ago_component.rb +1 -1
  67. data/app/components/ariadne/timeline_component.rb +1 -1
  68. data/app/components/ariadne/tooltip_component.html.erb +1 -1
  69. data/app/components/ariadne/tooltip_component.rb +4 -4
  70. data/app/lib/ariadne/action_view_extensions/form_helper.rb +21 -7
  71. data/app/lib/ariadne/fetch_or_fallback_helper.rb +11 -3
  72. data/app/lib/ariadne/form_builder.rb +2 -2
  73. data/app/lib/ariadne/icon_helper.rb +17 -13
  74. data/lib/ariadne/view_components/constants.rb +2 -2
  75. data/lib/ariadne/view_components/statuses.rb +2 -2
  76. data/lib/ariadne/view_components/version.rb +1 -1
  77. data/lib/rubocop/config/default.yml +1 -1
  78. data/lib/tasks/docs.rake +22 -97
  79. data/static/arguments.yml +151 -23
  80. data/static/audited_at.json +17 -1
  81. data/static/classes.yml +160 -268
  82. data/static/constants.json +208 -40
  83. data/static/statuses.json +17 -1
  84. data/tailwind.config.js +28 -19
  85. metadata +24 -10
  86. data/app/components/ariadne/tab_bar_component.html.erb +0 -3
  87. data/app/components/ariadne/tab_bar_component.rb +0 -45
  88. data/app/lib/ariadne/join_style_arguments_helper.rb +0 -14
  89. data/app/lib/ariadne/tab_nav_helper.rb +0 -35
  90. data/app/lib/ariadne/tabbed_component_helper.rb +0 -39
  91. data/app/lib/ariadne/test_selector_helper.rb +0 -20
  92. data/app/lib/ariadne/underline_nav_helper.rb +0 -44
@@ -2,6 +2,10 @@
2
2
 
3
3
  module Ariadne
4
4
  # Defines a submittable form for adding comments to a conversation.
5
+ #
6
+ #
7
+ # Requires JavaScript. Set `data-comment-component-selected-class` to the class name that will be applied to the
8
+ # selected tab.
5
9
  # @accessibility This component requires you to pass in a `sr_label`
6
10
  # attribute, which will be used to label the tabs for screen readers.
7
11
  class CommentComponent < Ariadne::Component
@@ -12,17 +16,21 @@ module Ariadne
12
16
 
13
17
  renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
14
18
  attributes[:"data-comment-component-target"] ||= "tab"
15
- attributes[:"data-action"] ||= "click->comment-component#toggleTab"
16
19
  attributes[:"data-public"] = true
17
20
  @tab_idx += 1
18
- render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
21
+ id = attributes.fetch(:id, "public-tab-#{@tab_idx}")
22
+ @public_tab_text = text
23
+
24
+ Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
19
25
  }
20
26
 
21
27
  renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
22
28
  attributes[:"data-comment-component-target"] ||= "tab"
23
- attributes[:"data-action"] ||= "click->comment-component#toggleTab"
24
29
  @tab_idx += 1
25
- render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
30
+ id = attributes.fetch(:id, "internal-tab-#{@tab_idx}")
31
+ @internal_tab_text = text
32
+
33
+ Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
26
34
  }
27
35
 
28
36
  renders_one :submit, lambda { |classes: "", attributes: {}|
@@ -31,7 +39,11 @@ module Ariadne
31
39
 
32
40
  # @example Default
33
41
  #
34
- # <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) { "Example" } %>
42
+ # <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) do |comment| %>
43
+ # <% comment.public_tab(selected: true, text: "Reply to sender") %>
44
+ # <% comment.internal_tab(text: "Internal comment") %>
45
+ # <% comment.submit { "Send" } %>
46
+ # <% end %>
35
47
  #
36
48
  # @param url [String] The URL to take action against.
37
49
  # @param method [String] The method to use when submitting the form.
@@ -42,7 +54,7 @@ module Ariadne
42
54
  @tag = DEFAULT_TAG
43
55
  @classes = class_names(
44
56
  DEFAULT_CLASSES,
45
- classes
57
+ classes,
46
58
  )
47
59
  @url = url
48
60
  @method = method
@@ -10,15 +10,13 @@ module Ariadne
10
10
  include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
11
11
  include ClassNameHelper
12
12
  include FetchOrFallbackHelper
13
- include TestSelectorHelper
14
- include JoinStyleArgumentsHelper
15
13
  include ViewHelper
16
14
  include Status::Dsl
17
15
  include Audited::Dsl
18
16
  include LoggerHelper
19
17
  include Ariadne::ActionViewExtensions::FormHelper
20
18
 
21
- BASE_HTML_CLASSES = "ariadne-h-full scroll-smooth ariadne-bg-white ariadne-antialiased"
19
+ BASE_HTML_CLASSES = "ariadne-h-full ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
22
20
  BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
23
21
  BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
24
22
  BASE_MAIN_CLASSES = "ariadne-flex-auto"
@@ -84,7 +82,7 @@ module Ariadne
84
82
  if (denylist = attributes[denylist_name])
85
83
  check_denylist(denylist, attributes)
86
84
 
87
- # Remove :attributes_denylist key and any denied keys from system arguments
85
+ # Remove :attributes_denylist key and any denied keys from attributes
88
86
  attributes.except!(denylist_name)
89
87
  attributes.except!(*denylist.keys.flatten)
90
88
  end
@@ -109,7 +107,7 @@ module Ariadne
109
107
  deny_aria_key(
110
108
  :label,
111
109
  "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
112
- attributes
110
+ attributes,
113
111
  )
114
112
  end
115
113
 
@@ -16,7 +16,7 @@ module Ariadne
16
16
  @tag = :div
17
17
  @classes = class_names(
18
18
  DEFAULT_CLASSES,
19
- classes
19
+ classes,
20
20
  )
21
21
 
22
22
  @attributes = attributes
@@ -50,7 +50,7 @@ module Ariadne
50
50
 
51
51
  @classes = class_names(
52
52
  DEFAULT_CLASSES,
53
- classes
53
+ classes,
54
54
  )
55
55
  @attributes[:hidden] = true if count == 0 && hide_if_zero
56
56
  end
@@ -0,0 +1,4 @@
1
+ <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
2
+ <%= summary %>
3
+ <%= body %>
4
+ <% end %>
@@ -0,0 +1,80 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Ariadne
4
+ # Use `DetailsComponent` to reveal content after clicking a button.
5
+ class DetailsComponent < Ariadne::Component
6
+ DEFAULT_TAG = :details
7
+ DEFAULT_BODY_TAG = :div
8
+
9
+ VALID_BODY_TAGS = [:ul, :"details-menu", :"details-dialog", DEFAULT_BODY_TAG].freeze
10
+
11
+ NO_OVERLAY = :none
12
+ OVERLAY_MAPPINGS = {
13
+ NO_OVERLAY => "",
14
+ :default => "",
15
+ }.freeze
16
+
17
+ # Use the Summary as a trigger to reveal the content.
18
+ #
19
+ # @param button [Boolean] (true) Whether to render the Summary as a button or not.
20
+ # @param classes [String] <%= link_to_classes_docs %>
21
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
22
+ renders_one :summary, lambda { |button: true, classes: "", attributes: {}|
23
+ tag = :summary
24
+ attributes[:role] = "button"
25
+
26
+ return Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes) unless button
27
+
28
+ Ariadne::Content.new
29
+ }
30
+
31
+ DEFAULT_BODY_CLASSES = "ariadne-absolute ariadne-right-0 ariadne-z-10 ariadne-mt-2 ariadne-w-56 ariadne-origin-top-right ariadne-divide-y ariadne-divide-gray-100 ariadne-rounded-md ariadne-bg-white ariadne-shadow-lg ariadne-ring-1 ariadne-ring-black ariadne-ring-opacity-5 focus:ariadne-outline-none"
32
+ # Use the Body slot as the main content to be shown when triggered by the Summary.
33
+ #
34
+ # @param tag [Symbol] The tag to use for the body/ <%= one_of(Ariadne::DetailsComponent::VALID_BODY_TAGS) %>
35
+ # @param classes [String] <%= link_to_classes_docs %>
36
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
37
+ renders_one :body, lambda { |tag: DEFAULT_BODY_TAG, classes: "", attributes: {}|
38
+ tag = fetch_or_raise(VALID_BODY_TAGS, tag)
39
+ actual_classes = class_names(DEFAULT_BODY_CLASSES, classes)
40
+
41
+ Ariadne::BaseComponent.new(tag: tag, classes: actual_classes, attributes: attributes)
42
+ }
43
+
44
+ DEFAULT_CLASSES = ""
45
+
46
+ # @example Default
47
+ #
48
+ # <%= render Ariadne::DetailsComponent.new do |c| %>
49
+ # <% c.summary do %>
50
+ # Summary
51
+ # <% end %>
52
+ # <% c.body do %>
53
+ # Body
54
+ # <% end %>
55
+ # <% end %>
56
+ #
57
+ # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
58
+ # @param reset [Boolean] If set to true, it will remove the default caret and remove style from the summary element
59
+ # @param classes [String] <%= link_to_classes_docs %>
60
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
61
+ def initialize(overlay: NO_OVERLAY, reset: false, classes: "", attributes: {})
62
+ @tag = DEFAULT_TAG
63
+ @reset = reset
64
+
65
+ @classes = class_names(
66
+ DEFAULT_CLASSES,
67
+ classes,
68
+ @reset ? "ariadne__details-reset" : "",
69
+ )
70
+
71
+ @attributes = attributes
72
+
73
+ @overlay = fetch_or_raise(OVERLAY_MAPPINGS.keys, overlay)
74
+ end
75
+
76
+ def render?
77
+ true # summary.present? && body.present?
78
+ end
79
+ end
80
+ end
@@ -0,0 +1,20 @@
1
+ <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
2
+ <%= header %>
3
+ <% if list? %>
4
+ <ul>
5
+ <% items.each do |item| %>
6
+ <% if item.divider? %>
7
+ <%= item %>
8
+ <% else %>
9
+ <li>
10
+ <%= item %>
11
+ </li>
12
+ <% end %>
13
+ <% end %>
14
+ </ul>
15
+ <% else %>
16
+ <% items.each do |item| %>
17
+ <%= item %>
18
+ <% end %>
19
+ <% end %>
20
+ <% end %>
@@ -0,0 +1,101 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Ariadne
4
+ module Dropdown
5
+ # This component is part of `DropdownComponent` and should not be
6
+ # used as a standalone component.
7
+ class MenuComponent < Ariadne::Component
8
+ DEFAULT_AS_OPTION = :default
9
+ VALID_AS_OPTIONS = [DEFAULT_AS_OPTION, :list].freeze
10
+
11
+ DEFAULT_DIRECTION = :se
12
+ VALID_DIRECTIONS = [DEFAULT_DIRECTION, :sw, :w, :e, :ne, :s].freeze
13
+
14
+ DEFAULT_HEADER_CLASSES = "ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
15
+ # @param classes [String] <%= link_to_classes_docs %>
16
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
17
+ renders_one :header, lambda { |classes: "", attributes: {}|
18
+ actual_classes = class_names(DEFAULT_HEADER_CLASSES, classes)
19
+ Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes)
20
+ }
21
+
22
+ # @param tag [Boolean] <%= one_of(Ariadne::Dropdown::MenuComponent::Item::VALID_TAGS) %>.
23
+ # @param divider [Boolean] Whether the item is a divider without any function.
24
+ # @param classes [String] <%= link_to_classes_docs %>
25
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
26
+ renders_many :items, lambda { |tag: Ariadne::Dropdown::MenuComponent::Item::DEFAULT_TAG, divider: false, classes: "", attributes: {}|
27
+ Ariadne::Dropdown::MenuComponent::Item.new(tag: tag, as: @as, divider: divider, classes: classes, attributes: attributes)
28
+ }
29
+
30
+ DEFAULT_TAG = :"details-menu"
31
+ TAG_OPTIONS = [DEFAULT_TAG].freeze
32
+
33
+ DEFAULT_CLASSES = ""
34
+
35
+ # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
36
+ # @param direction [Symbol] <%= one_of(Ariadne::Dropdown::MenuComponent::VALID_DIRECTIONS) %>.
37
+ # @param classes [String] <%= link_to_classes_docs %>
38
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
39
+ def initialize(as: DEFAULT_AS_OPTION, direction: VALID_DIRECTIONS, classes: "", attributes: {})
40
+ @tag = DEFAULT_TAG
41
+ @classes = class_names(
42
+ DEFAULT_CLASSES,
43
+ classes,
44
+ )
45
+
46
+ @attributes = attributes
47
+
48
+ @direction = direction
49
+ @as = fetch_or_raise(VALID_AS_OPTIONS, as)
50
+
51
+ @attributes[:role] = "menu"
52
+ end
53
+
54
+ private def list?
55
+ @as == :list
56
+ end
57
+
58
+ # Items to be rendered in the `Dropdown` menu.
59
+ class Item < Ariadne::Component
60
+ DEFAULT_TAG = :a
61
+ BUTTON_TAGS = [:button, :summary].freeze
62
+ VALID_TAGS = [DEFAULT_TAG, *BUTTON_TAGS].freeze
63
+
64
+ DEFAULT_ITEM_CLASSES = "ariadne-block ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-text-gray-700"
65
+
66
+ def initialize(as:, tag: DEFAULT_TAG, divider: false, classes: "", attributes: {})
67
+ @divider = divider
68
+ @as = as
69
+
70
+ @classes = class_names(DEFAULT_ITEM_CLASSES, classes)
71
+ @attributes = attributes
72
+ @tag = fetch_or_raise(VALID_TAGS, tag)
73
+ @tag = :li if list? && divider?
74
+ @attributes[:role] ||= :menuitem
75
+ @attributes[:role] = :separator if @divider
76
+ end
77
+
78
+ def call
79
+ component = if BUTTON_TAGS.include?(@tag)
80
+ Ariadne::ButtonComponent.new(scheme: Ariadne::ButtonComponent::LINK_SCHEME, classes: @classes, attributes: @attributes)
81
+ else
82
+ Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)
83
+ end
84
+
85
+ # divider has no content
86
+ render(component) if divider?
87
+
88
+ render(component) { content }
89
+ end
90
+
91
+ def divider?
92
+ @divider
93
+ end
94
+
95
+ def list?
96
+ @as == :list
97
+ end
98
+ end
99
+ end
100
+ end
101
+ end
@@ -0,0 +1 @@
1
+ import '@github/details-menu-element'
@@ -0,0 +1,8 @@
1
+ <%= render(Ariadne::DetailsComponent.new(classes: @classes, attributes: @attributes)) do |c| %>
2
+ <% c.summary(classes: @button_classes, attributes: @button_attributes) do %>
3
+ <%= button %>
4
+ <% end %>
5
+ <% c.body do %>
6
+ <%= menu %>
7
+ <% end %>
8
+ <% end %>
@@ -0,0 +1,172 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Ariadne
4
+ # `DropdownComponent` is a lightweight context menu for holding navigation and actions.
5
+ class DropdownComponent < Ariadne::Component
6
+ DEFAULT_TAG = :div
7
+ TAG_OPTIONS = [DEFAULT_TAG].freeze
8
+
9
+ DEFAULT_CLASSES = ""
10
+
11
+ # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Ariadne::ButtonComponent) %>,
12
+ # but it is locked as a `summary` tag.
13
+ #
14
+ # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
15
+ # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
16
+ # @param scheme [Symbol] <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>
17
+ # @param classes [String] <%= link_to_classes_docs %>
18
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
19
+ renders_one :button, lambda { |size: Ariadne::BaseButton::DEFAULT_SIZE, scheme: :none, classes: "", attributes: {}|
20
+ @button_classes = classes
21
+ @button_attributes = attributes
22
+ @button_attributes[:button] = true
23
+
24
+ Ariadne::ButtonComponent.new(tag: :summary, type: :button, scheme: scheme, dropdown: @with_caret, size: size, classes: classes, attributes: attributes)
25
+ }
26
+
27
+ # Required context menu for the dropdown.
28
+ #
29
+ # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
30
+ # @param direction [Symbol] <%= one_of(Ariadne::Dropdown::MenuComponent::VALID_DIRECTIONS) %>
31
+ # @param header [String] Optional string to display as the header
32
+ # @param classes [String] <%= link_to_classes_docs %>
33
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
34
+ renders_one :menu, "Ariadne::Dropdown::MenuComponent"
35
+ # TODO: remove *Item suffix from nested classes
36
+
37
+ # @example Default
38
+ # <%= render(Ariadne::DropdownComponent.new) do |c| %>
39
+ # <% c.button do %>
40
+ # Dropdown
41
+ # <% end %>
42
+ #
43
+ # <% c.menu do |menu| %>
44
+ # <% menu.header { "Header" } %>
45
+ # <% menu.item { "Item 1" } %>
46
+ # <% menu.item { "Item 2" } %>
47
+ # <% menu.item { "Item 3" } %>
48
+ # <% end %>
49
+ # <% end %>
50
+ #
51
+ # @example With dividers
52
+ #
53
+ # @description
54
+ # Dividers can be used to separate a group of items. They don't have any content.
55
+ # @code
56
+ # <%= render(Ariadne::DropdownComponent.new) do |c| %>
57
+ # <% c.button do %>
58
+ # Dropdown
59
+ # <% end %>
60
+ #
61
+ # <% c.menu do |menu| %>
62
+ # <% menu.header { "Header" } %>
63
+ # <%= menu.item { "Item 1" } %>
64
+ # <%= menu.item { "Item 2" } %>
65
+ # <%= menu.item(divider: true) %>
66
+ # <%= menu.item { "Item 3" } %>
67
+ # <%= menu.item { "Item 4" } %>
68
+ # <%= menu.item(divider: true) %>
69
+ # <%= menu.item { "Item 5" } %>
70
+ # <%= menu.item { "Item 6" } %>
71
+ # <% end %>
72
+ # <% end %>
73
+ #
74
+ # @example With direction
75
+ # <%= render(Ariadne::DropdownComponent.new) do |c| %>
76
+ # <% c.button do %>
77
+ # Dropdown
78
+ # <% end %>
79
+ #
80
+ # <% c.menu(direction: :s) do |menu| %>
81
+ # <% menu.header { "Header" } %>
82
+ # <%= menu.item { "Item 1" } %>
83
+ # <%= menu.item { "Item 2" } %>
84
+ # <%= menu.item { "Item 3" } %>
85
+ # <%= menu.item { "Item 4" } %>
86
+ # <% end %>
87
+ # <% end %>
88
+ #
89
+ # @example With caret
90
+ # <%= render(Ariadne::DropdownComponent.new(with_caret: true)) do |c| %>
91
+ # <% c.button do %>
92
+ # Dropdown
93
+ # <% end %>
94
+ #
95
+ # <% c.menu do |menu| %>
96
+ # <% menu.header { "Header" } %>
97
+ # <%= menu.item { "Item 1" } %>
98
+ # <%= menu.item { "Item 2" } %>
99
+ # <%= menu.item { "Item 3" } %>
100
+ # <%= menu.item { "Item 4" } %>
101
+ # <% end %>
102
+ # <% end %>
103
+ #
104
+ # @example Customizing the button
105
+ # <%= render(Ariadne::DropdownComponent.new) do |c| %>
106
+ # <% c.button(scheme: :info, size: :sm) do %>
107
+ # Dropdown
108
+ # <% end %>
109
+ #
110
+ # <% c.menu do |menu| %>
111
+ # <% menu.header { "Header" } %>
112
+ # <%= menu.item { "Item 1" } %>
113
+ # <%= menu.item { "Item 2" } %>
114
+ # <%= menu.item { "Item 3" } %>
115
+ # <%= menu.item { "Item 4" } %>
116
+ # <% end %>
117
+ # <% end %>
118
+ #
119
+ # @example Menu as list
120
+ # <%= render(Ariadne::DropdownComponent.new) do |c| %>
121
+ # <% c.button do %>
122
+ # Dropdown
123
+ # <% end %>
124
+ #
125
+ # <% c.menu(as: :list) do |menu| %>
126
+ # <% menu.header { "Header" } %>
127
+ # <% menu.item { "Item 1" } %>
128
+ # <% menu.item { "Item 2" } %>
129
+ # <% menu.item(divider: true) %>
130
+ # <% menu.item { "Item 3" } %>
131
+ # <% menu.item { "Item 4" } %>
132
+ # <% end %>
133
+ # <% end %>
134
+ #
135
+ # @example Customizing menu items
136
+ # <%= render(Ariadne::DropdownComponent.new) do |c| %>
137
+ # <% c.button do %>
138
+ # Dropdown
139
+ # <% end %>
140
+ #
141
+ # <% c.menu do |menu| %>
142
+ # <% menu.header { "Header" } %>
143
+ # <% menu.item(tag: :button) { "Item 1" } %>
144
+ # <% menu.item(classes: "ariadne-text-red-500") { "Item 2" } %>
145
+ # <% menu.item { "Item 3" } %>
146
+ # <% end %>
147
+ # <% end %>
148
+ #
149
+ # @param overlay [Symbol] <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
150
+ # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
151
+ # @param classes [String] <%= link_to_classes_docs %>
152
+ # @param attributes [Hash] <%= link_to_attributes_docs %>
153
+ def initialize(overlay: :default, with_caret: false, classes: "", attributes: {})
154
+ @tag = check_incoming_tag(DEFAULT_TAG, tag)
155
+ @classes = class_names(
156
+ DEFAULT_CLASSES,
157
+ classes,
158
+ )
159
+
160
+ @attributes = attributes
161
+
162
+ @with_caret = with_caret
163
+
164
+ @overlay = overlay
165
+ @attributes[:reset] = true
166
+ end
167
+
168
+ def render?
169
+ button.present? && menu.present?
170
+ end
171
+ end
172
+ end
@@ -104,7 +104,7 @@ module Ariadne
104
104
 
105
105
  @classes = class_names(
106
106
  CONTENT_SCHEME_CLASS_MAPPINGS[@scheme],
107
- classes
107
+ classes,
108
108
  )
109
109
 
110
110
  @attributes = attributes
@@ -6,7 +6,7 @@ module Ariadne
6
6
  DEFAULT_TAG = :div
7
7
  TAG_OPTIONS = [DEFAULT_TAG].freeze
8
8
 
9
- DEFAULT_CLASSES = "flex"
9
+ DEFAULT_CLASSES = "ariadne-flex"
10
10
 
11
11
  VALID_TYPES = [:row, :column, :row_reverse, :column_reverse].freeze
12
12
 
@@ -36,7 +36,7 @@ module Ariadne
36
36
  @classes = class_names(
37
37
  DEFAULT_CLASSES,
38
38
  classes,
39
- flex_class
39
+ flex_class,
40
40
  )
41
41
 
42
42
  @attributes = attributes
@@ -1,6 +1,6 @@
1
1
  <%= render Ariadne::BaseComponent.new(tag: :footer, classes: @classes, attributes: @attributes) do |footer| %>
2
2
  <%= render Ariadne::ContainerComponent.new do |container| %>
3
- <p class="ariadne-mt-6 ariadne-text-sm text-slate-500 sm:ariadne-mt-0">
3
+ <p class="ariadne-mt-6 ariadne-text-sm ariadne-text-slate-500 sm:ariadne-mt-0">
4
4
  <%= content %>
5
5
  </p>
6
6
  <% end %>
@@ -14,7 +14,7 @@ module Ariadne
14
14
  def initialize(classes: "", attributes: {})
15
15
  @classes = class_names(
16
16
  DEFAULT_CLASSES,
17
- classes
17
+ classes,
18
18
  )
19
19
 
20
20
  @attributes = attributes
@@ -1,8 +1,8 @@
1
1
  <%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
2
2
  <% items.each do |item| %>
3
- <li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "ariadne-bg-white" %>">
3
+ <li class="<%= item.classes %>">
4
4
  <% if item.has_href? %>
5
- <%= render Ariadne::LinkComponent.new(href: item.href) do %>
5
+ <%= render Ariadne::LinkComponent.new(href: item.href, classes: Ariadne::GridComponent::GridItem::DEFAULT_ACTION_LINK_COLORS) do %>
6
6
  <%= item.entry %>
7
7
  <% end %>
8
8
  <% if item.actions.any? %>
@@ -5,7 +5,7 @@ module Ariadne
5
5
  class GridComponent < Ariadne::Component
6
6
  DEFAULT_CLASSES = "ariadne-grid ariadne-gap-6 sm:ariadne-grid-cols-2 lg:ariadne-grid-cols-3"
7
7
 
8
- DEFAULT_LINK_COLOR_CLASSES = "ariadne-text-button-text-color ariadne-bg-button-bg-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
8
+ DEFAULT_LINK_COLOR_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
9
9
 
10
10
  # The items to show in the ariadne-grid.
11
11
  renders_many :items, "GridItem"
@@ -19,7 +19,7 @@ module Ariadne
19
19
  def initialize(classes: "", attributes: {})
20
20
  @classes = class_names(
21
21
  DEFAULT_CLASSES,
22
- classes
22
+ classes,
23
23
  )
24
24
 
25
25
  default_attributes = { role: "list" }
@@ -29,18 +29,20 @@ module Ariadne
29
29
  # This component is part of `GridComponent` and should not be
30
30
  # used as a standalone component.
31
31
  class GridItem < Ariadne::Component
32
- DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow ariadne-my-4 text-black-700 ariadne-border-black"
32
+ DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
33
33
 
34
- DEFAULT_ENTRY_CLASSES = "group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-bg-button-hover-color hover:ariadne-text-gray-500 ariadne-rounded-lg"
35
- renders_one :entry, lambda { |classes: "", &block|
34
+ DEFAULT_ENTRY_CLASSES = "ariadne-group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-text-gray-500"
35
+ renders_one :entry, lambda { |classes: "", attributes: {}, &block|
36
36
  view_context.capture do
37
- render(Ariadne::BaseComponent.new(tag: :div, classes: classes)) { block&.call }
37
+ actual_classes = class_names(DEFAULT_ENTRY_CLASSES, classes)
38
+ render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
38
39
  end
39
40
  }
40
41
 
41
- DEFAULT_ACTION_LINK_CLASSES = "text-button-text-color ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent ariadne-rounded-bl-lg ariadne-rounded-lg"
42
+ DEFAULT_ACTION_LINK_CLASSES = "ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent"
43
+ DEFAULT_ACTION_LINK_COLORS = "hover:ariadne-text-gray-500"
42
44
  renders_many :actions, lambda { |href:, icon:, label:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}, text_classes: ""|
43
- actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, classes)
45
+ actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, DEFAULT_ACTION_LINK_COLORS, classes)
44
46
  render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do
45
47
  render(Ariadne::HeroiconComponent.new(icon: icon, size: size, variant: variant, text_classes: text_classes)) { label }
46
48
  end
@@ -60,13 +60,13 @@ module Ariadne
60
60
  # @param href [String] The link destination.
61
61
  # @param classes [String] <%= link_to_classes_docs %>
62
62
  # @param attributes [Hash] <%= link_to_attributes_docs %>
63
- 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:outline-2 focus-visible:outline-offset-2"
63
+ 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"
64
64
  renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
65
65
  actual_classes = class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
66
66
  Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
67
67
  }
68
68
 
69
- 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:outline-2 focus-visible:outline-offset-2"
69
+ 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"
70
70
  renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
71
71
  actual_classes = class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
72
72
  Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
@@ -85,7 +85,7 @@ module Ariadne
85
85
  def initialize(classes: "", attributes: {})
86
86
  @classes = class_names(
87
87
  DEFAULT_CLASSES,
88
- classes
88
+ classes,
89
89
  )
90
90
 
91
91
  @attributes = attributes
@@ -1,4 +1,4 @@
1
1
  <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
2
- <%= @icon.path.html_safe %>
2
+ <%= @icon.path %>
3
3
  <% end %>
4
4
  <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @text_attributes)) { content } if content.present? %>