ariadne_view_components 0.0.3 → 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +8 -7
- data/app/assets/builds/ariadne_view_components.css +1874 -0
- data/app/assets/config/manifest.js +2 -0
- data/app/assets/javascripts/ariadne.d.ts +1 -0
- data/app/assets/javascripts/ariadne_view_components.js +1 -1
- data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
- data/app/assets/javascripts/clipboard-copy-component.d.ts +4 -0
- data/app/assets/javascripts/slideover-component.d.ts +9 -0
- data/app/assets/javascripts/time_ago_component.d.ts +1 -0
- data/app/assets/javascripts/tooltip-component.d.ts +24 -0
- data/app/assets/stylesheets/application.ariadne_view_components.css +5 -0
- data/app/assets/stylesheets/tooltip-component.css +37 -0
- data/app/components/ariadne/ariadne.d.ts +1 -0
- data/app/components/ariadne/ariadne.js +9 -0
- data/app/components/ariadne/ariadne.ts +8 -9
- data/app/components/ariadne/base_button.rb +10 -8
- data/app/components/ariadne/blankslate_component.html.erb +26 -0
- data/app/components/ariadne/blankslate_component.rb +151 -0
- data/app/components/ariadne/body_component.rb +30 -0
- data/app/components/ariadne/button_component.html.erb +1 -1
- data/app/components/ariadne/button_component.rb +9 -11
- data/app/components/ariadne/clipboard-copy-component.d.ts +4 -0
- data/app/components/ariadne/clipboard-copy-component.js +18 -0
- data/app/components/ariadne/{clipboard_copy_component.ts → clipboard-copy-component.ts} +0 -0
- data/app/components/ariadne/clipboard_copy_component.d.ts +4 -0
- data/app/components/ariadne/clipboard_copy_component.html.erb +2 -2
- data/app/components/ariadne/clipboard_copy_component.js +18 -0
- data/app/components/ariadne/clipboard_copy_component.rb +45 -5
- data/app/components/ariadne/comment_component.html.erb +25 -0
- data/app/components/ariadne/comment_component.rb +45 -0
- data/app/components/ariadne/component.rb +6 -1
- data/app/components/ariadne/container_component.html.erb +3 -0
- data/app/components/ariadne/container_component.rb +25 -0
- data/app/components/ariadne/flash_component.rb +9 -9
- data/app/components/ariadne/flex_component.rb +51 -0
- data/app/components/ariadne/footer_component.html.erb +7 -0
- data/app/components/ariadne/footer_component.rb +23 -0
- data/app/components/ariadne/grid_component.html.erb +26 -0
- data/app/components/ariadne/grid_component.rb +66 -0
- data/app/components/ariadne/header_component.html.erb +29 -0
- data/app/components/ariadne/header_component.rb +114 -0
- data/app/components/ariadne/heading_component.rb +3 -3
- data/app/components/ariadne/heroicon_component.html.erb +2 -5
- data/app/components/ariadne/heroicon_component.rb +20 -7
- data/app/components/ariadne/image_component.rb +5 -3
- data/app/components/ariadne/inline_flex_component.html.erb +5 -0
- data/app/components/ariadne/inline_flex_component.rb +65 -0
- data/app/components/ariadne/link_component.rb +65 -0
- data/app/components/ariadne/list_component.html.erb +15 -0
- data/app/components/ariadne/list_component.rb +67 -0
- data/app/components/ariadne/main_component.rb +32 -0
- data/app/components/ariadne/pill_component.html.erb +3 -0
- data/app/components/ariadne/pill_component.rb +30 -0
- data/app/components/ariadne/slideover-component.d.ts +9 -0
- data/app/components/ariadne/slideover-component.js +20 -0
- data/app/components/ariadne/slideover-component.ts +26 -0
- data/app/components/ariadne/slideover_component.d.ts +9 -0
- data/app/components/ariadne/slideover_component.html.erb +11 -0
- data/app/components/ariadne/slideover_component.js +19 -0
- data/app/components/ariadne/slideover_component.rb +81 -0
- data/app/components/ariadne/time_ago_component.d.ts +1 -0
- data/app/components/ariadne/time_ago_component.js +1 -0
- data/app/components/ariadne/time_ago_component.rb +56 -0
- data/app/components/ariadne/time_ago_component.ts +1 -0
- data/app/components/ariadne/timeline_component.html.erb +19 -0
- data/app/components/ariadne/timeline_component.rb +34 -0
- data/app/components/ariadne/tooltip-component.d.ts +24 -0
- data/app/components/ariadne/tooltip-component.js +42 -0
- data/app/components/ariadne/tooltip-component.ts +57 -0
- data/app/components/ariadne/tooltip_component.html.erb +4 -0
- data/app/components/ariadne/tooltip_component.rb +34 -31
- data/app/lib/ariadne/action_view_extensions/form_helper.rb +23 -0
- data/app/lib/ariadne/form_builder.rb +71 -0
- data/lib/ariadne/classify.rb +4 -90
- data/lib/ariadne/view_components/engine.rb +8 -0
- data/lib/ariadne/view_components/version.rb +1 -1
- data/lib/ariadne/view_components.rb +31 -29
- data/lib/rubocop/cop/ariadne/ariadne_heroicon.rb +2 -2
- data/lib/tasks/docs.rake +52 -58
- data/static/arguments.yml +290 -17
- data/static/audited_at.json +18 -0
- data/static/classes.yml +189 -1
- data/static/constants.json +173 -30
- data/static/statuses.json +18 -0
- metadata +77 -9
- data/app/assets/stylesheets/application.tailwind.css +0 -3
- data/lib/tasks/tailwind.rake +0 -31
@@ -0,0 +1,45 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# Defines a submittble form for adding comments to a conversation.
|
5
|
+
class CommentComponent < Ariadne::Component
|
6
|
+
DEFAULT_TAG = :form
|
7
|
+
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
8
|
+
|
9
|
+
DEFAULT_CLASSES = ""
|
10
|
+
|
11
|
+
DEFAULT_TAB_CLASSES = "text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100 px-3 py-1.5 border border-transparent text-sm font-medium rounded-md"
|
12
|
+
renders_many :tabs, lambda { |classes: "", attributes: {}|
|
13
|
+
actual_classes = class_names(DEFAULT_TAB_CLASSES, classes)
|
14
|
+
@tab_idx += 1
|
15
|
+
attributes[:id] = "comment-tabs-tab-#{@tab_idx}"
|
16
|
+
attributes[:"aria-controls"] = "comment-tabs-panel-#{@tab_idx}"
|
17
|
+
attributes[:role] = "tab"
|
18
|
+
attributes[:type] = "button"
|
19
|
+
|
20
|
+
Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)
|
21
|
+
}
|
22
|
+
|
23
|
+
renders_one :submit, lambda { |classes: "", attributes: {}|
|
24
|
+
Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, classes: classes, attributes: attributes)
|
25
|
+
}
|
26
|
+
|
27
|
+
# @example Default
|
28
|
+
#
|
29
|
+
# <%= render(Ariadne::CommentComponent.new(action: "#")) { "Example" } %>
|
30
|
+
#
|
31
|
+
# @param action [String] The action to take when the form is submitted.
|
32
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
33
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
34
|
+
def initialize(action:, classes: "", attributes: {})
|
35
|
+
@tag = DEFAULT_TAG
|
36
|
+
@classes = class_names(
|
37
|
+
DEFAULT_CLASSES,
|
38
|
+
classes
|
39
|
+
)
|
40
|
+
|
41
|
+
@tab_idx = 0
|
42
|
+
@attributes = attributes.merge(action: action)
|
43
|
+
end
|
44
|
+
end
|
45
|
+
end
|
@@ -8,7 +8,6 @@ module Ariadne
|
|
8
8
|
# @private
|
9
9
|
class Component < ViewComponent::Base
|
10
10
|
include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
|
11
|
-
include ViewComponent::PolymorphicSlots
|
12
11
|
include ClassNameHelper
|
13
12
|
include FetchOrFallbackHelper
|
14
13
|
include TestSelectorHelper
|
@@ -17,6 +16,12 @@ module Ariadne
|
|
17
16
|
include Status::Dsl
|
18
17
|
include Audited::Dsl
|
19
18
|
include LoggerHelper
|
19
|
+
include Ariadne::ActionViewExtensions::FormHelper
|
20
|
+
|
21
|
+
BASE_HTML_CLASSES = "h-full scroll-smooth bg-white antialiased"
|
22
|
+
BASE_BODY_CLASSES = "flex h-full flex-col"
|
23
|
+
BASE_WRAPPER_CLASSES = "flex flex-col h-screen justify-between"
|
24
|
+
BASE_MAIN_CLASSES = "flex-auto"
|
20
25
|
|
21
26
|
INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
|
22
27
|
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# The container wraps the majority, if not all, of the content on a page.
|
5
|
+
class ContainerComponent < Ariadne::Component
|
6
|
+
DEFAULT_CLASSES = "px-4 sm:px-6 lg:px-8"
|
7
|
+
|
8
|
+
# @example Default
|
9
|
+
# <%= render(Ariadne::ContainerComponent.new) do |container| %>
|
10
|
+
# <%= render(Ariadne::ButtonComponent.new) { "Click me!" } %>
|
11
|
+
# <% end %>
|
12
|
+
#
|
13
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
14
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
15
|
+
def initialize(classes: "", attributes: {})
|
16
|
+
@tag = :div
|
17
|
+
@classes = class_names(
|
18
|
+
DEFAULT_CLASSES,
|
19
|
+
classes
|
20
|
+
)
|
21
|
+
|
22
|
+
@attributes = attributes
|
23
|
+
end
|
24
|
+
end
|
25
|
+
end
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Ariadne
|
4
|
-
# Use `FlashComponent` to inform users of successful messages, pending actions, or urgent notices
|
4
|
+
# Use `FlashComponent` to inform users of successful messages, pending actions, or urgent notices
|
5
5
|
class FlashComponent < Ariadne::Component
|
6
6
|
include IconHelper
|
7
7
|
|
@@ -46,12 +46,12 @@ module Ariadne
|
|
46
46
|
# @option params [String] :classes <%= link_to_classes_docs %>
|
47
47
|
# @option params [Hash] :attributes Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
48
48
|
renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
|
49
|
-
|
50
|
-
|
49
|
+
@icon = icon
|
50
|
+
@variant = variant
|
51
51
|
|
52
|
-
|
53
|
-
|
54
|
-
|
52
|
+
tag = check_incoming_tag(:svg, tag)
|
53
|
+
Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, classes: classes, attributes: attributes)
|
54
|
+
}
|
55
55
|
|
56
56
|
# Optional action content showed at the bottom of the component.
|
57
57
|
#
|
@@ -84,7 +84,7 @@ module Ariadne
|
|
84
84
|
# @example With actions
|
85
85
|
# <%= render(Ariadne::FlashComponent.new) do |component| %>
|
86
86
|
# <% component.action do %>
|
87
|
-
# <%= render(Ariadne::ButtonComponent.new(size: :
|
87
|
+
# <%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Take action" } %>
|
88
88
|
# <% end %>
|
89
89
|
# This is a flash message with actions!
|
90
90
|
# <% end %>
|
@@ -109,11 +109,11 @@ module Ariadne
|
|
109
109
|
|
110
110
|
@attributes = attributes
|
111
111
|
end
|
112
|
-
|
112
|
+
# TODO: test this
|
113
113
|
private def has_action?
|
114
114
|
action.present?
|
115
115
|
end
|
116
|
-
|
116
|
+
# TODO: test this
|
117
117
|
private def dismissible?
|
118
118
|
@dismissible.present?
|
119
119
|
end
|
@@ -0,0 +1,51 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# Add a general description of component here
|
5
|
+
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
+
# @accessibility Add any accessibility considerations
|
7
|
+
class FlexComponent < Ariadne::Component
|
8
|
+
DEFAULT_TAG = :div
|
9
|
+
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
10
|
+
|
11
|
+
DEFAULT_CLASSES = "flex"
|
12
|
+
|
13
|
+
VALID_TYPES = [:row, :column, :row_reverse, :column_reverse].freeze
|
14
|
+
|
15
|
+
# @example Default
|
16
|
+
#
|
17
|
+
# <%= render(Ariadne::FlexComponent.new(type: :column)) { "Example" } %>
|
18
|
+
#
|
19
|
+
# @param tag [Symbol, String] The rendered tag name.
|
20
|
+
# @param type [Symbol] <%= one_of(Ariadne::FlexComponent::VALID_TYPES) %>
|
21
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
22
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
23
|
+
def initialize(tag: DEFAULT_TAG, type:, classes: "", attributes: {})
|
24
|
+
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
25
|
+
@type = fetch_or_raise(VALID_TYPES, type)
|
26
|
+
|
27
|
+
flex_class = case @type
|
28
|
+
when :row
|
29
|
+
"flex-row"
|
30
|
+
when :column
|
31
|
+
"flex-col"
|
32
|
+
when :row_reverse
|
33
|
+
"flex-row-reverse"
|
34
|
+
when :column_reverse
|
35
|
+
"flex-col-reverse"
|
36
|
+
end
|
37
|
+
|
38
|
+
@classes = class_names(
|
39
|
+
DEFAULT_CLASSES,
|
40
|
+
classes,
|
41
|
+
flex_class
|
42
|
+
)
|
43
|
+
|
44
|
+
@attributes = attributes
|
45
|
+
end
|
46
|
+
|
47
|
+
def call
|
48
|
+
render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
|
49
|
+
end
|
50
|
+
end
|
51
|
+
end
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= render Ariadne::BaseComponent.new(tag: :footer, classes: @classes, attributes: @attributes) do |footer| %>
|
2
|
+
<%= render Ariadne::ContainerComponent.new do |container| %>
|
3
|
+
<p class="mt-6 text-sm text-slate-500 sm:mt-0">
|
4
|
+
<%= content %>
|
5
|
+
</p>
|
6
|
+
<% end %>
|
7
|
+
<% end %>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# Adds a footer to the bottom of every page.
|
5
|
+
class FooterComponent < Ariadne::Component
|
6
|
+
DEFAULT_CLASSES = "py-5"
|
7
|
+
|
8
|
+
# @example Default
|
9
|
+
#
|
10
|
+
# <%= render(Ariadne::FooterComponent.new) %>
|
11
|
+
#
|
12
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
13
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
14
|
+
def initialize(classes: "", attributes: {})
|
15
|
+
@classes = class_names(
|
16
|
+
DEFAULT_CLASSES,
|
17
|
+
classes
|
18
|
+
)
|
19
|
+
|
20
|
+
@attributes = attributes
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
|
2
|
+
<% items.each do |item| %>
|
3
|
+
<li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "bg-white" %>">
|
4
|
+
<% if item.has_href? %>
|
5
|
+
<%= render Ariadne::LinkComponent.new(href: item.href) do %>
|
6
|
+
<%= item.entry %>
|
7
|
+
<% end %>
|
8
|
+
<% if item.actions.any? %>
|
9
|
+
<div>
|
10
|
+
<div class="-mt-px flex divide-x">
|
11
|
+
<% item.actions.each_with_index do |action, idx| %>
|
12
|
+
<div class="<%= idx.zero? ? '' : '-ml-px ' %>w-0 flex-1 flex">
|
13
|
+
<%= action %>
|
14
|
+
</div>
|
15
|
+
<% end %>
|
16
|
+
</div>
|
17
|
+
</div>
|
18
|
+
<% end %>
|
19
|
+
<% else %>
|
20
|
+
<div class="flex-1 flex flex-col p-8">
|
21
|
+
<%= item.entry %>
|
22
|
+
</div>
|
23
|
+
<% end %>
|
24
|
+
</li>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
@@ -0,0 +1,66 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# Arranges items as a grid.
|
5
|
+
class GridComponent < Ariadne::Component
|
6
|
+
DEFAULT_CLASSES = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
|
7
|
+
|
8
|
+
DEFAULT_LINK_COLOR_CLASSES = "text-button-text-color bg-button-bg-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
|
9
|
+
|
10
|
+
# The items to show in the grid.
|
11
|
+
renders_many :items, "Item"
|
12
|
+
|
13
|
+
# @example Default
|
14
|
+
#
|
15
|
+
# <%= render(Ariadne::GridComponent.new) { "Example" } %>
|
16
|
+
#
|
17
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
18
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
19
|
+
def initialize(classes: "", attributes: {})
|
20
|
+
@classes = class_names(
|
21
|
+
DEFAULT_CLASSES,
|
22
|
+
classes
|
23
|
+
)
|
24
|
+
|
25
|
+
default_attributes = { role: "list" }
|
26
|
+
@attributes = default_attributes.merge(attributes)
|
27
|
+
end
|
28
|
+
|
29
|
+
# This component is part of `GridComponent` and should not be
|
30
|
+
# used as a standalone component.
|
31
|
+
class Item < Ariadne::Component
|
32
|
+
DEFAULT_ITEM_CLASSES = "flex flex-col text-center rounded-lg shadow my-4 text-black-700 border-black"
|
33
|
+
|
34
|
+
DEFAULT_ENTRY_CLASSES = "group flex-1 flex flex-col p-8 hover:bg-button-hover-color hover:text-gray-500 rounded-lg"
|
35
|
+
renders_one :entry, lambda { |classes: "", &block|
|
36
|
+
view_context.capture do
|
37
|
+
render(Ariadne::BaseComponent.new(tag: :div, classes: classes)) { block&.call }
|
38
|
+
end
|
39
|
+
}
|
40
|
+
|
41
|
+
DEFAULT_ACTION_LINK_CLASSES = "text-button-text-color relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm font-medium border border-transparent rounded-bl-lg rounded-lg"
|
42
|
+
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)
|
44
|
+
render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do
|
45
|
+
render(Ariadne::HeroiconComponent.new(icon: icon, size: size, variant: variant, text_classes: text_classes)) { label }
|
46
|
+
end
|
47
|
+
}
|
48
|
+
|
49
|
+
attr_reader :href, :classes, :attributes
|
50
|
+
|
51
|
+
def initialize(href: nil, classes: "", attributes: {})
|
52
|
+
@href = href
|
53
|
+
@classes = class_names(DEFAULT_ITEM_CLASSES, classes)
|
54
|
+
@attributes = attributes
|
55
|
+
end
|
56
|
+
|
57
|
+
def has_href?
|
58
|
+
@href.present?
|
59
|
+
end
|
60
|
+
|
61
|
+
def call
|
62
|
+
render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
|
63
|
+
end
|
64
|
+
end
|
65
|
+
end
|
66
|
+
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<%= render Ariadne::BaseComponent.new(tag: :header, classes: @classes, attributes: @attributes) do |header| %>
|
2
|
+
<%= render Ariadne::ContainerComponent.new do |container| %>
|
3
|
+
<nav class="relative z-50 flex justify-between">
|
4
|
+
<div class="flex items-center md:gap-x-12">
|
5
|
+
<% if has_logo? %>
|
6
|
+
<%= render Ariadne::LinkComponent.new(href: @href) do %>
|
7
|
+
<% if has_image_logo? %>
|
8
|
+
<span class="sr-only"><%= content %></span>
|
9
|
+
<% end %>
|
10
|
+
<%= logo %>
|
11
|
+
<% end %>
|
12
|
+
<% end %>
|
13
|
+
<div class="md:flex md:gap-x-6">
|
14
|
+
<% navigation_links.each do |link| %>
|
15
|
+
<%= link %>
|
16
|
+
<% end %>
|
17
|
+
</div>
|
18
|
+
</div>
|
19
|
+
<div class="flex items-center gap-x-5 md:gap-x-8">
|
20
|
+
<div class="md:block">
|
21
|
+
<% action_links.each do |link| %>
|
22
|
+
<%= link %>
|
23
|
+
<% end %>
|
24
|
+
</div>
|
25
|
+
<%= signup_link if has_signup_link? %>
|
26
|
+
<%= profile_link if has_profile_link? %>
|
27
|
+
</nav>
|
28
|
+
<% end %>
|
29
|
+
<% end %>
|
@@ -0,0 +1,114 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# Represents the top navigation bar on every page.
|
5
|
+
class HeaderComponent < Ariadne::Component
|
6
|
+
DEFAULT_CLASSES = "sticky top-0 z-50 px-4 py-5 bg-white shadow-sm shadow-slate-900/5 transition duration-500"
|
7
|
+
# flex flex-wrap items-center justify-between bg-white dark:shadow-none dark:bg-transparent
|
8
|
+
LINK_CLASSES = "rounded-lg py-1 px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
|
9
|
+
|
10
|
+
DEFAULT_TEXT_LOGO_CLASSES = "flex items-center font-bold text-xl"
|
11
|
+
DEFAULT_IMAGE_LOGO_CLASSES = "h-10 w-auto"
|
12
|
+
|
13
|
+
# Leading visuals at the far left of the header. You can pass either
|
14
|
+
# `src` or `as_text` but not both.
|
15
|
+
#
|
16
|
+
# @param href [String] Where the logo should link to.
|
17
|
+
# @param src [String] The URL of the image logo.
|
18
|
+
# @param alt [String] Alt text for accessibility.
|
19
|
+
# @param as_text [Boolean] The text to display
|
20
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
21
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
22
|
+
renders_one :logo, lambda { |href: nil, src: nil, alt: nil, as_text: false, classes: "", attributes: {}|
|
23
|
+
@href = href
|
24
|
+
if as_text.present?
|
25
|
+
actual_classes = class_names(DEFAULT_TEXT_LOGO_CLASSES, classes)
|
26
|
+
@text_logo = Ariadne::Text.new(tag: :span, classes: actual_classes, attributes: attributes)
|
27
|
+
else
|
28
|
+
actual_classes = class_names(DEFAULT_IMAGE_LOGO_CLASSES, classes)
|
29
|
+
actual_attributes = { width: 40, height: 40 }.merge(attributes)
|
30
|
+
@image_logo = Ariadne::ImageComponent.new(src: src, alt: alt, classes: actual_classes, attributes: actual_attributes)
|
31
|
+
end
|
32
|
+
}
|
33
|
+
|
34
|
+
# Text within the header, representing navigation.
|
35
|
+
#
|
36
|
+
# @param tag [String, Symbol] The tag to use for the link.
|
37
|
+
# @param href [String] The link destination.
|
38
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
39
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
40
|
+
DEFAULT_NAV_LINK_CLASSES = "inline-block rounded-lg py-1 px-2 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
|
41
|
+
renders_many :navigation_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
|
42
|
+
actual_classes = class_names(DEFAULT_NAV_LINK_CLASSES, classes)
|
43
|
+
Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
|
44
|
+
}
|
45
|
+
|
46
|
+
# Text within the header, representing actions.
|
47
|
+
#
|
48
|
+
# @param tag [String, Symbol] The tag to use for the link.
|
49
|
+
# @param href [String] The link destination.
|
50
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
51
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
52
|
+
renders_many :action_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
|
53
|
+
actual_classes = class_names(DEFAULT_NAV_LINK_CLASSES, classes)
|
54
|
+
Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
|
55
|
+
}
|
56
|
+
|
57
|
+
# Text within the header, representing a signup.
|
58
|
+
#
|
59
|
+
# @param tag [String, Symbol] The tag to use for the link.
|
60
|
+
# @param href [String] The link destination.
|
61
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
62
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
63
|
+
DEFAULT_SIGNUP_LINK_CLASSES = "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
|
64
|
+
renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
|
65
|
+
actual_classes = class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
|
66
|
+
Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
|
67
|
+
}
|
68
|
+
|
69
|
+
DEFAULT_PROFILE_LINK_CLASSES = "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
|
70
|
+
renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
|
71
|
+
actual_classes = class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
|
72
|
+
Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
|
73
|
+
}
|
74
|
+
|
75
|
+
# @example Basic example
|
76
|
+
#
|
77
|
+
# <%= render(Ariadne::HeaderComponent.new) do |header| %>
|
78
|
+
# <%= header.logo(as_text: true) { "GitHub" } %>
|
79
|
+
# <%= header.navigation_link(href: "#features") { "Features" } %>
|
80
|
+
# <%= header.login_link(href: "/login") { "Login" } %>
|
81
|
+
# <% end %>
|
82
|
+
#
|
83
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
84
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
85
|
+
def initialize(classes: "", attributes: {})
|
86
|
+
@classes = class_names(
|
87
|
+
DEFAULT_CLASSES,
|
88
|
+
classes
|
89
|
+
)
|
90
|
+
|
91
|
+
@attributes = attributes
|
92
|
+
end
|
93
|
+
|
94
|
+
private def has_logo?
|
95
|
+
logo.present?
|
96
|
+
end
|
97
|
+
|
98
|
+
private def has_text_logo?
|
99
|
+
logo.present? && @text_logo.present?
|
100
|
+
end
|
101
|
+
|
102
|
+
private def has_image_logo?
|
103
|
+
logo.present? && @image_logo.present?
|
104
|
+
end
|
105
|
+
|
106
|
+
private def has_signup_link?
|
107
|
+
signup_link.present?
|
108
|
+
end
|
109
|
+
|
110
|
+
private def has_profile_link?
|
111
|
+
profile_link.present?
|
112
|
+
end
|
113
|
+
end
|
114
|
+
end
|
@@ -20,9 +20,9 @@ module Ariadne
|
|
20
20
|
TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
|
21
21
|
|
22
22
|
TAG_TO_CLASSES = {
|
23
|
-
h1: "font-bold leading-7 sm:text-3xl
|
24
|
-
h2: "text-3xl font-extrabold
|
25
|
-
h3: "text-2xl font-extrabold
|
23
|
+
h1: "font-bold leading-7 sm:text-3xl",
|
24
|
+
h2: "text-3xl font-extrabold",
|
25
|
+
h3: "text-2xl font-extrabold",
|
26
26
|
}
|
27
27
|
# @example Default
|
28
28
|
# <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
|
@@ -1,7 +1,4 @@
|
|
1
1
|
<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
|
2
|
-
|
3
|
-
<use href="#heroicon_<%= [@icon.symbol, @icon.height].join("_") %>"></use>
|
4
|
-
<% else %>
|
5
|
-
<%= @icon.path.html_safe %>
|
6
|
-
<% end %>
|
2
|
+
<%= @icon.path.html_safe %>
|
7
3
|
<% end %>
|
4
|
+
<%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @text_attributes)) { content } if content.present? %>
|
@@ -6,15 +6,19 @@ module Ariadne
|
|
6
6
|
# `Heroicon` renders an <%= link_to_heroicons %> with <%= link_to_attributes_docs %>.
|
7
7
|
# `Heroicon` can also be rendered with the `heroicon` helper.
|
8
8
|
class HeroiconComponent < Ariadne::Component
|
9
|
+
DEFAULT_TEXT_CLASSES = "pl-2"
|
10
|
+
|
9
11
|
include IconHelper
|
10
12
|
include HeroiconsHelper
|
11
13
|
|
12
|
-
SIZE_DEFAULT = :
|
13
|
-
SIZE_MEDIUM = :
|
14
|
+
SIZE_DEFAULT = :sm
|
15
|
+
SIZE_MEDIUM = :md
|
16
|
+
SIZE_LARGE = :lg
|
14
17
|
|
15
18
|
SIZE_MAPPINGS = {
|
16
19
|
SIZE_DEFAULT => 16,
|
17
20
|
SIZE_MEDIUM => 24,
|
21
|
+
SIZE_LARGE => 128,
|
18
22
|
}.freeze
|
19
23
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
20
24
|
|
@@ -39,6 +43,8 @@ module Ariadne
|
|
39
43
|
variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
|
40
44
|
{ name: "mail",
|
41
45
|
variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
|
46
|
+
{ name: "menu",
|
47
|
+
variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
|
42
48
|
{ name: "pencil",
|
43
49
|
variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
|
44
50
|
{ name: "plus-sm",
|
@@ -60,7 +66,7 @@ module Ariadne
|
|
60
66
|
# <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
|
61
67
|
#
|
62
68
|
# @example Medium
|
63
|
-
# <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :
|
69
|
+
# <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :md)) %>
|
64
70
|
#
|
65
71
|
# @example Helper
|
66
72
|
# <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
|
@@ -71,7 +77,9 @@ module Ariadne
|
|
71
77
|
# @param variant [String] <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
|
72
78
|
# @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
|
73
79
|
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
74
|
-
|
80
|
+
# @param text_classes [String] <%= link_to_classes_docs %>
|
81
|
+
# @param text_attributes [Hash] <%= link_to_attributes_docs %>
|
82
|
+
def initialize(tag: :svg, icon:, variant:, size: SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {})
|
75
83
|
@tag = check_incoming_tag(:svg, tag)
|
76
84
|
|
77
85
|
check_icon_presence!(icon, variant)
|
@@ -105,11 +113,16 @@ module Ariadne
|
|
105
113
|
classes
|
106
114
|
)
|
107
115
|
@attributes.merge!(@icon.attributes.except(:class, :"aria-hidden"))
|
116
|
+
|
117
|
+
@text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
|
118
|
+
@text_attributes = text_attributes
|
108
119
|
end
|
109
120
|
|
110
|
-
|
111
|
-
|
112
|
-
|
121
|
+
class << self
|
122
|
+
def _after_compile
|
123
|
+
HeroiconsHelper::Cache.preload!(PRELOADED_ICONS) do |found, icon|
|
124
|
+
HeroiconComponent.new(icon: icon[:name], variant: icon[:variant]) unless found
|
125
|
+
end
|
113
126
|
end
|
114
127
|
end
|
115
128
|
end
|
@@ -6,6 +6,8 @@ module Ariadne
|
|
6
6
|
# @accessibility
|
7
7
|
# Always provide a meaningful `alt`.
|
8
8
|
class ImageComponent < Ariadne::Component
|
9
|
+
DEFAULT_TAG = :img
|
10
|
+
|
9
11
|
# @example Default
|
10
12
|
#
|
11
13
|
# <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
|
@@ -23,16 +25,16 @@ module Ariadne
|
|
23
25
|
# <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
|
24
26
|
#
|
25
27
|
# @param tag [Symbol, String] The rendered tag name
|
26
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
27
28
|
# @param src [String] The source url of the image.
|
28
29
|
# @param alt [String] Specifies an alternate text for the image.
|
29
30
|
# @param lazy [Boolean] Whether or not to lazily load the image.
|
31
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
30
32
|
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
31
|
-
def initialize(tag:
|
33
|
+
def initialize(tag: DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {})
|
32
34
|
@attributes = attributes
|
33
35
|
|
34
36
|
@src = src
|
35
|
-
@tag = check_incoming_tag(
|
37
|
+
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
36
38
|
@classes = classes
|
37
39
|
|
38
40
|
@attributes[:alt] = alt
|
@@ -0,0 +1,65 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon)
|
5
|
+
# with optional text.
|
6
|
+
#
|
7
|
+
# InlineFlexComponent differs from HeroiconComponent in that it is intended to be
|
8
|
+
# used within (or next to) text, whereas HeroiconComponent is intended to only
|
9
|
+
# present a static list of SVG images (and can be embedded in buttons or shown alone).
|
10
|
+
class InlineFlexComponent < Ariadne::Component
|
11
|
+
DEFAULT_TAG = :span
|
12
|
+
DEFAULT_CLASSES = "inline-flex items-baseline"
|
13
|
+
|
14
|
+
STATE_OPTIONS = [:closed, :open].freeze
|
15
|
+
|
16
|
+
STATE_OPEN_SVG = <<~MSG
|
17
|
+
<svg viewBox="0 0 24 24" width="12" height="12" class="stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
18
|
+
<circle cx="12" cy="12" r="10"></circle>
|
19
|
+
</svg>
|
20
|
+
MSG
|
21
|
+
STATE_CLOSED_SVG = <<~MSG
|
22
|
+
<svg viewBox="0 0 24 24" width="12" height="12" class="stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
23
|
+
<circle cx="12" cy="12" r="10"></circle>
|
24
|
+
</svg>
|
25
|
+
MSG
|
26
|
+
|
27
|
+
DEFAULT_TEXT_OPEN_CLASSES = "text-state-open"
|
28
|
+
DEFAULT_TEXT_CLOSED_CLASSES = "text-state-closed"
|
29
|
+
DEFAULT_TEXT_CLASSES = "pl-2 text-sm font-medium text-gray-900"
|
30
|
+
renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
|
31
|
+
actual_text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
|
32
|
+
Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
|
33
|
+
}
|
34
|
+
|
35
|
+
renders_one :item, lambda { |classes: "", attributes: {}|
|
36
|
+
Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
|
37
|
+
}
|
38
|
+
|
39
|
+
DEFAULT_LABEL_CLASSES = "pl-2 text-sm font-medium text-gray-900"
|
40
|
+
renders_one :text, lambda { |classes: "", attributes: {}|
|
41
|
+
actual_classes = class_names(DEFAULT_LABEL_CLASSES, classes)
|
42
|
+
Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
|
43
|
+
}
|
44
|
+
|
45
|
+
# @example Default
|
46
|
+
#
|
47
|
+
# <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
|
48
|
+
# <% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
|
49
|
+
# <% end %>
|
50
|
+
#
|
51
|
+
# <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
|
52
|
+
# <% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
|
53
|
+
# <% c.text { "Closed" } %>
|
54
|
+
# <% end %>
|
55
|
+
#
|
56
|
+
# @param tag [Symbol, String] The rendered tag name
|
57
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
58
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
59
|
+
def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
|
60
|
+
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
61
|
+
@classes = class_names(DEFAULT_CLASSES, classes)
|
62
|
+
@attributes = attributes
|
63
|
+
end
|
64
|
+
end
|
65
|
+
end
|