ariadne_view_components 0.0.39-x86_64-darwin → 0.0.40-x86_64-darwin

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/lib/ariadne/view_components/upstream.rb +0 -1
  4. data/lib/ariadne/view_components/version.rb +1 -1
  5. metadata +2 -94
  6. data/app/assets/config/manifest.js +0 -2
  7. data/app/assets/stylesheets/ariadne_view_components.css +0 -7
  8. data/app/assets/stylesheets/dropdown.css +0 -46
  9. data/app/assets/stylesheets/prosemirror.css +0 -323
  10. data/app/assets/stylesheets/tooltip-component.css +0 -37
  11. data/app/components/ariadne/ariadne-form.ts +0 -96
  12. data/app/components/ariadne/ariadne.ts +0 -21
  13. data/app/components/ariadne/avatar_component.rb +0 -81
  14. data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +0 -12
  15. data/app/components/ariadne/avatar_stack_component.rb +0 -75
  16. data/app/components/ariadne/base_button.rb +0 -70
  17. data/app/components/ariadne/base_component.rb +0 -37
  18. data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +0 -26
  19. data/app/components/ariadne/blankslate_component.rb +0 -148
  20. data/app/components/ariadne/body_component.rb +0 -30
  21. data/app/components/ariadne/button_component/button_component.html.erb +0 -4
  22. data/app/components/ariadne/button_component.rb +0 -165
  23. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +0 -19
  24. data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +0 -9
  25. data/app/components/ariadne/clipboard_copy_component.rb +0 -90
  26. data/app/components/ariadne/comment_component/comment_component.html.erb +0 -37
  27. data/app/components/ariadne/comment_component.rb +0 -71
  28. data/app/components/ariadne/component.rb +0 -127
  29. data/app/components/ariadne/container_component/container_component.html.erb +0 -3
  30. data/app/components/ariadne/container_component.rb +0 -25
  31. data/app/components/ariadne/content.rb +0 -12
  32. data/app/components/ariadne/counter_component.rb +0 -100
  33. data/app/components/ariadne/details_component/details_component.html.erb +0 -4
  34. data/app/components/ariadne/details_component.rb +0 -81
  35. data/app/components/ariadne/dropdown/menu_component.html.erb +0 -20
  36. data/app/components/ariadne/dropdown/menu_component.rb +0 -101
  37. data/app/components/ariadne/dropdown/menu_component.ts +0 -1
  38. data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +0 -8
  39. data/app/components/ariadne/dropdown_component.rb +0 -172
  40. data/app/components/ariadne/flash_component/flash_component.html.erb +0 -31
  41. data/app/components/ariadne/flash_component.rb +0 -128
  42. data/app/components/ariadne/flex_component/flex_component.html.erb +0 -5
  43. data/app/components/ariadne/flex_component.rb +0 -56
  44. data/app/components/ariadne/footer_component/footer_component.html.erb +0 -7
  45. data/app/components/ariadne/footer_component.rb +0 -23
  46. data/app/components/ariadne/grid_component/grid_component.html.erb +0 -26
  47. data/app/components/ariadne/grid_component.rb +0 -67
  48. data/app/components/ariadne/header_component/header_component.html.erb +0 -29
  49. data/app/components/ariadne/header_component.rb +0 -111
  50. data/app/components/ariadne/heading_component.rb +0 -49
  51. data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +0 -4
  52. data/app/components/ariadne/heroicon_component.rb +0 -166
  53. data/app/components/ariadne/image_component.rb +0 -53
  54. data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +0 -6
  55. data/app/components/ariadne/inline_flex_component.rb +0 -72
  56. data/app/components/ariadne/link_component.rb +0 -65
  57. data/app/components/ariadne/list_component/list_component.html.erb +0 -6
  58. data/app/components/ariadne/list_component.rb +0 -70
  59. data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +0 -3
  60. data/app/components/ariadne/narrow_container_component.rb +0 -30
  61. data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +0 -20
  62. data/app/components/ariadne/panel_bar_component.rb +0 -80
  63. data/app/components/ariadne/pill_component/pill_component.html.erb +0 -3
  64. data/app/components/ariadne/pill_component.rb +0 -44
  65. data/app/components/ariadne/rich_text_area_component/rich-text-area-component.ts +0 -47
  66. data/app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb +0 -6
  67. data/app/components/ariadne/rich_text_area_component.rb +0 -35
  68. data/app/components/ariadne/slideover_component/slideover-component.ts +0 -17
  69. data/app/components/ariadne/slideover_component/slideover_component.html.erb +0 -9
  70. data/app/components/ariadne/slideover_component.rb +0 -66
  71. data/app/components/ariadne/tab_component/tab_component.html.erb +0 -3
  72. data/app/components/ariadne/tab_component.rb +0 -98
  73. data/app/components/ariadne/tab_container_component/tab-container-component.ts +0 -24
  74. data/app/components/ariadne/tab_container_component.erb +0 -10
  75. data/app/components/ariadne/tab_container_component.rb +0 -68
  76. data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +0 -34
  77. data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +0 -7
  78. data/app/components/ariadne/tab_nav_component.rb +0 -72
  79. data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +0 -52
  80. data/app/components/ariadne/table_nav_component.rb +0 -338
  81. data/app/components/ariadne/text.rb +0 -25
  82. data/app/components/ariadne/time_ago_component/time-ago-component.ts +0 -1
  83. data/app/components/ariadne/time_ago_component.rb +0 -56
  84. data/app/components/ariadne/timeline_component/timeline_component.html.erb +0 -19
  85. data/app/components/ariadne/timeline_component.rb +0 -34
  86. data/app/components/ariadne/tooltip_component/tooltip-component.ts +0 -57
  87. data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +0 -4
  88. data/app/components/ariadne/tooltip_component.rb +0 -108
  89. data/app/lib/ariadne/action_view_extensions/form_helper.rb +0 -30
  90. data/app/lib/ariadne/audited/dsl.rb +0 -32
  91. data/app/lib/ariadne/class_name_helper.rb +0 -22
  92. data/app/lib/ariadne/fetch_or_fallback_helper.rb +0 -110
  93. data/app/lib/ariadne/form_builder.rb +0 -74
  94. data/app/lib/ariadne/icon_helper.rb +0 -51
  95. data/app/lib/ariadne/logger_helper.rb +0 -23
  96. data/app/lib/ariadne/status/dsl.rb +0 -41
  97. data/app/lib/ariadne/view_helper.rb +0 -22
@@ -1,111 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Represents the top navigation bar on every page.
5
- class HeaderComponent < Ariadne::Component
6
- DEFAULT_CLASSES = "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-pt-4 ariadne-h-16 ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500"
7
- LINK_CLASSES = "ariadne-rounded-lg ariadne-py-1 ariadne-px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
8
-
9
- DEFAULT_TEXT_LOGO_CLASSES = "ariadne-flex ariadne-items-center ariadne-font-bold ariadne-text-xl"
10
- DEFAULT_IMAGE_LOGO_CLASSES = "ariadne-h-10 ariadne-w-auto"
11
-
12
- # Leading visuals at the far left of the header. You can pass either
13
- # `src` or `as_text` but not both.
14
- #
15
- # @param href [String] Where the logo should link to.
16
- # @param src [String] The URL of the image logo.
17
- # @param alt [String] Alt text for accessibility.
18
- # @param text [Boolean] The text to display
19
- # @param classes [String] <%= link_to_classes_docs %>
20
- # @param attributes [Hash] <%= link_to_attributes_docs %>
21
- renders_one :logo, lambda { |href: nil, src: nil, alt: nil, text: "", classes: "", attributes: {}|
22
- @href = href
23
- @text = text
24
-
25
- if src.blank?
26
- actual_classes = merge_class_names(DEFAULT_TEXT_LOGO_CLASSES, classes)
27
- Ariadne::Text.new(tag: :span, classes: actual_classes, attributes: attributes)
28
- else
29
- actual_classes = merge_class_names(DEFAULT_IMAGE_LOGO_CLASSES, classes)
30
- actual_attributes = { width: 40, height: 40 }.merge(attributes)
31
- @image_logo = Ariadne::ImageComponent.new(src: src, alt: alt, classes: actual_classes, attributes: actual_attributes)
32
- end
33
- }
34
-
35
- # Text within the header, representing navigation.
36
- #
37
- # @param tag [String, Symbol] The tag to use for the link.
38
- # @param href [String] The link destination.
39
- # @param classes [String] <%= link_to_classes_docs %>
40
- # @param attributes [Hash] <%= link_to_attributes_docs %>
41
- DEFAULT_NAV_LINK_CLASSES = "ariadne-inline-block ariadne-rounded-lg ariadne-py-1 ariadne-px-2 ariadne-text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
42
- renders_many :navigation_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
43
- actual_classes = merge_class_names(DEFAULT_NAV_LINK_CLASSES, classes)
44
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
45
- }
46
-
47
- # Text within the header, representing actions.
48
- #
49
- # @param tag [String, Symbol] The tag to use for the link.
50
- # @param href [String] The link destination.
51
- # @param classes [String] <%= link_to_classes_docs %>
52
- # @param attributes [Hash] <%= link_to_attributes_docs %>
53
- renders_many :action_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
54
- actual_classes = merge_class_names(DEFAULT_NAV_LINK_CLASSES, classes)
55
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
56
- }
57
-
58
- # Text within the header, representing a signup.
59
- #
60
- # @param tag [String, Symbol] The tag to use for the link.
61
- # @param href [String] The link destination.
62
- # @param classes [String] <%= link_to_classes_docs %>
63
- # @param attributes [Hash] <%= link_to_attributes_docs %>
64
- DEFAULT_SIGNUP_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2"
65
- renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
66
- actual_classes = merge_class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
67
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
68
- }
69
-
70
- DEFAULT_PROFILE_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:ariadne-outline-2 focus-visible:outline-offset-2"
71
- renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
72
- actual_classes = merge_class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
73
- Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
74
- }
75
-
76
- # @example Basic example
77
- #
78
- # <%= render(Ariadne::HeaderComponent.new) do |header| %>
79
- # <%= header.logo(text: true) { "GitHub" } %>
80
- # <%= header.navigation_link(href: "#features") { "Features" } %>
81
- # <%= header.login_link(href: "/login") { "Login" } %>
82
- # <% end %>
83
- #
84
- # @param classes [String] <%= link_to_classes_docs %>
85
- # @param attributes [Hash] <%= link_to_attributes_docs %>
86
- def initialize(classes: "", attributes: {})
87
- @classes = merge_class_names(
88
- DEFAULT_CLASSES,
89
- classes,
90
- )
91
-
92
- @attributes = attributes
93
- end
94
-
95
- private def has_logo?
96
- logo.present?
97
- end
98
-
99
- private def has_image_logo?
100
- has_logo? && @image_logo.present?
101
- end
102
-
103
- private def has_signup_link?
104
- signup_link.present?
105
- end
106
-
107
- private def has_profile_link?
108
- profile_link.present?
109
- end
110
- end
111
- end
@@ -1,49 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # `Heading` should be used to communicate page organization and hierarchy.
5
- #
6
- # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
7
- # - Use `Heading` as the title of a section or sub section.
8
- # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Ariadne::Text) %> with relevant <%= link_to_typography_docs %>
9
- # such as `font_size` and `font_weight`.
10
- # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
11
- #
12
- # @accessibility
13
- # While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
14
- # When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
15
- # consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
16
- #
17
- # Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
18
- # <%= link_to_heading_practices %>
19
- class HeadingComponent < Ariadne::Component
20
- TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
21
-
22
- TAG_TO_CLASSES = {
23
- h1: "ariadne-font-bold ariadne-leading-7 sm:ariadne-text-3xl",
24
- h2: "ariadne-text-3xl ariadne-font-extrabold",
25
- h3: "ariadne-text-2xl ariadne-font-extrabold",
26
- }
27
- # @example Default
28
- # <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
29
- # <%= render(Ariadne::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
30
- # <%= render(Ariadne::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
31
- # <%= render(Ariadne::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
32
- # <%= render(Ariadne::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
33
- # <%= render(Ariadne::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
34
- #
35
- # @param tag [String] <%= one_of(Ariadne::HeadingComponent::TAG_OPTIONS) %>
36
- # @param classes [String] <%= link_to_classes_docs %>
37
- # @param attributes [Hash] <%= link_to_attributes_docs %>
38
- def initialize(tag: nil, classes: "", attributes: {})
39
- @tag = fetch_or_raise(TAG_OPTIONS, tag)
40
- @attributes = attributes
41
-
42
- @classes = merge_class_names(*TAG_TO_CLASSES[tag], classes)
43
- end
44
-
45
- def call
46
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
47
- end
48
- end
49
- end
@@ -1,4 +0,0 @@
1
- <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
2
- <%= @icon.path %>
3
- <% end %>
4
- <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @text_attributes)) { content } if content.present? %>
@@ -1,166 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- require "heroicons_helper"
4
-
5
- module Ariadne
6
- # `Heroicon` renders an <%= link_to_heroicons %> with <%= link_to_attributes_docs %>.
7
- # `Heroicon` can also be rendered with the `heroicon` helper.
8
- class HeroiconComponent < Ariadne::Component
9
- DEFAULT_TEXT_CLASSES = "ariadne-pl-2"
10
-
11
- include IconHelper
12
- include HeroiconsHelper
13
-
14
- SIZE_XSMALL = :xs
15
- SIZE_SMALL = :sm
16
- SIZE_DEFAULT = :md
17
- SIZE_LARGE = :lg
18
-
19
- SIZE_MAPPINGS = {
20
- SIZE_XSMALL => 16,
21
- SIZE_SMALL => 20,
22
- SIZE_DEFAULT => 24,
23
- SIZE_LARGE => 128,
24
- }.freeze
25
- SIZE_OPTIONS = SIZE_MAPPINGS.keys
26
-
27
- PRELOADED_ICONS = [
28
- {
29
- name: "bell",
30
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
31
- },
32
- {
33
- name: "check",
34
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
35
- },
36
- {
37
- name: "chevron-down",
38
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
39
- },
40
- {
41
- name: "clipboard",
42
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
43
- },
44
- {
45
- name: "clock",
46
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
47
- },
48
- {
49
- name: "information-circle",
50
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
51
- },
52
- {
53
- name: "dots-horizontal",
54
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
55
- },
56
- {
57
- name: "link",
58
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
59
- },
60
- {
61
- name: "lock-closed",
62
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
63
- },
64
- {
65
- name: "mail",
66
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
67
- },
68
- {
69
- name: "menu",
70
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
71
- },
72
- {
73
- name: "pencil",
74
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
75
- },
76
- {
77
- name: "plus-sm",
78
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
79
- },
80
- {
81
- name: "question-mark-circle",
82
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
83
- },
84
- {
85
- name: "search",
86
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
87
- },
88
- {
89
- name: "search",
90
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
91
- },
92
- {
93
- name: "trash",
94
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
95
- },
96
- {
97
- name: "x-mark",
98
- variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
99
- },
100
- ].freeze
101
-
102
- # @example Default
103
- # <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)) %>
104
- # <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
105
- #
106
- # @example Medium
107
- # <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :md)) %>
108
- #
109
- # @example Helper
110
- # <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
111
- #
112
- # @param tag [Symbol, String] The rendered tag name
113
- # @param classes [String] <%= link_to_classes_docs %>
114
- # @param icon [Symbol, String] Name of <%= link_to_heroicons %> to use.
115
- # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
116
- # @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
117
- # @param attributes [Hash] <%= link_to_attributes_docs %>
118
- # @param text_classes [String] <%= link_to_classes_docs %>
119
- # @param text_attributes [Hash] <%= link_to_attributes_docs %>
120
- def initialize(tag: :svg, icon:, variant:, size: SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {})
121
- @tag = check_incoming_tag(:svg, tag)
122
-
123
- check_icon_presence!(icon, variant)
124
-
125
- @attributes = attributes
126
- @attributes[:aria] ||= {}
127
-
128
- if @attributes[:aria][:label] || @attributes[:"aria-label"]
129
- @attributes[:role] = "img"
130
- else
131
- @attributes[:aria][:hidden] = true
132
- end
133
-
134
- # Don't allow sizes under 16px
135
- if attributes[:height].present? && attributes[:height].to_i < 16 || attributes[:width].present? && attributes[:width].to_i < 16
136
- attributes.delete(:height)
137
- attributes.delete(:width)
138
- end
139
-
140
- # Filter out classify options to prevent them from becoming invalid html attributes.
141
- # Note height and width are both classify options and valid html attributes.
142
- attributes = {
143
- height: @attributes[:height] || SIZE_MAPPINGS[fetch_or_raise(SIZE_OPTIONS, size)],
144
- width: @attributes[:width],
145
- }
146
-
147
- @icon = heroicon(icon, variant: variant, **attributes)
148
- @classes = merge_class_names(
149
- @icon.attributes[:class],
150
- classes,
151
- )
152
- @attributes.merge!(@icon.attributes.except(:class, :"aria-hidden"))
153
-
154
- @text_classes = merge_class_names(DEFAULT_TEXT_CLASSES, text_classes)
155
- @text_attributes = text_attributes
156
- end
157
-
158
- class << self
159
- def _after_compile
160
- HeroiconsHelper::Cache.preload!(PRELOADED_ICONS) do |found, icon|
161
- HeroiconComponent.new(icon: icon[:name], variant: icon[:variant]) unless found
162
- end
163
- end
164
- end
165
- end
166
- end
@@ -1,53 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Use `Image` to render images.
5
- #
6
- # @accessibility
7
- # Always provide a meaningful `alt`.
8
- class ImageComponent < Ariadne::Component
9
- DEFAULT_TAG = :img
10
-
11
- # @example Default
12
- #
13
- # <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
14
- #
15
- # @example Helper
16
- #
17
- # <%= ariadne_image(src: "https://github.com/github.png", alt: "GitHub") %>
18
- #
19
- # @example Lazy loading
20
- #
21
- # <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
22
- #
23
- # @example Custom size
24
- #
25
- # <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
26
- #
27
- # @param tag [Symbol, String] The rendered tag name
28
- # @param src [String] The source url of the image.
29
- # @param alt [String] Specifies an alternate text for the image.
30
- # @param lazy [Boolean] Whether or not to lazily load the image.
31
- # @param classes [String] <%= link_to_classes_docs %>
32
- # @param attributes [Hash] <%= link_to_attributes_docs %>
33
- def initialize(tag: DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {})
34
- @attributes = attributes
35
-
36
- @src = src
37
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
38
- @classes = classes
39
-
40
- @attributes[:alt] = alt
41
- @attributes[:src] = @src
42
-
43
- return unless lazy
44
-
45
- @attributes[:loading] = :lazy
46
- @attributes[:decoding] = :async
47
- end
48
-
49
- def call
50
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes))
51
- end
52
- end
53
- end
@@ -1,6 +0,0 @@
1
- <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @classes, attributes: @attributes)) do |component| %>
2
- <%= icon %>
3
- <%= item %>
4
- <%= text %>
5
- <%= dropdown %>
6
- <% end %>
@@ -1,72 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon)
5
- # with optional text.
6
- #
7
- # InlineFlexComponent differs from HeroiconComponent in that it is intended to be
8
- # used within (or next to) text, whereas HeroiconComponent is intended to only
9
- # present a static list of SVG images (and can be embedded in buttons or shown alone).
10
- class InlineFlexComponent < Ariadne::Component
11
- DEFAULT_TAG = :span
12
- DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-baseline"
13
-
14
- STATE_OPTIONS = [:closed, :open].freeze
15
-
16
- STATE_OPEN_SVG = <<~MSG
17
- <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
18
- <circle cx="12" cy="12" r="10"></circle>
19
- </svg>
20
- MSG
21
- STATE_CLOSED_SVG = <<~MSG
22
- <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed ariadne-fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
23
- <circle cx="12" cy="12" r="10"></circle>
24
- </svg>
25
- MSG
26
-
27
- DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
28
- DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
29
- DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
30
- renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
31
- actual_text_classes = merge_class_names(DEFAULT_TEXT_CLASSES, text_classes)
32
- Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
33
- }
34
-
35
- renders_one :item, lambda { |classes: "", attributes: {}|
36
- Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
37
- }
38
-
39
- DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
40
- renders_one :text, lambda { |classes: "", attributes: {}|
41
- actual_classes = merge_class_names(DEFAULT_LABEL_CLASSES, classes)
42
- Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
43
- }
44
-
45
- renders_one :dropdown, "Ariadne::DropdownComponent"
46
-
47
- # @example Default
48
- #
49
- # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
50
- # <% c.with_item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
51
- # <% end %>
52
- #
53
- # # TODO: STATE_CLOSED_SVG colors didn't show until it was listed in an example
54
- # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
55
- # <% c.with_item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
56
- # <% end %>
57
- #
58
- # <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
59
- # <% c.with_icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
60
- # <% c.with_text { "Closed" } %>
61
- # <% end %>
62
- #
63
- # @param tag [Symbol, String] The rendered tag name
64
- # @param classes [String] <%= link_to_classes_docs %>
65
- # @param attributes [Hash] <%= link_to_attributes_docs %>
66
- def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
67
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
68
- @classes = merge_class_names(DEFAULT_CLASSES, classes)
69
- @attributes = attributes
70
- end
71
- end
72
- end
@@ -1,65 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default styling and hover text-decoration.
5
- class LinkComponent < Ariadne::Component
6
- DEFAULT_TAG = :a
7
- TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
8
-
9
- DEFAULT_CLASSES = "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
10
- DEFAULT_ACTIONABLE_CLASSES = "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double"
11
-
12
- # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
13
- # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
14
- # Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
15
- #
16
- # @param tag [Symbol, String] The rendered tag name
17
- # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
18
- # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
19
- # @param classes [String] <%= link_to_classes_docs %>
20
- # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>.
21
- renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, type: Ariadne::TooltipComponent::TYPE_DEFAULT, classes: "", attributes: {}|
22
- raise ArgumentError, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." if @id.blank?
23
-
24
- Ariadne::TooltipComponent.new(tag: tag, for_id: @id, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
25
- }
26
-
27
- # @example Default
28
- # <%= render(Ariadne::LinkComponent.new(href: "#")) { "Link" } %>
29
- #
30
- # @example Span as link
31
- # <%= render(Ariadne::LinkComponent.new(tag: :span, href: "#")) { "Span as a link" } %>
32
- #
33
- # @example With tooltip
34
- # @description
35
- # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
36
- # @code
37
- # <%= render(Ariadne::LinkComponent.new(href: "#", attributes: { id: "link-with-tooltip" })) do |c| %>
38
- # <% c.with_tooltip(text: "Tooltip text") %>
39
- # Link
40
- # <% end %>
41
- #
42
- # @param tag [String] <%= one_of(Ariadne::LinkComponent::TAG_OPTIONS) %>
43
- # @param href [String] URL to be used for the link.
44
- # @param actionable [Boolean] If true, adds additional classes to the link to make it more aware.
45
- # @param classes [String] <%= link_to_classes_docs %>
46
- # @param attributes [Hash] <%= link_to_attributes_docs %>
47
- def initialize(tag: DEFAULT_TAG, href:, actionable: false, classes: "", attributes: {})
48
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
49
-
50
- @attributes = attributes
51
- @attributes[:href] = href
52
-
53
- @id = @attributes[:id]
54
-
55
- @classes = merge_class_names(DEFAULT_CLASSES, classes)
56
- @classes << DEFAULT_ACTIONABLE_CLASSES if actionable
57
- end
58
-
59
- def call
60
- render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do
61
- content.to_s + tooltip.to_s
62
- end
63
- end
64
- end
65
- end
@@ -1,6 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
2
- <%= content %>
3
- <% items.each do |item| %>
4
- <%= item %>
5
- <% end %>
6
- <% end %>
@@ -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 %>