primer_view_components 0.0.104 → 0.0.105

data/app/components/primer/alpha/segmented_control.pcss

@@ -0,0 +1,121 @@
+/* SegmentedControl */
+
+.SegmentedControl {
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--color-segmented-control-bg);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
+}
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);
+
+  /* Selected ---------------------------------------- */
+  &.SegmentedControl-item--selected {
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-segmented-control-button-selected-border);
+
+    & .Button {
+      font-weight: var(--base-text-weight-semibold, 600);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &::before {
+      border-color: transparent;
+    }
+
+    & + .SegmentedControl-item::before {
+      border-color: transparent;
+    }
+  }
+
+  /* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
+  & .Button-label[data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* Separator lines */
+  &::before {
+    position: absolute;
+    inset: 0 0 0 -1px;
+    margin-top: var(--primer-control-medium-paddingBlock, 6px);
+    margin-bottom: var(--primer-control-medium-paddingBlock, 6px);
+    content: '';
+    border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+  }
+
+  /* Button ----------------------------------------- */
+  & .Button {
+    border: 0;
+    font-weight: var(--base-text-weight-normal, 400);
+    transition: none;
+    color: var(--color-btn-text);
+
+    &:focus-visible {
+      outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
+      border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);
+    }
+  }
+
+  & .Button--small {
+    height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    }
+  }
+
+  & .Button--medium {
+    height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    }
+  }
+
+  & .Button--large {
+    height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
+
+    &.Button--iconOnly {
+      width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
+    }
+  }
+
+  & .Button--iconOnly {
+    padding: initial;
+  }
+
+  & .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--color-btn-text);
+  }
+}
+
+/* fullWidth */
+.SegmentedControl--fullWidth {
+  display: flex;
+
+  & .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }
+
+  & .Button--iconOnly,
+  & .Button-withTooltip {
+    width: 100%;
+  }
+}

data/app/components/primer/alpha/segmented_control.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use a segmented control to let users select an option from a short list and immediately apply the selection
+    class SegmentedControl < Primer::Component
+      status :alpha
+
+      FULL_WIDTH_DEFAULT = false
+      HIDE_LABELS_DEFAULT = false
+
+      # Use to render an item in the segmented control
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, lambda { |label:, selected: false, icon: nil, **system_arguments|
+        Primer::Alpha::SegmentedControl::Item.new(
+          label: label,
+          selected: selected,
+          icon: icon,
+          hide_labels: @hide_labels,
+          size: @size,
+          block: @full_width,
+          **system_arguments
+        )
+      }
+
+      # @example Basic usage
+      #
+      #   <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
+      #     <%= c.with_item(label: "Preview", selected: true) %>
+      #     <%= c.with_item(label: "Raw") %>
+      #     <%= c.with_item(label: "Blame") %>
+      #   <% end %>
+      #
+      # @example Small
+      #
+      #   <%= render(Primer::Alpha::SegmentedControl.new(size: :small)) do |c| %>
+      #     <%= c.with_item(label: "Preview", selected: true) %>
+      #     <%= c.with_item(label: "Raw") %>
+      #     <%= c.with_item(label: "Blame") %>
+      #   <% end %>
+      #
+      # @example With icons
+      #   <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
+      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @example With icons only
+      #   <%= render(Primer::Alpha::SegmentedControl.new(hide_labels: true)) do |c| %>
+      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @example Fill width of parent
+      #   <%= render(Primer::Alpha::SegmentedControl.new(full_width: true)) do |c| %>
+      #     <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
+      #     <%= c.with_item(label: "Raw", icon: :"file-code") %>
+      #     <%= c.with_item(label: "Blame", icon: :people) %>
+      #   <% end %>
+      #
+      # @param hide_labels [Boolean] Whether to hide the labels and only show the icons
+      # @param full_width [Boolean] If the component should be full width
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @full_width = full_width
+        @size = size
+        @hide_labels = hide_labels
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :ul
+        @system_arguments[:role] = "list"
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "SegmentedControl",
+          "SegmentedControl--iconOnly": hide_labels,
+          "SegmentedControl--fullWidth": full_width
+        )
+      end
+
+      def render?
+        valid_items_count = items.count <= (@hide_labels ? 6 : 5) && items.count >= 2
+        raise ArgumentError, "A segmented control should have 2–5 choices with text labels, or up to 6 icon-only buttons." if !valid_items_count && !Rails.env.production?
+
+        valid_items_count
+      end
+    end
+  end
+end

data/app/components/primer/alpha/segmented_control.ts

@@ -0,0 +1,41 @@
+import {controller, targets} from '@github/catalyst'
+
+@controller
+export class SegmentedControlElement extends HTMLElement {
+  @targets items: HTMLElement[]
+
+  connectedCallback() {
+    this.#updateButtonLabels()
+  }
+
+  select(event: Event) {
+    const button = event.currentTarget as HTMLButtonElement
+    for (const item of this.items) {
+      item.classList.remove('SegmentedControl-item--selected')
+      item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false')
+    }
+
+    button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
+    button.setAttribute('aria-current', 'true')
+  }
+
+  // Updates the button labels to have a data-content attribute with the text
+  // This is for selection styling to avoid the text jumping. It only needs to be
+  // setup when the component is first loaded.
+  #updateButtonLabels() {
+    for (const label of this.querySelectorAll('.Button-label')) {
+      label.setAttribute('data-content', label.textContent || '')
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    SegmentedControlElement: typeof SegmentedControlElement
+  }
+}
+
+if (!window.customElements.get('segmented-control')) {
+  window.SegmentedControlElement = SegmentedControlElement
+  window.customElements.define('segmented-control', SegmentedControlElement)
+}

data/app/components/primer/alpha/tooltip.rb

@@ -7,12 +7,12 @@ module Primer
     #
     # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
     # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
-    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::LinkComponent)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
+    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::Beta::Link)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
     # @accessibility
     #   - Tooltip text must be brief and concise whether it is a label or a description.
     #   - Tooltip can only hold string content.
     #   - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
-    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::LinkComponent) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
+    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
     #   - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
     #   content.
     #   ### Which type should I set?

data/app/components/primer/beta/auto_complete/item.rb

@@ -22,10 +22,10 @@ module Primer
 
         # The trailing visual rendered after the link.
         #
-        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::Beta::Counter) %>
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
         renders_one :trailing_visual, types: {
           icon: Primer::OcticonComponent,
-          label: Primer::LabelComponent,
+          label: Primer::Beta::Label,
           counter: Primer::Beta::Counter
         }
 

data/app/components/primer/beta/avatar.rb

@@ -72,7 +72,7 @@ module Primer
 
       def call
         if @href
-          render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
+          render(Primer::Beta::Link.new(href: @href, classes: @system_arguments[:classes])) do
             render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
           end
         else

data/app/components/primer/beta/blankslate.rb

@@ -20,7 +20,7 @@ module Primer
       # Use:
       #
       # - `visual_icon` for an <%= link_to_component(Primer::OcticonComponent) %>.
-      # - `visual_image` for an <%= link_to_component(Primer::Image) %>.
+      # - `visual_image` for an <%= link_to_component(Primer::Alpha::Image) %>.
       # - `visual_spinner` for a <%= link_to_component(Primer::SpinnerComponent) %>.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -40,7 +40,7 @@ module Primer
           system_arguments[:size] = "56x56"
           system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
-          Primer::Image.new(**system_arguments)
+          Primer::Alpha::Image.new(**system_arguments)
         }
       }
 
@@ -83,7 +83,7 @@ module Primer
         system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
-        Primer::ButtonComponent.new(**system_arguments) # rubocop:disable Primer/ComponentNameMigration
+        Primer::ButtonComponent.new(**system_arguments)
       }
 
       # Optional secondary action
@@ -96,7 +96,7 @@ module Primer
       renders_one :secondary_action, lambda { |href:, **system_arguments|
         system_arguments[:href] = href
 
-        Primer::LinkComponent.new(**system_arguments)
+        Primer::Beta::Link.new(**system_arguments)
       }
 
       # @example Basic

data/app/components/primer/beta/breadcrumbs.rb

@@ -73,7 +73,7 @@ module Primer
           end
 
           render(Primer::BaseComponent.new(**@system_arguments)) do
-            render(Primer::LinkComponent.new(**link_arguments)) { content }
+            render(Primer::Beta::Link.new(**link_arguments)) { content }
           end
         end
       end

data/app/components/primer/beta/button.rb

@@ -57,7 +57,7 @@ module Primer
       # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
       renders_one :trailing_visual, types: {
         icon: Primer::OcticonComponent,
-        label: Primer::LabelComponent,
+        label: Primer::Beta::Label,
         counter: Primer::CounterComponent
       }
 

data/app/components/primer/beta/label.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Label` to add contextual metadata to a design.
+    #
+    # @accessibility
+    #   Use `aria-label` if the `Label` or the context around it don't explain the label.
+    class Label < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+      TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Label--primary",
+        :secondary => "Label--secondary",
+        :accent => "Label--accent",
+        :success => "Label--success",
+        :attention => "Label--attention",
+        :danger => "Label--danger",
+        :severe => "Label--severe",
+        :done => "Label--done",
+        :sponsors => "Label--sponsors",
+        # deprecated
+        :info => "Label--info",
+        :warning => "Label--warning",
+        :orange => "Label--orange",
+        :purple => "Label--purple"
+      }.freeze
+      DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
+      SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        DEFAULT_SIZE => nil,
+        :large => "Label--large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_VARIANT = :none
+      VARIANT_OPTIONS = [DEFAULT_VARIANT].freeze
+      DEPRECATED_VARIANT_OPTIONS = [:large, :inline].freeze
+
+      INLINE_CLASS = "Label--inline"
+
+      # @example Schemes
+      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :success)) { "Success" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :done)) { "Done" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::Label.new) { "Medium" } %>
+      #   <%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::Label::TAG_OPTIONS) %>
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Label::SCHEME_MAPPINGS.keys) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Label::SIZE_OPTIONS) %>
+      # @param inline [Boolean] Whether or not to render this label inline.
+      # @param variant [Symbol] <%= one_of(Primer::Beta::Label::VARIANT_OPTIONS + Primer::Beta::Label::DEPRECATED_VARIANT_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+
+      def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, inline: false, variant: DEFAULT_VARIANT, **system_arguments)
+        @system_arguments = system_arguments
+
+        @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
+        @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+        @size = :large if @variant == :large
+        @inline = inline || @variant == :inline
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:classes] = class_names(
+          "Label",
+          system_arguments[:classes],
+          SCHEME_MAPPINGS[@scheme],
+          SIZE_MAPPINGS[@size],
+          @inline ? INLINE_CLASS : nil
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/primer/beta/link.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.
+    class Link < Primer::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Link--primary",
+        :secondary => "Link--secondary"
+      }.freeze
+
+      DEFAULT_TAG = :a
+      TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+      # `Tooltip` that appears on mouse hover or keyboard focus over the link. 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.
+      # The tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested
+      # under a positioning wrapper.
+      # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+      #
+      # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Alpha::Tooltip) %>.
+      renders_one :tooltip, lambda { |**system_arguments|
+        raise ArgumentError, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." if @id.blank? && !Rails.env.production?
+
+        system_arguments[:for_id] = @id
+        system_arguments[:type] ||= :description
+
+        Primer::Alpha::Tooltip.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Beta::Link.new(href: "#")) { "Link" } %>
+      #
+      # @example Muted
+      #   <%= render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" } %>
+      #
+      # @example Schemes
+      #   <%= render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Primary" } %>
+      #   <%= render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Secondary" } %>
+      #
+      # @example Without underline
+      #   <%= render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } %>
+      #
+      # @example With tooltip
+      #   @description
+      #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+      #   @code
+      #     <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |c| %>
+      #       <% c.with_tooltip(text: "Tooltip text") %>
+      #       Link
+      #     <% end %>
+      #
+      # @param tag [String]  <%= one_of(Primer::Beta::Link::TAG_OPTIONS) %>
+      # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
+      # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
+      # @param underline [Boolean] Whether or not to underline the link.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
+        @system_arguments = system_arguments
+
+        @id = @system_arguments[:id]
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:href] = href
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
+          "Link" => tag == :span,
+          "Link--muted" => muted,
+          "no-underline" => !underline
+        )
+      end
+
+      def before_render
+        raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
+      end
+
+      def call
+        if tooltip.present?
+          render Primer::BaseComponent.new(tag: :span, position: :relative) do
+            render(Primer::BaseComponent.new(**@system_arguments)) do
+              content
+            end.to_s + tooltip.to_s
+          end
+        else
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -4,6 +4,7 @@ require "view_component/version"
 
 module Primer
   # @private
+  # :nocov:
   class Component < ViewComponent::Base
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots

data/app/components/primer/image.rb

@@ -1,46 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Image` to render images.
-  #
-  # @accessibility
-  #   Always provide a meaningful `alt`.
-  class Image < Primer::Component
-    # @example Default
-    #
-    #   <%= render(Primer::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub")) %>
-    #
-    # @example Helper
-    #
-    #   <%= primer_image(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub") %>
-    #
-    # @example Lazy loading
-    #
-    #   <%= render(Primer::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
-    #
-    # @example Custom size
-    #
-    #   <%= render(Primer::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>
-    #
-    # @param src [String] The source url of the image.
-    # @param alt [String] Specifies an alternate text for the image.
-    # @param lazy [Boolean] Whether or not to lazily load the image.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(src:, alt:, lazy: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-
-      @src = src
-      @system_arguments[:tag] = :img
-      @system_arguments[:alt] = alt
-
-      return unless lazy
-
-      @system_arguments[:loading] = :lazy
-      @system_arguments[:decoding] = :async
-    end
-
-    def call
-      render(Primer::BaseComponent.new(src: image_path(@src), **@system_arguments))
-    end
+  class Image < Primer::Alpha::Image
+    status :deprecated
   end
 end

data/app/components/primer/image_crop.rb

@@ -1,37 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # A client-side mechanism to crop images.
-  class ImageCrop < Primer::Component
-    # A loading indicator that is shown while the image is loading.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :loading, lambda { |**system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :div
-      system_arguments[:"data-loading-slot"] = true
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Simple cropper
-    #   <%= render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>
-    #
-    # @example Square cropper
-    #   <%= render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>
-    #
-    # @example Cropper with a custom loader
-    #   <%= render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
-    #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
-    #   <% end %>
-    #
-    # @param src [String] The path of the image to crop.
-    # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(src:, rounded: true, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = "image-crop"
-      @system_arguments[:src] = src
-      @system_arguments[:rounded] = true if rounded
-    end
+  class ImageCrop < Primer::Alpha::ImageCrop
+    status :deprecated
   end
 end