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.
Files changed (100) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -0
  3. data/lib/ariadne/view_components/upstream.rb +0 -1
  4. data/lib/ariadne/view_components/version.rb +1 -1
  5. data/static/audited_at.json +0 -1
  6. data/static/constants.json +0 -2
  7. data/static/statuses.json +0 -1
  8. metadata +2 -94
  9. data/app/assets/config/manifest.js +0 -2
  10. data/app/assets/stylesheets/ariadne_view_components.css +0 -7
  11. data/app/assets/stylesheets/dropdown.css +0 -46
  12. data/app/assets/stylesheets/prosemirror.css +0 -323
  13. data/app/assets/stylesheets/tooltip-component.css +0 -37
  14. data/app/components/ariadne/ariadne-form.ts +0 -96
  15. data/app/components/ariadne/ariadne.ts +0 -21
  16. data/app/components/ariadne/avatar_component.rb +0 -81
  17. data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +0 -12
  18. data/app/components/ariadne/avatar_stack_component.rb +0 -75
  19. data/app/components/ariadne/base_button.rb +0 -70
  20. data/app/components/ariadne/base_component.rb +0 -37
  21. data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +0 -26
  22. data/app/components/ariadne/blankslate_component.rb +0 -148
  23. data/app/components/ariadne/body_component.rb +0 -30
  24. data/app/components/ariadne/button_component/button_component.html.erb +0 -4
  25. data/app/components/ariadne/button_component.rb +0 -165
  26. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +0 -19
  27. data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +0 -9
  28. data/app/components/ariadne/clipboard_copy_component.rb +0 -90
  29. data/app/components/ariadne/comment_component/comment_component.html.erb +0 -37
  30. data/app/components/ariadne/comment_component.rb +0 -71
  31. data/app/components/ariadne/component.rb +0 -127
  32. data/app/components/ariadne/container_component/container_component.html.erb +0 -3
  33. data/app/components/ariadne/container_component.rb +0 -25
  34. data/app/components/ariadne/content.rb +0 -12
  35. data/app/components/ariadne/counter_component.rb +0 -100
  36. data/app/components/ariadne/details_component/details_component.html.erb +0 -4
  37. data/app/components/ariadne/details_component.rb +0 -81
  38. data/app/components/ariadne/dropdown/menu_component.html.erb +0 -20
  39. data/app/components/ariadne/dropdown/menu_component.rb +0 -101
  40. data/app/components/ariadne/dropdown/menu_component.ts +0 -1
  41. data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +0 -8
  42. data/app/components/ariadne/dropdown_component.rb +0 -172
  43. data/app/components/ariadne/flash_component/flash_component.html.erb +0 -31
  44. data/app/components/ariadne/flash_component.rb +0 -128
  45. data/app/components/ariadne/flex_component/flex_component.html.erb +0 -5
  46. data/app/components/ariadne/flex_component.rb +0 -56
  47. data/app/components/ariadne/footer_component/footer_component.html.erb +0 -7
  48. data/app/components/ariadne/footer_component.rb +0 -23
  49. data/app/components/ariadne/grid_component/grid_component.html.erb +0 -26
  50. data/app/components/ariadne/grid_component.rb +0 -63
  51. data/app/components/ariadne/header_component/header_component.html.erb +0 -29
  52. data/app/components/ariadne/header_component.rb +0 -111
  53. data/app/components/ariadne/heading_component.rb +0 -49
  54. data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +0 -4
  55. data/app/components/ariadne/heroicon_component.rb +0 -166
  56. data/app/components/ariadne/image_component.rb +0 -53
  57. data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +0 -6
  58. data/app/components/ariadne/inline_flex_component.rb +0 -72
  59. data/app/components/ariadne/link_component.rb +0 -65
  60. data/app/components/ariadne/list_component/list_component.html.erb +0 -6
  61. data/app/components/ariadne/list_component.rb +0 -70
  62. data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +0 -3
  63. data/app/components/ariadne/narrow_container_component.rb +0 -30
  64. data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +0 -20
  65. data/app/components/ariadne/panel_bar_component.rb +0 -80
  66. data/app/components/ariadne/pill_component/pill_component.html.erb +0 -3
  67. data/app/components/ariadne/pill_component.rb +0 -44
  68. data/app/components/ariadne/rich_text_area_component/rich-text-area-component.ts +0 -47
  69. data/app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb +0 -6
  70. data/app/components/ariadne/rich_text_area_component.rb +0 -35
  71. data/app/components/ariadne/slideover_component/slideover-component.ts +0 -17
  72. data/app/components/ariadne/slideover_component/slideover_component.html.erb +0 -9
  73. data/app/components/ariadne/slideover_component.rb +0 -66
  74. data/app/components/ariadne/tab_component/tab_component.html.erb +0 -3
  75. data/app/components/ariadne/tab_component.rb +0 -98
  76. data/app/components/ariadne/tab_container_component/tab-container-component.ts +0 -24
  77. data/app/components/ariadne/tab_container_component.erb +0 -10
  78. data/app/components/ariadne/tab_container_component.rb +0 -68
  79. data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +0 -34
  80. data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +0 -7
  81. data/app/components/ariadne/tab_nav_component.rb +0 -72
  82. data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +0 -52
  83. data/app/components/ariadne/table_nav_component.rb +0 -338
  84. data/app/components/ariadne/text.rb +0 -25
  85. data/app/components/ariadne/time_ago_component/time-ago-component.ts +0 -1
  86. data/app/components/ariadne/time_ago_component.rb +0 -56
  87. data/app/components/ariadne/timeline_component/timeline_component.html.erb +0 -19
  88. data/app/components/ariadne/timeline_component.rb +0 -34
  89. data/app/components/ariadne/tooltip_component/tooltip-component.ts +0 -57
  90. data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +0 -4
  91. data/app/components/ariadne/tooltip_component.rb +0 -108
  92. data/app/lib/ariadne/action_view_extensions/form_helper.rb +0 -30
  93. data/app/lib/ariadne/audited/dsl.rb +0 -32
  94. data/app/lib/ariadne/class_name_helper.rb +0 -22
  95. data/app/lib/ariadne/fetch_or_fallback_helper.rb +0 -110
  96. data/app/lib/ariadne/form_builder.rb +0 -74
  97. data/app/lib/ariadne/icon_helper.rb +0 -51
  98. data/app/lib/ariadne/logger_helper.rb +0 -23
  99. data/app/lib/ariadne/status/dsl.rb +0 -41
  100. 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,3 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
2
- <%= content %>
3
- <% 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,3 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
2
- <%= content %>
3
- <% 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,3 +0,0 @@
1
- <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
2
- <%= text || content %>
3
- <% 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