Move Primer::TimelineItemComponent to Primer::Beta::TimelineItem

.changeset/unlucky-pugs-attack.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Move Primer::TimelineItemComponent to Primer::Beta::TimelineItem

app/components/primer/beta/timeline_item.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
+    class TimelineItem < Primer::Component
+      status :beta
+
+      # Avatar to be rendered to the left of the Badge.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
+      renders_one :avatar, lambda { |src:, size: 40, shape: :square, **system_arguments|
+        system_arguments[:classes] = class_names(
+          "TimelineItem-avatar",
+          system_arguments[:classes]
+        )
+
+        Primer::Beta::Avatar.new(src: src, size: size, shape: shape, **system_arguments)
+      }
+
+      # Badge that will be connected to other TimelineItems.
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :badge, "BadgeComponent"
+
+      # Body to be rendered to the left of the Badge.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "TimelineItem-body",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <div style="padding-left: 60px">
+      #     <%= render(Primer::Beta::TimelineItem.new) do |component| %>
+      #       <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
+      #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
+      #       <% component.with_body { "Success!" } %>
+      #     <% end %>
+      #   </div>
+      #
+      # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(condensed: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "TimelineItem",
+          condensed ? "TimelineItem--condensed" : "",
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        avatar? || badge? || body?
+      end
+
+      # This component is part of `Primer::Beta::TimelineItem` and should not be
+      # used as a standalone component.
+      class BadgeComponent < Primer::Component
+        def initialize(icon: nil, **system_arguments)
+          @icon = icon
+
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "TimelineItem-badge",
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            render(Primer::Beta::Octicon.new(@icon))
+          end
+        end
+      end
+    end
+  end
+end

app/components/primer/primer.pcss

@@ -33,5 +33,5 @@
 @import "./beta/truncate.pcss";
 
 /* to be renamed */
-@import "./timeline_item_component.pcss";
+@import "./beta/timeline_item.pcss";
 @import "./truncate.pcss";

app/components/primer/timeline_item_component.rb

@@ -1,86 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
-  class TimelineItemComponent < Primer::Component
-    status :beta
-
-    # Avatar to be rendered to the left of the Badge.
-    #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
-    renders_one :avatar, lambda { |src:, size: 40, shape: :square, **system_arguments|
-      system_arguments[:classes] = class_names(
-        "TimelineItem-avatar",
-        system_arguments[:classes]
-      )
-
-      Primer::Beta::Avatar.new(src: src, size: size, shape: shape, **system_arguments)
-    }
-
-    # Badge that will be connected to other TimelineItems.
-    #
-    # @param icon [String] Name of <%= link_to_octicons %> to use.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :badge, "BadgeComponent"
-
-    # Body to be rendered to the left of the Badge.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |**system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "TimelineItem-body",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <div style="padding-left: 60px">
-    #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
-    #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
-    #       <% component.with_body { "Success!" } %>
-    #     <% end %>
-    #   </div>
-    #
-    # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(condensed: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        "TimelineItem",
-        condensed ? "TimelineItem--condensed" : "",
-        system_arguments[:classes]
-      )
-    end
-
-    def render?
-      avatar? || badge? || body?
-    end
-
-    # This component is part of `Primer::TimelineItemComponent` and should not be
-    # used as a standalone component.
-    class BadgeComponent < Primer::Component
-      def initialize(icon: nil, **system_arguments)
-        @icon = icon
-
-        @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-badge",
-          system_arguments[:classes]
-        )
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments)) do
-          render(Primer::Beta::Octicon.new(@icon))
-        end
-      end
-    end
+  class TimelineItemComponent < Primer::Beta::TimelineItem
+    status :deprecated
   end
 end

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

@@ -104,7 +104,7 @@
   - title: TextField
     url: "/components/alpha/textfield"
   - title: TimelineItem
-    url: "/components/timelineitem"
+    url: "/components/beta/timelineitem"
   - title: ToggleSwitch
     url: "/components/alpha/toggleswitch"
   - title: Tooltip

lib/primer/deprecations.yml

@@ -109,6 +109,10 @@ deprecations:
     replacement: "Primer::Beta::RelativeTime"
     guide: "https://primer.style/view-components/guides/primer_time_ago"
 
+  - component: "Primer::TimelineItemComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::TimelineItem"
+
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"

lib/tasks/docs.rake

@@ -80,7 +80,7 @@ namespace :docs do
       Primer::Beta::Text,
       Primer::Alpha::TextField,
       Primer::TimeAgoComponent,
-      Primer::TimelineItemComponent,
+      Primer::Beta::TimelineItem,
       Primer::Tooltip,
       Primer::Truncate,
       Primer::Beta::Truncate,

previews/primer/beta/timeline_item_preview.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label TimelineItem
+    class TimelineItemPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param condensed [Boolean]
+      def playground(condensed: false)
+        render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+
+      # @label Default
+      #
+      # @param condensed [Boolean]
+      def default(condensed: false)
+        render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+    end
+  end
+end

static/arguments.json

@@ -2115,6 +2115,26 @@
       }
     ]
   },
+  {
+    "component": "TimelineItem",
+    "status": "beta",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item_preview/default/",
+    "parameters": [
+      {
+        "name": "condensed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Truncate",
     "status": "beta",
@@ -2481,26 +2501,6 @@
       }
     ]
   },
-  {
-    "component": "TimelineItem",
-    "status": "beta",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/timeline_item_component.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/timeline_item_preview/default/",
-    "parameters": [
-      {
-        "name": "condensed",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "Tooltip",
     "status": "deprecated",

static/audited_at.json

@@ -67,6 +67,8 @@
   "Primer::Beta::State": "",
   "Primer::Beta::Subhead": "",
   "Primer::Beta::Text": "",
+  "Primer::Beta::TimelineItem": "",
+  "Primer::Beta::TimelineItem::BadgeComponent": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",
   "Primer::BlankslateComponent": "",
@@ -98,7 +100,6 @@
   "Primer::TabContainerComponent": "",
   "Primer::TimeAgoComponent": "",
   "Primer::TimelineItemComponent": "",
-  "Primer::TimelineItemComponent::BadgeComponent": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""
 }

static/constants.json

@@ -977,6 +977,11 @@
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },
+  "Primer::Beta::TimelineItem": {
+    "BadgeComponent": "Primer::Beta::TimelineItem::BadgeComponent"
+  },
+  "Primer::Beta::TimelineItem::BadgeComponent": {
+  },
   "Primer::Beta::Truncate": {
     "TruncateText": "Primer::Beta::Truncate::TruncateText"
   },
@@ -1126,9 +1131,6 @@
   "Primer::TimeAgoComponent": {
   },
   "Primer::TimelineItemComponent": {
-    "BadgeComponent": "Primer::TimelineItemComponent::BadgeComponent"
-  },
-  "Primer::TimelineItemComponent::BadgeComponent": {
   },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",

static/statuses.json

@@ -67,6 +67,8 @@
   "Primer::Beta::State": "beta",
   "Primer::Beta::Subhead": "beta",
   "Primer::Beta::Text": "beta",
+  "Primer::Beta::TimelineItem": "beta",
+  "Primer::Beta::TimelineItem::BadgeComponent": "alpha",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
   "Primer::BlankslateComponent": "deprecated",
@@ -97,8 +99,7 @@
   "Primer::SubheadComponent": "deprecated",
   "Primer::TabContainerComponent": "deprecated",
   "Primer::TimeAgoComponent": "deprecated",
-  "Primer::TimelineItemComponent": "beta",
-  "Primer::TimelineItemComponent::BadgeComponent": "alpha",
+  "Primer::TimelineItemComponent": "deprecated",
   "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "beta"
 }