primer_view_components 0.0.18 → 0.0.23

data/app/components/primer/border_box_component.rb

@@ -3,91 +3,94 @@
 module Primer
   # BorderBox is a Box component with a border.
   class BorderBoxComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :header, class_name: "Header"
-    with_slot :body, class_name: "Body"
-    with_slot :footer, class_name: "Footer"
-    with_slot :row, collection: true, class_name: "Row"
+    # Optional Header.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :header, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        "Box-header",
+        system_arguments[:classes]
+      )
 
-    # @example 350|Header, body, rows, and footer
-    #   <%= render(Primer::BorderBoxComponent.new) do |component|
-    #     component.slot(:header) { "Header" }
-    #     component.slot(:body) { "Body" }
-    #     component.slot(:row) { "Row one" }
-    #     component.slot(:row) { "Row two" }
-    #     component.slot(:row) { "Row three" }
-    #     component.slot(:footer) { "Footer" }
-    #   end %>
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # Optional Body.
     #
     # @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(
-        "Box",
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        "Box-body",
         system_arguments[:classes]
       )
-    end
 
-    def render?
-      rows.any? || header.present? || body.present? || footer.present?
-    end
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
-    # :nodoc
-    class Header < 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(
-          "Box-header",
-          system_arguments[:classes]
-        )
-      end
-    end
+    # 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 system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :rows, lambda { |**system_arguments|
+      system_arguments[:tag] = :li
+      system_arguments[:classes] = class_names(
+        "Box-row",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
-    # :nodoc
-    class Body < 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(
-          "Box-body",
-          system_arguments[:classes]
-        )
-      end
+    # @example Header, body, rows, and footer
+    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
+    #     <% component.header do %>
+    #       Header
+    #     <% 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 %>
+    #
+    # @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("Box", system_arguments[:classes])
     end
 
-    # :nodoc
-    class Footer < 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(
-          "Box-footer",
-          system_arguments[:classes]
-        )
-      end
+    def render?
+      rows.any? || header.present? || body.present? || footer.present?
     end
 
-    # :nodoc
-    class Row < 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] = :li
-        @system_arguments[:classes] = class_names(
-          "Box-row",
-          system_arguments[:classes]
-        )
-      end
+    def self.status
+      Primer::Component::STATUSES[:beta]
     end
   end
 end

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 20|Default
+    # @example Default
     #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
     #
-    # @example 54|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.rb

@@ -7,7 +7,7 @@ module Primer
 
     with_slot :item, collection: true, class_name: "BreadcrumbItem"
 
-    # @example 40|Basic
+    # @example Basic
     #   <%= render(Primer::BreadcrumbComponent.new) do |component| %>
     #     <% component.slot(:item, href: "/") do %>Home<% end %>
     #     <% component.slot(:item, href: "/about") do %>About<% 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 50|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 50|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

@@ -5,9 +5,12 @@ module Primer
   class ButtonGroupComponent < Primer::Component
     include ViewComponent::SlotableV2
 
+    # Required list of buttons to be rendered.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
     renders_many :buttons, ->(**kwargs) { Primer::ButtonComponent.new(group_item: true, **kwargs) }
 
-    # @example 50|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 125|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 75|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,18 +9,19 @@ module Primer
     include FetchOrFallbackHelper
     include OcticonsHelper
     include JoinStyleArgumentsHelper
+    include ViewHelper::DSL
+    include ViewHelper
 
     # sourced from https://primer.style/doctocat/usage/front-matter#status
     STATUSES = {
-      deprecated: :deprecated,
-      review: :review,
-      experimental: :experimental,
-      new: :new,
-      stable: :stable
+      alpha: :alpha,
+      beta: :beta,
+      stable: :stable,
+      deprecated: :deprecated
     }.freeze
 
     def self.status
-      STATUSES[:experimental]
+      STATUSES[:alpha]
     end
   end
 end

data/app/components/primer/counter_component.rb

@@ -11,7 +11,7 @@ module Primer
     }.freeze
 
     #
-    # @example 34|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)
@@ -51,6 +51,10 @@ module Primer
       render(Primer::BaseComponent.new(**@system_arguments)) { value }
     end
 
+    def self.status
+      Primer::Component::STATUSES[:beta]
+    end
+
     private
 
     def title

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/menu_component.html.erb

@@ -0,0 +1,12 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @header.present? %>
+    <div class="dropdown-header">
+      <%= @header %>
+    </div>
+  <% end %>
+  <ul>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Primer
+  module Dropdown
+    # This component is part of `Primer::DropdownComponent` and should not be
+    # used as a standalone component.
+    class MenuComponent < Primer::Component
+      include ViewComponent::SlotableV2
+
+      SCHEME_DEFAULT = :default
+      SCHEME_MAPPINGS = {
+        SCHEME_DEFAULT => "",
+        :dark => "dropdown-menu-dark"
+      }.freeze
+
+      DIRECTION_DEFAULT = :se
+      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
+
+      renders_many :items, lambda { |divider: false, **system_arguments|
+        system_arguments[:tag] = :li
+        system_arguments[:role] = :none if divider
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "dropdown-item" => !divider,
+          "dropdown-divider" => divider
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
+        @header = header
+        @direction = direction
+        @system_arguments = system_arguments
+
+        @system_arguments[:tag] = "details-menu"
+        @system_arguments[:role] = "menu"
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "dropdown-menu",
+          "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
+        )
+      end
+    end
+  end
+end