primer_view_components 0.0.27 → 0.0.32

data/app/components/primer/details_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use DetailsComponent to reveal content after clicking a button.
   class DetailsComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    status :beta
 
     NO_OVERLAY = :none
     OVERLAY_MAPPINGS = {

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

@@ -5,8 +5,6 @@ module Primer
     # This component is part of `Primer::DropdownComponent` and should not be
     # used as a standalone component.
     class MenuComponent < Primer::Component
-      include ViewComponent::SlotableV2
-
       SCHEME_DEFAULT = :default
       SCHEME_MAPPINGS = {
         SCHEME_DEFAULT => "",

data/app/components/primer/dropdown_component.rb

@@ -4,8 +4,6 @@ module Primer
   # Dropdowns are lightweight context menus for housing navigation and actions.
   # They're great for instances where you don't need the full power (and code) of the select menu.
   class DropdownComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Required trigger for the dropdown. Only accepts a content.
     # Its classes can be customized by the `summary_classes` param in the parent component
     renders_one :button

data/app/components/primer/flash_component.html.erb

@@ -1,9 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= primer(:octicon, icon: @icon) if @icon %>
+  <%= primer_octicon @icon if @icon %>
   <%= content %>
   <% if @dismissible %>
     <button class="flash-close js-flash-close" type="button" aria-label="Close">
-      <%= primer(:octicon, icon: "x") %>
+      <%= primer_octicon "x" %>
     </button>
   <% end %>
 

data/app/components/primer/flash_component.rb

@@ -5,8 +5,6 @@ module Primer
   class FlashComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # Optional action content showed on the right side of the component.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/flex_component.rb

@@ -36,31 +36,31 @@ module Primer
     ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
     # @example Default
-    #   <%= render(Primer::FlexComponent.new(bg: :gray)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Justify center
-    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :gray)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Align end
-    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :gray)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Direction column
-    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :gray)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>

data/app/components/primer/heading_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use the Heading component to wrap a component that will create a heading element
   class HeadingComponent < Primer::Component
-    view_helper :heading
+    status :beta
 
     # @example Default
     #   <%= render(Primer::HeadingComponent.new) { "H1 Text" } %>

data/app/components/primer/label_component.rb

@@ -16,7 +16,8 @@ module Primer
       orange: "Label--orange",
       purple: "Label--purple"
     }.freeze
-    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
+    DEPRECATED_SCHEME_OPTIONS = [:orange, :purple].freeze
+    SCHEME_OPTIONS = ([*SCHEME_MAPPINGS.keys, nil] - DEPRECATED_SCHEME_OPTIONS).freeze
 
     VARIANT_MAPPINGS = {
       large: "Label--large",
@@ -37,23 +38,18 @@ module Primer
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
     #
-    # @example Deprecated schemes
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :orange)) { "Orange" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :purple)) { "Purple" } %>
-    #
     # @param title [String] `title` attribute for the component element.
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(title:, scheme: nil, variant: nil, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:bg] = :blue if scheme.nil?
       @system_arguments[:tag] ||= :span
       @system_arguments[:title] = title
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, deprecated_values: DEPRECATED_SCHEME_OPTIONS)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
       )
     end

data/app/components/primer/layout_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use Layout to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # The main content
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/link_component.rb

@@ -5,27 +5,57 @@ module Primer
   class LinkComponent < Primer::Component
     status :beta
 
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :primary => "Link--primary",
+      :secondary => "Link--secondary"
+    }.freeze
+
+    DEFAULT_TAG = :a
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
     # @example Default
-    #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com")) { "Link" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#")) { "Link" } %>
     #
     # @example Muted
-    #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com", muted: true)) { "Link" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
+    #
+    # @example Variants
+    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
+    #
+    # @example Without underline
+    #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
     #
-    # @param href [String] URL to be used for the Link
-    # @param muted [Boolean] Uses light gray for Link color, and blue on hover
+    # @example Span as link
+    #   <%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>
+    #
+    # @param tag [String]  <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
+    # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
+    # @param variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
+    # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
+    # @param underline [Boolean] Whether or not to underline the link.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(href:, muted: false, **system_arguments)
+    def initialize(href: nil, tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] = :a
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:href] = href
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "muted-link" => fetch_or_fallback_boolean(muted, false)
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        "Link" => tag == :span,
+        "Link--muted" => muted,
+        "no-underline" => !underline
       )
     end
 
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    def before_render
+      raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
+    end
   end
 end

data/app/components/primer/menu_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use menus to create vertical lists of navigational links.
   class MenuComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Optional menu heading
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -44,11 +42,11 @@ module Primer
     #       Item 1
     #     <% end %>
     #     <% c.item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon
     #     <% end %>
     #     <% c.item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon and Counter
     #       <%= render(Primer::CounterComponent.new(count: 25)) %>
     #     <% end %>

data/app/components/primer/navigation/tab_component.html.erb

@@ -0,0 +1,9 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= icon %>
+  <% if text.present? %>
+    <%= text %>
+  <% else %>
+    <%= content %>
+  <% end %>
+  <%= counter %>
+<% end %>

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

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Primer
+  module Navigation
+    # This component is part of navigation components such as `Primer::TabNavComponent`
+    # and `Primer::UnderlineNavComponent` and should not be used by itself.
+    class TabComponent < Primer::Component
+      # Panel controlled by the Tab. This will not render anything in the tab itself.
+      # It will provide a accessor for the Tab's parent to call and render the panel
+      # content in the appropriate place.
+      # Refer to `UnderlineNavComponent` and `TabNavComponent` implementations for examples.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :panel, lambda { |**system_arguments|
+        system_arguments[:tag] ||= :div
+        system_arguments[:role] ||= :tabpanel
+        system_arguments[:hidden] = true unless @selected
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Icon to be rendered in the Tab left.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :icon, lambda { |icon = nil, **system_arguments|
+        system_arguments[:classes] = class_names(
+          @icon_classes,
+          system_arguments[:classes]
+        )
+        Primer::OcticonComponent.new(icon, **system_arguments)
+      }
+
+      # The Tab's text.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::TextComponent) %>.
+      renders_one :text, Primer::TextComponent
+
+      # Counter to be rendered in the Tab right.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::CounterComponent) %>.
+      renders_one :counter, Primer::CounterComponent
+
+      attr_reader :selected
+
+      # @example Default
+      #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
+      #     <% c.text { "Selected" } %>
+      #   <% end %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.text { "Not selected" } %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.icon(:star) %>
+      #     <% c.text { "Tab" } %>
+      #   <% end %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.icon(:star) %>
+      #     <% c.text { "Tab" } %>
+      #     <% c.counter(count: 10) %>
+      #   <% end %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.text { "Tab" } %>
+      #     <% c.counter(count: 10) %>
+      #   <% end %>
+      #
+      # @example With custom HTML
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <div>
+      #       This is my <strong>custom HTML</strong>
+      #     </div>
+      #   <% end %>
+      #
+      # @param selected [Boolean] Whether the Tab is selected or not.
+      # @param with_panel [Boolean] Whether the Tab has an associated panel.
+      # @param icon_classes [Boolean] Classes that must always be applied to icons.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments)
+        @selected = selected
+        @icon_classes = icon_classes
+        @system_arguments = system_arguments
+        @system_arguments[:role] = :tab
+
+        if with_panel
+          @system_arguments[:tag] ||= :button
+          @system_arguments[:type] = :button
+        else
+          @system_arguments[:tag] ||= :a
+        end
+
+        return unless @selected
+
+        if @system_arguments[:tag] == :a
+          @system_arguments[:"aria-current"] = :page
+        else
+          @system_arguments[:"aria-selected"] = true
+        end
+      end
+    end
+  end
+end

data/app/components/primer/octicon_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
-    view_helper :octicon
     status :beta
 
     include ClassNameHelper
@@ -19,19 +18,20 @@ module Primer
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     # @example Default
+    #   <%= render(Primer::OcticonComponent.new("check")) %>
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
     # @example Medium
-    #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
+    #   <%= render(Primer::OcticonComponent.new("people", size: :medium)) %>
     #
     # @example Large
-    #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
+    #   <%= render(Primer::OcticonComponent.new("x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
     # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
-      @icon = icon
+    def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, **system_arguments)
+      @icon = icon_name || icon
       @system_arguments = system_arguments
 
       @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]

data/app/components/primer/popover_component.html.erb

@@ -1,10 +1,6 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= render body.component do %>
-    <% if heading %>
-      <%= render heading.component do %>
-        <%= heading.content %>
-      <% end %>
-    <% end %>
-    <%= body.content %>
+  <%= render(body_component) do %>
+    <%= heading %>
+    <%= body %>
   <% end %>
 <% end %>

data/app/components/primer/popover_component.rb

@@ -5,38 +5,101 @@ module Primer
   #
   # 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
-    include ViewComponent::Slotable
+    status :beta
 
-    with_slot :heading, class_name: "Heading"
-    with_slot :body, class_name: "Body"
+    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
+
+    # The heading
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :heading, lambda { |**system_arguments|
+      system_arguments[:mb] ||= 2
+      system_arguments[:tag] ||= :h4
+
+      Primer::HeadingComponent.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, &block|
+      system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        "Popover-message Box",
+        CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+        "Popover-message--large" => large
+      )
+      system_arguments[:p] ||= 4
+      system_arguments[:mt] ||= 2
+      system_arguments[:mx] ||= :auto
+      system_arguments[:text_align] ||= :left
+      system_arguments[:box_shadow] ||= :large
+
+      # This is a hack to allow the parent to set the slot's content
+      @body_arguments = system_arguments
+      view_context.capture { block&.call }
+    }
 
     # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.slot(:body) do %>
+    #     <% component.body do %>
     #       This is the Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.slot(:body, large: true) do %>
+    #     <% component.body(large: true) do %>
     #       This is the large Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.slot(:body, caret: :left) do %>
-    #       This is the large Popover body.
+    #     <% component.body(caret: :left) do %>
+    #       This is the Popover body.
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With HTML body
+    #   <%= render Primer::PopoverComponent.new do |component| %>
+    #     <% component.heading do %>
+    #       Activity feed
+    #     <% end %>
+    #     <% component.body(caret: :left) do %>
+    #       <p> This is the Popover body.</p>
+    #       <div>
+    #         This is using HTML.
+    #         <ul>
+    #           <li>Thing #1</li>
+    #           <li>Thing #2</li>
+    #         </ul>
+    #       </div>
     #     <% end %>
     #   <% end %>
     #
@@ -57,59 +120,8 @@ module Primer
       body.present?
     end
 
-    # :nodoc:
-    class Heading < Primer::Slot
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:mb] ||= 2
-        @system_arguments[:tag] ||= :h4
-      end
-
-      def component
-        Primer::HeadingComponent.new(**@system_arguments)
-      end
-    end
-
-    # :nodoc:
-    class Body < Slot
-      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
-
-      # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::Body::CARET_MAPPINGS.keys) %>
-      # @param large [Boolean] Whether to use the large version of the component.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(caret: CARET_DEFAULT, large: false, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:classes] = class_names(
-          system_arguments[:classes],
-          "Popover-message Box",
-          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
-          "Popover-message--large" => large
-        )
-        @system_arguments[:p] ||= 4
-        @system_arguments[:mt] ||= 2
-        @system_arguments[:mx] ||= :auto
-        @system_arguments[:text_align] ||= :left
-        @system_arguments[:box_shadow] ||= :large
-      end
-
-      def component
-        Primer::BoxComponent.new(**@system_arguments)
-      end
+    def body_component
+      Primer::BoxComponent.new(**@body_arguments)
     end
   end
 end