primer_view_components 0.0.17 → 0.0.22

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

@@ -1,26 +1,12 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if header %>
-    <%= render Primer::BaseComponent.new(**header.system_arguments) do %>
-      <%= header.content %>
-    <% end %>
-  <% end %>
-  <% if body %>
-    <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
-      <%= body.content %>
-    <% end %>
-  <% end %>
+  <%= header %>
+  <%= body %>
   <% if rows.any? %>
     <ul>
       <% rows.each do |row| %>
-        <%= render Primer::BaseComponent.new(**row.system_arguments) do %>
-          <%= row.content %>
-        <% end %>
+        <%= row %>
       <% end %>
     </ul>
   <% end %>
-  <% if footer %>
-    <%= render Primer::BaseComponent.new(**footer.system_arguments) do %>
-      <%= footer.content %>
-    <% end %>
-  <% end %>
+  <%= footer %>
 <% end %>

data/app/components/primer/border_box_component.rb

@@ -3,87 +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)
+    }
 
-    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)
+    }
 
-    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
 
-    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
 
-    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,6 +3,12 @@
 module Primer
   # A basic wrapper component for most layout related needs.
   class BoxComponent < Primer::Component
+    # @example Default
+    #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
+    #
+    # @example Color and padding
+    #   <%= render(Primer::BoxComponent.new(bg: :gray, p: 3)) { "Hello world" } %>
+    #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
@@ -12,5 +18,9 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    def self.status
+      Primer::Component::STATUSES[:stable]
+    end
   end
 end

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 %>
@@ -33,7 +33,8 @@ module Primer
       # @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 %>
       def initialize(href: nil, selected: false, **system_arguments)
-        @href, @system_arguments = href, system_arguments
+        @href = href
+        @system_arguments = system_arguments
 
         @href = nil if selected
         @system_arguments[:tag] = :li

data/app/components/primer/button_component.rb

@@ -16,7 +16,7 @@ module Primer
     VARIANT_MAPPINGS = {
       :small => "btn-sm",
       DEFAULT_VARIANT => "",
-      :large => "btn-large",
+      :large => "btn-large"
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
@@ -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.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% buttons.each do |button| %>
+    <%= button %>
+  <% end %>
+<% end %>

data/app/components/primer/button_group_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use ButtonGroupComponent to render a series of buttons.
+  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 Default
+    #   <%= render(Primer::ButtonGroupComponent.new) do |component|
+    #     component.button { "Default" }
+    #     component.button(button_type: :primary) { "Primary" }
+    #     component.button(button_type: :danger) { "Danger" }
+    #     component.button(button_type: :outline) { "Outline" }
+    #     component.button(classes: "my-class") { "Custom class" }
+    #   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(
+        "BtnGroup",
+        system_arguments[:classes]
+      )
+    end
+
+    def render?
+      buttons.any?
+    end
+  end
+end

data/app/components/primer/button_marketing_component.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  class ButtonMarketingComponent < Primer::Component
+    DEFAULT_BUTTON_TYPE = :default
+    BUTTON_TYPE_MAPPINGS = {
+      DEFAULT_BUTTON_TYPE => "",
+      :primary => "btn-primary-mktg",
+      :outline => "btn-outline-mktg",
+      :transparent => "btn-transparent"
+    }.freeze
+    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :large => "btn-large-mktg"
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
+
+    # @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" } %>
+    #   <div class="bg-gray-dark">
+    #     <%= render(Primer::ButtonMarketingComponent.new(button_type: :transparent)) { "Transparent" } %>
+    #   </div>
+    #
+    # @example Sizes
+    #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
+    #   <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
+    #
+    # @param button_type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::BUTTON_TYPE_OPTIONS) %>
+    # @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
+    # @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      button_type: DEFAULT_BUTTON_TYPE,
+      variant: DEFAULT_VARIANT,
+      tag: DEFAULT_TAG,
+      type: DEFAULT_TYPE,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+      if @system_arguments[:tag] == :a
+        @system_arguments[:role] = :button
+      else
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+      end
+
+      @system_arguments[:classes] = class_names(
+        "btn-mktg",
+        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
+        system_arguments[:classes]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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,5 +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 = {
+      alpha: :alpha,
+      beta: :beta,
+      stable: :stable,
+      deprecated: :deprecated
+    }.freeze
+
+    def self.status
+      STATUSES[:alpha]
+    end
   end
 end

data/app/components/primer/counter_component.rb

@@ -7,11 +7,11 @@ module Primer
     SCHEME_MAPPINGS = {
       DEFAULT_SCHEME => "Counter",
       :gray => "Counter Counter--gray",
-      :light_gray => "Counter Counter--gray-light",
+      :light_gray => "Counter Counter--gray-light"
     }.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)
@@ -30,7 +30,12 @@ module Primer
       round: false,
       **system_arguments
     )
-      @count, @limit, @hide_if_zero, @text, @round, @system_arguments = count, limit, hide_if_zero, text, round, system_arguments
+      @count = count
+      @limit = limit
+      @hide_if_zero = hide_if_zero
+      @text = text
+      @round = round
+      @system_arguments = system_arguments
 
       @has_limit = !@limit.nil?
       @system_arguments[:title] = title
@@ -39,15 +44,17 @@ module Primer
         @system_arguments[:classes],
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
       )
-      if count == 0 && hide_if_zero
-        @system_arguments[:hidden] = true
-      end
+      @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
     end
 
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { value }
     end
 
+    def self.status
+      Primer::Component::STATUSES[:beta]
+    end
+
     private
 
     def title
@@ -60,7 +67,7 @@ module Primer
       else
         count = @count.to_i
         str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
-        str += "+" if (@has_limit && count > @limit)
+        str += "+" if @has_limit && count > @limit
         str
       end
     end
@@ -76,14 +83,14 @@ module Primer
         if @round
           count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
           precision = count.between?(100_000, 999_999) ? 0 : 1
-          units = {thousand: "k", million: "m", billion: "b"}
+          units = { thousand: "k", million: "m", billion: "b" }
           str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
         else
           @count = @count.to_i
           str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
         end
 
-        str += "+" if (@has_limit && @count.to_i > @limit)
+        str += "+" if @has_limit && @count.to_i > @limit
         str
       end
     end