ariadne_view_components 0.0.39-x86_64-linux → 0.0.40-x86_64-linux
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/lib/ariadne/view_components/upstream.rb +0 -1
- data/lib/ariadne/view_components/version.rb +1 -1
- metadata +2 -94
- data/app/assets/config/manifest.js +0 -2
- data/app/assets/stylesheets/ariadne_view_components.css +0 -7
- data/app/assets/stylesheets/dropdown.css +0 -46
- data/app/assets/stylesheets/prosemirror.css +0 -323
- data/app/assets/stylesheets/tooltip-component.css +0 -37
- data/app/components/ariadne/ariadne-form.ts +0 -96
- data/app/components/ariadne/ariadne.ts +0 -21
- data/app/components/ariadne/avatar_component.rb +0 -81
- data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +0 -12
- data/app/components/ariadne/avatar_stack_component.rb +0 -75
- data/app/components/ariadne/base_button.rb +0 -70
- data/app/components/ariadne/base_component.rb +0 -37
- data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +0 -26
- data/app/components/ariadne/blankslate_component.rb +0 -148
- data/app/components/ariadne/body_component.rb +0 -30
- data/app/components/ariadne/button_component/button_component.html.erb +0 -4
- data/app/components/ariadne/button_component.rb +0 -165
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +0 -19
- data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +0 -9
- data/app/components/ariadne/clipboard_copy_component.rb +0 -90
- data/app/components/ariadne/comment_component/comment_component.html.erb +0 -37
- data/app/components/ariadne/comment_component.rb +0 -71
- data/app/components/ariadne/component.rb +0 -127
- data/app/components/ariadne/container_component/container_component.html.erb +0 -3
- data/app/components/ariadne/container_component.rb +0 -25
- data/app/components/ariadne/content.rb +0 -12
- data/app/components/ariadne/counter_component.rb +0 -100
- data/app/components/ariadne/details_component/details_component.html.erb +0 -4
- data/app/components/ariadne/details_component.rb +0 -81
- data/app/components/ariadne/dropdown/menu_component.html.erb +0 -20
- data/app/components/ariadne/dropdown/menu_component.rb +0 -101
- data/app/components/ariadne/dropdown/menu_component.ts +0 -1
- data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +0 -8
- data/app/components/ariadne/dropdown_component.rb +0 -172
- data/app/components/ariadne/flash_component/flash_component.html.erb +0 -31
- data/app/components/ariadne/flash_component.rb +0 -128
- data/app/components/ariadne/flex_component/flex_component.html.erb +0 -5
- data/app/components/ariadne/flex_component.rb +0 -56
- data/app/components/ariadne/footer_component/footer_component.html.erb +0 -7
- data/app/components/ariadne/footer_component.rb +0 -23
- data/app/components/ariadne/grid_component/grid_component.html.erb +0 -26
- data/app/components/ariadne/grid_component.rb +0 -67
- data/app/components/ariadne/header_component/header_component.html.erb +0 -29
- data/app/components/ariadne/header_component.rb +0 -111
- data/app/components/ariadne/heading_component.rb +0 -49
- data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +0 -4
- data/app/components/ariadne/heroicon_component.rb +0 -166
- data/app/components/ariadne/image_component.rb +0 -53
- data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +0 -6
- data/app/components/ariadne/inline_flex_component.rb +0 -72
- data/app/components/ariadne/link_component.rb +0 -65
- data/app/components/ariadne/list_component/list_component.html.erb +0 -6
- data/app/components/ariadne/list_component.rb +0 -70
- data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +0 -3
- data/app/components/ariadne/narrow_container_component.rb +0 -30
- data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +0 -20
- data/app/components/ariadne/panel_bar_component.rb +0 -80
- data/app/components/ariadne/pill_component/pill_component.html.erb +0 -3
- data/app/components/ariadne/pill_component.rb +0 -44
- data/app/components/ariadne/rich_text_area_component/rich-text-area-component.ts +0 -47
- data/app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb +0 -6
- data/app/components/ariadne/rich_text_area_component.rb +0 -35
- data/app/components/ariadne/slideover_component/slideover-component.ts +0 -17
- data/app/components/ariadne/slideover_component/slideover_component.html.erb +0 -9
- data/app/components/ariadne/slideover_component.rb +0 -66
- data/app/components/ariadne/tab_component/tab_component.html.erb +0 -3
- data/app/components/ariadne/tab_component.rb +0 -98
- data/app/components/ariadne/tab_container_component/tab-container-component.ts +0 -24
- data/app/components/ariadne/tab_container_component.erb +0 -10
- data/app/components/ariadne/tab_container_component.rb +0 -68
- data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +0 -34
- data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +0 -7
- data/app/components/ariadne/tab_nav_component.rb +0 -72
- data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +0 -52
- data/app/components/ariadne/table_nav_component.rb +0 -338
- data/app/components/ariadne/text.rb +0 -25
- data/app/components/ariadne/time_ago_component/time-ago-component.ts +0 -1
- data/app/components/ariadne/time_ago_component.rb +0 -56
- data/app/components/ariadne/timeline_component/timeline_component.html.erb +0 -19
- data/app/components/ariadne/timeline_component.rb +0 -34
- data/app/components/ariadne/tooltip_component/tooltip-component.ts +0 -57
- data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +0 -4
- data/app/components/ariadne/tooltip_component.rb +0 -108
- data/app/lib/ariadne/action_view_extensions/form_helper.rb +0 -30
- data/app/lib/ariadne/audited/dsl.rb +0 -32
- data/app/lib/ariadne/class_name_helper.rb +0 -22
- data/app/lib/ariadne/fetch_or_fallback_helper.rb +0 -110
- data/app/lib/ariadne/form_builder.rb +0 -74
- data/app/lib/ariadne/icon_helper.rb +0 -51
- data/app/lib/ariadne/logger_helper.rb +0 -23
- data/app/lib/ariadne/status/dsl.rb +0 -41
- data/app/lib/ariadne/view_helper.rb +0 -22
@@ -1,101 +0,0 @@
|
|
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 = merge_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 = merge_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 = merge_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
|
@@ -1 +0,0 @@
|
|
1
|
-
import '@github/details-menu-element'
|
@@ -1,8 +0,0 @@
|
|
1
|
-
<%= render(Ariadne::DetailsComponent.new(classes: @classes, attributes: @attributes)) do |c| %>
|
2
|
-
<% c.with_summary(classes: @button_classes, attributes: @button_attributes) do %>
|
3
|
-
<%= button %>
|
4
|
-
<% end %>
|
5
|
-
<% c.with_body do %>
|
6
|
-
<%= menu %>
|
7
|
-
<% end %>
|
8
|
-
<% end %>
|
@@ -1,172 +0,0 @@
|
|
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.with_button do %>
|
40
|
-
# Dropdown
|
41
|
-
# <% end %>
|
42
|
-
#
|
43
|
-
# <% c.with_menu do |menu| %>
|
44
|
-
# <% menu.with_header { "Header" } %>
|
45
|
-
# <% menu.with_item { "Item 1" } %>
|
46
|
-
# <% menu.with_item { "Item 2" } %>
|
47
|
-
# <% menu.with_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.with_button do %>
|
58
|
-
# Dropdown
|
59
|
-
# <% end %>
|
60
|
-
#
|
61
|
-
# <% c.with_menu do |menu| %>
|
62
|
-
# <% menu.with_header { "Header" } %>
|
63
|
-
# <%= menu.with_item { "Item 1" } %>
|
64
|
-
# <%= menu.with_item { "Item 2" } %>
|
65
|
-
# <%= menu.with_item(divider: true) %>
|
66
|
-
# <%= menu.with_item { "Item 3" } %>
|
67
|
-
# <%= menu.with_item { "Item 4" } %>
|
68
|
-
# <%= menu.with_item(divider: true) %>
|
69
|
-
# <%= menu.with_item { "Item 5" } %>
|
70
|
-
# <%= menu.with_item { "Item 6" } %>
|
71
|
-
# <% end %>
|
72
|
-
# <% end %>
|
73
|
-
#
|
74
|
-
# @example With direction
|
75
|
-
# <%= render(Ariadne::DropdownComponent.new) do |c| %>
|
76
|
-
# <% c.with_button do %>
|
77
|
-
# Dropdown
|
78
|
-
# <% end %>
|
79
|
-
#
|
80
|
-
# <% c.with_menu(direction: :s) do |menu| %>
|
81
|
-
# <% menu.header { "Header" } %>
|
82
|
-
# <%= menu.with_item { "Item 1" } %>
|
83
|
-
# <%= menu.with_item { "Item 2" } %>
|
84
|
-
# <%= menu.with_item { "Item 3" } %>
|
85
|
-
# <%= menu.with_item { "Item 4" } %>
|
86
|
-
# <% end %>
|
87
|
-
# <% end %>
|
88
|
-
#
|
89
|
-
# @example With caret
|
90
|
-
# <%= render(Ariadne::DropdownComponent.new(with_caret: true)) do |c| %>
|
91
|
-
# <% c.with_button do %>
|
92
|
-
# Dropdown
|
93
|
-
# <% end %>
|
94
|
-
#
|
95
|
-
# <% c.with_menu do |menu| %>
|
96
|
-
# <% menu.with_header { "Header" } %>
|
97
|
-
# <%= menu.with_item { "Item 1" } %>
|
98
|
-
# <%= menu.with_item { "Item 2" } %>
|
99
|
-
# <%= menu.with_item { "Item 3" } %>
|
100
|
-
# <%= menu.with_item { "Item 4" } %>
|
101
|
-
# <% end %>
|
102
|
-
# <% end %>
|
103
|
-
#
|
104
|
-
# @example Customizing the button
|
105
|
-
# <%= render(Ariadne::DropdownComponent.new) do |c| %>
|
106
|
-
# <% c.with_button(scheme: :info, size: :sm) do %>
|
107
|
-
# Dropdown
|
108
|
-
# <% end %>
|
109
|
-
#
|
110
|
-
# <% c.with_menu do |menu| %>
|
111
|
-
# <% menu.with_header { "Header" } %>
|
112
|
-
# <%= menu.with_item { "Item 1" } %>
|
113
|
-
# <%= menu.with_item { "Item 2" } %>
|
114
|
-
# <%= menu.with_item { "Item 3" } %>
|
115
|
-
# <%= menu.with_item { "Item 4" } %>
|
116
|
-
# <% end %>
|
117
|
-
# <% end %>
|
118
|
-
#
|
119
|
-
# @example Menu as list
|
120
|
-
# <%= render(Ariadne::DropdownComponent.new) do |c| %>
|
121
|
-
# <% c.with_button do %>
|
122
|
-
# Dropdown
|
123
|
-
# <% end %>
|
124
|
-
#
|
125
|
-
# <% c.with_menu(as: :list) do |menu| %>
|
126
|
-
# <% menu.with_header { "Header" } %>
|
127
|
-
# <% menu.with_item { "Item 1" } %>
|
128
|
-
# <% menu.with_item { "Item 2" } %>
|
129
|
-
# <% menu.with_item(divider: true) %>
|
130
|
-
# <% menu.with_item { "Item 3" } %>
|
131
|
-
# <% menu.with_item { "Item 4" } %>
|
132
|
-
# <% end %>
|
133
|
-
# <% end %>
|
134
|
-
#
|
135
|
-
# @example Customizing menu items
|
136
|
-
# <%= render(Ariadne::DropdownComponent.new) do |c| %>
|
137
|
-
# <% c.with_button do %>
|
138
|
-
# Dropdown
|
139
|
-
# <% end %>
|
140
|
-
#
|
141
|
-
# <% c.with_menu do |menu| %>
|
142
|
-
# <% menu.with_header { "Header" } %>
|
143
|
-
# <% menu.with_item(tag: :button) { "Item 1" } %>
|
144
|
-
# <% menu.with_item(classes: "ariadne-text-red-500") { "Item 2" } %>
|
145
|
-
# <% menu.with_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 = merge_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
|
@@ -1,31 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
|
2
|
-
<div class="ariadne-rounded-md ariadne-p-4 <%= BG_SCHEME_CLASS_MAPPINGS[@scheme] %>">
|
3
|
-
<div class="ariadne-flex">
|
4
|
-
<div class="ariadne-flex-shrink-0">
|
5
|
-
<%= icon %>
|
6
|
-
</div>
|
7
|
-
<div class="ariadne-ml-3">
|
8
|
-
<div class="ariadne-mt-2 ariadne-text-sm <%= CONTENT_SCHEME_CLASS_MAPPINGS[@scheme] %>">
|
9
|
-
<p><%= content %></p>
|
10
|
-
</div>
|
11
|
-
<% if has_action? %>
|
12
|
-
<div class="ariadne-mt-4 ariadne-pt-5">
|
13
|
-
<div class="ariadne--mx-2 ariadne--my-1.5 ariadne-flex">
|
14
|
-
<%= action %>
|
15
|
-
</div>
|
16
|
-
</div>
|
17
|
-
<% end %>
|
18
|
-
</div>
|
19
|
-
<% if dismissible? %>
|
20
|
-
<div class="ariadne-pl-3">
|
21
|
-
<div class="ariadne--mx-1.5 ariadne--my-1.5">
|
22
|
-
<button type="button" class="ariadne-inline-flex ariadne-rounded-md ariadne-p-1.5 focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 <%= dismissible_classes %>">
|
23
|
-
<span class="ariadne-sr-only">Dismiss</span>
|
24
|
-
<%= ariadne_heroicon icon: :"x-mark", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE %>
|
25
|
-
</button>
|
26
|
-
</div>
|
27
|
-
</div>
|
28
|
-
<% end %>
|
29
|
-
</div>
|
30
|
-
</div>
|
31
|
-
<% end %>
|
@@ -1,128 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `FlashComponent` to inform users of successful messages, pending actions, or urgent notices
|
5
|
-
class FlashComponent < Ariadne::Component
|
6
|
-
include IconHelper
|
7
|
-
|
8
|
-
DEFAULT_SCHEME = :default
|
9
|
-
|
10
|
-
DEFAULT_CLASSES = "ariadne-mt-0"
|
11
|
-
|
12
|
-
DISMISSIBLE_SCHEME_CLASS_MAPPINGS = {
|
13
|
-
default: "ariadne-text-slate-500 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
|
14
|
-
info: "ariadne-text-slate-500 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
|
15
|
-
success: "ariadne-text-green-500 ariadne-bg-green-50 hover:ariadne-bg-green-100 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
|
16
|
-
warning: "ariadne-text-yellow-500 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
|
17
|
-
danger: "ariadne-text-red-500 ariadne-bg-red-50 hover:ariadne-bg-red-100 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
|
18
|
-
}.freeze
|
19
|
-
VALID_DISMISSIBLE_SCHEMES = DISMISSIBLE_SCHEME_CLASS_MAPPINGS.keys.freeze
|
20
|
-
|
21
|
-
BG_SCHEME_CLASS_MAPPINGS = {
|
22
|
-
default: "ariadne-bg-blue-50",
|
23
|
-
info: "ariadne-bg-blue-50",
|
24
|
-
success: "ariadne-bg-green-50",
|
25
|
-
warning: "ariadne-bg-yellow-50",
|
26
|
-
danger: "ariadne-bg-red-50",
|
27
|
-
}.freeze
|
28
|
-
VALID_BG_SCHEMES = BG_SCHEME_CLASS_MAPPINGS.keys.freeze
|
29
|
-
|
30
|
-
CONTENT_SCHEME_CLASS_MAPPINGS = {
|
31
|
-
default: "ariadne-text-slate-700",
|
32
|
-
info: "ariadne-text-slate-700",
|
33
|
-
success: "ariadne-text-green-700",
|
34
|
-
warning: "ariadne-text-yellow-700",
|
35
|
-
danger: "ariadne-text-red-700",
|
36
|
-
}.freeze
|
37
|
-
VALID_CONTENT_SCHEMES = CONTENT_SCHEME_CLASS_MAPPINGS.keys.freeze
|
38
|
-
|
39
|
-
# Optional visuals appearing to the left of the flash banner.
|
40
|
-
#
|
41
|
-
# Use:
|
42
|
-
#
|
43
|
-
# - `icon` for a <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
44
|
-
#
|
45
|
-
# @option params [Symbol] :icon The rendered tag name
|
46
|
-
# @option params [Symbol] :icon Name of <%= link_to_heroicons %> to use.
|
47
|
-
# @option params [Symbol] :variant <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
|
48
|
-
# @option params [String] :classes <%= link_to_classes_docs %>
|
49
|
-
# @option params [Hash] :attributes Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
50
|
-
renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
|
51
|
-
@icon = icon
|
52
|
-
@variant = variant
|
53
|
-
|
54
|
-
tag = check_incoming_tag(:svg, tag)
|
55
|
-
Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, classes: classes, attributes: attributes)
|
56
|
-
}
|
57
|
-
|
58
|
-
# Optional action content showed at the bottom of the component.
|
59
|
-
#
|
60
|
-
# @param tag [Symbol, String] The rendered tag name
|
61
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
62
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
63
|
-
renders_one :action, lambda { |tag: :div, classes: "", attributes: {}|
|
64
|
-
tag = check_incoming_tag(:div, tag)
|
65
|
-
|
66
|
-
actual_classes = merge_class_names(classes)
|
67
|
-
|
68
|
-
render(Ariadne::BaseComponent.new(tag: tag, classes: actual_classes, attributes: attributes))
|
69
|
-
}
|
70
|
-
|
71
|
-
# @example Schemes
|
72
|
-
# <%= render(Ariadne::FlashComponent.new) { "This is a flash message!" } %>
|
73
|
-
# <%= render(Ariadne::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
|
74
|
-
# <%= render(Ariadne::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
|
75
|
-
# <%= render(Ariadne::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
|
76
|
-
#
|
77
|
-
# @example Dismissible
|
78
|
-
# <%= render(Ariadne::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
|
79
|
-
#
|
80
|
-
# @example Icon
|
81
|
-
# <%= render(Ariadne::FlashComponent.new) do |component| %>
|
82
|
-
# <% component.with_icon(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
|
83
|
-
# Look at this icon.
|
84
|
-
# <% end %>
|
85
|
-
#
|
86
|
-
# @example With actions
|
87
|
-
# <%= render(Ariadne::FlashComponent.new) do |component| %>
|
88
|
-
# <% component.with_action do %>
|
89
|
-
# <%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Take action" } %>
|
90
|
-
# <% end %>
|
91
|
-
# This is a flash message with actions!
|
92
|
-
# <% end %>
|
93
|
-
#
|
94
|
-
# @param tag [Symbol, String] The rendered tag name.
|
95
|
-
# @param dismissible [Boolean] Whether the component can be dismissed with an X button.
|
96
|
-
# @param icon [Symbol, String] Name of <%= link_to_heroicons %> to use.
|
97
|
-
# @param scheme [Symbol] <%= one_of(Ariadne::FlashComponent::VALID_CONTENT_SCHEMES) %>
|
98
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
99
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
100
|
-
def initialize(tag: :div, dismissible: false, scheme: DEFAULT_SCHEME, classes: "", attributes: {})
|
101
|
-
@dismissible = dismissible
|
102
|
-
|
103
|
-
@tag = check_incoming_tag(:div, tag)
|
104
|
-
|
105
|
-
@scheme = fetch_or_raise(VALID_CONTENT_SCHEMES, scheme)
|
106
|
-
|
107
|
-
@classes = merge_class_names(
|
108
|
-
DEFAULT_CLASSES,
|
109
|
-
CONTENT_SCHEME_CLASS_MAPPINGS[@scheme],
|
110
|
-
classes,
|
111
|
-
)
|
112
|
-
|
113
|
-
@attributes = attributes
|
114
|
-
end
|
115
|
-
# TODO: test this
|
116
|
-
private def has_action?
|
117
|
-
action.present?
|
118
|
-
end
|
119
|
-
# TODO: test this
|
120
|
-
private def dismissible?
|
121
|
-
@dismissible.present?
|
122
|
-
end
|
123
|
-
|
124
|
-
private def dismissible_classes
|
125
|
-
DISMISSIBLE_SCHEME_CLASS_MAPPINGS[@scheme]
|
126
|
-
end
|
127
|
-
end
|
128
|
-
end
|
@@ -1,56 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Adds a flex container to the page.
|
5
|
-
class FlexComponent < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :div
|
7
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
8
|
-
|
9
|
-
DEFAULT_CLASSES = "ariadne-flex"
|
10
|
-
|
11
|
-
VALID_TYPES = [:row, :column, :row_reverse, :column_reverse].freeze
|
12
|
-
|
13
|
-
# The sub-items(s) to render
|
14
|
-
renders_many :items, lambda { |static_content = nil, &block|
|
15
|
-
next static_content if static_content.present?
|
16
|
-
|
17
|
-
view_context.capture { block&.call }
|
18
|
-
}
|
19
|
-
|
20
|
-
# @example Default
|
21
|
-
#
|
22
|
-
# <%= render(Ariadne::FlexComponent.new(type: :column)) { "Example" } %>
|
23
|
-
#
|
24
|
-
# @param tag [Symbol, String] The rendered tag name.
|
25
|
-
# @param type [Symbol] <%= one_of(Ariadne::FlexComponent::VALID_TYPES) %>
|
26
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
27
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
28
|
-
def initialize(tag: DEFAULT_TAG, type:, classes: "", attributes: {})
|
29
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
30
|
-
@type = fetch_or_raise(VALID_TYPES, type)
|
31
|
-
|
32
|
-
flex_class = case @type
|
33
|
-
when :row
|
34
|
-
"ariadne-flex-row"
|
35
|
-
when :column
|
36
|
-
"ariadne-flex-col"
|
37
|
-
when :row_reverse
|
38
|
-
"ariadne-flex-row-reverse"
|
39
|
-
when :column_reverse
|
40
|
-
"ariadne-flex-col-reverse"
|
41
|
-
end
|
42
|
-
|
43
|
-
@classes = merge_class_names(
|
44
|
-
DEFAULT_CLASSES,
|
45
|
-
classes,
|
46
|
-
flex_class,
|
47
|
-
)
|
48
|
-
|
49
|
-
@attributes = attributes
|
50
|
-
end
|
51
|
-
|
52
|
-
def render?
|
53
|
-
items?
|
54
|
-
end
|
55
|
-
end
|
56
|
-
end
|
@@ -1,7 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: :footer, classes: @classes, attributes: @attributes) do |footer| %>
|
2
|
-
<%= render Ariadne::ContainerComponent.new do |container| %>
|
3
|
-
<p class="ariadne-mt-6 ariadne-text-sm ariadne-text-slate-500 sm:ariadne-mt-0">
|
4
|
-
<%= content %>
|
5
|
-
</p>
|
6
|
-
<% end %>
|
7
|
-
<% end %>
|
@@ -1,23 +0,0 @@
|
|
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 = "ariadne-py-5"
|
7
|
-
|
8
|
-
# @example Default
|
9
|
-
#
|
10
|
-
# <%= render(Ariadne::FooterComponent.new) { "Footer." } %>
|
11
|
-
#
|
12
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
13
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
14
|
-
def initialize(classes: "", attributes: {})
|
15
|
-
@classes = merge_class_names(
|
16
|
-
DEFAULT_CLASSES,
|
17
|
-
classes,
|
18
|
-
)
|
19
|
-
|
20
|
-
@attributes = attributes
|
21
|
-
end
|
22
|
-
end
|
23
|
-
end
|
@@ -1,26 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
|
2
|
-
<% items.each do |item| %>
|
3
|
-
<li class="<%= item.classes %>">
|
4
|
-
<% if item.link? %>
|
5
|
-
<%= render(item.link) do %>
|
6
|
-
<%= item.entry %>
|
7
|
-
<% end %>
|
8
|
-
<% if item.actions.any? %>
|
9
|
-
<div>
|
10
|
-
<div class="ariadne--mt-px ariadne-flex ariadne-divide-x">
|
11
|
-
<% item.actions.each_with_index do |action, idx| %>
|
12
|
-
<div class="<%= idx.zero? ? '' : 'ariadne--ml-px ' %>w-0 ariadne-flex-1 ariadne-flex">
|
13
|
-
<%= action %>
|
14
|
-
</div>
|
15
|
-
<% end %>
|
16
|
-
</div>
|
17
|
-
</div>
|
18
|
-
<% end %>
|
19
|
-
<% else %>
|
20
|
-
<div class="ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8">
|
21
|
-
<%= item.entry %>
|
22
|
-
</div>
|
23
|
-
<% end %>
|
24
|
-
</li>
|
25
|
-
<% end %>
|
26
|
-
<% end %>
|
@@ -1,67 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Arranges items as a ariadne-grid.
|
5
|
-
class GridComponent < Ariadne::Component
|
6
|
-
DEFAULT_CLASSES = "ariadne-grid ariadne-gap-6 sm:ariadne-grid-cols-2 lg:ariadne-grid-cols-3"
|
7
|
-
|
8
|
-
DEFAULT_LINK_COLOR_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
|
9
|
-
|
10
|
-
# The items to show in the ariadne-grid.
|
11
|
-
renders_many :items, "GridItem"
|
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 = merge_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 GridItem < Ariadne::Component
|
32
|
-
DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
|
33
|
-
|
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
|
-
view_context.capture do
|
37
|
-
actual_classes = merge_class_names(DEFAULT_ENTRY_CLASSES, classes)
|
38
|
-
render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
|
39
|
-
end
|
40
|
-
}
|
41
|
-
|
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 = "ariadne-h-full hover:ariadne-text-gray-500"
|
44
|
-
renders_many :actions, lambda { |href:, icon:, label:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}, text_classes: ""|
|
45
|
-
actual_classes = merge_class_names(DEFAULT_ACTION_LINK_CLASSES, DEFAULT_ACTION_LINK_COLORS, classes)
|
46
|
-
render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do
|
47
|
-
render(Ariadne::HeroiconComponent.new(icon: icon, size: size, variant: variant, text_classes: text_classes)) { label }
|
48
|
-
end
|
49
|
-
}
|
50
|
-
|
51
|
-
renders_one :link, lambda { |href:, classes: "", attributes: {}|
|
52
|
-
Ariadne::LinkComponent.new(href: href, classes: classes, attributes: attributes)
|
53
|
-
}
|
54
|
-
|
55
|
-
attr_reader :classes, :attributes
|
56
|
-
|
57
|
-
def initialize(classes: "", attributes: {})
|
58
|
-
@classes = merge_class_names(DEFAULT_ITEM_CLASSES, classes)
|
59
|
-
@attributes = attributes
|
60
|
-
end
|
61
|
-
|
62
|
-
def call
|
63
|
-
render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
|
64
|
-
end
|
65
|
-
end
|
66
|
-
end
|
67
|
-
end
|
@@ -1,29 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: :header, classes: @classes, attributes: @attributes) do |header| %>
|
2
|
-
<%= render Ariadne::ContainerComponent.new do |container| %>
|
3
|
-
<nav class="ariadne-relative ariadne-z-50 ariadne-flex ariadne-justify-between">
|
4
|
-
<div class="ariadne-flex ariadne-items-center md:ariadne-gap-x-12">
|
5
|
-
<% if has_logo? %>
|
6
|
-
<%= render Ariadne::LinkComponent.new(href: @href, classes: "ariadne-text-billy-purple") do %>
|
7
|
-
<% if has_image_logo? %>
|
8
|
-
<span class="ariadne-sr-only"><%= @text %></span>
|
9
|
-
<% end %>
|
10
|
-
<%= logo %>
|
11
|
-
<% end %>
|
12
|
-
<% end %>
|
13
|
-
<div class="md:ariadne-flex md:ariadne-gap-x-6">
|
14
|
-
<% navigation_links.each do |link| %>
|
15
|
-
<%= link %>
|
16
|
-
<% end %>
|
17
|
-
</div>
|
18
|
-
</div>
|
19
|
-
<div class="ariadne-flex ariadne-items-center ariadne-gap-x-5 md:ariadne-gap-x-8">
|
20
|
-
<div class="md:ariadne-block">
|
21
|
-
<% action_links.each do |link| %>
|
22
|
-
<%= link %>
|
23
|
-
<% end %>
|
24
|
-
</div>
|
25
|
-
<%= signup_link if has_signup_link? %>
|
26
|
-
<%= profile_link if has_profile_link? %>
|
27
|
-
</nav>
|
28
|
-
<% end %>
|
29
|
-
<% end %>
|