primer_view_components 0.0.116 → 0.0.117

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

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
+    #
+    # - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
+    # - Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
+    # - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::Beta::Link) %>.
+    #
+    # @accessibility
+    #   The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
+    #   <%= link_to_heading_practices %>
+    class Subhead < Primer::Component
+      status :beta
+
+      DEFAULT_HEADING_TAG = :div
+      HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
+
+      # The heading
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::Subhead::HEADING_TAG_OPTIONS)%>
+      # @param danger [Boolean] Whether to style the heading as dangerous.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Subhead-heading",
+          "Subhead-heading--danger": danger
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Actions
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # The description
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :description, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3) do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With dangerous heading
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3, danger: true) do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With long description
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3) do %>
+      #       My Heading
+      #     <% end %>
+      #   <% end %>
+      #   <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
+      #
+      # @example Without border
+      #   <%= render(Primer::Beta::Subhead.new(hide_border: true)) do |component| %>
+      #     <% component.with_heading do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With actions
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #     <% component.with_actions do %>
+      #       <%= render(
+      #         Primer::ButtonComponent.new(
+      #           tag: :a, href: "http://www.google.com", scheme: :danger
+      #         )
+      #       ) { "Action" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param spacious [Boolean] Whether to add spacing to the Subhead.
+      # @param hide_border [Boolean] Whether to hide the border under the heading.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(spacious: false, hide_border: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "Subhead",
+            "Subhead--spacious": spacious,
+            "border-bottom-0": hide_border
+          )
+        @system_arguments[:mb] ||= hide_border ? 0 : nil
+      end
+
+      def render?
+        heading.present?
+      end
+    end
+  end
+end

data/app/components/primer/beta/timeline_item.css.json

@@ -0,0 +1 @@
+{"name":"beta/timeline_item","selectors":[".TimelineItem",".TimelineItem:before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}

data/app/components/primer/beta/timeline_item.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--primer-stack-padding-normal, 16px) 0;\n  margin-left: var(--primer-stack-gap-normal, 16px);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--primer-borderWidth-thick, 2px);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--primer-control-medium-size, 32px);\n  height: var(--primer-control-medium-size, 32px);\n  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4, 4px);\n  color: var(--color-fg-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--primer-stack-gap-spacious, 24px);\n  margin: 0;\n  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4, 4px);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--primer-stack-gap-normal, 16px);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16, 16px);\n    margin-top: var(--base-size-8, 8px);\n    margin-bottom: var(--base-size-8, 8px);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}\n"]}

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

@@ -0,0 +1,90 @@
+# 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, "Badge"
+
+      # 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 Badge < Primer::Component
+        status :beta
+
+        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

data/app/components/primer/beta/truncate.css

@@ -1 +1 @@
-.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--primer-control-small-gap,4px)}.Truncate>.Truncate-text.Truncate-text--primary{flex-basis:200%}.Truncate>.Truncate-text.Truncate-text--expandable:active,.Truncate>.Truncate-text.Truncate-text--expandable:focus,.Truncate>.Truncate-text.Truncate-text--expandable:hover{cursor:pointer;flex-shrink:0;max-width:100%!important}
+.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Truncate>.Truncate-text+.Truncate-text{margin-left:var(--primer-control-small-gap,4px)}.Truncate>.Truncate-text.Truncate-text--primary{flex-basis:200%}.Truncate>.Truncate-text.Truncate-text--expandable:active,.Truncate>.Truncate-text.Truncate-text--expandable:focus,.Truncate>.Truncate-text.Truncate-text--expandable:hover{cursor:pointer;flex-shrink:0;max-width:100%!important}

data/app/components/primer/beta/truncate.css.json

@@ -1 +1 @@
-{"name":"beta/truncate","selectors":[".Truncate",".Truncate>.Truncate-text",":is(.Truncate>.Truncate-text)+.Truncate-text",".Truncate>.Truncate-text.Truncate-text--primary",".Truncate>.Truncate-text.Truncate-text--expandable:active",".Truncate>.Truncate-text.Truncate-text--expandable:focus",".Truncate>.Truncate-text.Truncate-text--expandable:hover"]}
+{"name":"beta/truncate","selectors":[".Truncate",".Truncate>.Truncate-text",".Truncate>.Truncate-text+.Truncate-text",".Truncate>.Truncate-text.Truncate-text--primary",".Truncate>.Truncate-text.Truncate-text--expandable:active",".Truncate>.Truncate-text.Truncate-text--expandable:focus",".Truncate>.Truncate-text.Truncate-text--expandable:hover"]}

data/app/components/primer/beta/truncate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,6CACE,+CACF,CAEA,gDACE,eACF,CAEA,4KAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      margin-left: var(--primer-control-small-gap, 4px);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,wCACE,+CACF,CAEA,gDACE,eACF,CAEA,4KAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      margin-left: var(--primer-control-small-gap, 4px);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

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

@@ -4,7 +4,6 @@ module Primer
   module Beta
     # Use `Truncate` to shorten overflowing text with an ellipsis.
     class Truncate < Primer::Component
-      warn_on_deprecated_slot_setter
       status :beta
 
       # Text slot used for the truncated text.

data/app/components/primer/button_component.rb

@@ -88,21 +88,21 @@ module Primer
     #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
     #
     # @example With leading visual
-    #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.with_leading_visual_icon(icon: :star) %>
+    #   <%= render(Primer::ButtonComponent.new) do |component| %>
+    #     <% component.with_leading_visual_icon(icon: :star) %>
     #     Button
     #   <% end %>
     #
     # @example With trailing visual
-    #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.with_trailing_visual_counter(count: 15) %>
+    #   <%= render(Primer::ButtonComponent.new) do |component| %>
+    #     <% component.with_trailing_visual_counter(count: 15) %>
     #     Button
     #   <% end %>
     #
     # @example With leading and trailing visuals
-    #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.with_leading_visual_icon(icon: :star) %>
-    #     <% c.with_trailing_visual_counter(count: 15) %>
+    #   <%= render(Primer::ButtonComponent.new) do |component| %>
+    #     <% component.with_leading_visual_icon(icon: :star) %>
+    #     <% component.with_trailing_visual_counter(count: 15) %>
     #     Button
     #   <% end %>
     #
@@ -115,8 +115,8 @@ module Primer
     #   @description
     #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
     #   @code
-    #     <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |c| %>
-    #       <% c.with_tooltip(text: "Tooltip text") %>
+    #     <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |component| %>
+    #       <% component.with_tooltip(text: "Tooltip text") %>
     #       Button
     #     <% end %>
     #

data/app/components/primer/component.rb

@@ -6,7 +6,6 @@ module Primer
   # @private
   # :nocov:
   class Component < ViewComponent::Base
-    warn_on_deprecated_slot_setter
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots
     include ClassNameHelper

data/app/components/primer/hellip_button.rb

@@ -1,39 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders.
-  # @accessibility
-  #   Always set an accessible label to help the user interact with the component.
-  #
-  #   * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.
-  #   * Set the attribute `aria-label` on the system arguments. E.g. `Primer::HellipButton.new("aria-label": "Expand next part")`
-  class HellipButton < Primer::Component
-    # @example Default
-    #   <%= render(Primer::HellipButton.new("aria-label": "No effect")) %>
-    #
-    # @example Inline
-    #   <%= render(Primer::HellipButton.new(inline: true, "aria-label": "No effect")) %>
-    #
-    # @example Styling the button
-    #   <%= render(Primer::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %>
-    #
-    # @param inline [Boolean] Whether or not the button is inline.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(inline: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-
-      validate_aria_label
-
-      @system_arguments[:tag] = :button
-      @system_arguments[:"aria-expanded"] = false
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "inline" => inline
-      )
-    end
-
-    def call
-      render(Primer::Beta::BaseButton.new(**@system_arguments)) { "&hellip;".html_safe }
-    end
+  class HellipButton < Primer::Alpha::HellipButton
+    status :deprecated
   end
 end

data/app/components/primer/navigation/tab_component.rb

@@ -63,31 +63,31 @@ module Primer
       attr_reader :selected
 
       # @example Default
-      #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
-      #     <% c.with_text { "Selected" } %>
+      #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |component| %>
+      #     <% component.with_text { "Selected" } %>
       #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.with_text { "Not selected" } %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_text { "Not selected" } %>
       #   <% end %>
       #
       # @example With icons and counters
-      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.with_icon(:star) %>
-      #     <% c.with_text { "Tab" } %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_icon(:star) %>
+      #     <% component.with_text { "Tab" } %>
       #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.with_icon(:star) %>
-      #     <% c.with_text { "Tab" } %>
-      #     <% c.with_counter(count: 10) %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_icon(:star) %>
+      #     <% component.with_text { "Tab" } %>
+      #     <% component.with_counter(count: 10) %>
       #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.with_text { "Tab" } %>
-      #     <% c.with_counter(count: 10) %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_text { "Tab" } %>
+      #     <% component.with_counter(count: 10) %>
       #   <% end %>
       #
       # @example Inside a list
-      #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
-      #     <% c.with_text { "Tab" } %>
+      #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |component| %>
+      #     <% component.with_text { "Tab" } %>
       #   <% end %>
       #
       # @example With custom HTML

data/app/components/primer/primer.d.ts

@@ -9,7 +9,7 @@ import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './local_time';
-import './tab_container_component';
+import './alpha/tab_container';
 import './time_ago_component';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';

data/app/components/primer/primer.js

@@ -9,7 +9,7 @@ import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './local_time';
-import './tab_container_component';
+import './alpha/tab_container';
 import './time_ago_component';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';

data/app/components/primer/primer.pcss

@@ -28,10 +28,10 @@
 @import "./beta/link.pcss";
 @import "./beta/popover.pcss";
 @import "./beta/progress_bar.pcss";
+@import "./beta/state.pcss";
+@import "./beta/subhead.pcss";
 @import "./beta/truncate.pcss";
 
 /* to be renamed */
-@import "./state_component.pcss";
-@import "./subhead_component.pcss";
-@import "./timeline_item_component.pcss";
+@import "./beta/timeline_item.pcss";
 @import "./truncate.pcss";

data/app/components/primer/primer.ts

@@ -9,7 +9,7 @@ import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
 import './beta/clipboard_copy'
 import './local_time'
-import './tab_container_component'
+import './alpha/tab_container'
 import './time_ago_component'
 import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'

data/app/components/primer/state_component.rb

@@ -1,74 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `State` for rendering the status of an item.
-  class StateComponent < Primer::Component
-    status :beta
-
-    SCHEME_DEFAULT = :default
-    NEW_SCHEME_MAPPINGS = {
-      open: "State--open",
-      closed: "State--closed",
-      merged: "State--merged"
-    }.freeze
-
-    DEPRECATED_SCHEME_MAPPINGS = {
-      SCHEME_DEFAULT => "",
-      :green => "State--open",
-      :red => "State--closed",
-      :purple => "State--merged"
-    }.freeze
-    SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
-    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
-
-    SIZE_DEFAULT = :default
-    SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :small => "State--small"
-    }.freeze
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-
-    TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
-
-    # @example Default
-    #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
-    #
-    # @example Schemes
-    #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :open)) { "Open" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :closed)) { "Closed" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :merged)) { "Merged" } %>
-    #
-    # @example Sizes
-    #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
-    #
-    # @param title [String] `title` HTML attribute.
-    # @param scheme [Symbol] Background color. <%= one_of(Primer::StateComponent::SCHEME_OPTIONS) %>
-    # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
-    # @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(
-      title:,
-      scheme: SCHEME_DEFAULT,
-      tag: TAG_DEFAULT,
-      size: SIZE_DEFAULT,
-      **system_arguments
-    )
-      @system_arguments = system_arguments
-      @system_arguments[:title] = title
-      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "State",
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-      )
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
+  class StateComponent < Primer::Beta::State
+    status :deprecated
   end
 end