openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/navigation/tab.rb

@@ -0,0 +1,168 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    module Navigation
+      # This component is part of navigation components such as `Primer::Alpha::TabNav`
+      # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
+      #
+      # @accessibility
+      #   `Tab` renders the selected anchor tab with `aria-current="page"` by default.
+      #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
+      class Tab < Primer::Component
+        status :alpha
+
+        DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
+        ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
+        # 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 `UnderlineNav` and `TabNav` implementations for examples.
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :panel, lambda { |**system_arguments|
+          return unless @with_panel
+
+          deny_tag_argument(**system_arguments)
+          system_arguments[:id] = @panel_id
+          system_arguments[:tag] = :div
+          system_arguments[:role] ||= :tabpanel
+          system_arguments[:tabindex] = 0
+          system_arguments[:hidden] = true unless @selected
+
+          label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
+          unless label_present
+            if @id.present?
+              system_arguments[:"aria-labelledby"] = @id
+            elsif !Rails.env.production?
+              raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
+            end
+          end
+
+          Primer::BaseComponent.new(**system_arguments)
+        }
+
+        # Icon to be rendered in the Tab left.
+        #
+        # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+        renders_one :icon, lambda { |icon = nil, **system_arguments|
+          system_arguments[:classes] = class_names(
+            @icon_classes,
+            system_arguments[:classes]
+          )
+          Primer::Beta::Octicon.new(icon, **system_arguments)
+        }
+
+        # The Tab's text.
+        #
+        # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
+        renders_one :text, Primer::Beta::Text
+
+        # Counter to be rendered in the Tab right.
+        #
+        # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
+        renders_one :counter, Primer::Beta::Counter
+
+        attr_reader :selected
+
+        # @example Default
+        #   <%= render(Primer::Alpha::Navigation::Tab.new(selected: true)) do |component| %>
+        #     <% component.with_text { "Selected" } %>
+        #   <% end %>
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_text { "Not selected" } %>
+        #   <% end %>
+        #
+        # @example With icons and counters
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_icon(:star) %>
+        #     <% component.with_text { "Tab" } %>
+        #   <% end %>
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_icon(:star) %>
+        #     <% component.with_text { "Tab" } %>
+        #     <% component.with_counter(count: 10) %>
+        #   <% end %>
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_text { "Tab" } %>
+        #     <% component.with_counter(count: 10) %>
+        #   <% end %>
+        #
+        # @example Inside a list
+        #   <%= render(Primer::Alpha::Navigation::Tab.new(list: true)) do |component| %>
+        #     <% component.with_text { "Tab" } %>
+        #   <% end %>
+        #
+        # @example With custom HTML
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do %>
+        #     <div>
+        #       This is my <strong>custom HTML</strong>
+        #     </div>
+        #   <% end %>
+        #
+        # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
+        # @param selected [Boolean] Whether the Tab is selected or not.
+        # @param with_panel [Boolean] Whether the Tab has an associated panel.
+        # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
+        # @param icon_classes [Boolean] Classes that must always be applied to icons.
+        # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
+          @selected = selected
+          @icon_classes = icon_classes
+          @list = list
+          @with_panel = with_panel
+
+          @system_arguments = system_arguments
+          @id = @system_arguments[:id]
+          @wrapper_arguments = wrapper_arguments
+
+          if with_panel || @system_arguments[:tag] == :button
+            @system_arguments[:tag] = :button
+            @system_arguments[:type] = :button
+            @system_arguments[:role] = :tab
+            panel_id(panel_id)
+            # https://www.w3.org/TR/wai-aria-practices/#presentation_role
+            @wrapper_arguments[:role] = :presentation
+          else
+            @system_arguments[:tag] = :a
+          end
+
+          @wrapper_arguments[:tag] = :li
+          @wrapper_arguments[:display] ||= :inline_flex
+
+          return unless @selected
+
+          if @system_arguments[:tag] == :a
+            aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+            @system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
+          else
+            @system_arguments[:"aria-selected"] = true
+          end
+        end
+
+        def wrapper
+          unless @list
+            yield
+            return # returning `yield` caused a double render
+          end
+
+          render(Primer::BaseComponent.new(**@wrapper_arguments)) do
+            yield if block_given?
+          end
+        end
+
+        private
+
+        def panel_id(panel_id)
+          if panel_id.blank?
+            raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
+          else
+            @panel_id = panel_id
+            @system_arguments[:"aria-controls"] = @panel_id
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/octicon_symbols.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" hidden> <%# erblint:disable GitHub::Accessibility::SvgHasAccessibleText %>
+  <%= symbol_tags %>
+</svg>

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require "octicons"
+
+module Primer
+  module Alpha
+    # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
+    class OcticonSymbols < Primer::Component
+      # @example Symbol dictionary
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, size: :medium)) %>
+      #   <%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
+      #
+      # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
+      def initialize(icons: [])
+        @icons = {}
+        icons.each do |icon|
+          symbol = icon[:symbol]
+          size = Primer::Beta::Octicon::SIZE_MAPPINGS[
+            fetch_or_fallback(Primer::Beta::Octicon::SIZE_OPTIONS, icon[:size] || Primer::Beta::Octicon::SIZE_DEFAULT, Primer::Beta::Octicon::SIZE_DEFAULT)
+          ]
+
+          cache_key = Primer::Octicon::Cache.get_key(symbol: symbol, size: size)
+
+          if (cache_icon = Primer::Octicon::Cache.read(cache_key))
+            icon_instance = cache_icon
+          else
+            icon_instance = Octicons::Octicon.new(symbol, height: size)
+
+            Primer::Octicon::Cache.set(cache_key, icon_instance)
+          end
+
+          # Don't put the same icon twice
+          @icons[[symbol, icon_instance.height]] = icon_instance if @icons[[symbol, icon_instance.height]].nil?
+        end
+      end
+
+      def render?
+        @icons.any?
+      end
+
+      def symbol_tags
+        safe_join(
+          @icons.values.map do |icon|
+            content_tag(
+              :symbol,
+              icon.path.html_safe, # rubocop:disable Rails/OutputSafety
+              id: "octicon_#{icon.symbol}_#{icon.height}",
+              viewBox: icon.options[:viewBox],
+              width: icon.width,
+              height: icon.height
+            )
+          end
+        )
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/body.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Body` is a compositional component, used to render the
+      # Body of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Body < Primer::Component
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(padding: DEFAULT_PADDING, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-body",
+            PADDING_MAPPINGS[fetch_or_fallback(PADDING_OPTIONS, padding, DEFAULT_PADDING)],
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/footer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      DEFAULT_ALIGN_CONTENT = :end
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Overlay-footer--alignStart",
+        :center => "Overlay-footer--alignCenter",
+        DEFAULT_ALIGN_CONTENT => "Overlay-footer--alignEnd"
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # A `Overlay::Footer` is a compositional component, used to render the
+      # Footer of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Footer < Primer::Component
+        # @param show_divider [Boolean] Show a divider between the footer and body.
+        # @param align_content [Symbol] The alginment of contents. <%= one_of(Primer::Alpha::Overlay::ALIGN_CONTENT_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          show_divider: false,
+          align_content: DEFAULT_ALIGN_CONTENT,
+          **system_arguments
+        )
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-footer",
+            ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)],
+            { "Overlay-footer--divided": show_divider },
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/header.html.erb

@@ -0,0 +1,17 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <div class="Overlay-headerContentWrap">
+    <div class="Overlay-titleWrap">
+      <h1 id="<%= @id %>" class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
+      <% if content.present? %>
+        <%= content %>
+      <% elsif @subtitle.present? %>
+        <h2 class="Overlay-description"><%= @subtitle %></h2>
+      <% end %>
+    </div>
+    <% if @overlay_id %>
+      <div class="Overlay-actionWrap">
+        <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "popovertarget": @overlay_id, "popovertargetaction": "hide") %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/primer/alpha/overlay/header.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Header` is a compositional component, used to render the
+      # Header of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Header < Primer::Component
+        DEFAULT_SIZE = :medium
+        SIZE_MAPPINGS = {
+          DEFAULT_SIZE => nil,
+          :large => "Overlay-header--large"
+        }.freeze
+        SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+        # @param title [String] Describes the content of the Overlay.
+        # @param subtitle [String] Provides additional context for the Overlay, also setting the `aria-describedby` attribute.
+        # @param overlay_id [String] Provides the id of the overlay element so the close button can close it
+        # @param size [Symbol] The size of the Header. <%= one_of(Primer::Alpha::Overlay::Header::SIZE_OPTIONS) %>
+        # @param divider [Boolean] Show a divider between the header and body.
+        # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          id:,
+          title:,
+          overlay_id: nil,
+          subtitle: nil,
+          size: DEFAULT_SIZE,
+          divider: false,
+          visually_hide_title: false,
+          **system_arguments
+        )
+          @overlay_id = overlay_id
+          @id = id
+          @title = title
+          @subtitle = subtitle
+          @visually_hide_title = visually_hide_title
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :header
+          @system_arguments[:classes] = class_names(
+            "Overlay-header",
+            { "Overlay-header--divided": divider },
+            SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+            system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay.css

@@ -0,0 +1 @@
+anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}

data/app/components/primer/alpha/overlay.css.json

@@ -0,0 +1,8 @@
+{
+  "name": "alpha/overlay",
+  "selectors": [
+    "anchored-position[popover]",
+    ".Overlay",
+    "anchored-position[popover]:not(.\\:popover-open)"
+  ]
+}

data/app/components/primer/alpha/overlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BACE,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAIF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAGA,kCACE,gDACE,cACF,CACF,CAGA,0BACE,gDACI,cACJ,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n\n/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */\n@supports selector(:open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n      display: revert;\n  }\n}\n"]}

data/app/components/primer/alpha/overlay.html.erb

@@ -0,0 +1,13 @@
+<%= show_button %>
+
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= render Primer::BaseComponent.new(tag: :div, classes: @wrapper_classes) do %>
+    <%= header %>
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= body %>
+      <%= footer %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/overlay.pcss

@@ -0,0 +1,30 @@
+anchored-position[popover] {
+  border-width: 0;
+  padding: 0;
+  position: absolute;
+  min-width: 192px;
+  inset: auto;
+  overflow: visible;
+}
+
+.Overlay {
+  display: flex;
+}
+
+anchored-position[popover]:not(.\:popover-open) {
+  display: none;
+}
+
+/* This reverts the declaration above for native popover, where `:popover-open` is supported */
+@supports selector(:popover-open) {
+  anchored-position[popover]:not(.\:popover-open) {
+    display: revert;
+  }
+}
+
+/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */
+@supports selector(:open) {
+  anchored-position[popover]:not(.\:popover-open) {
+      display: revert;
+  }
+}

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

@@ -0,0 +1,214 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Overlay components codify design patterns related to floating surfaces such
+    # as dialogs and menus. They are private components intended to be used by
+    # specialized components, and mostly contain presentational logic and
+    # behavior.
+    #
+    # @accessibility
+    #   - **Overlay Accessible Name**: An overlay should have an accessible name,
+    #   so screen readers are aware of the purpose of the Overlay when it opens.
+    #   Give an accessible name setting `:title`. The accessible name will be
+    #   used as the main heading inside the Overlay.
+    #   - **Overlay unique id**: A Overlay should be unique. Give a unique id
+    #   setting `:id`. If no `:id` is given, a default randomize hex id is
+    #   generated.
+    #
+    #   The combination of both `:title` and `:id` establishes an
+    #   `aria-labelledby` relationship between the title and the unique id
+    #   of the Overlay.
+    class Overlay < Primer::Component
+      DEFAULT_PADDING = :normal
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => nil,
+        :condensed => "Overlay-body--paddingCondensed",
+        :none => "Overlay-body--paddingNone"
+      }.freeze
+
+      PADDING_OPTIONS = PADDING_MAPPINGS.keys
+
+      DEFAULT_SIZE = :auto
+      SIZE_MAPPINGS = {
+        DEFAULT_SIZE => "Overlay--size-auto",
+        :small => "Overlay--size-small",
+        :medium => "Overlay--size-medium",
+        :medium_portrait => "Overlay--size-medium-portrait",
+        :large => "Overlay--size-large",
+        :xlarge => "Overlay--size-xlarge"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_ANCHOR_ALIGN = :start
+      ANCHOR_ALIGN_OPTIONS = [DEFAULT_ANCHOR_ALIGN, :center, :end].freeze
+
+      DEFAULT_ANCHOR_OFFSET = :normal
+      ANCHOR_OFFSET_OPTIONS = [DEFAULT_ANCHOR_OFFSET, :spacious].freeze
+
+      DEFAULT_ANCHOR_SIDE = :outside_bottom
+      ANCHOR_SIDE_MAPPINGS = {
+        :inside_top => "inside-top",
+        :inside_bottom => "inside-bottom",
+        :inside_left => "inside-left",
+        :inside_right => "inside-right",
+        :inside_center => "inside-center",
+        :outside_top => "outside-top",
+        DEFAULT_ANCHOR_SIDE => "outside-bottom",
+        :outside_left => "outside-left",
+        :outside_right => "outside-right"
+      }.freeze
+      ANCHOR_SIDE_OPTIONS = ANCHOR_SIDE_MAPPINGS.keys
+
+      DEFAULT_POPOVER = :auto
+      POPOVER_OPTIONS = [DEFAULT_POPOVER, :manual].freeze
+
+      ROLE_OPTIONS = [:dialog, :menu, nil].freeze
+
+      # Optional button to open the Overlay.
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use instead of text. If provided, a <%= link_to_component(Primer::Beta::IconButton) %> will be rendered. Otherwise a <%= link_to_component(Primer::Beta::Button) %> will be rendered.
+      # @param controls [String] The ID of the menu this button controls. Used internally.
+      # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %> depending on the presence of the `icon:` argument.
+      renders_one :show_button, lambda { |icon: nil, controls: nil, **button_arguments|
+        button_arguments[:id] ||= show_button_id
+        @system_arguments[:anchor] = button_arguments[:id]
+        button_arguments["popovertarget"] = @id
+        button_arguments[:aria] = merge_aria(
+          button_arguments,
+          { aria: { controls: controls, haspopup: "true" } }
+        )
+
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **button_arguments)
+        else
+          Primer::Beta::Button.new(**button_arguments)
+        end
+      }
+
+      # Header content.
+      #
+      # @param divider [Boolean] Show a divider between the header and body.
+      # @param size [Symbol] One of <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>.
+      # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :header, lambda { |divider: false, size: :medium, visually_hide_title: @visually_hide_title, **system_arguments|
+        Primer::Alpha::Overlay::Header.new(
+          overlay_id: @id,
+          id: title_id,
+          title: @title,
+          subtitle: @subtitle,
+          size: size,
+          divider: divider,
+          visually_hide_title: visually_hide_title,
+          **system_arguments
+        )
+      }
+
+      # Required body content.
+      #
+      # @param padding [Symbol] The padding. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |padding: @padding, **system_arguments|
+        Primer::Alpha::Overlay::Body.new(
+          padding: padding,
+          **system_arguments
+        )
+      }
+
+      # Footer content.
+      #
+      # @param show_divider [Boolean] Show a divider between the footer and body.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, "Footer"
+
+      # @example Overlay with Cancel and Submit buttons
+      #   @description
+      #     An ID is provided which enables wiring of the open and close buttons to the Overlay.
+      #   @code
+      #     <%= render(Primer::Alpha::Overlay.new(
+      #       title: "Overlay Example",
+      #       id: "my-Overlay",
+      #       role: :dialog,
+      #     )) do |d| %>
+      #       <% d.with_show_button { "Show Overlay" } %>
+      #       <% d.with_body do %>
+      #         <p>Some content</p>
+      #       <% end %>
+      #     <% end %>
+      # @param id [String] The id of the Overlay.
+      # @param title [String] Describes the content of the Overlay.
+      # @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
+      # @param popover [Symbol] The popover behaviour. <%= one_of(Primer::Alpha::Overlay::POPOVER_OPTIONS) %>
+      # @param size [Symbol] The size of the Overlay. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>
+      # @param padding [Symbol] The padding given to the Overlay body. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %>
+      # @param anchor [String] An ID of the element to anchor onto. Defaults to the `show_button`.
+      # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
+      # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+      # @param anchor_offset [Symbol] The anchor offset to give the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_OFFSET_OPTIONS) %>
+      # @param allow_out_of_bounds [Boolean] Allow the Overlay to overflow its container.
+      # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
+      # @param role [String] The ARIA role. <%= one_of(Primer::Alpha::Overlay::ROLE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        title:,
+        role: nil,
+        subtitle: nil,
+        popover: DEFAULT_POPOVER,
+        size: DEFAULT_SIZE,
+        padding: DEFAULT_PADDING,
+        anchor: nil,
+        anchor_align: DEFAULT_ANCHOR_ALIGN,
+        anchor_offset: DEFAULT_ANCHOR_OFFSET,
+        anchor_side: DEFAULT_ANCHOR_SIDE,
+        allow_out_of_bounds: false,
+        visually_hide_title: false,
+        id: self.class.generate_id,
+        **system_arguments
+      )
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role) if role.present?
+
+        @system_arguments[:id] = id.to_s
+        @wrapper_classes = class_names(
+          "Overlay",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        )
+        @system_arguments[:tag] = "anchored-position"
+        @system_arguments[:anchor] = anchor || "overlay-show-#{@system_arguments[:id]}"
+        @system_arguments[:align] = fetch_or_fallback(ANCHOR_ALIGN_OPTIONS, anchor_align, DEFAULT_ANCHOR_ALIGN)
+        @system_arguments[:side] = ANCHOR_SIDE_MAPPINGS[fetch_or_fallback(ANCHOR_SIDE_OPTIONS, anchor_side, DEFAULT_ANCHOR_SIDE)]
+        @system_arguments["anchor-offset"] = fetch_or_fallback(ANCHOR_OFFSET_OPTIONS, anchor_offset, DEFAULT_ANCHOR_OFFSET)
+        @system_arguments["allow-out-of-bounds"] = true if allow_out_of_bounds
+        @id = id.to_s
+        @title = title
+        @subtitle = subtitle
+        @visually_hide_title = visually_hide_title
+        @padding = padding
+
+        @system_arguments[:popover] = popover
+        @system_arguments[:aria] ||= {}
+      end
+
+      def before_render
+        if header?
+          @system_arguments[:aria][:labelledby] ||= title_id
+        else
+          @system_arguments[:aria][:label] = @title
+        end
+        with_body unless body?
+      end
+
+      private
+
+      def title_id
+        "overlay-title-#{@id}"
+      end
+
+      def show_button_id
+        "overlay-show-#{@id}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    RadioButton = Primer::FormComponents.from_input(Primer::Forms::Dsl::RadioButtonInput)
+
+    # Radio buttons represent one of a set of options and are rendered as `<input type="radio">` in HTML.
+    # **NOTE**: You probably want to use the <%= link_to_component(Primer::Alpha::RadioButtonGroup) %>
+    # component instead, as it allows rendering a group of options.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.radio_button(attributes)
+    #     end
+    #   end
+    class RadioButton < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @!macro form_input_arguments
+    end
+  end
+end