primer_view_components 0.0.111 → 0.0.113

data/app/components/primer/dropdown/menu.rb

@@ -2,97 +2,12 @@
 
 module Primer
   class Dropdown
-    # This component is part of `Dropdown` and should not be
-    # used as a standalone component.
-    class Menu < Primer::Component
-      AS_DEFAULT = :default
-      AS_OPTIONS = [AS_DEFAULT, :list].freeze
+    # :nodoc:
+    class Menu < Primer::Alpha::Dropdown::Menu
+      status :deprecated
 
-      SCHEME_DEFAULT = :default
-      SCHEME_MAPPINGS = {
-        SCHEME_DEFAULT => "",
-        :dark => "dropdown-menu-dark"
-      }.freeze
-
-      DIRECTION_DEFAULT = :se
-      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
-
-      # @param tag [Symbol] <%= one_of(Primer::Dropdown::Menu::Item::TAG_OPTIONS) %>.
-      # @param divider [Boolean] Whether the item is a divider without any function.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :items, lambda { |divider: false, **system_arguments|
-        Primer::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
-      }
-
-      # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
-      # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>.
-      # @param header [String] Header to be displayed above the menu.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
-        @header = header
-        @direction = direction
-        @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
-
-        @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = "details-menu"
-        @system_arguments[:role] = "menu"
-
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "dropdown-menu",
-          "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
-          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
-        )
-      end
-
-      private
-
-      def list?
-        @as == :list
-      end
-
-      # Items to be rendered in the `Dropdown` menu.
-      class Item < Primer::Component
-        TAG_DEFAULT = :a
-        BUTTON_TAGS = [:button, :summary].freeze
-        TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
-
-        def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
-          @divider = divider
-          @as = as
-
-          @system_arguments = system_arguments
-          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
-          @system_arguments[:tag] = :li if list? && divider?
-          @system_arguments[:role] ||= :menuitem
-          @system_arguments[:role] = :separator if divider
-          @system_arguments[:classes] = class_names(
-            @system_arguments[:classes],
-            "dropdown-item" => !divider,
-            "dropdown-divider" => divider
-          )
-        end
-
-        def call
-          component = if BUTTON_TAGS.include?(@system_arguments[:tag])
-                        Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
-                      else
-                        Primer::BaseComponent.new(**@system_arguments)
-                      end
-
-          # divider has no content
-          render(component) if divider?
-
-          render(component) { content }
-        end
-
-        def divider?
-          @divider
-        end
-
-        def list?
-          @as == :list
-        end
+      class Item < Primer::Alpha::Dropdown::Menu::Item
+        status :deprecated
       end
     end
   end

data/app/components/primer/dropdown.rb

@@ -1,150 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `Dropdown` is a lightweight context menu for housing navigation and actions.
-  # They're great for instances where you don't need the full power (and code) of the SelectMenu.
-  class Dropdown < Primer::Component
-    # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
-    # but it is locked as a `summary` tag.
-    renders_one :button, lambda { |**system_arguments|
-      @button_arguments = system_arguments
-      @button_arguments[:button] = true
-      @button_arguments[:dropdown] = @with_caret
-
-      Primer::Content.new
-    }
-
-    # Required context menu for the dropdown.
-    #
-    # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
-    # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass `:dark` for dark mode theming
-    # @param header [String] Optional string to display as the header
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :menu, "Primer::Dropdown::Menu"
-
-    # @example Default
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example With dividers
-    #
-    #   @description
-    #     Dividers can be used to separate a group of items. They don't have any content.
-    #   @code
-    #     <%= render(Primer::Dropdown.new) do |c| %>
-    #       <% c.with_button do %>
-    #         Dropdown
-    #       <% end %>
-    #
-    #       <% c.with_menu(header: "Options") do |menu|
-    #         menu.item { "Item 1" }
-    #         menu.item { "Item 2" }
-    #         menu.item(divider: true)
-    #         menu.item { "Item 3" }
-    #         menu.item { "Item 4" }
-    #         menu.item(divider: true)
-    #         menu.item { "Item 5" }
-    #         menu.item { "Item 6" }
-    #       end %>
-    #     <% end %>
-    #
-    # @example With direction
-    #   <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options", direction: :s) do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example With caret
-    #   <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example Customizing the button
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button(scheme: :primary, size: :small) do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example Menu as list
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(as: :list, header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item(divider: true)
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example Customizing menu items
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item(tag: :button) { "Item 1" }
-    #       menu.item(classes: "custom-class") { "Item 2" }
-    #       menu.item { "Item 3" }
-    #     end %>
-    #   <% end %>
-    #
-    # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
-    # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(overlay: :default, with_caret: false, **system_arguments)
-      @with_caret = with_caret
-
-      @system_arguments = system_arguments
-      @system_arguments[:overlay] = overlay
-      @system_arguments[:reset] = true
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "dropdown"
-      )
-    end
-
-    def render?
-      button.present? && menu.present?
-    end
+  class Dropdown < Primer::Alpha::Dropdown
+    status :deprecated
   end
 end

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

@@ -1 +1 @@
-import '@github/time-elements';
+import '@github/relative-time-element';

data/app/components/primer/local_time.js

@@ -1 +1 @@
-import '@github/time-elements';
+import '@github/relative-time-element';

data/app/components/primer/local_time.rb

@@ -37,7 +37,9 @@ module Primer
 
       @datetime = datetime
 
-      @system_arguments[:tag] = "local-time"
+      @system_arguments[:tag] = "relative-time"
+      @system_arguments[:threshold] = "PT0S"
+      @system_arguments[:prefix] = ""
       @system_arguments[:datetime] = datetime
 
       @initial_text = initial_text

data/app/components/primer/local_time.ts

@@ -1 +1 @@
-import '@github/time-elements'
+import '@github/relative-time-element'

data/app/components/primer/menu_component.css

@@ -0,0 +1 @@
+.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--primer-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--primer-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}

data/app/components/primer/menu_component.css.json

@@ -0,0 +1 @@
+{"name":"menu_component","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",":is(.menu-item.selected",".menu-item[aria-current]:not([aria-current=false])):before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}

data/app/components/primer/menu_component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["menu_component.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,kHAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu_component.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--primer-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n"]}

data/app/components/primer/menu_component.pcss

@@ -0,0 +1,119 @@
+/* menu */
+
+/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
+
+.menu {
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  list-style: none;
+  background-color: var(--color-canvas-default);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  color: var(--color-fg-default);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+
+  &:first-child {
+    border-top: 0;
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+
+    &::before {
+      border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+
+    &::before {
+      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--color-neutral-subtle);
+  }
+
+  &:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--color-menu-bg-active);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      background-color: var(--color-primer-border-active);
+    }
+  }
+
+  & .octicon {
+    width: 16px;
+    margin-right: var(--primer-control-medium-gap, 8px);
+    color: var(--color-fg-muted);
+    text-align: center;
+  }
+
+  & .Counter {
+    float: right;
+    margin-left: var(--primer-control-small-gap, 4px);
+  }
+
+  & .menu-warning {
+    float: right;
+    color: var(--color-attention-fg);
+  }
+
+  & .avatar {
+    float: left;
+    margin-right: var(--primer-control-small-gap, 4px);
+  }
+
+  &.alert {
+    & .Counter {
+      color: var(--color-danger-fg);
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-fg-default);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}

data/app/components/primer/popover_component.rb

@@ -1,125 +1,8 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
-  #
-  # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
-  class PopoverComponent < Primer::Component
-    status :beta
-
-    CARET_DEFAULT = :top
-    CARET_MAPPINGS = {
-      CARET_DEFAULT => "",
-      :bottom => "Popover-message--bottom",
-      :bottom_right => "Popover-message--bottom-right",
-      :bottom_left => "Popover-message--bottom-left",
-      :left => "Popover-message--left",
-      :left_bottom => "Popover-message--left-bottom",
-      :left_top => "Popover-message--left-top",
-      :right => "Popover-message--right",
-      :right_bottom => "Popover-message--right-bottom",
-      :right_top => "Popover-message--right-top",
-      :top_left => "Popover-message--top-left",
-      :top_right => "Popover-message--top-right"
-    }.freeze
-
-    DEFAULT_HEADING_TAG = :h4
-
-    # The heading
-    #
-    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
-      system_arguments[:tag] = tag
-      system_arguments[:mb] ||= 2
-
-      Primer::Beta::Heading.new(**system_arguments)
-    }
-
-    # The body
-    #
-    # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::CARET_MAPPINGS.keys) %>
-    # @param large [Boolean] Whether to use the large version of the component.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
-      @body_arguments = system_arguments
-      @body_arguments[:classes] = class_names(
-        @body_arguments[:classes],
-        "Popover-message Box",
-        CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
-        "Popover-message--large" => large
-      )
-      @body_arguments[:p] ||= 4
-      @body_arguments[:mt] ||= 2
-      @body_arguments[:mx] ||= :auto
-      @body_arguments[:text_align] ||= :left
-      @body_arguments[:box_shadow] ||= :large
-
-      Primer::Content.new
-    }
-
-    # @example Default
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body do %>
-    #       This is the Popover body.
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Large
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body(large: true) do %>
-    #       This is the large Popover body.
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Caret position
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body(caret: :left) do %>
-    #       This is the Popover body.
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With multiple elements in the body
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body(caret: :left) do %>
-    #       <p>This is the Popover body.</p>
-    #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
-    #         Got it!
-    #       <% end %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        system_arguments[:classes],
-        "Popover"
-      )
-      @system_arguments[:position] ||= :relative
-      @system_arguments[:right] = false unless @system_arguments.delete(:right)
-      @system_arguments[:left] = false unless @system_arguments.delete(:left)
-    end
-
-    def render?
-      body.present?
-    end
-
-    def body_component
-      Primer::Box.new(**@body_arguments)
-    end
+  # :nodoc:
+  class PopoverComponent < Primer::Beta::Popover
+    status :deprecated
   end
 end

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

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

data/app/components/primer/primer.js

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

data/app/components/primer/primer.pcss

@@ -1,20 +1,37 @@
 /* CSS component styles here */
+
+/* alpha */
 @import "./alpha/action_list.pcss";
+@import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
+@import "./alpha/dialog.pcss";
+@import "./alpha/dropdown.pcss";
+@import "./alpha/tab_nav.pcss";
+@import "./alpha/text_field.pcss";
+@import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
+@import "./alpha/underline_nav.pcss";
 @import "./alpha/segmented_control.pcss";
+
+/* beta */
 @import "./beta/avatar.pcss";
 @import "./beta/avatar_stack.pcss";
+@import "./beta/border_box.pcss";
+@import "./beta/blankslate.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
+@import "./beta/button_group.pcss";
 @import "./beta/counter.pcss";
 @import "./beta/flash.pcss";
 @import "./beta/label.pcss";
-@import "./beta/blankslate.pcss";
+@import "./beta/link.pcss";
+@import "./beta/popover.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
-@import "./dropdown.pcss";
-@import "./popover_component.pcss";
+
+/* to be renamed */
+@import "./button_component.pcss";
+@import "./menu_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";
 @import "./timeline_item_component.pcss";

data/app/components/primer/primer.ts

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

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

@@ -1 +1 @@
-import '@github/time-elements';
+import '@github/relative-time-element';

data/app/components/primer/time_ago_component.js

@@ -1 +1 @@
-import '@github/time-elements';
+import '@github/relative-time-element';

data/app/components/primer/time_ago_component.rb

@@ -15,7 +15,8 @@ module Primer
       @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:datetime] = time.utc.iso8601
       @system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
-      @system_arguments[:tag] = "time-ago"
+      @system_arguments[:tag] = "relative-time"
+      @system_arguments[:tense] = "past"
       @system_arguments[:format] = "micro" if micro
       @time = time
       @micro = micro

data/app/components/primer/time_ago_component.ts

@@ -1 +1 @@
-import '@github/time-elements'
+import '@github/relative-time-element'