[WIP] migrating Primer::ImageCrop to Primer::Alpha::ImageCrop (primer…

…#1528)

.changeset/witty-shirts-exist.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+migrating Primer::ImageCrop to Primer::Alpha::ImageCrop

app/components/primer/alpha/image_crop.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # 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::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>
+      #
+      # @example Square cropper
+      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>
+      #
+      # @example Cropper with a custom loader
+      #   <%= render(Primer::Alpha::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
+    end
+  end
+end

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

app/components/primer/primer.ts

@@ -1,3 +1,4 @@
+import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './alpha/nav_list'
 import './alpha/segmented_control'
@@ -6,7 +7,6 @@ import './alpha/tool_tip'
 import './beta/auto_complete/auto_complete'
 import './clipboard_copy'
 import './dropdown'
-import './image_crop'
 import './local_time'
 import './tab_container_component'
 import './time_ago_component'

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

@@ -62,7 +62,7 @@
   - title: Image
     url: "/components/alpha/image"
   - title: ImageCrop
-    url: "/components/imagecrop"
+    url: "/components/alpha/imagecrop"
   - title: Label
     url: "/components/label"
   - title: Layout

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::ImageCrop" => "Primer::Alpha::ImageCrop",
       "Primer::Image" => "Primer::Alpha::Image",
       "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
       "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",

lib/tasks/docs.rake

@@ -37,7 +37,7 @@ namespace :docs do
       Primer::Alpha::Image,
       Primer::LocalTime,
       Primer::OcticonSymbolsComponent,
-      Primer::ImageCrop,
+      Primer::Alpha::ImageCrop,
       Primer::IconButton,
       Primer::Beta::AutoComplete,
       Primer::Beta::AutoComplete::Item,
@@ -100,7 +100,7 @@ namespace :docs do
     js_components = [
       Primer::Dropdown,
       Primer::LocalTime,
-      Primer::ImageCrop,
+      Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,

previews/primer/alpha/image_crop_preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ImageCrop
+    class ImageCropPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param rounded [Boolean]
+      def playground(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
+      end
+
+      # @label Default Options
+      #
+      # @param rounded [Boolean]
+      def default(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
+      end
+
+      # @label Custom loading slot
+      #
+      # @param rounded [Boolean]
+      def loading(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded)) do |c|
+          c.with_loading { "Loading..." }
+        end
+      end
+    end
+  end
+end

static/arguments.json

@@ -357,6 +357,32 @@
       }
     ]
   },
+  {
+    "component": "ImageCrop",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
+    "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "N/A",
+        "description": "The path of the image to crop."
+      },
+      {
+        "name": "rounded",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "If the crop mask should be a circle. Defaults to true."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Layout",
     "status": "alpha",
@@ -469,7 +495,9 @@
   },
   {
     "component": "SegmentedControl",
+    "status": "alpha",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/default/",
     "parameters": [
       {
         "name": "hide_labels",
@@ -1793,32 +1821,6 @@
       }
     ]
   },
-  {
-    "component": "ImageCrop",
-    "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/image_crop.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/image_crop/default/",
-    "parameters": [
-      {
-        "name": "src",
-        "type": "String",
-        "default": "N/A",
-        "description": "The path of the image to crop."
-      },
-      {
-        "name": "rounded",
-        "type": "Boolean",
-        "default": "`true`",
-        "description": "If the crop mask should be a circle. Defaults to true."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "Label",
     "status": "beta",

static/audited_at.json

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

static/constants.json

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

static/statuses.json

@@ -12,6 +12,7 @@
   "Primer::Alpha::Dialog::Header": "alpha",
   "Primer::Alpha::HiddenTextExpander": "alpha",
   "Primer::Alpha::Image": "alpha",
+  "Primer::Alpha::ImageCrop": "alpha",
   "Primer::Alpha::Layout": "alpha",
   "Primer::Alpha::Layout::Main": "alpha",
   "Primer::Alpha::Layout::Sidebar": "alpha",
@@ -64,7 +65,7 @@
   "Primer::HellipButton": "alpha",
   "Primer::IconButton": "deprecated",
   "Primer::Image": "deprecated",
-  "Primer::ImageCrop": "alpha",
+  "Primer::ImageCrop": "deprecated",
   "Primer::LabelComponent": "beta",
   "Primer::LayoutComponent": "alpha",
   "Primer::LinkComponent": "beta",

test/components/image_crop_test.rb → test/components/alpha/image_crop_test.rb

@@ -2,25 +2,25 @@
 
 require "components/test_helper"
 
-class PrimerImageCropTest < Minitest::Test
+class PrimerAlphaImageCropTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_simple
-    render_inline(Primer::ImageCrop.new(src: "image.png"))
+    render_inline(Primer::Alpha::ImageCrop.new(src: "image.png"))
 
     assert_selector("image-crop[data-view-component][src=\"image.png\"][rounded]") do
       assert_selector("svg.flex-1.anim-rotate")
     end
   end
 
   def test_square_cropper
-    render_inline Primer::ImageCrop.new(src: "image.png", rounded: false)
+    render_inline Primer::Alpha::ImageCrop.new(src: "image.png", rounded: false)
 
     assert_selector("image-crop[data-view-component][src=\"image.png\"]")
   end
 
   def test_custom_loading_element
-    render_inline Primer::ImageCrop.new(src: "image.png") do |crop|
+    render_inline Primer::Alpha::ImageCrop.new(src: "image.png") do |crop|
       crop.loading do
         "Loading.."
       end

test/components/component_test.rb

@@ -27,7 +27,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Alpha::UnderlinePanels, { label: "Panel label" }],
     [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::Alpha::ImageCrop, { src: "Foo" }],
     [Primer::IconButton, { icon: :star, "aria-label": "Label" }],
     [Primer::Alpha::ActionList, { aria: { label: "Action List" } }, lambda do |component|
       component.item(label: "Foo")
@@ -109,6 +109,7 @@ class PrimerComponentTest < Minitest::Test
 
   def test_registered_components
     ignored_components = [
+      "Primer::ImageCrop",
       "Primer::Image",
       "Primer::Alpha::ActionList::Heading",
       "Primer::Alpha::ActionList::Item",