ariadne_view_components 0.0.39-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 (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,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 -%>
@@ -1,165 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
5
- class ButtonComponent < Ariadne::Component
6
- include IconHelper
7
-
8
- DEFAULT_SCHEME = :default
9
- LINK_SCHEME = :link
10
-
11
- SCHEME_CLASS_MAPPINGS = {
12
- link: Ariadne::LinkComponent::DEFAULT_ACTIONABLE_CLASSES,
13
- none: "",
14
- default: "ariadne-text-slate-800 ariadne-bg-slate-50 hover:ariadne-bg-slate-100 ariadne-border-slate-300 focus:ariadne-ring-offset-slate-50 focus:ariadne-ring-slate-600",
15
- info: "ariadne-text-slate-800 ariadne-bg-slate-50 hover:ariadne-bg-slate-100 ariadne-border-slate-300 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-slate-600",
16
- success: "ariadne-text-green-800 ariadne-bg-green-50 hover:ariadne-bg-green-100 ariadne-border-green-300 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
17
- warning: "ariadne-text-yellow-800 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 ariadne-border-yellow-300 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
18
- danger: "ariadne-text-red-800 ariadne-bg-red-50 hover:ariadne-bg-red-100 ariadne-border-red-300 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
19
- }.freeze
20
- VALID_SCHEMES = SCHEME_CLASS_MAPPINGS.keys.freeze
21
-
22
- # Leading visuals appear to the left of the button text.
23
- #
24
- # Use:
25
- #
26
- # - `icon` for a <%= link_to_component(Ariadne::HeroiconComponent) %>.
27
- #
28
- # @param tag [Symbol, String] The rendered tag name
29
- # @param classes [String] <%= link_to_classes_docs %>
30
- # @param icon [String] Name of <%= link_to_heroicons %> to use.
31
- # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
32
- # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
33
- renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
34
- @icon = icon
35
- @variant = variant
36
- tag = check_incoming_tag(:svg, tag)
37
- Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, classes: classes, attributes: attributes)
38
- }
39
-
40
- # Trailing visuals appear to the right of the button text.
41
- #
42
- # Use:
43
- #
44
- # - `counter` for a <%= link_to_component(Ariadne::CounterComponent) %>.
45
- #
46
- # @param tag [Symbol, String] The rendered tag name
47
- # @param classes [String] <%= link_to_classes_docs %>
48
- # @param counter [Number] The starting counter value
49
- # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::CounterComponent) %>.
50
- renders_one :counter, lambda { |tag: :span, count: 0, classes: "", attributes: {}|
51
- tag = check_incoming_tag(:span, tag)
52
- attributes[:ml] = check_incoming_value(2, ml: attributes[:ml])
53
-
54
- Ariadne::CounterComponent.new(tag: tag, count: count, classes: classes, attributes: attributes)
55
- }
56
-
57
- # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
58
- # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
59
- # Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
60
- #
61
- # @param tag [Symbol, String] The rendered tag name
62
- # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
63
- # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
64
- # @param classes [String] <%= link_to_classes_docs %>
65
- # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>.
66
- renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, type: Ariadne::TooltipComponent::TYPE_DEFAULT, classes: "", attributes: {}|
67
- raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank?
68
-
69
- Ariadne::TooltipComponent.new(for_id: @id, tag: tag, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
70
- }
71
-
72
- # @example Schemes
73
- # <%= render(Ariadne::ButtonComponent.new) { "Default" } %>
74
- # <%= render(Ariadne::ButtonComponent.new(scheme: :default)) { "Default" } %>
75
- # <%= render(Ariadne::ButtonComponent.new(scheme: :info)) { "Info" } %>
76
- # <%= render(Ariadne::ButtonComponent.new(scheme: :success)) { "Success" } %>
77
- # <%= render(Ariadne::ButtonComponent.new(scheme: :warning)) { "Warning" } %>
78
- # <%= render(Ariadne::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
79
- #
80
- # @example Sizes
81
- # <%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Small" } %>
82
- # <%= render(Ariadne::ButtonComponent.new(size: :md)) { "Medium" } %>
83
- #
84
- # @example With leading visual
85
- # <%= render(Ariadne::ButtonComponent.new) do |c| %>
86
- # <% c.with_icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "ariadne-text-yellow-600") %>
87
- # Button
88
- # <% end %>
89
- #
90
- # @example With trailing visual
91
- # <%= render(Ariadne::ButtonComponent.new) do |c| %>
92
- # <% c.with_counter(count: 15) %>
93
- # Button
94
- # <% end %>
95
- #
96
- # @example With leading and trailing visuals
97
- # <%= render(Ariadne::ButtonComponent.new) do |c| %>
98
- # <% c.with_icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
99
- # <% c.with_counter(count: 15) %>
100
- # Button
101
- # <% end %>
102
- #
103
- # @example With tooltip
104
- # @description
105
- # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
106
- # @code
107
- # <%= render(Ariadne::ButtonComponent.new(attributes: { id: "button-with-tooltip" })) do |c| %>
108
- # <% c.with_tooltip(text: "Tooltip text") %>
109
- # Button
110
- # <% end %>
111
- #
112
- # @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
113
- # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
114
- # @param scheme [Symbol] <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>
115
- # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
116
- # @param dropdown [Boolean] Whether or not to render a dropdown caret.
117
- # @param classes [String] <%= link_to_classes_docs %>
118
- # @param attributes [Hash] <%= link_to_attributes_docs %>
119
- def initialize(
120
- tag: Ariadne::BaseButton::DEFAULT_TAG,
121
- type: Ariadne::BaseButton::DEFAULT_TYPE,
122
- scheme: DEFAULT_SCHEME,
123
- size: BaseButton::DEFAULT_SIZE,
124
- dropdown: false,
125
- classes: "",
126
- attributes: {}
127
- )
128
- @tag = tag
129
- @type = type
130
-
131
- @attributes = attributes
132
- @id = @attributes[:id]
133
-
134
- @size = fetch_or_raise(Ariadne::BaseButton::VALID_SIZES, size)
135
- @scheme = fetch_or_raise(VALID_SCHEMES, scheme)
136
- @scheme = LINK_SCHEME if @tag == :a
137
-
138
- @classes = merge_class_names(
139
- SCHEME_CLASS_MAPPINGS[@scheme],
140
- classes,
141
- )
142
-
143
- @dropdown = dropdown
144
- end
145
-
146
- private def dropdown?
147
- @dropdown
148
- end
149
-
150
- private def trimmed_content
151
- return if content.blank?
152
-
153
- trimmed_content = content.strip
154
-
155
- return trimmed_content unless content.html_safe?
156
-
157
- # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
158
- trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
159
- end
160
-
161
- private def link?
162
- @scheme == LINK_SCHEME
163
- end
164
- end
165
- end