ariadne_view_components 0.0.13 → 0.0.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ariadne_view_components.js +2 -2
  3. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  4. data/app/assets/javascripts/comment-component.d.ts +1 -2
  5. data/app/assets/stylesheets/ariadne_view_components.css +1 -0
  6. data/app/assets/stylesheets/dropdown.css +46 -0
  7. data/app/assets/stylesheets/tooltip-component.css +8 -8
  8. data/app/components/ariadne/ariadne.ts +0 -2
  9. data/app/components/ariadne/avatar_component.rb +81 -0
  10. data/app/components/ariadne/avatar_stack_component.html.erb +12 -0
  11. data/app/components/ariadne/avatar_stack_component.rb +75 -0
  12. data/app/components/ariadne/base_button.rb +13 -4
  13. data/app/components/ariadne/blankslate_component.rb +4 -4
  14. data/app/components/ariadne/button_component.html.erb +1 -1
  15. data/app/components/ariadne/button_component.rb +9 -3
  16. data/app/components/ariadne/comment-component.ts +32 -50
  17. data/app/components/ariadne/comment_component.html.erb +32 -10
  18. data/app/components/ariadne/comment_component.rb +17 -5
  19. data/app/components/ariadne/details_component.html.erb +4 -0
  20. data/app/components/ariadne/details_component.rb +80 -0
  21. data/app/components/ariadne/dropdown/menu_component.html.erb +20 -0
  22. data/app/components/ariadne/dropdown/menu_component.rb +101 -0
  23. data/app/components/ariadne/dropdown/menu_component.ts +1 -0
  24. data/app/components/ariadne/dropdown_component.html.erb +8 -0
  25. data/app/components/ariadne/dropdown_component.rb +172 -0
  26. data/app/components/ariadne/flex_component.rb +1 -1
  27. data/app/components/ariadne/footer_component.html.erb +1 -1
  28. data/app/components/ariadne/header_component.rb +2 -2
  29. data/app/components/ariadne/heroicon_component.rb +6 -4
  30. data/app/components/ariadne/inline_flex_component.html.erb +1 -0
  31. data/app/components/ariadne/inline_flex_component.rb +8 -1
  32. data/app/components/ariadne/link_component.rb +2 -2
  33. data/app/components/ariadne/list_component.html.erb +2 -9
  34. data/app/components/ariadne/list_component.rb +11 -15
  35. data/app/components/ariadne/main_component.rb +1 -1
  36. data/app/components/ariadne/pill_component.rb +19 -5
  37. data/app/components/ariadne/rich-text-area-component.ts +4 -4
  38. data/app/components/ariadne/rich_text_area_component.html.erb +1 -1
  39. data/app/components/ariadne/rich_text_area_component.rb +1 -1
  40. data/app/components/ariadne/slideover_component.html.erb +1 -1
  41. data/app/components/ariadne/tab-container-component.ts +21 -21
  42. data/app/components/ariadne/tab_component.rb +4 -7
  43. data/app/components/ariadne/tab_container_component.rb +8 -2
  44. data/app/components/ariadne/tab_nav_component.html.erb +1 -1
  45. data/app/components/ariadne/tab_nav_component.rb +1 -1
  46. data/app/components/ariadne/table_nav_component.html.erb +52 -0
  47. data/app/components/ariadne/table_nav_component.rb +338 -0
  48. data/app/components/ariadne/tooltip_component.html.erb +1 -1
  49. data/app/components/ariadne/tooltip_component.rb +4 -4
  50. data/app/lib/ariadne/action_view_extensions/form_helper.rb +21 -7
  51. data/app/lib/ariadne/form_builder.rb +2 -2
  52. data/lib/ariadne/view_components/version.rb +1 -1
  53. data/lib/tasks/docs.rake +19 -3
  54. data/static/arguments.yml +103 -11
  55. data/static/audited_at.json +15 -7
  56. data/static/classes.yml +49 -45
  57. data/static/constants.json +179 -51
  58. data/static/statuses.json +15 -7
  59. data/tailwind.config.js +25 -1
  60. metadata +15 -4
  61. data/app/components/ariadne/table_component.html.erb +0 -17
  62. data/app/components/ariadne/table_component.rb +0 -281
@@ -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
@@ -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
 
@@ -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 %>
@@ -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)
@@ -11,13 +11,15 @@ module Ariadne
11
11
  include IconHelper
12
12
  include HeroiconsHelper
13
13
 
14
- SIZE_DEFAULT = :sm
15
- SIZE_MEDIUM = :md
14
+ SIZE_MICRO = :mu
15
+ SIZE_SMALL = :sm
16
+ SIZE_DEFAULT = :md
16
17
  SIZE_LARGE = :lg
17
18
 
18
19
  SIZE_MAPPINGS = {
19
- SIZE_DEFAULT => 16,
20
- SIZE_MEDIUM => 24,
20
+ SIZE_MICRO => 16,
21
+ SIZE_SMALL => 20,
22
+ SIZE_DEFAULT => 24,
21
23
  SIZE_LARGE => 128,
22
24
  }.freeze
23
25
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
@@ -2,4 +2,5 @@
2
2
  <%= icon %>
3
3
  <%= item %>
4
4
  <%= text %>
5
+ <%= dropdown %>
5
6
  <% end %>
@@ -19,7 +19,7 @@ module Ariadne
19
19
  </svg>
20
20
  MSG
21
21
  STATE_CLOSED_SVG = <<~MSG
22
- <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
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
23
  <circle cx="12" cy="12" r="10"></circle>
24
24
  </svg>
25
25
  MSG
@@ -42,12 +42,19 @@ module Ariadne
42
42
  Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
43
43
  }
44
44
 
45
+ renders_one :dropdown, "Ariadne::DropdownComponent"
46
+
45
47
  # @example Default
46
48
  #
47
49
  # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
48
50
  # <% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
49
51
  # <% end %>
50
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.item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
56
+ # <% end %>
57
+ #
51
58
  # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
52
59
  # <% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
53
60
  # <% c.text { "Closed" } %>
@@ -6,8 +6,8 @@ module Ariadne
6
6
  DEFAULT_TAG = :a
7
7
  TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
8
8
 
9
- DEFAULT_CLASSES = "ariadne-cursor-pointer"
10
- DEFAULT_ACTIONABLE_CLASSES = " ariadne-cursor-pointer ariadne-underline ariadne-decoration-double ariadne-font-semibold hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
9
+ DEFAULT_CLASSES = "ariadne-cursor-pointer ariadne-font-semibold 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-underline ariadne-decoration-double"
11
11
 
12
12
  # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
13
13
  # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
@@ -1,13 +1,6 @@
1
1
  <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
2
+ <%= content %>
2
3
  <% items.each do |item| %>
3
- <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
4
- <% if item.linked? %>
5
- <%= render Ariadne::LinkComponent.new(href: item.link[:href], classes: item.link[:classes], attributes: item.link[:attributes]) do %>
6
- <%= item.entry %>
7
- <% end %>
8
- <% else %>
9
- <%= item.entry %>
10
- <% end %>
11
- <% end %>
4
+ <%= item %>
12
5
  <% end %>
13
6
  <% end %>
@@ -13,7 +13,7 @@ module Ariadne
13
13
  # <%= render(Ariadne::ListComponent.new) do |list| %>
14
14
  # <% numbers.each do |number| %>
15
15
  # <%= list.item do |item| %>
16
- # <%= item.entry { number } %>
16
+ # <%= number %>
17
17
  # <% end %>
18
18
  # <% end %>
19
19
  # <% end %>
@@ -27,23 +27,11 @@ module Ariadne
27
27
  @attributes = attributes
28
28
  end
29
29
 
30
- def render?
31
- items.any?
32
- end
33
-
34
30
  # This component is part of `ListComponent` and should not be
35
31
  # used as a standalone component.
36
32
  class ListItem < Ariadne::Component
37
33
  DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
38
34
 
39
- DEFAULT_ENTRY_CLASSES = "hover:ariadne-text-gray-500"
40
- renders_one :entry, lambda { |classes: "", attributes: {}, &block|
41
- view_context.capture do
42
- actual_classes = class_names(DEFAULT_ENTRY_CLASSES, classes)
43
- render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
44
- end
45
- }
46
-
47
35
  attr_reader :link, :classes, :attributes
48
36
 
49
37
  def initialize(link: {}, classes: "", attributes: {})
@@ -56,12 +44,20 @@ module Ariadne
56
44
  @selected
57
45
  end
58
46
 
59
- def linked?
47
+ private def linked?
60
48
  @link.present?
61
49
  end
62
50
 
63
51
  def call
64
- Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes)
52
+ render(Ariadne::BaseComponent.new(tag: :li, classes: @classes, attributes: @attributes)) do
53
+ if linked?
54
+ render(Ariadne::LinkComponent.new(href: @link[:href], classes: @link[:classes], attributes: @link[:attributes])) do
55
+ content
56
+ end
57
+ else
58
+ content
59
+ end
60
+ end
65
61
  end
66
62
  end
67
63
  end
@@ -5,7 +5,7 @@ module Ariadne
5
5
  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
6
6
  # @accessibility Add any accessibility considerations
7
7
  class MainComponent < Ariadne::Component
8
- DEFAULT_CLASSES = "flex-auto"
8
+ DEFAULT_CLASSES = "ariadne-flex-auto"
9
9
 
10
10
  # @example Default
11
11
  #
@@ -6,25 +6,39 @@ module Ariadne
6
6
  DEFAULT_TAG = :span
7
7
  TAG_OPTIONS = [DEFAULT_TAG].freeze
8
8
 
9
- DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-0.5 ariadne-text-xs ariadne-font-medium ariadne-rounded-full"
9
+ DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-0.5 ariadne-text-xs ariadne-font-medium ariadne-rounded-full ariadne-whitespace-nowrap"
10
10
 
11
11
  # @example Default
12
12
  #
13
- # <%= render(Ariadne::PillComponent.new(color: "FF0000")) { "Admin" } %>
13
+ # <%= render(Ariadne::PillComponent.new(color: [49, 186, 115, 1.0])) { "Admin" } %>
14
14
  #
15
15
  # @param tag [Symbol, String] The rendered tag name.
16
- # @param color [String] The hex color of the pill.
16
+ # @param color [String] The rgba color of the pill.
17
17
  # @param classes [String] <%= link_to_classes_docs %>
18
18
  # @param attributes [Hash] <%= link_to_attributes_docs %>
19
19
  def initialize(tag: DEFAULT_TAG, color:, classes: "", attributes: {})
20
20
  @tag = check_incoming_tag(DEFAULT_TAG, tag)
21
+
22
+ @red = color[0]
23
+ @green = color[1]
24
+ @blue = color[2]
25
+ @alpha = color[3]
26
+
27
+ @attributes = attributes
28
+ @attributes["style"] = "background-color: rgba(#{@red}, #{@green}, #{@blue}, #{@alpha});"
29
+ @text_color = contrast_of(@red, @green, @blue)
30
+
21
31
  @classes = class_names(
22
32
  DEFAULT_CLASSES,
23
33
  classes,
34
+ @text_color,
24
35
  )
36
+ end
25
37
 
26
- @attributes = attributes
27
- @attributes["style"] = "background-color: ##{color};"
38
+ private def contrast_of(red, green, blue)
39
+ luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255
40
+
41
+ luminance > 0.5 ? "ariadne-text-black" : "ariadne-text-white"
28
42
  end
29
43
  end
30
44
  end
@@ -5,16 +5,16 @@ import {StarterKit} from '@tiptap/starter-kit'
5
5
 
6
6
  export default class RichTextArea extends Controller {
7
7
  connect() {
8
- const editorElement = document.querySelector('.tiptap-editor')
9
- if (editorElement) {
8
+ const editorElements = document.getElementsByClassName('tiptap-editor')
9
+ for (const editorElement of editorElements) {
10
10
  new Editor({
11
11
  element: editorElement,
12
12
  extensions: [StarterKit],
13
- content: 'Hello World!',
13
+ content: '',
14
14
  editorProps: {
15
15
  attributes: {
16
16
  class:
17
- 'ariadne-prose ariadne-prose-sm sm:ariadne-prose lg:ariadne-prose-lg xl:ariadne-prose-2xl ariadne-m-5 focus:ariadne-outline-none'
17
+ 'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
18
18
  }
19
19
  }
20
20
  })
@@ -2,5 +2,5 @@
2
2
  <% if @has_form %>
3
3
  <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
4
4
  <% end %>
5
- <textarea class="tiptap-editor"></textarea>
5
+ <div class="tiptap-editor"></div>
6
6
  <% end %>
@@ -6,7 +6,7 @@ module Ariadne
6
6
  # @accessibility Add any accessibility considerations
7
7
  class RichTextAreaComponent < Ariadne::Component
8
8
  DEFAULT_TAG = :div
9
- DEFAULT_CLASSES = "ariadne-block ariadne-w-full ariadne-border-0 ariadne-py-3 focus:ariadne-ring-0 sm:ariadne-text-sm"
9
+ DEFAULT_CLASSES = "ariadne-block"
10
10
 
11
11
  # @example Default
12
12
  #