yattho_view_components 0.0.1

data/app/components/yattho/blankslate_component.html.erb

@@ -0,0 +1,25 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <% if spinner.present? %>
+    <%= spinner %>
+  <% elsif @icon.present? %>
+    <%= yattho_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
+  <% elsif @image_src.present? && @image_alt.present? %>
+    <%= image_tag @image_src.to_s, class: "mb-3", size: "56x56", alt: @image_alt.to_s %>
+  <% end %>
+  <% if @title.present? %>
+    <%= render Yattho::BaseComponent.new(tag: @title_tag, mb: 1) do %><%= @title %><% end %>
+  <% end %>
+  <% if @description.present? %>
+    <p><%= @description %></p>
+  <% end %>
+  <%= content %>
+  <% if @button_text.present? && @button_url.present? %>
+    <a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
+  <% end %>
+  <% if @link_text.present? && @link_url.present? %>
+    <p>
+      <%= link_to @link_url.to_s do %><%= @link_text %><% end %>
+    </p>
+  <% end %>
+<% end %>

data/app/components/yattho/blankslate_component.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Yattho
+  # 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.
+  # @accessibility
+  #   `Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
+  #   <%= link_to_heading_practices %>
+  class BlankslateComponent < Yattho::Component
+    status :deprecated
+
+    # Optional Spinner.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::Beta::Spinner) %>.
+    renders_one :spinner, lambda { |**system_arguments|
+      system_arguments[:mb] ||= 3
+      Yattho::Beta::Spinner.new(**system_arguments)
+    }
+
+    #
+    # @example Basic
+    #   <%= render Yattho::BlankslateComponent.new(
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://yattho.com/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Yattho::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
+    #
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://yattho.com/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Yattho::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.with_spinner(size: :large) %>
+    #     <% end %>
+    #
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Yattho::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
+    #
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Yattho::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
+    #
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Yattho::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
+    #
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Yattho::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
+    #
+    # @param title [String] Text that appears in a larger bold font.
+    # @param title_tag [Symbol] HTML tag to use for title.
+    # @param icon [Symbol] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] <%= one_of(Yattho::Beta::Octicon::SIZE_MAPPINGS, sort: false) %>
+    # @param image_src [String] Image to display.
+    # @param image_alt [String] Alt text for image.
+    # @param description [String] Text that appears below the title. Typically a whole sentence.
+    # @param button_text [String] The text of the button.
+    # @param button_url [String] The URL where the user will be taken after clicking the button.
+    # @param button_classes [String] Classes to apply to action button
+    # @param link_text [String] The text of the link.
+    # @param link_url [String] The URL where the user will be taken after clicking the link.
+    # @param narrow [Boolean] Adds a maximum width.
+    # @param large [Boolean] Increases the font size.
+    # @param spacious [Boolean] Adds extra padding.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      title: "",
+      title_tag: :h3,
+      icon: "",
+      icon_size: :medium,
+      image_src: "",
+      image_alt: " ",
+      description: "",
+      button_text: "",
+      button_url: "",
+      button_classes: "btn-primary my-3",
+      link_text: "",
+      link_url: "",
+
+      # variations
+      narrow: false,
+      large: false,
+      spacious: false,
+
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "blankslate",
+        'blankslate-narrow': narrow,
+        'blankslate-large': large,
+        'blankslate-spacious': spacious
+      )
+
+      @title_tag = title_tag
+      @icon = icon
+      @icon_size = icon_size
+      @image_src = image_src
+      @image_alt = image_alt
+      @title = title
+      @description = description
+      @button_text = button_text
+      @button_url = button_url
+      @button_classes = button_classes
+      @link_text = link_text
+      @link_url = link_url
+    end
+  end
+end

data/app/components/yattho/box.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Yattho
+  # `Box` is a basic wrapper component for most layout related needs.
+  class Box < Yattho::Component
+    status :stable
+
+    # @example Default
+    #   <%= render(Yattho::Box.new) { "Your content here" } %>
+    #
+    # @example Color and padding
+    #   <%= render(Yattho::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @system_arguments[:tag] = :div
+    end
+
+    def call
+      render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/yattho/button_component.html.erb

@@ -0,0 +1,12 @@
+<% if tooltip.present? %>
+  <%= render Yattho::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Yattho::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= yattho_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+    <% end -%>
+    <%= tooltip %>
+  <% end -%>
+<% else %>
+  <%= render Yattho::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= yattho_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+  <% end -%>
+<% end %>

data/app/components/yattho/button_component.rb

@@ -0,0 +1,175 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  class ButtonComponent < Yattho::Component
+    status :deprecated
+
+    DEFAULT_SCHEME = :default
+    LINK_SCHEME = :link
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
+      :primary => "btn-primary",
+      :danger => "btn-danger",
+      :outline => "btn-outline",
+      :invisible => "btn-invisible",
+      LINK_SCHEME => "btn-link"
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+    DEFAULT_SIZE = :medium
+    SIZE_MAPPINGS = {
+      :small => "btn-sm",
+      DEFAULT_SIZE => ""
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    # Leading visuals appear to the left of the button text.
+    #
+    # Use:
+    #
+    # - `leading_visual_icon` for a <%= link_to_component(Yattho::Beta::Octicon) %>.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Beta::Octicon) %>.
+    renders_one :leading_visual, types: {
+      icon: lambda { |**system_arguments|
+        system_arguments[:mr] = 2
+
+        Yattho::Beta::Octicon.new(**system_arguments)
+      }
+    }
+    alias icon with_leading_visual_icon # remove alias when all buttons are migrated to new slot names
+
+    # Trailing visuals appear to the right of the button text.
+    #
+    # Use:
+    #
+    # - `trailing_visual_counter` for a <%= link_to_component(Yattho::Beta::Counter) %>.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Beta::Counter) %>.
+    renders_one :trailing_visual, types: {
+      counter: lambda { |**system_arguments|
+        system_arguments[:ml] = 2
+
+        Yattho::Beta::Counter.new(**system_arguments)
+      }
+    }
+    alias counter with_trailing_visual_counter # remove alias when all buttons are migrated to new slot names
+
+    # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
+    # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+    # Consult the <%= link_to_component(Yattho::Alpha::Tooltip) %> documentation for more information.
+    #
+    # @param type [Symbol] (:description) <%= one_of(Yattho::Alpha::Tooltip::TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Alpha::Tooltip) %>.
+    renders_one :tooltip, lambda { |**system_arguments|
+      raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
+
+      system_arguments[:for_id] = @id
+      system_arguments[:type] ||= :description
+
+      Yattho::Alpha::Tooltip.new(**system_arguments)
+    }
+
+    # @example Schemes
+    #   <%= render(Yattho::ButtonComponent.new) { "Default" } %>
+    #   <%= render(Yattho::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
+    #   <%= render(Yattho::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
+    #   <%= render(Yattho::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
+    #   <%= render(Yattho::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
+    #   <%= render(Yattho::ButtonComponent.new(scheme: :link)) { "Link" } %>
+    #
+    # @example Sizes
+    #   <%= render(Yattho::ButtonComponent.new(size: :small)) { "Small" } %>
+    #   <%= render(Yattho::ButtonComponent.new(size: :medium)) { "Medium" } %>
+    #
+    # @example Block
+    #   <%= render(Yattho::ButtonComponent.new(block: :true)) { "Block" } %>
+    #   <%= render(Yattho::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
+    #
+    # @example With leading visual
+    #   <%= render(Yattho::ButtonComponent.new) do |component| %>
+    #     <% component.with_leading_visual_icon(icon: :star) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With trailing visual
+    #   <%= render(Yattho::ButtonComponent.new) do |component| %>
+    #     <% component.with_trailing_visual_counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With leading and trailing visuals
+    #   <%= render(Yattho::ButtonComponent.new) do |component| %>
+    #     <% component.with_leading_visual_icon(icon: :star) %>
+    #     <% component.with_trailing_visual_counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With dropdown caret
+    #   <%= render(Yattho::ButtonComponent.new(dropdown: true)) do %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With tooltip
+    #   @description
+    #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Yattho::Alpha::Tooltip) %> documentation for more information.
+    #   @code
+    #     <%= render(Yattho::ButtonComponent.new(id: "button-with-tooltip")) do |component| %>
+    #       <% component.with_tooltip(text: "Tooltip text") %>
+    #       Button
+    #     <% end %>
+    #
+    # @param scheme [Symbol] <%= one_of(Yattho::ButtonComponent::SCHEME_OPTIONS) %>
+    # @param variant [Symbol] DEPRECATED. <%= one_of(Yattho::ButtonComponent::SIZE_OPTIONS) %>
+    # @param size [Symbol] <%= one_of(Yattho::ButtonComponent::SIZE_OPTIONS) %>
+    # @param tag [Symbol] (Yattho::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Yattho::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Yattho::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Yattho::Beta::BaseButton::TYPE_OPTIONS) %>
+    # @param group_item [Boolean] Whether button is part of a ButtonGroup.
+    # @param block [Boolean] Whether button is full-width with `display: block`.
+    # @param dropdown [Boolean] Whether or not to render a dropdown caret.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      scheme: DEFAULT_SCHEME,
+      variant: nil,
+      size: DEFAULT_SIZE,
+      group_item: false,
+      block: false,
+      dropdown: false,
+      **system_arguments
+    )
+      @scheme = scheme
+      @dropdown = dropdown
+
+      @system_arguments = system_arguments
+
+      @id = @system_arguments[:id]
+
+      @system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, variant || size, DEFAULT_SIZE)],
+        "btn" => !link?,
+        "btn-block" => block,
+        "BtnGroup-item" => group_item
+      )
+    end
+
+    private
+
+    def link?
+      @scheme == LINK_SCHEME
+    end
+
+    def trimmed_content
+      return if content.blank?
+
+      trimmed_content = content.strip
+
+      return trimmed_content unless content.html_safe?
+
+      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+      trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+    end
+  end
+end

data/app/components/yattho/component.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+require "view_component/version"
+
+module Yattho
+  # @private
+  # :nocov:
+  class Component < ViewComponent::Base
+    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
+    include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include TestSelectorHelper
+    include JoinStyleArgumentsHelper
+    include ViewHelper
+    include Status::Dsl
+    include Audited::Dsl
+
+    INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
+
+    def self.deprecated?
+      status == :deprecated
+    end
+
+    def self.generate_id
+      "#{name.demodulize.underscore.dasherize}-#{SecureRandom.uuid}"
+    end
+
+    private
+
+    def raise_on_invalid_options?
+      Rails.application.config.yattho_view_components.raise_on_invalid_options
+    end
+
+    def raise_on_invalid_aria?
+      Rails.application.config.yattho_view_components.raise_on_invalid_aria
+    end
+
+    def deprecated_component_warning(new_class: nil, version: nil)
+      return if Rails.env.production? || silence_deprecations?
+
+      message = "#{self.class.name} is deprecated"
+      message += " and will be removed in v#{version}." if version
+      message += " Use #{new_class.name} instead." if new_class
+
+      ActiveSupport::Deprecation.warn(message)
+    end
+
+    def aria(val, system_arguments)
+      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
+    end
+
+    def validate_aria_label
+      aria_label = aria("label", @system_arguments)
+      raise ArgumentError, "`aria-label` is required." if aria_label.nil? && !Rails.env.production?
+    end
+
+    def silence_deprecations?
+      Rails.application.config.yattho_view_components.silence_deprecations
+    end
+
+    def check_denylist(denylist = [], **arguments)
+      if should_raise_error?
+
+        # Convert denylist from:
+        # { [:p, :pt] => "message" } to:
+        # { p: "message", pt: "message" }
+        unpacked_denylist =
+          denylist.each_with_object({}) do |(keys, value), memo|
+            keys.each { |key| memo[key] = value }
+          end
+
+        violations = unpacked_denylist.keys & arguments.keys
+
+        if violations.any?
+          message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
+          violations.each do |violation|
+            message += "\n The #{violation} argument is not allowed here. #{unpacked_denylist[violation]}"
+          end
+
+          raise(ArgumentError, message)
+        end
+      end
+
+      arguments
+    end
+
+    def validate_arguments(tag:, denylist_name: :system_arguments_denylist, **arguments)
+      deny_single_argument(:class, "Use `classes` instead.", **arguments)
+
+      if (denylist = arguments[denylist_name])
+        check_denylist(denylist, **arguments)
+
+        # Remove :system_arguments_denylist key and any denied keys from system arguments
+        arguments.except!(denylist_name)
+        arguments.except!(*denylist.keys.flatten)
+      end
+
+      deny_aria_label(tag: tag, arguments: arguments)
+
+      arguments
+    end
+
+    def deny_single_argument(key, help_text, **arguments)
+      raise ArgumentError, "`#{key}` is an invalid argument. #{help_text}" \
+        if should_raise_error? && arguments.key?(key)
+
+      arguments.except!(key)
+    end
+
+    def deny_aria_label(tag:, arguments:)
+      return arguments.except!(:skip_aria_label_check) if arguments[:skip_aria_label_check]
+      return if arguments[:role]
+      return unless INVALID_ARIA_LABEL_TAGS.include?(tag)
+
+      deny_aria_key(
+        :label,
+        "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
+        **arguments
+      )
+    end
+
+    def deny_aria_key(key, help_text, **arguments)
+      raise ArgumentError, help_text if should_raise_aria_error? && aria(key, arguments)
+    end
+
+    def deny_tag_argument(**arguments)
+      deny_single_argument(:tag, "This component has a fixed tag.", **arguments)
+    end
+
+    def should_raise_error?
+      !Rails.env.production? && raise_on_invalid_options? && !ENV["YATTHO_WARNINGS_DISABLED"]
+    end
+
+    def should_raise_aria_error?
+      !Rails.env.production? && raise_on_invalid_aria? && !ENV["YATTHO_WARNINGS_DISABLED"]
+    end
+  end
+end

data/app/components/yattho/conditional_wrapper.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Conditionally renders a `Yattho::BaseComponent` around the given content. If the given condition
+  # is true, a `Yattho::BaseComponent` will render around the content. If the condition is false, only
+  # the content is rendered.
+  #
+  # @example True conditional
+  #   <%# condition is true, so content will be wrapped in a <span> tag
+  #   <%= render Yattho::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
+  #     <%# also rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @example False conditional
+  #   <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
+  #   <%= render(Yattho::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
+  #     <%# this content will be rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @param condition [Boolean] Whether or not to wrap the content in a `Yattho::BaseComponent`.
+  # @param base_component_arguments [Hash] The arguments to pass to `Yattho::BaseComponent`.
+  class ConditionalWrapper < Yattho::Component
+    def initialize(condition:, **base_component_arguments)
+      @condition = condition
+      @base_component_arguments = base_component_arguments
+    end
+
+    def call
+      return content unless @condition
+
+      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+    end
+  end
+end

data/app/components/yattho/content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `Content` as a helper to render content passed to a slot without adding any tags.
+  class Content < Yattho::Component
+    status :stable
+
+    def call
+      content
+    end
+  end
+end

data/app/components/yattho/dropdown/menu.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Yattho
+  class Dropdown
+    # :nodoc:
+    class Menu < Yattho::Alpha::Dropdown::Menu
+      status :deprecated
+
+      class Item < Yattho::Alpha::Dropdown::Menu::Item
+        status :deprecated
+      end
+    end
+  end
+end

data/app/components/yattho/dropdown.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class Dropdown < Yattho::Alpha::Dropdown
+    status :deprecated
+  end
+end

data/app/components/yattho/hellip_button.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class HellipButton < Yattho::Alpha::HellipButton
+    status :deprecated
+  end
+end

data/app/components/yattho/icon_button.html.erb

@@ -0,0 +1,12 @@
+<% if render_tooltip? %>
+  <%= render Yattho::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Yattho::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= render Yattho::Beta::Octicon.new(icon: @icon) %>
+    <% end -%>
+    <%= render Yattho::Alpha::Tooltip.new(**@tooltip_arguments) %>
+  <% end %>
+<% else %>
+  <%= render Yattho::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= render Yattho::Beta::Octicon.new(icon: @icon) %>
+  <% end -%>
+<% end %>