primer_view_components 0.0.21 → 0.0.26

data/app/components/primer/layout_component.rb

@@ -12,13 +12,13 @@ module Primer
     DEFAULT_SIDEBAR_COL = 3
     ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::LayoutComponent.new) do |component| %>
     #     <% component.with(:sidebar) { "Sidebar" } %>
     #     <% component.with(:main) { "Main" } %>
     #   <% end %>
     #
-    # @example auto|Left sidebar
+    # @example Left sidebar
     #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
     #     <% component.with(:sidebar) { "Sidebar" } %>
     #     <% component.with(:main) { "Main" } %>

data/app/components/primer/link_component.rb

@@ -3,10 +3,10 @@
 module Primer
   # Use links for moving from one page to another. The Link component styles anchor tags with default blue styling and hover text-decoration.
   class LinkComponent < Primer::Component
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com")) { "Link" } %>
     #
-    # @example auto|Muted
+    # @example Muted
     #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com", muted: true)) { "Link" } %>
     #
     # @param href [String] URL to be used for the Link

data/app/components/primer/markdown_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use MarkdownComponent to wrap markdown content
   class MarkdownComponent < Primer::Component
-    # @example 5320|Default
+    # @example Default
     #   <%= render(Primer::MarkdownComponent.new) do %>
     #     <p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href="https://github.com">Links </a> should be blue with no underlines (unless hovered over).</p>
     #
@@ -95,17 +95,17 @@ module Primer
     #     <p>And an unordered task list:</p>
     #
     #     <ul>
-    #       <li><input type="checkbox" checked> Create a sample markdown document</li>
-    #       <li><input type="checkbox"> Add task lists to it</li>
-    #       <li><input type="checkbox"> Take a vacation</li>
+    #       <li><input type="checkbox" checked /> Create a sample markdown document</li>
+    #       <li><input type="checkbox"/> Add task lists to it</li>
+    #       <li><input type="checkbox"/> Take a vacation</li>
     #     </ul>
     #
     #     <p>And a "mixed" task list:</p>
     #
     #     <ul>
-    #       <li><input type="checkbox"> Steal underpants</li>
+    #       <li><input type="checkbox"/> Steal underpants</li>
     #       <li>?</li>
-    #       <li><input type="checkbox"> Profit!</li>
+    #       <li><input type="checkbox"/> Profit!</li>
     #     </ul>
     #
     #     And a nested list:
@@ -266,11 +266,11 @@ module Primer
     #
     #     <p>Small images should be shown at their actual size.</p>
     #
-    #     <p><img src="http://placekitten.com/g/300/200/"></p>
+    #     <p><img src="http://placekitten.com/g/300/200/"/></p>
     #
     #     <p>Large images should always scale down and fit in the content container.</p>
     #
-    #     <p><img src="http://placekitten.com/g/1200/800/"></p>
+    #     <p><img src="http://placekitten.com/g/1200/800/"/></p>
     #
     #     <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     #   <% end %>

data/app/components/primer/menu_component.rb

@@ -35,7 +35,7 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::MenuComponent.new) do |c| %>
     #     <% c.heading do %>
     #       Heading

data/app/components/primer/octicon_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
+    view_helper :octicon
+
     include Primer::ClassNameHelper
     include OcticonsHelper
 
@@ -14,13 +16,13 @@ module Primer
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
-    # @example auto|Medium
+    # @example Medium
     #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.

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 auto|Default
+    # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -20,7 +20,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -30,7 +30,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|Caret position
+    # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed

data/app/components/primer/primer.js

@@ -0,0 +1 @@
+import './tab_container_component';

data/app/components/primer/primer.ts

@@ -0,0 +1 @@
+import './tab_container_component'

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

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

data/app/components/primer/progress_bar_component.rb

@@ -3,9 +3,24 @@
 module Primer
   # Use ProgressBar to visualize task completion.
   class ProgressBarComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :item, collection: true, class_name: "Item"
+    # Use the Item slot to add an item to the progress bas
+    #
+    # @param percentage [Integer] The percent complete
+    # @param bg [Symbol] The background color
+    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+    renders_many :items, lambda { |percentage: 0, bg: :green, **system_arguments|
+      percentage = percentage
+      system_arguments = system_arguments
+
+      system_arguments[:tag] = :span
+      system_arguments[:bg] = bg
+      system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
+      system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
 
     SIZE_DEFAULT = :default
 
@@ -16,26 +31,26 @@ module Primer
     }.freeze
 
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.slot(:item, percentage: 25) %>
+    #     <% component.item(percentage: 25) %>
     #   <% end %>
     #
-    # @example auto|Small
+    # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.slot(:item, bg: :blue_4, percentage: 50) %>
+    #     <% component.item(bg: :blue_4, percentage: 50) %>
     #   <% end %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.slot(:item, bg: :red_4, percentage: 75) %>
+    #     <% component.item(bg: :red_4, percentage: 75) %>
     #   <% end %>
     #
-    # @example auto|Multiple items
+    # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.slot(:item, percentage: 10) %>
-    #     <% component.slot(:item, bg: :blue_4, percentage: 20) %>
-    #     <% component.slot(:item, bg: :red_4, percentage: 30) %>
+    #     <% component.item(percentage: 10) %>
+    #     <% component.item(bg: :blue_4, percentage: 20) %>
+    #     <% component.item(bg: :red_4, percentage: 30) %>
     #   <% end %>
     #
     # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
@@ -53,24 +68,5 @@ module Primer
     def render?
       items.any?
     end
-
-    # :nodoc:
-    class Item < Primer::Slot
-      attr_reader :system_arguments
-
-      # @param percentage [Integer] Percentage completion of item.
-      # @param bg [Symbol] Color of item.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(percentage: 0, bg: :green, **system_arguments)
-        @percentage = percentage
-        @system_arguments = system_arguments
-
-        @system_arguments[:tag] = :span
-        @system_arguments[:bg] = bg
-        @system_arguments[:style] =
-          join_style_arguments(@system_arguments[:style], "width: #{@percentage}%;")
-        @system_arguments[:classes] = class_names("Progress-item", @system_arguments[:classes])
-      end
-    end
   end
 end

data/app/components/primer/spinner_component.rb

@@ -15,13 +15,13 @@ module Primer
     DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
 
     #
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::SpinnerComponent.new) %>
     #
-    # @example auto|Small
+    # @example Small
     #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
     #
-    # @example auto|Large
+    # @example Large
     #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
     #
     # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>

data/app/components/primer/state_component.rb

@@ -4,12 +4,19 @@ module Primer
   # Component for rendering the status of an item.
   class StateComponent < Primer::Component
     COLOR_DEFAULT = :default
-    COLOR_MAPPINGS = {
+    NEW_COLOR_MAPPINGS = {
+      open: "State--open",
+      closed: "State--closed",
+      merged: "State--merged"
+    }.freeze
+
+    DEPRECATED_COLOR_MAPPINGS = {
       COLOR_DEFAULT => "",
-      :green => "State--green",
-      :red => "State--red",
-      :purple => "State--purple"
+      :green => "State--open",
+      :red => "State--closed",
+      :purple => "State--merged"
     }.freeze
+    COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
@@ -22,16 +29,16 @@ module Primer
     TAG_DEFAULT = :span
     TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
     #
-    # @example auto|Colors
+    # @example 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" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
     #
-    # @example auto|Sizes
+    # @example Sizes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
     #
@@ -61,5 +68,9 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    def self.status
+      Primer::Component::STATUSES[:beta]
+    end
   end
 end

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

@@ -1,17 +1,5 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if heading.present? %>
-    <%= render Primer::BaseComponent.new(**heading.system_arguments) do %>
-      <%= heading.content %>
-    <% end %>
-  <% end %>
-  <% if actions.present? %>
-    <%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
-      <%= actions.content %>
-    <% end %>
-  <% end %>
-  <% if description.present? %>
-    <%= render Primer::BaseComponent.new(**description.system_arguments) do %>
-      <%= description.content %>
-    <% end %>
-  <% end %>
+  <%= heading %>
+  <%= actions %>
+  <%= description %>
 <% end %>

data/app/components/primer/subhead_component.rb

@@ -3,41 +3,72 @@
 module Primer
   # Use the Subhead component for page headings.
   class SubheadComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :heading, class_name: "Heading"
-    with_slot :actions, class_name: "Actions"
-    with_slot :description, class_name: "Description"
+    # The heading
+    #
+    # @param danger [Boolean] Whether to style the heading as dangerous.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :heading, lambda { |danger: false, **system_arguments|
+      system_arguments[:tag] ||= :div
+      system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        "Subhead-heading",
+        "Subhead-heading--danger": danger
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # Actions
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :actions, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
 
-    # @example auto|Default
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # The description
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :description, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example Default
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.slot(:description) do %>
+    #     <% component.description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|Without border
+    # @example Without border
     #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.slot(:description) do %>
+    #     <% component.description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|With actions
+    # @example With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.slot(:description) do %>
+    #     <% component.description do %>
     #       My Description
     #     <% end %>
-    #     <% component.slot(:actions) do %>
+    #     <% component.actions do %>
     #       <%= render(
     #         Primer::ButtonComponent.new(
     #           tag: :a, href: "http://www.google.com", button_type: :danger
@@ -67,51 +98,8 @@ module Primer
       heading.present?
     end
 
-    # :nodoc:
-    class Heading < ViewComponent::Slot
-      include ClassNameHelper
-
-      attr_reader :system_arguments
-
-      # @param danger [Boolean] Whether to style the heading as dangerous.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(danger: false, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] ||= :div
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "Subhead-heading",
-          "Subhead-heading--danger": danger
-        )
-      end
-    end
-
-    # :nodoc:
-    class Actions < ViewComponent::Slot
-      include ClassNameHelper
-
-      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], "Subhead-actions")
-      end
-    end
-
-    # :nodoc:
-    class Description < ViewComponent::Slot
-      include ClassNameHelper
-
-      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], "Subhead-description")
-      end
+    def self.status
+      Primer::Component::STATUSES[:beta]
     end
   end
 end