ariadne_view_components 0.0.38-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 +8 -0
- data/lib/ariadne/view_components/upstream.rb +0 -1
- data/lib/ariadne/view_components/version.rb +1 -1
- data/static/audited_at.json +0 -1
- data/static/constants.json +0 -2
- data/static/statuses.json +0 -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 -63
- 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,81 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `DetailsComponent` to reveal content after clicking a button.
|
5
|
-
class DetailsComponent < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :details
|
7
|
-
DEFAULT_BODY_TAG = :div
|
8
|
-
|
9
|
-
VALID_BODY_TAGS = [:ul, :"details-menu", :"details-dialog", DEFAULT_BODY_TAG].freeze
|
10
|
-
|
11
|
-
NO_OVERLAY = :none
|
12
|
-
OVERLAY_MAPPINGS = {
|
13
|
-
NO_OVERLAY => "",
|
14
|
-
:default => "",
|
15
|
-
}.freeze
|
16
|
-
|
17
|
-
# Use the Summary as a trigger to reveal the content.
|
18
|
-
#
|
19
|
-
# @param button [Boolean] (true) Whether to render the Summary as a button or not.
|
20
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
21
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
22
|
-
renders_one :summary, lambda { |button: true, classes: "", attributes: {}|
|
23
|
-
tag = :summary
|
24
|
-
attributes[:role] = "button"
|
25
|
-
if button
|
26
|
-
Ariadne::ButtonComponent.new(tag: tag, classes: classes, attributes: attributes)
|
27
|
-
else
|
28
|
-
Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes)
|
29
|
-
end
|
30
|
-
}
|
31
|
-
|
32
|
-
DEFAULT_BODY_CLASSES = "ariadne-absolute ariadne-mt-2 ariadne-w-56 ariadne-divide-y ariadne-divide-gray-100 ariadne-rounded-md ariadne-shadow-lg ariadne-ring-1 ariadne-ring-black ariadne-ring-opacity-5 focus:ariadne-outline-none"
|
33
|
-
# Use the Body slot as the main content to be shown when triggered by the Summary.
|
34
|
-
#
|
35
|
-
# @param tag [Symbol] The tag to use for the body/ <%= one_of(Ariadne::DetailsComponent::VALID_BODY_TAGS) %>
|
36
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
37
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
38
|
-
renders_one :body, lambda { |tag: DEFAULT_BODY_TAG, classes: "", attributes: {}|
|
39
|
-
tag = fetch_or_raise(VALID_BODY_TAGS, tag)
|
40
|
-
actual_classes = merge_class_names(DEFAULT_BODY_CLASSES, classes)
|
41
|
-
|
42
|
-
Ariadne::BaseComponent.new(tag: tag, classes: actual_classes, attributes: attributes)
|
43
|
-
}
|
44
|
-
|
45
|
-
DEFAULT_CLASSES = ""
|
46
|
-
|
47
|
-
# @example Default
|
48
|
-
#
|
49
|
-
# <%= render Ariadne::DetailsComponent.new do |c| %>
|
50
|
-
# <% c.with_summary do %>
|
51
|
-
# Summary
|
52
|
-
# <% end %>
|
53
|
-
# <% c.with_body do %>
|
54
|
-
# Body
|
55
|
-
# <% end %>
|
56
|
-
# <% end %>
|
57
|
-
#
|
58
|
-
# @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
|
59
|
-
# @param reset [Boolean] If set to true, it will remove the default caret and remove style from the summary element
|
60
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
61
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
62
|
-
def initialize(overlay: NO_OVERLAY, reset: true, classes: "", attributes: {})
|
63
|
-
@tag = DEFAULT_TAG
|
64
|
-
@reset = reset
|
65
|
-
|
66
|
-
@classes = merge_class_names(
|
67
|
-
DEFAULT_CLASSES,
|
68
|
-
classes,
|
69
|
-
@reset ? "ariadne__details-reset" : "",
|
70
|
-
)
|
71
|
-
|
72
|
-
@attributes = attributes
|
73
|
-
|
74
|
-
@overlay = fetch_or_raise(OVERLAY_MAPPINGS.keys, overlay)
|
75
|
-
end
|
76
|
-
|
77
|
-
def render?
|
78
|
-
summary? && body?
|
79
|
-
end
|
80
|
-
end
|
81
|
-
end
|
@@ -1,20 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
|
2
|
-
<%= header %>
|
3
|
-
<% if list? %>
|
4
|
-
<ul>
|
5
|
-
<% items.each do |item| %>
|
6
|
-
<% if item.divider? %>
|
7
|
-
<%= item %>
|
8
|
-
<% else %>
|
9
|
-
<li>
|
10
|
-
<%= item %>
|
11
|
-
</li>
|
12
|
-
<% end %>
|
13
|
-
<% end %>
|
14
|
-
</ul>
|
15
|
-
<% else %>
|
16
|
-
<% items.each do |item| %>
|
17
|
-
<%= item %>
|
18
|
-
<% end %>
|
19
|
-
<% end %>
|
20
|
-
<% end %>
|
@@ -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 %>
|