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,70 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# `List` is used to show a list of items in a vertical format.
|
5
|
-
class ListComponent < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :ul
|
7
|
-
DEFAULT_UL_CLASSES = "ariadne-divide-y ariadne-divide-gray-300"
|
8
|
-
|
9
|
-
renders_many :items, "ListItem"
|
10
|
-
|
11
|
-
# @example Basic
|
12
|
-
# <% numbers = [1, 2, 3] %>
|
13
|
-
# <%= render(Ariadne::ListComponent.new) do |list| %>
|
14
|
-
# <% numbers.each do |number| %>
|
15
|
-
# <%= list.with_item do |item| %>
|
16
|
-
# <%= number %>
|
17
|
-
# <% end %>
|
18
|
-
# <% end %>
|
19
|
-
# <% end %>
|
20
|
-
#
|
21
|
-
#
|
22
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
23
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
24
|
-
def initialize(classes: "", attributes: {})
|
25
|
-
@tag = DEFAULT_TAG
|
26
|
-
@classes = merge_class_names(DEFAULT_UL_CLASSES, classes)
|
27
|
-
@attributes = attributes
|
28
|
-
end
|
29
|
-
|
30
|
-
def render?
|
31
|
-
items?
|
32
|
-
end
|
33
|
-
|
34
|
-
# This component is part of `ListComponent` and should not be
|
35
|
-
# used as a standalone component.
|
36
|
-
class ListItem < Ariadne::Component
|
37
|
-
DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
|
38
|
-
|
39
|
-
attr_reader :link, :classes, :attributes
|
40
|
-
|
41
|
-
def initialize(link: {}, classes: "", attributes: {})
|
42
|
-
@link = link
|
43
|
-
@classes = merge_class_names(DEFAULT_ITEM_CLASSES, classes)
|
44
|
-
@attributes = attributes
|
45
|
-
end
|
46
|
-
|
47
|
-
def selected?
|
48
|
-
@selected
|
49
|
-
end
|
50
|
-
|
51
|
-
private def linked?
|
52
|
-
@link.present?
|
53
|
-
end
|
54
|
-
|
55
|
-
def call
|
56
|
-
render(Ariadne::BaseComponent.new(tag: :li, classes: @classes, attributes: @attributes)) do
|
57
|
-
if linked?
|
58
|
-
classes = @link[:classes] || ""
|
59
|
-
attributes = @link[:attributes] || {}
|
60
|
-
render(Ariadne::LinkComponent.new(href: @link[:href], classes: classes, attributes: attributes)) do
|
61
|
-
content
|
62
|
-
end
|
63
|
-
else
|
64
|
-
content
|
65
|
-
end
|
66
|
-
end
|
67
|
-
end
|
68
|
-
end
|
69
|
-
end
|
70
|
-
end
|
@@ -1,30 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Add a general description of component here
|
5
|
-
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
-
# @accessibility Add any accessibility considerations
|
7
|
-
class NarrowContainerComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :div
|
9
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
10
|
-
|
11
|
-
DEFAULT_CLASSES = "ariadne-max-w-7xl ariadne-mx-auto ariadne-py-12 ariadne-px-4 sm:ariadne-px-6 lg:ariadne-py-16 lg:ariadne-px-8"
|
12
|
-
|
13
|
-
# @example Default
|
14
|
-
# <%= render(Ariadne::NarrowContainerComponent.new) do |container| %>
|
15
|
-
# <%= render(Ariadne::ButtonComponent.new) { "Click me!" } %>
|
16
|
-
# <% end %>
|
17
|
-
#
|
18
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
19
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
20
|
-
def initialize(classes: "", attributes: {})
|
21
|
-
@tag = :div
|
22
|
-
@classes = merge_class_names(
|
23
|
-
DEFAULT_CLASSES,
|
24
|
-
classes,
|
25
|
-
)
|
26
|
-
|
27
|
-
@attributes = attributes
|
28
|
-
end
|
29
|
-
end
|
30
|
-
end
|
@@ -1,20 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
|
2
|
-
<% panels.each_with_index do |panel, idx| %>
|
3
|
-
<%= render Ariadne::BaseComponent.new(tag: :li, classes: panel.classes, attributes: panel.attributes) do %>
|
4
|
-
<%= render Ariadne::BaseComponent.new(tag: :div, classes: Ariadne::PanelBarComponent::PanelItem::DEFAULT_WRAPPER_CLASSES) do %>
|
5
|
-
<span class="ariadne-px-6 ariadne-py-4 ariadne-flex ariadne-items-center ariadne-text-sm ariadne-font-medium">
|
6
|
-
<%= panel.icon %>
|
7
|
-
<span class="ariadne-ml-4 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"><%= panel.label %></span>
|
8
|
-
<!-- TODO: fix this -->
|
9
|
-
<% if idx + 1 < panels.size %>
|
10
|
-
<div class="md:ariadne-block ariadne-hidden ariadne-absolute ariadne-top-0 ariadne-right-0 ariadne-h-full ariadne-w-5" aria-hidden="true">
|
11
|
-
<svg class="ariadne-h-full ariadne-w-full ariadne-text-gray-300" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">
|
12
|
-
<path d="M0 -2L20 40L0 82" vector-effect="non-scaling-stroke" stroke="currentcolor" stroke-linejoin="round"></path>
|
13
|
-
</svg>
|
14
|
-
</div>
|
15
|
-
<% end %>
|
16
|
-
</span>
|
17
|
-
<% end %>
|
18
|
-
<% end %>
|
19
|
-
<% end %>
|
20
|
-
<% end %>
|
@@ -1,80 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Add a general description of component here
|
5
|
-
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
-
# @accessibility Add any accessibility considerations
|
7
|
-
class PanelBarComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :ol
|
9
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
10
|
-
|
11
|
-
DEFAULT_CLASSES = "ariadne-border ariadne-border-gray-300 ariadne-rounded-md ariadne-divide-y ariadne-divide-gray-300 md:ariadne-flex md:ariadne-divide-y-0"
|
12
|
-
|
13
|
-
renders_many :panels, "PanelItem"
|
14
|
-
|
15
|
-
# @example Default
|
16
|
-
#
|
17
|
-
# <%= render(Ariadne::PanelBarComponent.new) { "Example" } %>
|
18
|
-
#
|
19
|
-
# @param tag [Symbol, String] The rendered tag name.
|
20
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
21
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
22
|
-
def initialize(classes: "", attributes: {})
|
23
|
-
@tag = DEFAULT_TAG
|
24
|
-
@classes = merge_class_names(
|
25
|
-
DEFAULT_CLASSES,
|
26
|
-
classes,
|
27
|
-
)
|
28
|
-
|
29
|
-
@attributes = attributes
|
30
|
-
@attributes[:role] ||= "list"
|
31
|
-
end
|
32
|
-
|
33
|
-
# def render?
|
34
|
-
# items.any?
|
35
|
-
# end
|
36
|
-
|
37
|
-
# This component is part of `PanelBarComponent` and should not be
|
38
|
-
# used as a standalone component.
|
39
|
-
class PanelItem < Ariadne::Component
|
40
|
-
DEFAULT_ITEM_CLASSES = "ariadne-relative md:ariadne-flex-1 md:ariadne-flex"
|
41
|
-
DEFAULT_WRAPPER_CLASSES = "group ariadne-flex ariadne-items-center ariadne-w-full"
|
42
|
-
|
43
|
-
# TODO: fix this
|
44
|
-
renders_one :icon, lambda { |static_content = nil, &block|
|
45
|
-
next static_content if static_content.present?
|
46
|
-
|
47
|
-
view_context.capture { block&.call }
|
48
|
-
}
|
49
|
-
|
50
|
-
renders_one :label, lambda { |static_content = nil, &block|
|
51
|
-
next static_content if static_content.present?
|
52
|
-
|
53
|
-
view_context.capture { block&.call }
|
54
|
-
}
|
55
|
-
|
56
|
-
attr_reader :link, :classes, :attributes
|
57
|
-
|
58
|
-
def initialize(link: {}, classes: "", attributes: {})
|
59
|
-
@link = link
|
60
|
-
if @link.present?
|
61
|
-
@link["classes"] = merge_class_names(DEFAULT_WRAPPER_CLASSES, @link["classes"])
|
62
|
-
end
|
63
|
-
@classes = merge_class_names(DEFAULT_ITEM_CLASSES, classes)
|
64
|
-
@attributes = attributes
|
65
|
-
end
|
66
|
-
|
67
|
-
def selected?
|
68
|
-
@selected
|
69
|
-
end
|
70
|
-
|
71
|
-
def linked?
|
72
|
-
@link.present?
|
73
|
-
end
|
74
|
-
|
75
|
-
def call
|
76
|
-
render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
|
77
|
-
end
|
78
|
-
end
|
79
|
-
end
|
80
|
-
end
|
@@ -1,44 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Creates a ariadne-rounded label that resembles a medicine pill.
|
5
|
-
class PillComponent < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :span
|
7
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
8
|
-
|
9
|
-
DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-1 ariadne-text-xs ariadne-font-medium ariadne-rounded-full ariadne-whitespace-nowrap"
|
10
|
-
|
11
|
-
# @example Default
|
12
|
-
#
|
13
|
-
# <%= render(Ariadne::PillComponent.new(color: [49, 186, 115, 1.0])) { "Admin" } %>
|
14
|
-
#
|
15
|
-
# @param tag [Symbol, String] The rendered tag name.
|
16
|
-
# @param color [String] The rgba color of the pill.
|
17
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
18
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
19
|
-
def initialize(tag: DEFAULT_TAG, color:, classes: "", attributes: {})
|
20
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
21
|
-
|
22
|
-
@red = color[0]
|
23
|
-
@green = color[1]
|
24
|
-
@blue = color[2]
|
25
|
-
@alpha = color[3]
|
26
|
-
|
27
|
-
@attributes = attributes
|
28
|
-
@attributes["style"] = "background-color: rgba(#{@red}, #{@green}, #{@blue}, #{@alpha});"
|
29
|
-
@text_color = contrast_of(@red, @green, @blue)
|
30
|
-
|
31
|
-
@classes = merge_class_names(
|
32
|
-
DEFAULT_CLASSES,
|
33
|
-
classes,
|
34
|
-
@text_color,
|
35
|
-
)
|
36
|
-
end
|
37
|
-
|
38
|
-
private def contrast_of(red, green, blue)
|
39
|
-
luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255
|
40
|
-
|
41
|
-
luminance > 0.5 ? "ariadne-text-black" : "ariadne-text-white"
|
42
|
-
end
|
43
|
-
end
|
44
|
-
end
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import {Controller} from '@hotwired/stimulus'
|
2
|
-
|
3
|
-
import {Editor} from '@tiptap/core'
|
4
|
-
|
5
|
-
import {Document} from '@tiptap/extension-document'
|
6
|
-
import {Paragraph} from '@tiptap/extension-paragraph'
|
7
|
-
import {Text} from '@tiptap/extension-text'
|
8
|
-
|
9
|
-
import DropCursor from '@tiptap/extension-dropcursor'
|
10
|
-
import GapCursor from '@tiptap/extension-gapcursor'
|
11
|
-
import {History} from '@tiptap/extension-history'
|
12
|
-
|
13
|
-
export default class RichTextArea extends Controller {
|
14
|
-
static targets = ['editor']
|
15
|
-
|
16
|
-
declare readonly editorTargets: [HTMLDivElement]
|
17
|
-
|
18
|
-
connect() {
|
19
|
-
for (const editorElement of this.editorTargets) {
|
20
|
-
const pmEditor = new Editor({
|
21
|
-
extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
|
22
|
-
content: '',
|
23
|
-
injectCSS: false,
|
24
|
-
element: editorElement,
|
25
|
-
editorProps: {
|
26
|
-
attributes: {
|
27
|
-
class:
|
28
|
-
'ariadne-h-28 ariadne-max-h-48 ariadne-p-2 ariadne-rounded-lg ariadne-overflow-y-auto focus:ariadne-outline-none',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
parseOptions: {
|
32
|
-
preserveWhitespace: true,
|
33
|
-
},
|
34
|
-
})
|
35
|
-
|
36
|
-
const tiptapValueContainer = editorElement.previousElementSibling
|
37
|
-
if (tiptapValueContainer) {
|
38
|
-
const parentForm = editorElement.closest('form')
|
39
|
-
|
40
|
-
parentForm?.addEventListener('submit', () => {
|
41
|
-
tiptapValueContainer.setAttribute('value', pmEditor.getText() || '')
|
42
|
-
pmEditor.commands.clearContent() // TODO: test this
|
43
|
-
})
|
44
|
-
}
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
|
2
|
-
<% if @has_form %>
|
3
|
-
<input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
|
4
|
-
<% end %>
|
5
|
-
<div class="tiptap-editor" name="rich-text-area" data-rich-text-area-component-target="editor"></div>
|
6
|
-
<% end %>
|
@@ -1,35 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Add a general description of component here
|
5
|
-
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
-
# @accessibility Add any accessibility considerations
|
7
|
-
class RichTextAreaComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :div
|
9
|
-
DEFAULT_CLASSES = ""
|
10
|
-
|
11
|
-
# @example Default
|
12
|
-
#
|
13
|
-
# <%= render(Ariadne::RichTextAreaComponent.new(name: "bodytext", sr_label: "Enter message contents")) { "Example" } %>
|
14
|
-
#
|
15
|
-
# @param name [Symbol] Identifies the form/param name for this rich text area.
|
16
|
-
# @param sr_label [String] A label to introduce these tabs for screen readers.
|
17
|
-
# @param has_form [Boolean] Indicates whether this component is wrapped in a form.
|
18
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
19
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
20
|
-
def initialize(name:, sr_label:, has_form: true, classes: "", attributes: {})
|
21
|
-
@tag = DEFAULT_TAG
|
22
|
-
@name = name
|
23
|
-
@sr_label = sr_label
|
24
|
-
@has_form = has_form
|
25
|
-
|
26
|
-
@classes = merge_class_names(
|
27
|
-
DEFAULT_CLASSES,
|
28
|
-
classes,
|
29
|
-
)
|
30
|
-
@attributes = attributes
|
31
|
-
@attributes[:"data-controller"] = "rich-text-area-component"
|
32
|
-
@attributes[:"data-has-form"] = true if @has_form
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import {Controller} from '@hotwired/stimulus'
|
2
|
-
|
3
|
-
export default class SlideoverComponent extends Controller {
|
4
|
-
static targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper']
|
5
|
-
|
6
|
-
declare readonly expandableTarget: HTMLDivElement
|
7
|
-
declare readonly expandWrapperTarget: HTMLDivElement
|
8
|
-
declare readonly slidePanelTargets: [HTMLDivElement]
|
9
|
-
declare readonly buttonWrapperTarget: HTMLDivElement
|
10
|
-
|
11
|
-
toggle() {
|
12
|
-
this.expandableTarget.classList.toggle('ariadne-hidden')
|
13
|
-
for (const slidePanel of this.slidePanelTargets) {
|
14
|
-
slidePanel.classList.toggle('ariadne-hidden')
|
15
|
-
}
|
16
|
-
}
|
17
|
-
}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
|
2
|
-
<div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3">
|
3
|
-
<%= content %>
|
4
|
-
</div>
|
5
|
-
<div data-slideover-component-target="buttonWrapper" class="ariadne-relative ariadne-flex ariadne-justify-center">
|
6
|
-
<%= open_button %>
|
7
|
-
<%= close_button %>
|
8
|
-
</div>
|
9
|
-
<% end %>
|
@@ -1,66 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Add a general description of component here
|
5
|
-
# Add additional usage considerations or best practices that may aid the user to use the component correctly.
|
6
|
-
# @accessibility Add any accessibility considerations
|
7
|
-
class SlideoverComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :div
|
9
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
10
|
-
|
11
|
-
DIRECTION_Y_DOWN = :yd
|
12
|
-
DIRECTION_X_LEFT = :xl
|
13
|
-
VALID_DIRECTIONS = [DIRECTION_Y_DOWN, DIRECTION_X_LEFT].freeze
|
14
|
-
|
15
|
-
DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col"
|
16
|
-
|
17
|
-
DEFAULT_BUTTON_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-shadow-sm ariadne-px-4 ariadne-py-1.5 ariadne-pb-2 ariadne-text-sm ariadne-leading-5 ariadne-font-medium ariadne-rounded-full " + Ariadne::ButtonComponent::SCHEME_CLASS_MAPPINGS[:default]
|
18
|
-
renders_one :open_button, lambda { |selected: false, classes: "", attributes: {}|
|
19
|
-
actual_classes = merge_class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
|
20
|
-
|
21
|
-
attributes[:id] ||= "btnOpen"
|
22
|
-
attributes[:"data-slideover-component-target"] ||= "slidePanel"
|
23
|
-
attributes[:"data-action"] ||= "click->slideover-component#toggle"
|
24
|
-
attributes[:type] ||= "submit"
|
25
|
-
|
26
|
-
Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
|
27
|
-
}
|
28
|
-
|
29
|
-
renders_one :close_button, lambda { |selected: false, classes: "", attributes: {}|
|
30
|
-
actual_classes = merge_class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
|
31
|
-
|
32
|
-
attributes[:id] ||= "btnClose"
|
33
|
-
attributes[:"data-slideover-component-target"] ||= "slidePanel"
|
34
|
-
attributes[:"data-action"] ||= "click->slideover-component#toggle"
|
35
|
-
attributes[:type] ||= "submit"
|
36
|
-
|
37
|
-
Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
|
38
|
-
}
|
39
|
-
|
40
|
-
# @example Default
|
41
|
-
#
|
42
|
-
# <%= render(Ariadne::SlideoverComponent.new(direction: Ariadne::SlideoverComponent::DIRECTION_Y_DOWN)) { "Example" } %>
|
43
|
-
#
|
44
|
-
# @param tag [Symbol, String] The rendered tag name.
|
45
|
-
# @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
|
46
|
-
# @param open_text [String] The text to use to open the slideover.
|
47
|
-
# @param close_text [String] The text to use to close the slideover.
|
48
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
49
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
50
|
-
def initialize(tag: DEFAULT_TAG, direction:, open_text: "Open", close_text: "Close", classes: "", attributes: {})
|
51
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
52
|
-
@classes = merge_class_names(
|
53
|
-
DEFAULT_CLASSES,
|
54
|
-
classes,
|
55
|
-
)
|
56
|
-
|
57
|
-
@direction = fetch_or_raise(VALID_DIRECTIONS, direction)
|
58
|
-
|
59
|
-
@open_text = open_text
|
60
|
-
@close_text = close_text
|
61
|
-
@attributes = attributes
|
62
|
-
@attributes[:"data-controller"] = "slideover-component"
|
63
|
-
@attributes[:"data-slideover-component-target"] = "expandWrapper"
|
64
|
-
end
|
65
|
-
end
|
66
|
-
end
|
@@ -1,98 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# This component is part of navigation components such as `Ariadne::TabContainerComponent`.
|
5
|
-
# and `Ariadne::TabNavComponent` and should not be used by itself.
|
6
|
-
#
|
7
|
-
# @accessibility
|
8
|
-
# `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
|
9
|
-
# When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
|
10
|
-
class TabComponent < Ariadne::Component
|
11
|
-
DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
|
12
|
-
ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
|
13
|
-
|
14
|
-
# Panel controlled by the Tab. This will not render anything in the tab itself.
|
15
|
-
# It will provide a accessor for the Tab's parent to call and render the panel
|
16
|
-
# content in the appropriate place.
|
17
|
-
#
|
18
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
19
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
20
|
-
renders_one :panel, lambda { |classes: "", attributes: {}|
|
21
|
-
attributes[:id] = @panel_id
|
22
|
-
tag = :div
|
23
|
-
attributes[:role] ||= :tabpanel
|
24
|
-
attributes[:hidden] = true unless @selected
|
25
|
-
|
26
|
-
label_present = aria("label", attributes) || aria("labelledby", attributes)
|
27
|
-
unless label_present
|
28
|
-
if @id.present?
|
29
|
-
attributes[:"aria-labelledby"] = @id
|
30
|
-
else
|
31
|
-
raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
|
32
|
-
end
|
33
|
-
end
|
34
|
-
|
35
|
-
Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes)
|
36
|
-
}
|
37
|
-
|
38
|
-
# The tab's text.
|
39
|
-
#
|
40
|
-
# @param kwargs [Hash] The same arguments as <%= link_to_component(Ariadne::Text) %>.
|
41
|
-
renders_one :text, Ariadne::Text
|
42
|
-
# TODO: test what hapenns with really long inbox names
|
43
|
-
|
44
|
-
attr_reader :selected, :id, :classes, :attributes
|
45
|
-
|
46
|
-
DEFAULT_CLASSES = "ariadne-border-transparent ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300 ariadne-whitespace-nowrap ariadne-py-4 ariadne-px-1 ariadne-border-b-2 ariadne-font-medium ariadne-text-sm"
|
47
|
-
|
48
|
-
# @example Default
|
49
|
-
#
|
50
|
-
# <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
|
51
|
-
# <% tab.text { "Public comment" } %>
|
52
|
-
# <% tab.panel { "Public comment panel" } %>
|
53
|
-
# <% end %>
|
54
|
-
# @param id [String] The unique ID of the tab.
|
55
|
-
# @param selected [Boolean] Whether the tab is selected or not.
|
56
|
-
# @param with_panel [Boolean] Whether the Tab has an associated panel.
|
57
|
-
# @param href [String] The link to navigate to when the tab is clicked.
|
58
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
59
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
60
|
-
def initialize(id: nil, selected: false, with_panel: false, href: nil, classes: "", attributes: {})
|
61
|
-
@id = id
|
62
|
-
|
63
|
-
@href = href
|
64
|
-
@selected = selected
|
65
|
-
|
66
|
-
@classes = merge_class_names(
|
67
|
-
DEFAULT_CLASSES,
|
68
|
-
classes,
|
69
|
-
)
|
70
|
-
|
71
|
-
@attributes = attributes
|
72
|
-
@attributes[:id] ||= @id
|
73
|
-
|
74
|
-
if with_panel # TODO: test
|
75
|
-
if @id.blank?
|
76
|
-
raise ArgumentError, "Tabs with panels must have a unique `id`"
|
77
|
-
end
|
78
|
-
|
79
|
-
@tag = :button
|
80
|
-
@attributes[:type] = :button
|
81
|
-
@attributes[:role] = :tab
|
82
|
-
@panel_id = "panel-#{@id}"
|
83
|
-
@attributes[:"aria-controls"] = @panel_id
|
84
|
-
else
|
85
|
-
@tag = :a
|
86
|
-
end
|
87
|
-
|
88
|
-
return unless @selected
|
89
|
-
|
90
|
-
if @tag == :a
|
91
|
-
aria_current = aria("current", attributes) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
|
92
|
-
@attributes[:"aria-current"] = fetch_or_raise(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current)
|
93
|
-
else
|
94
|
-
@attributes[:"aria-selected"] = true
|
95
|
-
end
|
96
|
-
end
|
97
|
-
end
|
98
|
-
end
|
@@ -1,24 +0,0 @@
|
|
1
|
-
import '@github/tab-container-element'
|
2
|
-
|
3
|
-
// keep in sync with tab_container_component.rb
|
4
|
-
const DEFAULT_SELECTED_CLASSES: string[] = ['ariadne-border-slate-500', 'ariadne-text-slate-600']
|
5
|
-
const DEFAULT_UNSELECTED_CLASSES: string[] = [
|
6
|
-
'ariadne-text-gray-500',
|
7
|
-
'hover:ariadne-text-gray-700',
|
8
|
-
'hover:ariadne-border-gray-300',
|
9
|
-
]
|
10
|
-
|
11
|
-
for (const tabContainer of document.getElementsByTagName('tab-container')) {
|
12
|
-
tabContainer.addEventListener('tab-container-change', function (event: Event) {
|
13
|
-
const newPanel = (event as CustomEvent).detail.relatedTarget as HTMLElement
|
14
|
-
const tabContainer = newPanel.closest('tab-container') as HTMLElement
|
15
|
-
const tabList = tabContainer.firstElementChild as HTMLElement
|
16
|
-
const currentTab = tabList.querySelector('[aria-selected="true"]') as HTMLElement
|
17
|
-
const tabId = newPanel.getAttribute('id')?.split('-').slice(1).join('-')
|
18
|
-
const newTab = tabList.querySelector(`#${tabId}`) as HTMLElement
|
19
|
-
currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES)
|
20
|
-
currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES)
|
21
|
-
newTab.classList.add(...DEFAULT_SELECTED_CLASSES)
|
22
|
-
newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES)
|
23
|
-
})
|
24
|
-
}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do |component| %>
|
2
|
-
<div role="tablist">
|
3
|
-
<% tabs.each do |tab| %>
|
4
|
-
<%= tab %>
|
5
|
-
<% end %>
|
6
|
-
</div>
|
7
|
-
<% tabs.each do |tab| %>
|
8
|
-
<%= tab.panel %>
|
9
|
-
<% end %>
|
10
|
-
<% end %>
|
@@ -1,68 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# A container for a row of tags. Keyboard support is provided.
|
5
|
-
# @accessibility This component requires you to pass in a `sr_label`
|
6
|
-
# attribute, which will be used to label the tabs for screen readers.
|
7
|
-
class TabContainerComponent < Ariadne::Component
|
8
|
-
DEFAULT_TAG = :"tab-container"
|
9
|
-
|
10
|
-
DEFAULT_CLASSES = ""
|
11
|
-
|
12
|
-
DEFAULT_SELECTED_CLASSES = "ariadne-border-slate-500 ariadne-text-slate-600"
|
13
|
-
DEFAULT_UNSELECTED_CLASSES = "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"
|
14
|
-
|
15
|
-
# Tabs and panels to be rendered.
|
16
|
-
#
|
17
|
-
# @param id [String] The unique ID of the tab.
|
18
|
-
# @param selected [Boolean] Whether the tab is selected.
|
19
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
20
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
21
|
-
renders_many :tabs, lambda { |id: "", selected: false, classes: "", attributes: {}|
|
22
|
-
actual_classes = merge_class_names(selected ? DEFAULT_SELECTED_CLASSES : DEFAULT_UNSELECTED_CLASSES, classes)
|
23
|
-
|
24
|
-
Ariadne::TabComponent.new(
|
25
|
-
id: id,
|
26
|
-
selected: selected,
|
27
|
-
with_panel: true,
|
28
|
-
|
29
|
-
classes: actual_classes,
|
30
|
-
attributes: attributes,
|
31
|
-
)
|
32
|
-
}
|
33
|
-
|
34
|
-
# @example Default
|
35
|
-
#
|
36
|
-
# <%= render(Ariadne::TabContainerComponent.new(sr_label: "Comments")) do |tab_container| %>
|
37
|
-
# <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
|
38
|
-
# <% tab.with_text { "Tab 1" } %>
|
39
|
-
# <% tab.with_panel { "Panel 1" } %>
|
40
|
-
# <% end %>
|
41
|
-
# <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
|
42
|
-
# <% tab.with_text { "Tab 2" } %>
|
43
|
-
# <% tab.with_panel { "Panel 2" } %>
|
44
|
-
# <% end %>
|
45
|
-
# <% end %>
|
46
|
-
#
|
47
|
-
# %>
|
48
|
-
#
|
49
|
-
# @param sr_label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
|
50
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
51
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
52
|
-
def initialize(sr_label:, classes: "", attributes: {})
|
53
|
-
@tag = DEFAULT_TAG
|
54
|
-
@classes = merge_class_names(
|
55
|
-
DEFAULT_CLASSES,
|
56
|
-
classes,
|
57
|
-
)
|
58
|
-
|
59
|
-
@attributes = attributes
|
60
|
-
@attributes[:"aria-label"] = sr_label
|
61
|
-
@attributes[:role] = :presentation
|
62
|
-
end
|
63
|
-
|
64
|
-
def render?
|
65
|
-
tabs?
|
66
|
-
end
|
67
|
-
end
|
68
|
-
end
|