primer_view_components 0.0.16 → 0.0.21

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

@@ -0,0 +1,6 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= heading %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/primer/menu_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use menus to create vertical lists of navigational links.
+  class MenuComponent < Primer::Component
+    include ViewComponent::SlotableV2
+
+    # Optional menu heading
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :heading, lambda { |**system_arguments|
+      system_arguments[:tag] ||= :span
+      system_arguments[:classes] = class_names(
+        "menu-heading",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # Required list of navigational links
+    #
+    # @param href [String] URL to be used for the Link
+    # @param selected [Boolean] Whether the item is the current selection
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :items, lambda { |href:, selected: false, **system_arguments|
+      system_arguments[:tag] = :a
+      system_arguments[:href] = href
+      system_arguments[:"aria-current"] = :page if selected
+      system_arguments[:classes] = class_names(
+        "menu-item",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example auto|Default
+    #   <%= render(Primer::MenuComponent.new) do |c| %>
+    #     <% c.heading do %>
+    #       Heading
+    #     <% end %>
+    #     <% c.item(selected: true, href: "#url") do %>
+    #       Item 1
+    #     <% end %>
+    #     <% c.item(href: "#url") do %>
+    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       With Icon
+    #     <% end %>
+    #     <% c.item(href: "#url") do %>
+    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       With Icon and Counter
+    #       <%= render(Primer::CounterComponent.new(count: 25)) %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :nav
+      @system_arguments[:classes] = class_names(
+        "menu",
+        @system_arguments[:classes]
+      )
+    end
+
+    def render?
+      items.any?
+    end
+  end
+end

data/app/components/primer/octicon_component.rb

@@ -10,24 +10,25 @@ module Primer
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
       :medium => 32,
-      :large => 64,
+      :large => 64
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-    # @example 25|Default
+    # @example auto|Default
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
-    # @example 40|Medium
+    # @example auto|Medium
     #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
     #
-    # @example 80|Large
+    # @example auto|Large
     #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
     # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
-      @icon, @system_arguments = icon, system_arguments
+      @icon = icon
+      @system_arguments = system_arguments
 
       @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
       @system_arguments[:height] ||= SIZE_MAPPINGS[size]
@@ -39,7 +40,11 @@ module Primer
     end
 
     def call
-      octicon(@icon, **@system_arguments)
+      octicon(@icon, { **@system_arguments })
+    end
+
+    def self.status
+      Primer::Component::STATUSES[:beta]
     end
   end
 end

data/app/components/primer/popover_component.rb

@@ -10,7 +10,7 @@ module Primer
     with_slot :heading, class_name: "Heading"
     with_slot :body, class_name: "Body"
 
-    # @example 150|Default
+    # @example auto|Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -20,7 +20,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 150|Large
+    # @example auto|Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -30,7 +30,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 150|Caret position
+    # @example auto|Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -57,7 +57,8 @@ module Primer
       body.present?
     end
 
-    class Heading < ViewComponent::Slot
+    # :nodoc:
+    class Heading < Primer::Slot
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
         @system_arguments = system_arguments
@@ -70,6 +71,7 @@ module Primer
       end
     end
 
+    # :nodoc:
     class Body < Slot
       CARET_DEFAULT = :top
       CARET_MAPPINGS = {

data/app/components/primer/progress_bar_component.rb

@@ -12,26 +12,26 @@ module Primer
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
       :small => "Progress--small",
-      :large => "Progress--large",
+      :large => "Progress--large"
     }.freeze
 
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example 20|Default
+    # @example auto|Default
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 25) %>
     #   <% end %>
     #
-    # @example 20|Small
+    # @example auto|Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 50) %>
     #   <% end %>
     #
-    # @example 30|Large
+    # @example auto|Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
     #     <% component.slot(:item, bg: :red_4, percentage: 75) %>
     #   <% end %>
     #
-    # @example 20|Multiple items
+    # @example auto|Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 10) %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 20) %>
@@ -48,15 +48,14 @@ module Primer
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
       @system_arguments[:tag] = :span
-
     end
 
     def render?
       items.any?
     end
 
-    class Item < ViewComponent::Slot
-      include ClassNameHelper
+    # :nodoc:
+    class Item < Primer::Slot
       attr_reader :system_arguments
 
       # @param percentage [Integer] Percentage completion of item.
@@ -68,7 +67,8 @@ module Primer
 
         @system_arguments[:tag] = :span
         @system_arguments[:bg] = bg
-        @system_arguments[:style] = "width: #{@percentage}%;"
+        @system_arguments[:style] =
+          join_style_arguments(@system_arguments[:style], "width: #{@percentage}%;")
         @system_arguments[:classes] = class_names("Progress-item", @system_arguments[:classes])
       end
     end

data/app/components/primer/slot.rb

@@ -5,5 +5,6 @@ module Primer
   class Slot < ViewComponent::Slot
     include ClassNameHelper
     include FetchOrFallbackHelper
+    include JoinStyleArgumentsHelper
   end
 end

data/app/components/primer/spinner_component.rb

@@ -3,12 +3,11 @@
 module Primer
   # Use Primer::SpinnerComponent to let users know that content is being loaded.
   class SpinnerComponent < Primer::Component
-
     DEFAULT_SIZE = :medium
     SIZE_MAPPINGS = {
       :small => 16,
       DEFAULT_SIZE => 32,
-      :large => 64,
+      :large => 64
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
     # Setting `box-sizing: content-box` allows consumers to add padding
@@ -16,24 +15,28 @@ module Primer
     DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
 
     #
-    # @example 48|Default
+    # @example auto|Default
     #   <%= render(Primer::SpinnerComponent.new) %>
     #
-    # @example 32|Small
+    # @example auto|Small
     #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
     #
-    # @example 80|Large
+    # @example auto|Large
     #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
     #
     # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
-    def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
+    def initialize(size: DEFAULT_SIZE, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = :svg
+      @system_arguments[:style] ||= DEFAULT_STYLE
       @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
       @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
       @system_arguments[:viewBox] = "0 0 16 16"
       @system_arguments[:fill] = :none
-      @system_arguments[:style] = DEFAULT_STYLE unless style.nil?
+    end
+
+    def self.status
+      Primer::Component::STATUSES[:beta]
     end
   end
 end

data/app/components/primer/state_component.rb

@@ -8,30 +8,30 @@ module Primer
       COLOR_DEFAULT => "",
       :green => "State--green",
       :red => "State--red",
-      :purple => "State--purple",
+      :purple => "State--purple"
     }.freeze
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
-      :small => "State--small",
+      :small => "State--small"
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
+    TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
 
-    # @example 40|Default
+    # @example auto|Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
     #
-    # @example 40|Colors
+    # @example auto|Colors
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", color: :green)) { "Green" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", color: :red)) { "Red" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", color: :purple)) { "Purple" } %>
     #
-    # @example 40|Sizes
+    # @example auto|Sizes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
     #

data/app/components/primer/subhead_component.rb

@@ -9,7 +9,7 @@ module Primer
     with_slot :actions, class_name: "Actions"
     with_slot :description, class_name: "Description"
 
-    # @example 95|Default
+    # @example auto|Default
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -19,7 +19,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 95|Without border
+    # @example auto|Without border
     #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -29,7 +29,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 95|With actions
+    # @example auto|With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -67,6 +67,7 @@ module Primer
       heading.present?
     end
 
+    # :nodoc:
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
@@ -85,6 +86,7 @@ module Primer
       end
     end
 
+    # :nodoc:
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
@@ -98,6 +100,7 @@ module Primer
       end
     end
 
+    # :nodoc:
     class Description < ViewComponent::Slot
       include ClassNameHelper
 

data/app/components/primer/text_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # The Text component is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
-    # @example 70|Default
+    # @example auto|Default
     #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
     #   <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
     #

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

@@ -1,17 +1,5 @@
-<%= render Primer::BaseComponent.new(**system_arguments) do %>
-  <% if avatar %>
-    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.system_arguments) %>
-  <% end %>
-
-  <% if badge %>
-    <%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
-      <%= octicon badge.icon %>
-    <% end %>
-  <% end %>
-
-  <% if body %>
-    <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
-      <%= body.content %>
-    <% end %>
-  <% end %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= avatar %>
+  <%= badge %>
+  <%= body %>
 <% end %>

data/app/components/primer/timeline_item_component.rb

@@ -3,20 +3,45 @@
 module Primer
   # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :avatar, class_name: "Avatar"
-    with_slot :badge, class_name: "Badge"
-    with_slot :body, class_name: "Body"
+    # Avatar to be rendered to the left of the Badge.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
+    renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "TimelineItem-avatar",
+        system_arguments[:classes]
+      )
+
+      Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
+    }
 
-    attr_reader :system_arguments
+    # Badge that will be connected to other TimelineItems.
+    #
+    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :badge, "BadgeComponent"
 
-    # @example 75|Default
+    # Body to be rendered to the left of the Badge.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        "TimelineItem-body",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example auto|Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
-    #       <% component.slot(:body) { "Success!" } %>
+    #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.badge(bg: :green, color: :white, icon: :check) %>
+    #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
     #
@@ -36,34 +61,9 @@ module Primer
       avatar.present? || badge.present? || body.present?
     end
 
-    class Avatar < Primer::Slot
-      attr_reader :system_arguments, :alt, :src, :size, :square
-
-      # @param alt [String] Alt text for avatar image.
-      # @param src [String] Src attribute for avatar image.
-      # @param size [Integer] Image size.
-      # @param square [Boolean] Whether to round the edges of the image.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
-        @alt = alt
-        @src = src
-        @size = size
-        @square = square
-
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-avatar",
-          system_arguments[:classes]
-        )
-      end
-    end
-
-    class Badge < Primer::Slot
-      attr_reader :system_arguments, :icon
-
-      # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    # This component is part of `Primer::TimelineItemComponent` and should not be
+    # used as a standalone component.
+    class BadgeComponent < Primer::Component
       def initialize(icon: nil, **system_arguments)
         @icon = icon
 
@@ -74,19 +74,11 @@ module Primer
           system_arguments[:classes]
         )
       end
-    end
-
-    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(
-          "TimelineItem-body",
-          system_arguments[:classes]
-        )
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::OcticonComponent.new(icon: @icon))
+        end
       end
     end
   end