ariadne_view_components 0.0.39-x86_64-linux → 0.0.40-x86_64-linux
Sign up to get free protection for your applications and to get access to all the features.
- 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 %>
|