primer_view_components 0.0.20 → 0.0.25

data/app/components/primer/box_component.rb

@@ -3,10 +3,10 @@
 module Primer
   # A basic wrapper component for most layout related needs.
   class BoxComponent < Primer::Component
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
     #
-    # @example auto|Color and padding
+    # @example Color and padding
     #   <%= render(Primer::BoxComponent.new(bg: :gray, p: 3)) { "Hello world" } %>
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -1,8 +1,7 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <ol>
     <% items.each do |item| %>
-      <%# The <li> and <a> need to be on the same line to prevent unwanted whitespace %>
-      <%= render Primer::BaseComponent.new(**item.system_arguments) do %><%- if item.href.present? %><a href="<%= item.href %>"><%= item.content %></a><%- else %><%= item.content %><%- end %><%- end %>
+      <%= item %>
     <% end %>
   </ol>
 <% end %>

data/app/components/primer/breadcrumb_component.rb

@@ -3,15 +3,20 @@
 module Primer
   # Use breadcrumbs to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
   class BreadcrumbComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :item, collection: true, class_name: "BreadcrumbItem"
+    # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
+    #
+    # @param href [String] The URL to link to.
+    # @param selected [Boolean] Whether or not the item is selected and not rendered as a link.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :items, "ItemComponent"
 
-    # @example auto|Basic
+    # @example Basic
     #   <%= render(Primer::BreadcrumbComponent.new) do |component| %>
-    #     <% component.slot(:item, href: "/") do %>Home<% end %>
-    #     <% component.slot(:item, href: "/about") do %>About<% end %>
-    #     <% component.slot(:item, selected: true) do %>Team<% end %>
+    #     <% component.item(href: "/") do %>Home<% end %>
+    #     <% component.item(href: "/about") do %>About<% end %>
+    #     <% component.item(selected: true) do %>Team<% end %>
     #   <% end %>
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -25,13 +30,9 @@ module Primer
       items.any?
     end
 
-    # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
-    class BreadcrumbItem < Primer::Slot
-      attr_reader :href, :system_arguments
-
-      # @param href [String] The URL to link to.
-      # @param selected [Boolean] Whether or not the item is selected and not rendered as a link.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    # This component is part of `Primer::BreadcrumbComponent` and should not be
+    # used as a standalone component.
+    class ItemComponent < Primer::Component
       def initialize(href: nil, selected: false, **system_arguments)
         @href = href
         @system_arguments = system_arguments
@@ -41,6 +42,16 @@ module Primer
         @system_arguments[:"aria-current"] = "page" if selected
         @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
       end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          if @href.present?
+            render(Primer::LinkComponent.new(href: @href)) { content }
+          else
+            content
+          end
+        end
+      end
     end
   end
 end

data/app/components/primer/button_component.rb

@@ -26,13 +26,13 @@ module Primer
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
 
-    # @example auto|Button types
+    # @example Button types
     #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
     #   <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
     #   <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
     #   <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
     #
-    # @example auto|Variants
+    # @example Variants
     #   <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>

data/app/components/primer/button_group_component.rb

@@ -10,7 +10,7 @@ module Primer
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
     renders_many :buttons, ->(**kwargs) { Primer::ButtonComponent.new(group_item: true, **kwargs) }
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::ButtonGroupComponent.new) do |component|
     #     component.button { "Default" }
     #     component.button(button_type: :primary) { "Primary" }

data/app/components/primer/button_marketing_component.rb

@@ -25,7 +25,7 @@ module Primer
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
 
-    # @example auto|Button types
+    # @example Button types
     #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
     #   <%= render(Primer::ButtonMarketingComponent.new(button_type: :primary, mr: 2)) { "Primary" } %>
     #   <%= render(Primer::ButtonMarketingComponent.new(button_type: :outline)) { "Outline" } %>
@@ -33,7 +33,7 @@ module Primer
     #     <%= render(Primer::ButtonMarketingComponent.new(button_type: :transparent)) { "Transparent" } %>
     #   </div>
     #
-    # @example auto|Sizes
+    # @example Sizes
     #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
     #   <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
     #

data/app/components/primer/component.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "octicons_helper/helper"
+
 module Primer
   # @private
   class Component < ViewComponent::Base
@@ -7,6 +9,8 @@ module Primer
     include FetchOrFallbackHelper
     include OcticonsHelper
     include JoinStyleArgumentsHelper
+    include ViewHelper::Dsl
+    include ViewHelper
 
     # sourced from https://primer.style/doctocat/usage/front-matter#status
     STATUSES = {

data/app/components/primer/counter_component.rb

@@ -11,7 +11,7 @@ module Primer
     }.freeze
 
     #
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::CounterComponent.new(count: 25)) %>
     #
     # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)

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

@@ -1,8 +1,4 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= render summary.component do %>
-    <%= summary.content %>
-  <% end %>
-  <%= render body.component do %>
-    <%= body.content %>
-  <% end %>
+  <%= summary %>
+  <%= body %>
 <% end %>

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::Slotable
+    include ViewComponent::SlotableV2
 
     NO_OVERLAY = :none
     OVERLAY_MAPPINGS = {
@@ -12,8 +12,27 @@ module Primer
       :dark => "details-overlay details-overlay-dark"
     }.freeze
 
-    with_slot :body, class_name: "Body"
-    with_slot :summary, class_name: "Summary"
+    # Use the Summary slot as a trigger to reveal the content.
+    #
+    # @param button [Boolean] Whether to render the Summary as a button or not.
+    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+    renders_one :summary, lambda { |button = true, **system_arguments|
+      system_arguments = system_arguments
+      system_arguments[:tag] = :summary
+      system_arguments[:role] = "button"
+
+      Primer::BaseComponent.new(**system_arguments) unless button
+
+      Primer::ButtonComponent.new(**system_arguments)
+    }
+
+    # Use the Body slot as the main content to be shown when triggered by the Summary.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] ||= :div
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
     # @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
@@ -31,37 +50,5 @@ module Primer
     def render?
       summary.present? && body.present?
     end
-
-    # Use the Summary slot as a trigger to reveal the content.
-    class Summary < Primer::Slot
-      # @param button [Boolean] Whether to render the Summary as a button or not.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(button: true, **system_arguments)
-        @button = button
-
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :summary
-        @system_arguments[:role] = "button"
-      end
-
-      def component
-        return Primer::BaseComponent.new(**@system_arguments) unless @button
-
-        Primer::ButtonComponent.new(**@system_arguments)
-      end
-    end
-
-    # Use the Body slot as the main content to be shown when triggered by the Summary.
-    class Body < Primer::Slot
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] ||= :div
-      end
-
-      def component
-        Primer::BaseComponent.new(**@system_arguments)
-      end
-    end
   end
 end

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

@@ -1,9 +1,9 @@
 <%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
-  <% c.slot(:summary, classes: @summary_classes) do %>
+  <% c.summary(classes: @summary_classes) do %>
     <%= button %>
   <% end %>
 
-  <% c.slot(:body) do %>
+  <% c.body do %>
     <%= menu %>
   <% end %>
 <% end %>

data/app/components/primer/dropdown_component.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require_relative "dropdown/menu_component"
-
 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.
@@ -20,8 +18,8 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :menu, Primer::Dropdown::MenuComponent
 
-    # @example 210|Default
-    #   <div style="margin-bottom: 150px">
+    # @example Default
+    #   <div>
     #     <%= render(Primer::DropdownComponent.new) do |c| %>
     #       <% c.button do %>
     #         Dropdown
@@ -37,8 +35,8 @@ module Primer
     #     <% end %>
     #   </div>
     #
-    # @example 210|With Direction
-    #   <div style="margin-bottom: 150px" class="d-flex flex-justify-center">
+    # @example With Direction
+    #   <div>
     #     <%= render(Primer::DropdownComponent.new) do |c| %>
     #       <% c.button do %>
     #         Dropdown

data/app/components/primer/dropdown_menu_component.rb

@@ -18,14 +18,14 @@ module Primer
       STATUSES[:deprecated]
     end
 
-    # @example 200|With a header
-    #   <div style="margin-bottom: 150px">
+    # @example With a header
+    #   <div>
     #     <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
-    #       <% c.slot(:summary) do %>
+    #       <% c.summary do %>
     #         Dropdown
     #       <% end %>
     #
-    #       <% c.slot(:body) do %>
+    #       <% c.body do %>
     #         <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
     #           <ul>
     #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>

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

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

data/app/components/primer/flash_component.rb

@@ -3,9 +3,17 @@
 module Primer
   # Use the Flash component to inform users of successful or pending actions.
   class FlashComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :actions, class_name: "Actions"
+    # Optional action content showed on the right side of the component.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :action, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     DEFAULT_VARIANT = :default
     VARIANT_MAPPINGS = {
@@ -14,25 +22,25 @@ module Primer
       :danger => "flash-error",
       :success => "flash-success"
     }.freeze
-    # @example auto|Variants
+    # @example Variants
     #   <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
     #   <%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
     #   <%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
     #   <%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
     #
-    # @example auto|Full width
+    # @example Full width
     #   <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
     #
-    # @example auto|Dismissible
+    # @example Dismissible
     #   <%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
     #
-    # @example auto|Icon
+    # @example Icon
     #   <%= render(Primer::FlashComponent.new(icon: "people")) { "This is a flash message with an icon!" } %>
     #
-    # @example auto|With actions
+    # @example With actions
     #   <%= render(Primer::FlashComponent.new) do |component| %>
     #     This is a flash message with actions!
-    #     <% component.slot(:actions) do %>
+    #     <% component.action do %>
     #       <%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
     #     <% end %>
     #   <% end %>
@@ -60,17 +68,5 @@ module Primer
     def self.status
       Primer::Component::STATUSES[:beta]
     end
-
-    # :nodoc:
-    class Actions < Primer::Slot
-      attr_reader :system_arguments
-
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(@system_arguments[:classes], "flash-action")
-      end
-    end
   end
 end

data/app/components/primer/flex_component.rb

@@ -35,28 +35,28 @@ module Primer
     DEFAULT_DIRECTION = nil
     ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
-    # @example auto|Default
+    # @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" } %>
     #   <% end %>
     #
-    # @example auto|Justify center
+    # @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" } %>
     #   <% end %>
     #
-    # @example auto|Align 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" } %>
     #   <% end %>
     #
-    # @example auto|Direction column
+    # @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" } %>

data/app/components/primer/flex_item_component.rb

@@ -7,7 +7,7 @@ module Primer
     FLEX_AUTO_DEFAULT = false
     FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true].freeze
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::FlexComponent.new) do %>
     #     <%= render(Primer::FlexItemComponent.new) do %>
     #       Item 1

data/app/components/primer/heading_component.rb

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