primer_view_components 0.0.84 → 0.0.87

data/app/components/primer/border_box_component.rb

@@ -1,145 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `BorderBox` is a Box component with a border.
-  class BorderBoxComponent < Primer::Component
-    status :beta
-
-    DEFAULT_PADDING = :default
-    PADDING_MAPPINGS = {
-      DEFAULT_PADDING => "",
-      :condensed => "Box--condensed",
-      :spacious => "Box--spacious"
-    }.freeze
-    PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
-
-    DEFAULT_ROW_SCHEME = :default
-    ROW_SCHEME_MAPPINGS = {
-      DEFAULT_ROW_SCHEME => "",
-      :neutral => "Box-row--gray",
-      :info => "Box-row--blue",
-      :warning => "Box-row--yellow"
-    }.freeze
-
-    # Optional Header.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    # @accessibility
-    # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
-    renders_one :header, "Primer::Alpha::BorderBox::Header"
-
-    # Optional Body.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-body",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Optional Footer.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :footer, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-footer",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Use Rows to add rows with borders and maintain the same padding.
-    #
-    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::BorderBoxComponent::ROW_SCHEME_MAPPINGS.keys) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
-      system_arguments[:tag] = :li
-      system_arguments[:classes] = class_names(
-        "Box-row",
-        ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Header with title, body, rows, and footer
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.header do |h| %>
-    #       <% h.title(tag: :h2) do %>
-    #         Header
-    #       <% end %>
-    #     <% end %>
-    #     <% component.body do %>
-    #       Body
-    #     <% end %>
-    #     <% component.row do %>
-    #       <% if true %>
-    #         Row one
-    #       <% end %>
-    #     <% end %>
-    #     <% component.row do %>
-    #       Row two
-    #     <% end %>
-    #     <% component.footer do %>
-    #       Footer
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Padding density
-    #   <%= render(Primer::BorderBoxComponent.new(padding: :condensed)) do |component| %>
-    #     <% component.header do %>
-    #       Header
-    #     <% end %>
-    #     <% component.body do %>
-    #       Body
-    #     <% end %>
-    #     <% component.row do %>
-    #       Row two
-    #     <% end %>
-    #     <% component.footer do %>
-    #       Footer
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Row colors
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.row do %>
-    #       Default
-    #     <% end %>
-    #     <% component.row(scheme: :neutral) do %>
-    #       Neutral
-    #     <% end %>
-    #     <% component.row(scheme: :info) do %>
-    #       Info
-    #     <% end %>
-    #     <% component.row(scheme: :warning) do %>
-    #       Warning
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param padding [Symbol] <%= one_of(Primer::BorderBoxComponent::PADDING_MAPPINGS.keys) %>
-    # @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(
-        "Box",
-        PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
-        system_arguments[:classes]
-      )
-
-      @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
-    end
-
-    def render?
-      rows.any? || header.present? || body.present? || footer.present?
-    end
+  class BorderBoxComponent < Primer::Beta::BorderBox
+    status :deprecated
   end
 end

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

@@ -1,4 +1,12 @@
-<%= render Primer::BaseButton.new(**@system_arguments) do -%>
-  <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
-  <%= tooltip %>
-<% end -%>
+<% if tooltip.present? %>
+  <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+    <% end -%>
+    <%= tooltip %>
+  <% end -%>
+<% else %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+  <% end -%>
+<% end %>

data/app/components/primer/button_component.rb

@@ -123,8 +123,8 @@ module Primer
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-    # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     # @param block [Boolean] Whether button is full-width with `display: block`.
     # @param dropdown [Boolean] Whether or not to render a dropdown caret.

data/app/components/primer/clipboard_copy.rb

@@ -12,7 +12,7 @@ module Primer
     #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
     #
     # @example With text instead of icons
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy")) do %>
     #     Click to copy!
     #   <% end %>
     #
@@ -34,10 +34,14 @@ module Primer
       @system_arguments[:value] = value if value.present?
     end
 
+    # :nodoc:
+    def before_render
+      validate_aria_label if content.blank?
+    end
+
     private
 
     def validate!
-      validate_aria_label
       raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
     end
   end

data/app/components/primer/close_button.rb

@@ -31,7 +31,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseButton.new(**@system_arguments)) do
+      render(Primer::Beta::BaseButton.new(**@system_arguments)) do
         render(Primer::OcticonComponent.new("x"))
       end
     end

data/app/components/primer/hellip_button.rb

@@ -33,7 +33,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseButton.new(**@system_arguments)) { "…".html_safe }
+      render(Primer::Beta::BaseButton.new(**@system_arguments)) { "…".html_safe }
     end
   end
 end

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

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= render Primer::OcticonComponent.new(icon: @icon) %>
+  <% end -%>
+  <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+<% end %>

data/app/components/primer/icon_button.rb

@@ -8,6 +8,7 @@ module Primer
   #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
   #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
   #   `"Search"` instead of `"Magnifying glass"`.
+  #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
   #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
   class IconButton < Primer::Component
     status :beta
@@ -18,9 +19,10 @@ module Primer
       :danger => "btn-octicon-danger"
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
     # @example Default
     #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
     #
     # @example Schemes
     #
@@ -29,23 +31,41 @@ module Primer
     #
     # @example In a BorderBox
     #
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
+    #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
     #     <% component.body do %>
     #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
     #       <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
     #     <% end %>
     #   <% end %>
     #
+    # @example With an `aria-description`
+    #   @description
+    #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
+    #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
+    #     more context and information. See the accessibility section for more information.
+    #   @code
+    #     <%= render(Primer::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+    #
+    # @example Custom tooltip direction
+    #
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+    #
     # @param scheme [Symbol] <%= one_of(Primer::IconButton::SCHEME_OPTIONS) %>
     # @param icon [String] Name of <%= link_to_octicons %> to use.
-    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
-    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::BorderBoxComponent) %>. If `true`, the button will have the `Box-btn-octicon` class.
+    # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+    # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
+    # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+    # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::Beta::BorderBox) %>. If `true`, the button will have the `Box-btn-octicon` class.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments)
       @icon = icon
 
       @system_arguments = system_arguments
+
+      @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+
       @system_arguments[:classes] = class_names(
         "btn-octicon",
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
@@ -54,11 +74,27 @@ module Primer
       )
 
       validate_aria_label
-    end
 
-    def call
-      render(Primer::BaseButton.new(**@system_arguments)) do
-        render(Primer::OcticonComponent.new(icon: @icon))
+      @aria_label = aria("label", @system_arguments)
+      @aria_description = aria("description", @system_arguments)
+
+      @tooltip_arguments = {
+        for_id: @system_arguments[:id],
+        direction: tooltip_direction
+      }
+
+      # If we have both an `aria-label` and a `aria-description`, we create a `Tooltip` with the description type and keep the `aria-label` in the button.
+      # Otherwise, the `aria-label` is used as the tooltip text, which is the `aria-labelled-by` of the button, so we don't set it in the button.
+      if @aria_label.present? && @aria_description.present?
+        @system_arguments.delete(:"aria-description")
+        @system_arguments[:aria].delete(:description) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_description
+        @tooltip_arguments[:type] = :description
+      else
+        @system_arguments.delete(:"aria-label")
+        @system_arguments[:aria].delete(:label) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_label
+        @tooltip_arguments[:type] = :label
       end
     end
   end

data/app/components/primer/link_component.rb

@@ -17,6 +17,8 @@ module Primer
 
     # `Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.
     # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+    # The tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested
+    # under a positioning wrapper.
     # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
     #
     # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
@@ -43,9 +45,6 @@ module Primer
     # @example Without underline
     #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
     #
-    # @example Span as link
-    #   <%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>
-    #
     # @example With tooltip
     #   @description
     #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
@@ -82,8 +81,16 @@ module Primer
     end
 
     def call
-      render(Primer::BaseComponent.new(**@system_arguments)) do
-        content.to_s + tooltip.to_s
+      if tooltip.present?
+        render Primer::BaseComponent.new(tag: :span, position: :relative) do
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            content
+          end.to_s + tooltip.to_s
+        end
+      else
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          content
+        end
       end
     end
   end

data/app/helpers/primer/form_helper.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module FormHelper
+    def primer_form_with(**kwargs, &block)
+      form_with(**kwargs, skip_default_ids: false, builder: Primer::Forms::Builder, &block)
+    end
+  end
+end

data/app/lib/primer/join_style_arguments_helper.rb

@@ -8,7 +8,7 @@ module Primer
     # join_style_arguments("width: 100%", "height: 100%") =>
     #   "width: 100%;height: 100%"
     def join_style_arguments(*args)
-      args.compact.join(";")
+      args.compact.map { |a| a.strip.chomp(";") }.join(";")
     end
   end
 end

data/lib/primer/classify/utilities.rb

@@ -7,15 +7,12 @@ module Primer
   class Classify
     # Handler for PrimerCSS utility classes loaded from utilities.rake
     class Utilities
-      # Load the utilities.yml file.
-      # Disabling because we want to load symbols, strings, and integers from the .yml file
-      # rubocop:disable Security/YAMLLoad
-      UTILITIES = YAML.load(
+      UTILITIES = YAML.safe_load(
         File.read(
           File.join(File.dirname(__FILE__), "./utilities.yml")
-        )
+        ),
+        permitted_classes: [Symbol]
       ).freeze
-      # rubocop:enable Security/YAMLLoad
 
       BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 

data/lib/primer/form_components.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  class FormComponents
+    def self.from_input(input_klass)
+      Class.new(Primer::Component) do
+        @input_klass = input_klass
+
+        class << self
+          attr_reader :input_klass
+        end
+
+        def initialize(**system_arguments, &block)
+          @system_arguments = system_arguments
+          @block = block
+        end
+
+        def call
+          builder = Primer::Forms::Builder.new(
+            nil, nil, __vc_original_view_context, {}
+          )
+
+          input = self.class.input_klass.new(
+            builder: builder,
+            form: nil,
+            **@system_arguments,
+            &@block
+          )
+
+          input.to_component.render_in(__vc_original_view_context) { content }
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/acts_as_component.rb

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+module Primer
+  module Forms
+    # :nodoc:
+    module ActsAsComponent
+      # :nodoc:
+      module InstanceMethods
+        delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
+
+        def render_in(view_context, &block)
+          @view_context = view_context
+          before_render
+          perform_render(&block)
+        end
+
+        # :nocov:
+        def perform_render(&_block)
+          raise NotImplementedError, "subclasses must implement ##{__method__}."
+        end
+        # :nocov:
+
+        def before_render; end
+
+        # :nocov:
+        # rubocop:disable Naming/AccessorMethodName
+        def set_original_view_context(view_context)
+          @view_context = view_context
+        end
+        # rubocop:enable Naming/AccessorMethodName
+        # :nocov:
+      end
+
+      def self.extended(base)
+        base.include(InstanceMethods)
+      end
+
+      TemplateGlob = Struct.new(:glob_pattern, :method_name, :on_compile_callback)
+      TemplateParams = Struct.new(:source, :identifier, :type, :format)
+
+      attr_accessor :template_root_path
+
+      def renders_templates(glob_pattern, method_name = nil, &block)
+        template_globs << TemplateGlob.new(glob_pattern, method_name, block)
+      end
+      alias renders_template renders_templates
+
+      def compile!
+        # always recompile in dev
+        return if defined?(@compiled) && @compiled && !Rails.env.development?
+
+        template_globs.each do |template_glob|
+          compile_templates_in(template_glob)
+        end
+
+        @compiled = true
+      end
+
+      private
+
+      def template_globs
+        @template_globs ||= []
+      end
+
+      def compile_templates_in(template_glob)
+        pattern = if Pathname(template_glob.glob_pattern).absolute?
+                    template_glob.glob_pattern
+                  else
+                    # skip compilation for anonymous form classes, as in tests
+                    return unless template_root_path
+
+                    File.join(template_root_path, template_glob.glob_pattern)
+                  end
+
+        template_paths = Dir.glob(pattern)
+
+        raise "Cannot compile multiple templates with the same method name." if template_paths.size > 1 && template_glob.method_name
+
+        template_paths.each do |template_path|
+          method_name = template_glob.method_name
+          method_name ||= "render_#{File.basename(template_path).chomp('.html.erb')}"
+          define_template_method(template_path, method_name)
+          template_glob&.on_compile_callback&.call(template_path)
+        end
+      end
+
+      def define_template_method(template_path, method_name)
+        # rubocop:disable Style/DocumentDynamicEvalDefinition
+        # rubocop:disable Style/EvalWithLocation
+        class_eval <<-RUBY, template_path, 0
+        private def #{method_name}
+          capture { #{compile_template(template_path)} }
+        end
+        RUBY
+        # rubocop:enable Style/EvalWithLocation
+        # rubocop:enable Style/DocumentDynamicEvalDefinition
+      end
+
+      def compile_template(path)
+        handler = ActionView::Template.handler_for_extension("erb")
+        template = File.read(path)
+        template_params = TemplateParams.new({
+                                               source: template,
+                                               identifier: __FILE__,
+                                               type: "text/html",
+                                               format: "text/html"
+                                             })
+
+        # change @output_buffer ivar to output_buffer method call
+        BufferRewriter.rewrite(
+          handler.call(template_params, template)
+        )
+      end
+    end
+  end
+end

data/lib/primer/forms/base.html.erb

@@ -0,0 +1,8 @@
+<%= render(SpacingWrapper.new) do %>
+  <% inputs.each do |input| %>
+    <%= render(input.to_component) %>
+  <% end %>
+<% end %>
+<% if after_content? %>
+  <%= render_after_content %>
+<% end %>