From 595a67548ada4efcc1268fb59b15ebb9cc7bc5b6 Mon Sep 17 00:00:00 2001 From: River Lynn Bailey Date: Thu, 20 Oct 2022 14:08:55 -0500 Subject: [PATCH] Migrate Primer::Image to Primer::Alpha::Image (#1527) Co-authored-by: Actions Auto Build --- .changeset/real-jars-hear.md | 5 ++ app/components/primer/alpha/image.rb | 50 +++++++++++++++ app/components/primer/beta/blankslate.rb | 6 +- app/components/primer/image.rb | 43 +------------ app/lib/primer/view_helper.rb | 2 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- lib/primer/deprecations.rb | 1 + lib/tasks/docs.rake | 2 +- static/arguments.json | 64 +++++++++---------- static/audited_at.json | 1 + static/constants.json | 2 + static/statuses.json | 3 +- test/components/{ => alpha}/image_test.rb | 10 +-- test/components/component_test.rb | 3 +- 14 files changed, 108 insertions(+), 86 deletions(-) create mode 100644 .changeset/real-jars-hear.md create mode 100644 app/components/primer/alpha/image.rb rename test/components/{ => alpha}/image_test.rb (62%) diff --git a/.changeset/real-jars-hear.md b/.changeset/real-jars-hear.md new file mode 100644 index 0000000000..1cec23482d --- /dev/null +++ b/.changeset/real-jars-hear.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +deprecating Primer::Image in favor of Primer::Alpha::Image diff --git a/app/components/primer/alpha/image.rb b/app/components/primer/alpha/image.rb new file mode 100644 index 0000000000..ce6fbae80d --- /dev/null +++ b/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 diff --git a/app/components/primer/beta/blankslate.rb b/app/components/primer/beta/blankslate.rb index ea49be676f..648ded6da7 100644 --- a/app/components/primer/beta/blankslate.rb +++ b/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 diff --git a/app/components/primer/image.rb b/app/components/primer/image.rb index 0374b63b91..15412ab262 100644 --- a/app/components/primer/image.rb +++ b/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 diff --git a/app/lib/primer/view_helper.rb b/app/lib/primer/view_helper.rb index 6875d940e3..52801b9c51 100644 --- a/app/lib/primer/view_helper.rb +++ b/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| diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 24d567c1ee..ce6776a1b5 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/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 diff --git a/lib/primer/deprecations.rb b/lib/primer/deprecations.rb index 9e6c77ddc9..831dbb6e8f 100644 --- a/lib/primer/deprecations.rb +++ b/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", diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 2762e658c0..3cfc1e1455 100644 --- a/lib/tasks/docs.rake +++ b/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, diff --git a/static/arguments.json b/static/arguments.json index e5bf4535c0..bf4b898fa8 100644 --- a/static/arguments.json +++ b/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", diff --git a/static/audited_at.json b/static/audited_at.json index ec13d8a37c..aafdf926bd 100644 --- a/static/audited_at.json +++ b/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": "", diff --git a/static/constants.json b/static/constants.json index cce3ddabea..792f69db70 100644 --- a/static/constants.json +++ b/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": [ diff --git a/static/statuses.json b/static/statuses.json index bb8af0ef29..5c83a44788 100644 --- a/static/statuses.json +++ b/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", diff --git a/test/components/image_test.rb b/test/components/alpha/image_test.rb similarity index 62% rename from test/components/image_test.rb rename to test/components/alpha/image_test.rb index 0e74cda704..fdd8f4842e 100644 --- a/test/components/image_test.rb +++ b/test/components/alpha/image_test.rb @@ -2,18 +2,18 @@ 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 @@ -21,7 +21,7 @@ def test_lazy_loading 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") diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 11c519791c..69625ac095 100644 --- a/test/components/component_test.rb +++ b/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",