primer_view_components 0.0.119 → 0.0.121

data/app/components/primer/alpha/modal_dialog.js

@@ -86,6 +86,7 @@ export class ModalDialogElement extends HTMLElement {
                 return;
             this.setAttribute('open', '');
             (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
             document.body.style.overflow = 'hidden';
             if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
                 __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
@@ -98,6 +99,7 @@ export class ModalDialogElement extends HTMLElement {
                 return;
             this.removeAttribute('open');
             (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            document.body.style.paddingRight = '0';
             document.body.style.overflow = 'initial';
             __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
             // if #openButton is a child of a menu, we need to focus a suitable child of the menu

data/app/components/primer/alpha/modal_dialog.ts

@@ -81,6 +81,7 @@ export class ModalDialogElement extends HTMLElement {
       if (this.open) return
       this.setAttribute('open', '')
       this.#overlayBackdrop?.classList.remove('Overlay--hidden')
+      document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
       document.body.style.overflow = 'hidden'
       if (this.#focusAbortController.signal.aborted) {
         this.#focusAbortController = new AbortController()
@@ -91,6 +92,7 @@ export class ModalDialogElement extends HTMLElement {
       if (!this.open) return
       this.removeAttribute('open')
       this.#overlayBackdrop?.classList.add('Overlay--hidden')
+      document.body.style.paddingRight = '0'
       document.body.style.overflow = 'initial'
       this.#focusAbortController.abort()
       // if #openButton is a child of a menu, we need to focus a suitable child of the menu

data/app/components/primer/alpha/segmented_control/item.rb

@@ -7,6 +7,7 @@ module Primer
       # It wraps the Button and IconButton components to provide the correct styles
       class Item < Primer::BaseComponent
         status :alpha
+        audited_at "2023-02-01"
 
         # @param label [String] The label to use
         # @param selected [Boolean] Whether the item is selected

data/app/components/primer/alpha/segmented_control.rb

@@ -3,8 +3,12 @@
 module Primer
   module Alpha
     # Use a segmented control to let users select an option from a short list and immediately apply the selection
+    # @accessibility
+    #   A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.
+    #   See the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.
     class SegmentedControl < Primer::Component
       status :alpha
+      audited_at "2023-02-01"
 
       FULL_WIDTH_DEFAULT = false
       HIDE_LABELS_DEFAULT = false
@@ -24,6 +28,30 @@ module Primer
         )
       }
 
+      # @example With a label above and caption below
+      #   <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
+      #     <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
+      #     <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
+      #       <% component.with_item(label: "Preview", selected: true) %>
+      #       <% component.with_item(label: "Raw") %>
+      #       <% component.with_item(label: "Blame") %>
+      #     <% end %>
+      #     <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
+      #   <% end %>
+      #
+      # @example With a label and caption on the left
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(id: "scLabel-vert") { "File view" } %>
+      #     <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
+      #         <% component.with_item(label: "Preview", selected: true) %>
+      #         <% component.with_item(label: "Raw") %>
+      #         <% component.with_item(label: "Blame") %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
       # @example Basic usage
       #
       #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
@@ -79,6 +107,8 @@ module Primer
           "SegmentedControl--iconOnly": hide_labels,
           "SegmentedControl--fullWidth": full_width
         )
+
+        validate_aria_label
       end
 
       def render?

data/app/components/primer/alpha/text_field.rb

@@ -98,6 +98,7 @@ module Primer
       # @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon component](https://primer.style/view-components/components/octicon).
       # @param validation_message [String] A validation message to display beneath the input. Implicitly sets `invalid` to `true`.
       # @param label_arguments [Hash] System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag.
+      # @param auto_check_src [String] When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       # @param block [Proc] Unused.
     end

data/app/components/primer/base_component.rb

@@ -134,12 +134,12 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
+    # | `font_family` | Symbol | Font family. <%= one_of([:mono]) %> |
     # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
-    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
+    # | `font_style` | Symbol | Font style. <%= one_of([:italic]) %> |
     # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
-    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
+    # | `text_transform` | Symbol | Text transformation. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
     # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
     #

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

@@ -28,7 +28,7 @@ module Primer
           "close-button",
           system_arguments[:classes]
         )
-        @system_arguments[:"aria-label"] ||= "Close"
+        @system_arguments[:"aria-label"] = aria("label", system_arguments) || "Close"
       end
 
       def call

data/app/components/primer/component.rb

@@ -52,7 +52,8 @@ module Primer
 
     def validate_aria_label
       aria_label = aria("label", @system_arguments)
-      raise ArgumentError, "`aria-label` is required." if aria_label.nil? && !Rails.env.production?
+      aria_labelledby = aria("labelledby", @system_arguments)
+      raise ArgumentError, "`aria-label` or `aria-labelledby` is required." if aria_label.nil? && aria_labelledby.nil? && !Rails.env.production?
     end
 
     def silence_deprecations?

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

@@ -8,9 +8,8 @@ import './alpha/tool_tip';
 import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
-import './local_time';
+import './beta/relative_time';
 import './alpha/tab_container';
-import './time_ago_component';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';

data/app/components/primer/primer.js

@@ -8,9 +8,8 @@ import './alpha/tool_tip';
 import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
-import './local_time';
+import './beta/relative_time';
 import './alpha/tab_container';
-import './time_ago_component';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';

data/app/components/primer/primer.ts

@@ -8,9 +8,8 @@ import './alpha/tool_tip'
 import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
 import './beta/clipboard_copy'
-import './local_time'
+import './beta/relative_time'
 import './alpha/tab_container'
-import './time_ago_component'
 import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'

data/app/forms/example_toggle_switch_form.rb

@@ -3,6 +3,6 @@
 # :nodoc:
 class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
   def initialize(**system_arguments)
-    super(name: :example_field, label: "Example", caption: "This is an example toggle switch.", **system_arguments)
+    super(name: :example_field, label: "Example", **system_arguments)
   end
 end

data/app/lib/primer/view_helper.rb

@@ -9,7 +9,6 @@ module Primer
     HELPERS = {
       octicon: "Primer::Beta::Octicon",
       heading: "Primer::Beta::Heading",
-      time_ago: "Primer::TimeAgoComponent",
       image: "Primer::Alpha::Image"
     }.freeze
 

data/lib/primer/deprecations.yml

@@ -17,106 +17,15 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::Blankslate"
 
-  - component: "Primer::BoxComponent"
-    autocorrect: true
-    replacement: "Primer::Box"
-
   - component: "Primer::ButtonComponent"
     autocorrect: false
     replacement: "Primer::Beta::Button"
     guide: "https://primer.style/view-components/guides/primer_button_component"
 
-  - component: "Primer::ClipboardCopy"
-    autocorrect: true
-    replacement: "Primer::Beta::ClipboardCopy"
-
-  - component: "Primer::DropdownMenuComponent"
-    autocorrect: false
-    replacement: "Primer::Beta::Dropdown"
-    guide: "https://primer.style/view-components/guides/primer_dropdown_menu_component"
-
-  - component: "Primer::Dropdown"
-    autocorrect: true
-    replacement: "Primer::Alpha::Dropdown"
-
-  - component: "Primer::Dropdown::Menu"
-    autocorrect: true
-    replacement: "Primer::Alpha::Dropdown::Menu"
-
-  - component: "Primer::Dropdown::Menu::Item"
-    autocorrect: true
-    replacement: "Primer::Alpha::Dropdown::Menu::Item"
-
-  - component: "Primer::HellipButton"
-    autocorrect: true
-    replacement: "Primer::Alpha::HellipButton"
-
   - component: "Primer::IconButton"
     autocorrect: true
     replacement: "Primer::Beta::IconButton"
 
-  - component: "Primer::LabelComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Label"
-
-  - component: "Primer::LocalTime"
-    autocorrect: false
-    replacement: "Primer::Beta::RelativeTime"
-    guide: "https://primer.style/view-components/guides/primer_local_time"
-
-  - component: "Primer::LinkComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Link"
-
-  - component: "Primer::Markdown"
-    autocorrect: true
-    replacement: "Primer::Beta::Markdown"
-
-  - component: "Primer::MenuComponent"
-    autocorrect: true
-    replacement: "Primer::Alpha::Menu"
-
-  - component: "Primer::OcticonComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Octicon"
-
-  - component: "Primer::OcticonSymbolsComponent"
-    autocorrect: true
-    replacement: "Primer::Alpha::OcticonSymbols"
-
-  - component: "Primer::PopoverComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Popover"
-
-  - component: "Primer::SpinnerComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Spinner"
-
-  - component: "Primer::StateComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::State"
-
-  - component: "Primer::SubheadComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Subhead"
-
-  - component: "Primer::TabContainerComponent"
-    autocorrect: true
-    replacement: "Primer::Alpha::TabContainer"
-
-  - component: "Primer::TimeAgoComponent"
-    autocorrect: false
-    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::TimelineItemComponent::BadgeComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::TimelineItem::Badge"
-
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"

data/lib/primer/forms/acts_as_component.rb

@@ -8,7 +8,7 @@ module Primer
     module ActsAsComponent
       # :nodoc:
       module InstanceMethods
-        delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
+        delegate :render, :content_tag, :output_buffer, to: :@view_context
 
         def render_in(view_context, &block)
           @view_context = view_context
@@ -16,6 +16,17 @@ module Primer
           perform_render(&block)
         end
 
+        # This is necessary to restore the functionality changed by https://github.com/rails/rails/pull/47194.
+        # I would love to remove this at some point, perhaps if we ever decide to replace
+        # ActsAsComponent with view component.
+        def capture(*args, &block)
+          old_buffer = @view_context.output_buffer
+          @view_context.output_buffer = ActionView::OutputBuffer.new
+          @view_context.capture(*args, &block)
+        ensure
+          @view_context.output_buffer = old_buffer
+        end
+
         # :nocov:
         def perform_render(&_block)
           raise NotImplementedError, "subclasses must implement ##{__method__}."

data/lib/primer/forms/toggle_switch_form.rb

@@ -32,8 +32,10 @@ module Primer
     #
     class ToggleSwitchForm < Primer::Forms::Base
       # Define the form on subclasses so render(Subclass.new) works as expected.
-      def self.inherited(base)
-        base.form do |toggle_switch_form|
+      # (this is called directly on this class, but also on classes
+      # that inherit from this class)
+      def self.define_form_on(klass)
+        klass.form do |toggle_switch_form|
           input = Dsl::ToggleSwitchInput.new(
             builder: toggle_switch_form.builder, form: self, **@system_arguments
           )
@@ -42,8 +44,13 @@ module Primer
         end
       end
 
+      def self.inherited(base)
+        super
+        define_form_on(base)
+      end
+
       # Define the form on self so render(ToggleSwitchForm.new) works as expected.
-      inherited(self)
+      define_form_on(self)
 
       # Override to avoid accepting a builder argument. We create our own builder
       # on render. See the implementation of render_in below.

data/lib/primer/view_components/linters/button_component_migration_counter.rb

@@ -18,9 +18,9 @@ module ERBLint
       # CloseButton component has preference when this class is seen in conjunction with `btn`.
       DISALLOWED_CLASSES = %w[close-button].freeze
       CLASSES = %w[btn btn-link].freeze
-      MESSAGE = "We are migrating buttons to use [Primer::ButtonComponent](https://primer.style/view-components/components/button), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating buttons to use [Primer::Beta::Button](https://primer.style/view-components/components/beta/button), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::Button
-      COMPONENT = "Primer::ButtonComponent"
+      COMPONENT = "Primer::Beta::Button"
     end
   end
 end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 119
+      PATCH = 121
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/view_components.rb

@@ -54,5 +54,10 @@ module Primer
     def self.read(stats)
       File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
     end
+
+    # primer/view_components root directory.
+    def self.root
+      Pathname(File.expand_path(File.join("..", ".."), __dir__))
+    end
   end
 end

data/lib/primer/yard/backend.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module YARD
+    # Shared functionality for generating documentation from YARD comments.
+    class Backend
+      include DocsHelper
+
+      private
+
+      def pretty_default_value(tag, component)
+        params = tag.object.parameters.find { |param| [tag.name.to_s, "#{tag.name}:"].include?(param[0]) }
+        default = tag.defaults&.first || params&.second
+
+        return "N/A" unless default
+
+        constant_name = "#{component.name}::#{default}"
+        constant_value = default.safe_constantize || constant_name.safe_constantize
+
+        return pretty_value(default) if constant_value.nil?
+
+        pretty_value(constant_value)
+      end
+
+      def view_context
+        @view_context ||= begin
+          # Rails controller for rendering arbitrary ERB
+          vc = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
+          vc.singleton_class.include(DocsHelper)
+          vc.singleton_class.include(Primer::ViewHelper)
+          vc
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/primer/yard/component_manifest.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module YARD
+    # The set of documented components (and associated metadata).
+    class ComponentManifest
+      COMPONENTS = {
+        Primer::Beta::RelativeTime => {},
+        Primer::Beta::IconButton => {},
+        Primer::Beta::Button => {},
+        Primer::Alpha::SegmentedControl => {},
+        Primer::Alpha::Layout => {},
+        Primer::Alpha::HellipButton => {},
+        Primer::Alpha::Image => {},
+        Primer::Alpha::OcticonSymbols => {},
+        Primer::Alpha::ImageCrop => { js: true },
+        Primer::IconButton => { js: true },
+        Primer::Beta::AutoComplete => { js: true },
+        Primer::Beta::AutoComplete::Item => {},
+        Primer::Beta::Avatar => {},
+        Primer::Beta::AvatarStack => {},
+        Primer::Beta::BaseButton => {},
+        Primer::Alpha::Banner => { js: true },
+        Primer::Beta::Blankslate => {},
+        Primer::Beta::BorderBox => {},
+        Primer::Beta::BorderBox::Header => {},
+        Primer::Box => {},
+        Primer::Beta::Breadcrumbs => {},
+        Primer::ButtonComponent => { js: true },
+        Primer::Beta::ButtonGroup => {},
+        Primer::Alpha::ButtonMarketing => {},
+        Primer::Beta::ClipboardCopy => { js: true },
+        Primer::Beta::CloseButton => {},
+        Primer::Beta::Counter => {},
+        Primer::Beta::Details => {},
+        Primer::Alpha::Dialog => {},
+        Primer::Alpha::Dropdown => { js: true },
+        Primer::Beta::Flash => {},
+        Primer::Beta::Heading => {},
+        Primer::Alpha::HiddenTextExpander => {},
+        Primer::Beta::Label => {},
+        Primer::LayoutComponent => {},
+        Primer::Beta::Link => { js: true },
+        Primer::Beta::Markdown => {},
+        Primer::Alpha::Menu => {},
+        Primer::Navigation::TabComponent => {},
+        Primer::Beta::Octicon => {},
+        Primer::Beta::Popover => {},
+        Primer::Beta::ProgressBar => {},
+        Primer::Beta::State => {},
+        Primer::Beta::Spinner => {},
+        Primer::Beta::Subhead => {},
+        Primer::Alpha::TabContainer => { js: true },
+        Primer::Beta::Text => {},
+        Primer::Beta::TimelineItem => {},
+        Primer::Tooltip => {},
+        Primer::Truncate => {},
+        Primer::Beta::Truncate => {},
+        Primer::Alpha::UnderlineNav => {},
+        Primer::Alpha::UnderlinePanels => { js: true },
+        Primer::Alpha::TabNav => {},
+        Primer::Alpha::TabPanels => { js: true },
+        Primer::Alpha::Tooltip => { js: true },
+        Primer::Alpha::ToggleSwitch => { js: true },
+
+        # Examples can be seen in the NavList docs
+        Primer::Alpha::NavList => { js: true },
+        Primer::Alpha::NavList::Item => { js: true, examples: false },
+        Primer::Alpha::NavList::Section => { js: true, examples: false },
+
+        # ActionList is a base component that should not be used by itself, and thus
+        # does not have examples of its own
+        Primer::Alpha::ActionList => { js: true, examples: false },
+        Primer::Alpha::ActionList::Divider => { examples: false },
+        Primer::Alpha::ActionList::Heading => { examples: false },
+        Primer::Alpha::ActionList::Item => { examples: false },
+
+        # Forms
+        Primer::Alpha::TextField => { form_component: true }
+      }.freeze
+
+      class << self
+        def each(&block)
+          COMPONENTS.keys.each(&block)
+        end
+
+        def components_with_docs
+          @components_with_docs ||= COMPONENTS.keys
+        end
+
+        def all_components
+          @all_components ||= Primer::Component.descendants - [Primer::BaseComponent]
+        end
+
+        def components_without_docs
+          @components_without_docs ||= all_components - components_with_docs
+        end
+
+        def components_with_examples
+          @components_with_examples ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:examples, true)
+          end
+        end
+
+        def components_requiring_js
+          @components_requiring_js ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:js, false)
+          end
+        end
+
+        def form_components
+          @form_components ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:form_component, false)
+          end
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/primer/yard/docs_helper.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+module Primer
+  module YARD
+    # Helper methods to use for yard documentation
+    module DocsHelper
+      def one_of(enumerable, lower: false, sort: true)
+        # Sort the array if requested
+        if sort
+          enumerable = enumerable.sort do |a, b|
+            a.instance_of?(b.class) ? a <=> b : a.class.to_s <=> b.class.to_s
+          end
+        end
+
+        values =
+          case enumerable
+          when Hash
+            enumerable.map do |key, value|
+              "#{pretty_value(key)} (#{pretty_value(value)})"
+            end
+          else
+            enumerable.map do |key|
+              pretty_value(key)
+            end
+          end
+
+        prefix = "One of"
+        prefix = prefix.downcase if lower
+
+        "#{prefix} #{values.to_sentence(two_words_connector: ' or ', last_word_connector: ', or ')}."
+      end
+
+      def link_to_accessibility
+        "[Accessibility](#accessibility)"
+      end
+
+      def link_to_system_arguments_docs
+        "[System arguments](/system-arguments)"
+      end
+
+      def link_to_typography_docs
+        "[Typography](/system-arguments#typography)"
+      end
+
+      def link_to_component(component)
+        status_module, short_name, class_name = status_module_and_short_name(component)
+        status_path = status_module.nil? ? "" : "#{status_module}/"
+
+        "[#{class_name}](/components/#{status_path}#{short_name.downcase})"
+      end
+
+      def link_to_octicons
+        "[Octicon](https://primer.style/octicons/)"
+      end
+
+      def link_to_heading_practices
+        "[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
+      end
+
+      def status_module_and_short_name(component)
+        name_with_status = component.name.gsub(/Primer::|Component/, "")
+
+        m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(?<_colons>::)?(?<name>.*)/)
+        [m[:status]&.downcase, m[:name].gsub("::", ""), m[:name]]
+      end
+
+      def pretty_value(val)
+        case val
+        when nil
+          "`nil`"
+        when Symbol
+          "`:#{val}`"
+        else
+          "`#{val}`"
+        end
+      end
+    end
+  end
+end