Migrate Primer::Image to Primer::Alpha::Image (#1527)

Co-authored-by: Actions Auto Build <actions@github.com>

.changeset/real-jars-hear.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+deprecating Primer::Image in favor of Primer::Alpha::Image

app/components/primer/alpha/image.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `Image` to render images.
+    #
+    # @accessibility
+    #   Always provide a meaningful `alt`.
+    class Image < Primer::Component
+      status :alpha
+
+      # @example Default
+      #
+      #   <%= render(Primer::Alpha::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::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
+      #
+      # @example Custom size
+      #
+      #   <%= render(Primer::Alpha::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
+    end
+  end
+end

app/components/primer/beta/blankslate.rb

@@ -20,7 +20,7 @@ class Blankslate < Primer::Component
       # 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 @@ class Blankslate < Primer::Component
           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 @@ class Blankslate < Primer::Component
         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

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

app/lib/primer/view_helper.rb

@@ -10,7 +10,7 @@ class ViewHelperNotFound < StandardError; end
       octicon: "Primer::OcticonComponent",
       heading: "Primer::Beta::Heading",
       time_ago: "Primer::TimeAgoComponent",
-      image: "Primer::Image"
+      image: "Primer::Alpha::Image"
     }.freeze
 
     HELPERS.each do |name, component|

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -60,7 +60,7 @@
   - title: IconButton
     url: "/components/beta/iconbutton"
   - title: Image
-    url: "/components/image"
+    url: "/components/alpha/image"
   - title: ImageCrop
     url: "/components/imagecrop"
   - title: Label

lib/primer/deprecations.rb

@@ -5,6 +5,7 @@ module Primer
   module Deprecations
     # If there is no alternative to suggest, set the value to nil
     DEPRECATED_COMPONENTS = {
+      "Primer::Image" => "Primer::Alpha::Image",
       "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
       "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
       "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",

lib/tasks/docs.rake

@@ -34,7 +34,7 @@ namespace :docs do
       Primer::Alpha::SegmentedControl,
       Primer::Alpha::Layout,
       Primer::HellipButton,
-      Primer::Image,
+      Primer::Alpha::Image,
       Primer::LocalTime,
       Primer::OcticonSymbolsComponent,
       Primer::ImageCrop,

static/arguments.json

@@ -325,6 +325,38 @@
       }
     ]
   },
+  {
+    "component": "Image",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image/default/",
+    "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "N/A",
+        "description": "The source url of the image."
+      },
+      {
+        "name": "alt",
+        "type": "String",
+        "default": "N/A",
+        "description": "Specifies an alternate text for the image."
+      },
+      {
+        "name": "lazy",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to lazily load the image."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Layout",
     "status": "alpha",
@@ -1761,38 +1793,6 @@
       }
     ]
   },
-  {
-    "component": "Image",
-    "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/image.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/image/default/",
-    "parameters": [
-      {
-        "name": "src",
-        "type": "String",
-        "default": "N/A",
-        "description": "The source url of the image."
-      },
-      {
-        "name": "alt",
-        "type": "String",
-        "default": "N/A",
-        "description": "Specifies an alternate text for the image."
-      },
-      {
-        "name": "lazy",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether or not to lazily load the image."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "ImageCrop",
     "status": "alpha",

static/audited_at.json

@@ -11,6 +11,7 @@
   "Primer::Alpha::Dialog::Footer": "",
   "Primer::Alpha::Dialog::Header": "",
   "Primer::Alpha::HiddenTextExpander": "",
+  "Primer::Alpha::Image": "",
   "Primer::Alpha::Layout": "",
   "Primer::Alpha::Layout::Main": "",
   "Primer::Alpha::Layout::Sidebar": "",

static/constants.json

@@ -160,6 +160,8 @@
   },
   "Primer::Alpha::HiddenTextExpander": {
   },
+  "Primer::Alpha::Image": {
+  },
   "Primer::Alpha::Layout": {
     "FIRST_IN_SOURCE_DEFAULT": "sidebar",
     "FIRST_IN_SOURCE_OPTIONS": [

static/statuses.json

@@ -11,6 +11,7 @@
   "Primer::Alpha::Dialog::Footer": "alpha",
   "Primer::Alpha::Dialog::Header": "alpha",
   "Primer::Alpha::HiddenTextExpander": "alpha",
+  "Primer::Alpha::Image": "alpha",
   "Primer::Alpha::Layout": "alpha",
   "Primer::Alpha::Layout::Main": "alpha",
   "Primer::Alpha::Layout::Sidebar": "alpha",
@@ -62,7 +63,7 @@
   "Primer::DropdownMenuComponent": "deprecated",
   "Primer::HellipButton": "alpha",
   "Primer::IconButton": "deprecated",
-  "Primer::Image": "alpha",
+  "Primer::Image": "deprecated",
   "Primer::ImageCrop": "alpha",
   "Primer::LabelComponent": "beta",
   "Primer::LayoutComponent": "alpha",

test/components/image_test.rb → test/components/alpha/image_test.rb

@@ -2,26 +2,26 @@
 
 require "components/test_helper"
 
-class PrimerImageTest < Minitest::Test
+class PrimerAlphaImageTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_render_without_loading_attribute_by_default
-    render_inline(Primer::Image.new(src: "https://github.com/github.png", alt: "alt"))
+    render_inline(Primer::Alpha::Image.new(src: "https://github.com/github.png", alt: "alt"))
 
     assert_selector("img[src='https://github.com/github.png'][alt='alt']")
     refute_selector("[loading]")
   end
 
   def test_lazy_loading
-    render_inline(Primer::Image.new(src: "https://github.com/github.png", alt: "alt", lazy: true))
+    render_inline(Primer::Alpha::Image.new(src: "https://github.com/github.png", alt: "alt", lazy: true))
 
     assert_selector("img[src='https://github.com/github.png'][alt='alt'][loading='lazy'][decoding='async']")
   end
 
   def test_restricts_allowed_system_arguments
     with_raise_on_invalid_options(true) do
       error = assert_raises(ArgumentError) do
-        render_inline(Primer::Image.new(src: "https://github.com/github.png", alt: "alt", tag: :div))
+        render_inline(Primer::Alpha::Image.new(src: "https://github.com/github.png", alt: "alt", tag: :div))
       end
 
       assert_includes(error.message, "This component has a fixed tag.")
@@ -30,7 +30,7 @@ def test_restricts_allowed_system_arguments
 
   def test_strips_denied_system_arguments
     with_raise_on_invalid_options(false) do
-      render_inline(Primer::Image.new(src: "https://github.com/github.png", alt: "alt", tag: :div))
+      render_inline(Primer::Alpha::Image.new(src: "https://github.com/github.png", alt: "alt", tag: :div))
     end
 
     refute_selector("div")

test/components/component_test.rb

@@ -25,7 +25,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Alpha::TabPanels, { label: "label" }],
     [Primer::Alpha::TabNav, { label: "label" }],
     [Primer::Alpha::UnderlinePanels, { label: "Panel label" }],
-    [Primer::Image, { src: "https://github.com/github.png", alt: "alt" }],
+    [Primer::Alpha::Image, { src: "https://github.com/github.png", alt: "alt" }],
     [Primer::LocalTime, { datetime: DateTime.parse("2014-06-01T13:05:07Z") }],
     [Primer::ImageCrop, { src: "Foo" }],
     [Primer::IconButton, { icon: :star, "aria-label": "Label" }],
@@ -109,6 +109,7 @@ class PrimerComponentTest < Minitest::Test
 
   def test_registered_components
     ignored_components = [
+      "Primer::Image",
       "Primer::Alpha::ActionList::Heading",
       "Primer::Alpha::ActionList::Item",
       "Primer::Alpha::ActionList::Separator",