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,96 +0,0 @@
|
|
1
|
-
import {Controller} from '@hotwired/stimulus'
|
2
|
-
import {html} from 'lit-html'
|
3
|
-
import type {TemplateResult} from 'lit-html'
|
4
|
-
|
5
|
-
type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
|
6
|
-
|
7
|
-
export default class AriadneFormWith extends Controller {
|
8
|
-
static targets = ['formField']
|
9
|
-
declare readonly formFieldTargets: [HTMLFormField]
|
10
|
-
|
11
|
-
connect() {
|
12
|
-
this.element.setAttribute('novalidate', 'true')
|
13
|
-
this.element.addEventListener('blur', this.onBlur, true)
|
14
|
-
this.element.addEventListener('submit', this.onSubmit)
|
15
|
-
this.element.addEventListener('ajax:beforeSend', this.onSubmit)
|
16
|
-
}
|
17
|
-
|
18
|
-
disconnect() {
|
19
|
-
this.element.removeEventListener('blur', this.onBlur)
|
20
|
-
this.element.removeEventListener('submit', this.onSubmit)
|
21
|
-
this.element.removeEventListener('ajax:beforeSend', this.onSubmit)
|
22
|
-
}
|
23
|
-
|
24
|
-
onBlur = (event: Event) => {
|
25
|
-
this.validateField(event.target as HTMLFormField)
|
26
|
-
}
|
27
|
-
|
28
|
-
onSubmit = (event: Event) => {
|
29
|
-
if (!this.validateForm()) {
|
30
|
-
event.preventDefault()
|
31
|
-
this.firstInvalidField?.focus()
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
validateForm() {
|
36
|
-
let isValid = true
|
37
|
-
// Not using `find` because we want to validate all the fields
|
38
|
-
for (const field of this.formFields) {
|
39
|
-
if (this.shouldValidateField(field) && !this.validateField(field)) isValid = false
|
40
|
-
}
|
41
|
-
return isValid
|
42
|
-
}
|
43
|
-
|
44
|
-
validateField(field: HTMLFormField) {
|
45
|
-
if (!this.shouldValidateField(field)) return true
|
46
|
-
const isValid = field.checkValidity()
|
47
|
-
field.classList.toggle('invalid', !isValid)
|
48
|
-
this.refreshErrorForInvalidField(field, isValid)
|
49
|
-
return isValid
|
50
|
-
}
|
51
|
-
|
52
|
-
shouldValidateField(field: HTMLFormField) {
|
53
|
-
return (
|
54
|
-
!field.disabled &&
|
55
|
-
!field.classList.contains('ProseMirror') &&
|
56
|
-
!['file', 'reset', 'submit', 'button'].includes(field.type)
|
57
|
-
)
|
58
|
-
}
|
59
|
-
|
60
|
-
refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean) {
|
61
|
-
this.removeExistingErrorMessage(field)
|
62
|
-
if (!isValid) this.showErrorForInvalidField(field)
|
63
|
-
}
|
64
|
-
|
65
|
-
removeExistingErrorMessage(field: HTMLFormField) {
|
66
|
-
const fieldContainer = field.closest('.field')
|
67
|
-
if (!fieldContainer) return
|
68
|
-
const existingErrorMessageElement = fieldContainer.querySelector('.error')
|
69
|
-
if (existingErrorMessageElement) {
|
70
|
-
existingErrorMessageElement?.parentNode?.removeChild(existingErrorMessageElement)
|
71
|
-
}
|
72
|
-
}
|
73
|
-
|
74
|
-
showErrorForInvalidField(field: HTMLFormField) {
|
75
|
-
field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field))
|
76
|
-
}
|
77
|
-
|
78
|
-
buildFieldErrorHtml(field: HTMLFormField) {
|
79
|
-
const data = html`<p class="error">${field.validationMessage}</p>`
|
80
|
-
return this.getRenderString(data)
|
81
|
-
}
|
82
|
-
|
83
|
-
get formFields(): HTMLFormField[] {
|
84
|
-
return Array.from(this.formFieldTargets)
|
85
|
-
}
|
86
|
-
|
87
|
-
get firstInvalidField() {
|
88
|
-
return this.formFields.find(field => !field.checkValidity())
|
89
|
-
}
|
90
|
-
|
91
|
-
getRenderString = (data: TemplateResult): string => {
|
92
|
-
const {strings, values} = data
|
93
|
-
const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e as TemplateResult) : e))
|
94
|
-
return strings.reduce((acc, s, i) => acc + s + v[i], '')
|
95
|
-
}
|
96
|
-
}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import {Application} from '@hotwired/stimulus'
|
2
|
-
|
3
|
-
import AriadneForm from './ariadne-form'
|
4
|
-
|
5
|
-
import ClipboardCopyComponent from './clipboard_copy_component/clipboard-copy-component'
|
6
|
-
import RichTextAreaComponent from './rich_text_area_component/rich-text-area-component'
|
7
|
-
import SlideoverComponent from './slideover_component/slideover-component'
|
8
|
-
import TabNavComponent from './tab_nav_component/tab-nav-component'
|
9
|
-
import TooltipComponent from './tooltip_component/tooltip-component'
|
10
|
-
|
11
|
-
import './tab_container_component/tab-container-component'
|
12
|
-
import './time_ago_component/time-ago-component'
|
13
|
-
|
14
|
-
const application = Application.start()
|
15
|
-
|
16
|
-
application.register('clipboard-copy-component', ClipboardCopyComponent)
|
17
|
-
application.register('ariadne-form', AriadneForm)
|
18
|
-
application.register('rich-text-area-component', RichTextAreaComponent)
|
19
|
-
application.register('slideover-component', SlideoverComponent)
|
20
|
-
application.register('tab-nav-component', TabNavComponent)
|
21
|
-
application.register('tooltip-component', TooltipComponent)
|
@@ -1,81 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# `Avatar` can be used to represent users.
|
5
|
-
#
|
6
|
-
# - Use the default circle avatar for users, and the square shape
|
7
|
-
# for or any other non-human avatars.
|
8
|
-
# - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
|
9
|
-
# - Set `size` to update the height and width of the `Avatar` in pixels.
|
10
|
-
# - To stack multiple avatars together, use <%= link_to_component(Ariadne::AvatarStackComponent) %>.
|
11
|
-
#
|
12
|
-
# @accessibility
|
13
|
-
# Images should have text alternatives that describe the information or function represented.
|
14
|
-
# If the avatar functions as a link, provide alt text that helps convey the function. For instance,
|
15
|
-
# if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
|
16
|
-
# rather than `@kittenuser`.
|
17
|
-
# [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
|
18
|
-
class AvatarComponent < Ariadne::Component
|
19
|
-
DEFAULT_SIZE = 20
|
20
|
-
SMALL_THRESHOLD = 24
|
21
|
-
|
22
|
-
DEFAULT_SHAPE = :circle
|
23
|
-
SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
|
24
|
-
|
25
|
-
SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
|
26
|
-
|
27
|
-
DEFAULT_CLASSES = "ariadne-inline-block ariadne-rounded-full ariadne-ring-2 ariadne-ring-white"
|
28
|
-
|
29
|
-
# @example Default
|
30
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
|
31
|
-
#
|
32
|
-
# @example Square
|
33
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>
|
34
|
-
#
|
35
|
-
# @example Link
|
36
|
-
# <%= render(Ariadne::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
|
37
|
-
#
|
38
|
-
# @example With size
|
39
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
|
40
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
|
41
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
|
42
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
|
43
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
|
44
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
|
45
|
-
# <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>
|
46
|
-
#
|
47
|
-
# @param src [String] The source url of the avatar image.
|
48
|
-
# @param alt [String] Passed through to alt on img tag.
|
49
|
-
# @param size [Integer] <%= one_of(Ariadne::AvatarComponent::SIZE_OPTIONS) %>
|
50
|
-
# @param shape [Symbol] Shape of the avatar. <%= one_of(Ariadne::AvatarComponent::SHAPE_OPTIONS) %>
|
51
|
-
# @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
|
52
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
53
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
54
|
-
def initialize(src:, alt:, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, classes: "", attributes: {})
|
55
|
-
@tag = :img
|
56
|
-
@href = href
|
57
|
-
|
58
|
-
@classes = merge_class_names(
|
59
|
-
DEFAULT_CLASSES,
|
60
|
-
classes,
|
61
|
-
)
|
62
|
-
|
63
|
-
@attributes = attributes
|
64
|
-
@attributes[:src] = src
|
65
|
-
@attributes[:alt] = alt
|
66
|
-
@attributes[:size] = fetch_or_raise(SIZE_OPTIONS, size)
|
67
|
-
@attributes[:height] = @attributes[:size]
|
68
|
-
@attributes[:width] = @attributes[:size]
|
69
|
-
end
|
70
|
-
|
71
|
-
def call
|
72
|
-
if @href
|
73
|
-
render(Ariadne::LinkComponent.new(href: @href, classes: @classes, attributes: @attributes)) do
|
74
|
-
render(Ariadne::BaseComponent.new(tag: @tag)) { content }
|
75
|
-
end
|
76
|
-
else
|
77
|
-
render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
|
78
|
-
end
|
79
|
-
end
|
80
|
-
end
|
81
|
-
end
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
|
2
|
-
<% if tooltipped? %>
|
3
|
-
<%= tooltip.to_s %>
|
4
|
-
<% avatars.each_with_index do |avatar, i| %>
|
5
|
-
<%= avatar %>
|
6
|
-
<% end %>
|
7
|
-
<% else %>
|
8
|
-
<% avatars.each_with_index do |avatar, i| %>
|
9
|
-
<%= avatar %>
|
10
|
-
<% end %>
|
11
|
-
<% end %>
|
12
|
-
<% end %>
|
@@ -1,75 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `AvatarStack` to stack multiple avatars together.
|
5
|
-
class AvatarStackComponent < Ariadne::Component
|
6
|
-
ALIGN_DEFAULT = :left
|
7
|
-
ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
|
8
|
-
|
9
|
-
DEFAULT_TAG = :div
|
10
|
-
TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
|
11
|
-
|
12
|
-
DEFAULT_BODY_TAG = :div
|
13
|
-
BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
|
14
|
-
|
15
|
-
# `Tooltip` that appears on mouse hover or keyboard focus over the stack.
|
16
|
-
#
|
17
|
-
# @param tag [Symbol, String] The rendered tag name
|
18
|
-
# @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
|
19
|
-
# @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
|
20
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
21
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>.
|
22
|
-
renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, classes: "", attributes: {}|
|
23
|
-
raise ArgumentError, "Avatar stacks with a tooltip must have a unique `id` set." if @id.blank?
|
24
|
-
|
25
|
-
Ariadne::TooltipComponent.new(for_id: @id, tag: tag, text: text, direction: direction, type: :label, classes: classes, attributes: attributes)
|
26
|
-
}
|
27
|
-
|
28
|
-
# Required list of stacked avatars.
|
29
|
-
#
|
30
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
31
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
32
|
-
renders_many :avatars, "Ariadne::AvatarComponent"
|
33
|
-
|
34
|
-
DEFAULT_CLASSES = "ariadne-flex ariadne--space-x-2 ariadne-overflow-hidden"
|
35
|
-
|
36
|
-
# @example Default
|
37
|
-
# <%= render(Ariadne::AvatarStackComponent.new) do |c| %>
|
38
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
39
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
40
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
41
|
-
# <% end %>
|
42
|
-
#
|
43
|
-
# @example Align right
|
44
|
-
# <%= render(Ariadne::AvatarStackComponent.new(align: :right)) do |c| %>
|
45
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
46
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
47
|
-
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
48
|
-
# <% end %>
|
49
|
-
#
|
50
|
-
# @param tag [Symbol] <%= one_of(Ariadne::AvatarStackComponent::TAG_OPTIONS) %>
|
51
|
-
# @param align [Symbol] <%= one_of(Ariadne::AvatarStackComponent::ALIGN_OPTIONS) %>
|
52
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
53
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
54
|
-
def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, classes: "", attributes: {})
|
55
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
56
|
-
@align = fetch_or_raise(ALIGN_OPTIONS, align)
|
57
|
-
@classes = merge_class_names(
|
58
|
-
DEFAULT_CLASSES,
|
59
|
-
classes,
|
60
|
-
)
|
61
|
-
|
62
|
-
@attributes = attributes
|
63
|
-
@attributes[:id] ||= "avatar-stack-#{SecureRandom.hex(4)}"
|
64
|
-
@id = @attributes[:id]
|
65
|
-
end
|
66
|
-
|
67
|
-
def render?
|
68
|
-
avatars.any?
|
69
|
-
end
|
70
|
-
|
71
|
-
def tooltipped?
|
72
|
-
tooltip.present?
|
73
|
-
end
|
74
|
-
end
|
75
|
-
end
|
@@ -1,70 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
|
5
|
-
class BaseButton < Ariadne::Component
|
6
|
-
DEFAULT_TAG = :button
|
7
|
-
TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
|
8
|
-
|
9
|
-
DEFAULT_TYPE = :button
|
10
|
-
TYPE_SUBMIT = :submit
|
11
|
-
VALID_TYPES = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
|
12
|
-
|
13
|
-
SIZE_CLASS_MAPPINGS = {
|
14
|
-
xs: "ariadne-px-2.5 ariadne-py-1.5 ariadne-text-xs ariadne-font-medium ariadne-rounded",
|
15
|
-
sm: "ariadne-px-3 ariadne-py-2 ariadne-text-sm ariadne-leading-4 ariadne-font-medium ariadne-rounded-m",
|
16
|
-
md: "ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md",
|
17
|
-
lg: "ariadne-px-4 ariadne-py-2 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
|
18
|
-
xl: "ariadne-px-6 ariadne-py-3 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
|
19
|
-
}.freeze
|
20
|
-
VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
|
21
|
-
|
22
|
-
DEFAULT_CLASSES = "ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
|
23
|
-
DEFAULT_NUDE_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
|
24
|
-
|
25
|
-
DEFAULT_SIZE = :md
|
26
|
-
|
27
|
-
# @example Setting the size
|
28
|
-
# <%= render(Ariadne::BaseButton.new(size: :xs)) { "I am an extra small button!" } %>
|
29
|
-
# <%= render(Ariadne::BaseButton.new(size: :sm)) { "I am a small button!" } %>
|
30
|
-
# <%= render(Ariadne::BaseButton.new(size: :md)) { "I am a medium button!" } %>
|
31
|
-
# <%= render(Ariadne::BaseButton.new(size: :lg)) { "I am a large button!" } %>
|
32
|
-
# <%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>
|
33
|
-
#
|
34
|
-
# @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
|
35
|
-
# @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
|
36
|
-
# @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
|
37
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
38
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
39
|
-
def initialize(
|
40
|
-
tag: DEFAULT_TAG,
|
41
|
-
type: DEFAULT_TYPE,
|
42
|
-
size: DEFAULT_SIZE,
|
43
|
-
classes: "",
|
44
|
-
attributes: {}
|
45
|
-
)
|
46
|
-
@attributes = attributes
|
47
|
-
@tag = fetch_or_raise(TAG_OPTIONS, tag)
|
48
|
-
@size = fetch_or_raise(VALID_SIZES, size)
|
49
|
-
|
50
|
-
if button?
|
51
|
-
@attributes[:type] = fetch_or_raise(VALID_TYPES, type)
|
52
|
-
@classes = merge_class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
|
53
|
-
else
|
54
|
-
@classes = merge_class_names(DEFAULT_NUDE_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
|
55
|
-
end
|
56
|
-
end
|
57
|
-
|
58
|
-
def call
|
59
|
-
render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
|
60
|
-
end
|
61
|
-
|
62
|
-
private def link?(type)
|
63
|
-
type == :link
|
64
|
-
end
|
65
|
-
|
66
|
-
private def button?
|
67
|
-
@tag == :button
|
68
|
-
end
|
69
|
-
end
|
70
|
-
end
|
@@ -1,37 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# All Ariadne ViewComponents accept a standard set of options: classes, which match Tailwind CSS classes, and attributes, which match HTML attributes..
|
5
|
-
#
|
6
|
-
# Under the hood, any-non class attributes is passed to Rails' [`tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag)
|
7
|
-
# (for self-closing tags) or [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
|
8
|
-
class BaseComponent < Ariadne::Component
|
9
|
-
SELF_CLOSING_TAGS = [:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
|
10
|
-
|
11
|
-
def initialize(tag:, classes: "", attributes: {})
|
12
|
-
@tag = tag
|
13
|
-
|
14
|
-
@attributes = validate_attributes(tag: tag, attributes: attributes) || {}
|
15
|
-
@attributes[:"data-ariadne-view-component"] = true
|
16
|
-
|
17
|
-
classes = @attributes.fetch(:classes, "") if classes.blank?
|
18
|
-
@classes = validate_merge_class_names(classes) || {}
|
19
|
-
@content_tag_args = {}
|
20
|
-
end
|
21
|
-
|
22
|
-
def call
|
23
|
-
options = @attributes.merge(@classes)
|
24
|
-
if SELF_CLOSING_TAGS.include?(@tag)
|
25
|
-
tag(@tag, options)
|
26
|
-
else
|
27
|
-
content_tag(@tag, content, options)
|
28
|
-
end
|
29
|
-
end
|
30
|
-
|
31
|
-
private def validate_merge_class_names(classes)
|
32
|
-
return if classes.blank?
|
33
|
-
|
34
|
-
{ class: Ariadne::ViewComponents.tailwind_merger.merge(classes) }
|
35
|
-
end
|
36
|
-
end
|
37
|
-
end
|
@@ -1,26 +0,0 @@
|
|
1
|
-
<%= render Ariadne::NarrowContainerComponent.new do %>
|
2
|
-
<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
|
3
|
-
<% if icon.present? %>
|
4
|
-
<%= icon %>
|
5
|
-
<% elsif image.present? %>
|
6
|
-
<%= image %>
|
7
|
-
<% end %>
|
8
|
-
<%= heading %>
|
9
|
-
<% if description.present? %>
|
10
|
-
<%= description %>
|
11
|
-
<% end %>
|
12
|
-
<%= content %>
|
13
|
-
<div class="ariadne-mt-8 ariadne-flex ariadne-justify-center">
|
14
|
-
<% if primary_action.present? %>
|
15
|
-
<div class="ariadne-inline-flex ariadne-rounded-md shadow">
|
16
|
-
<%= primary_action %>
|
17
|
-
</div>
|
18
|
-
<% end %>
|
19
|
-
<% if secondary_action.present? %>
|
20
|
-
<div class="ariadne-ml-3 ariadne-inline-flex">
|
21
|
-
<%= secondary_action %>
|
22
|
-
</div>
|
23
|
-
<% end %>
|
24
|
-
</div>
|
25
|
-
<% end %>
|
26
|
-
<% end %>
|
@@ -1,148 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Ariadne
|
4
|
-
# Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
|
5
|
-
#
|
6
|
-
# @accessibility
|
7
|
-
# - The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.
|
8
|
-
# - All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`, which will hide the visual from screen reader users.
|
9
|
-
# - The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.
|
10
|
-
# - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
|
11
|
-
class BlankslateComponent < Ariadne::Component
|
12
|
-
DEFAULT_TAG = :div
|
13
|
-
TAG_OPTIONS = [DEFAULT_TAG].freeze
|
14
|
-
|
15
|
-
DEFAULT_CLASSES = "ariadne-text-center"
|
16
|
-
|
17
|
-
# Optional visual that renders an <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
18
|
-
#
|
19
|
-
# @param tag [Symbol, String] The rendered tag name
|
20
|
-
# @param icon [String] Name of <%= link_to_heroicons %> to use.
|
21
|
-
# @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
|
22
|
-
# @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
|
23
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
24
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
25
|
-
renders_one :icon, lambda { |tag: :svg, icon:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}|
|
26
|
-
@icon = icon
|
27
|
-
@variant = variant
|
28
|
-
tag = check_incoming_tag(:svg, tag)
|
29
|
-
Ariadne::HeroiconComponent.new(tag: tag, icon: icon, size: size, variant: variant, classes: classes, attributes: attributes)
|
30
|
-
}
|
31
|
-
|
32
|
-
# Optional visual that renders an <%= link_to_component(Ariadne::ImageComponent) %>.
|
33
|
-
#
|
34
|
-
# @param tag [Symbol, String] The rendered tag name
|
35
|
-
# @param src [String] The source url of the image.
|
36
|
-
# @param alt [String] Specifies an alternate text for the image.
|
37
|
-
# @param lazy [Boolean] Whether or not to lazily load the image.
|
38
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
39
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
40
|
-
DEFAULT_IMAGE_SIZE = 56
|
41
|
-
renders_one :image, lambda { |tag: Ariadne::ImageComponent::DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {}|
|
42
|
-
attributes[:height] = DEFAULT_IMAGE_SIZE
|
43
|
-
attributes[:width] = DEFAULT_IMAGE_SIZE
|
44
|
-
|
45
|
-
Ariadne::ImageComponent.new(tag: tag, src: src, alt: alt, lazy: lazy, classes: classes, attributes: attributes)
|
46
|
-
}
|
47
|
-
|
48
|
-
# Required heading.
|
49
|
-
#
|
50
|
-
# @param tag [Symbol, String] <%= one_of(Ariadne::HeadingComponent::TAG_OPTIONS) %>
|
51
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
52
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
53
|
-
DEFAULT_HEADING_CLASSES = "ariadne-text-3xl ariadne-font-extrabold ariadne-tracking-tight ariadne-text-gray-900 sm:ariadne-text-4xl"
|
54
|
-
renders_one :heading, lambda { |tag: :h1, classes: "", attributes: {}|
|
55
|
-
actual_classes = merge_class_names(DEFAULT_HEADING_CLASSES, classes)
|
56
|
-
|
57
|
-
Ariadne::HeadingComponent.new(tag: tag, classes: actual_classes, attributes: attributes)
|
58
|
-
}
|
59
|
-
|
60
|
-
# Optional description.
|
61
|
-
#
|
62
|
-
# - The description should always be informative and actionable.
|
63
|
-
# - Don't use phrases like "You can".
|
64
|
-
#
|
65
|
-
# @param tag [Symbol, String] The rendered tag name
|
66
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
67
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
68
|
-
renders_one :description, lambda { |tag: :p, classes: "", attributes: {}|
|
69
|
-
actual_tag = check_incoming_tag(:p, tag)
|
70
|
-
|
71
|
-
Ariadne::BaseComponent.new(tag: actual_tag, classes: classes, attributes: attributes)
|
72
|
-
}
|
73
|
-
|
74
|
-
# Optional primary action
|
75
|
-
#
|
76
|
-
# The `primary_action` slot renders an anchor link which is visually styled as a button to provide more emphasis to the
|
77
|
-
# Blankslate's primary action.
|
78
|
-
#
|
79
|
-
# @param href [String] URL to be used for the primary action.
|
80
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
81
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
82
|
-
renders_one :primary_action, lambda { |href: nil, tag: :a, method: nil, size: :md, scheme: :default, classes: "", attributes: {}|
|
83
|
-
attributes[:href] = href
|
84
|
-
attributes[:method] = method
|
85
|
-
|
86
|
-
Ariadne::ButtonComponent.new(
|
87
|
-
tag: tag,
|
88
|
-
type: Ariadne::BaseButton::DEFAULT_TYPE,
|
89
|
-
scheme: scheme,
|
90
|
-
size: size,
|
91
|
-
classes: classes,
|
92
|
-
attributes: attributes,
|
93
|
-
)
|
94
|
-
}
|
95
|
-
|
96
|
-
# Optional secondary action
|
97
|
-
#
|
98
|
-
# The `secondary_action` slot renders a normal anchor link, which can be used to redirect the user to additional information
|
99
|
-
# (e.g. Help documentation).
|
100
|
-
#
|
101
|
-
# @param href [String] URL to be used for the secondary action.
|
102
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
103
|
-
# @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
|
104
|
-
renders_one :secondary_action, lambda { |href:, classes: "", attributes: {}|
|
105
|
-
attributes[:href] = href
|
106
|
-
|
107
|
-
Ariadne::LinkComponent.new(href: href, classes: classes, attributes: attributes)
|
108
|
-
}
|
109
|
-
|
110
|
-
# @example Basic
|
111
|
-
# <%= render Ariadne::BlankslateComponent.new do |c| %>
|
112
|
-
# <% c.with_heading(tag: :h2) { "heading" } %>
|
113
|
-
# <% c.with_description { "Description"} %>
|
114
|
-
# <% end %>
|
115
|
-
#
|
116
|
-
# @example Icon
|
117
|
-
# @description
|
118
|
-
# Add an `icon` to give additional context. Refer to the [Heroicons](https://heroicons.com) documentation to choose an icon.
|
119
|
-
# @code
|
120
|
-
# <%= render Ariadne::BlankslateComponent.new do |c| %>
|
121
|
-
# <% c.with_icon(icon: :"globe-europe-africa") %>
|
122
|
-
# <% c.with_heading(tag: :h2) { "heading" } %>
|
123
|
-
# <% c.with_description { "Description"} %>
|
124
|
-
# <% end %>
|
125
|
-
#
|
126
|
-
# @example Using an image
|
127
|
-
# @description
|
128
|
-
# Add an `image` to give context that an Octicon couldn't.
|
129
|
-
# @code
|
130
|
-
# <%= render Ariadne::BlankslateComponent.new do |c| %>
|
131
|
-
# <% c.with_image(src: "https://github.githubassets.com/images/modules/site/features/security-icon.svg", alt: "Security - secure vault") %>
|
132
|
-
# <% c.with_heading(tag: :h2){ "heading" } %>
|
133
|
-
# <% end %>
|
134
|
-
#
|
135
|
-
# @param tag [Symbol, String] The rendered tag name
|
136
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
137
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
138
|
-
def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
|
139
|
-
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
140
|
-
@classes = merge_class_names(DEFAULT_CLASSES, classes)
|
141
|
-
@attributes = attributes
|
142
|
-
end
|
143
|
-
|
144
|
-
def render?
|
145
|
-
heading.present?
|
146
|
-
end
|
147
|
-
end
|
148
|
-
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 BodyComponent < Ariadne::Component
|
8
|
-
DEFAULT_CLASSES = "ariadne-scroll-smooth ariadne-antialiased"
|
9
|
-
|
10
|
-
# @example Default
|
11
|
-
#
|
12
|
-
# <%= render(Ariadne::BodyComponent.new) { "Example" } %>
|
13
|
-
#
|
14
|
-
# @param classes [String] <%= link_to_classes_docs %>
|
15
|
-
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
16
|
-
def initialize(classes: "", attributes: {})
|
17
|
-
@tag = :body
|
18
|
-
@classes = merge_class_names(
|
19
|
-
DEFAULT_CLASSES,
|
20
|
-
classes,
|
21
|
-
)
|
22
|
-
|
23
|
-
@attributes = attributes
|
24
|
-
end
|
25
|
-
|
26
|
-
def call
|
27
|
-
render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
|
28
|
-
end
|
29
|
-
end
|
30
|
-
end
|
@@ -1,4 +0,0 @@
|
|
1
|
-
<%= render Ariadne::BaseButton.new(tag: @tag, type: @type, classes: @classes, attributes: @attributes) do -%>
|
2
|
-
<%= icon %><%= trimmed_content %><%= counter %><%= ariadne_heroicon(icon: :"chevron-down", variant: HeroiconsHelper::Icon::VARIANT_MINI, classes: "ariadne-ml-2 ariadne--mr-1") if dropdown? %>
|
3
|
-
<%= tooltip %>
|
4
|
-
<% end -%>
|