ariadne_view_components 0.0.38-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 +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 %>
|