primer_view_components 0.0.23 → 0.0.28

data/app/components/primer/box_component.rb

@@ -3,11 +3,13 @@
 module Primer
   # A basic wrapper component for most layout related needs.
   class BoxComponent < Primer::Component
+    status :stable
+
     # @example Default
     #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
     #
     # @example Color and padding
-    #   <%= render(Primer::BoxComponent.new(bg: :gray, p: 3)) { "Hello world" } %>
+    #   <%= render(Primer::BoxComponent.new(bg: :tertiary, p: 3)) { "Hello world" } %>
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
@@ -18,9 +20,5 @@ 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.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,21 @@
 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
+    status :beta
 
-    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 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 +31,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 +43,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/component.rb

@@ -9,19 +9,7 @@ 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
+    include Status::Dsl
   end
 end

data/app/components/primer/counter_component.rb

@@ -3,19 +3,30 @@
 module Primer
   # Use Primer::CounterComponent to add a count to navigational elements and buttons.
   class CounterComponent < Primer::Component
+    status :beta
+
     DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {
-      DEFAULT_SCHEME => "Counter",
-      :gray => "Counter Counter--gray",
-      :light_gray => "Counter Counter--gray-light"
+      DEFAULT_SCHEME => "",
+      :primary => "Counter--primary",
+      :secondary => "Counter--secondary",
+      # deprecated
+      :gray => "Counter--primary",
+      :light_gray => "Counter--secondary"
     }.freeze
+    DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
+    SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
 
     #
     # @example Default
     #   <%= render(Primer::CounterComponent.new(count: 25)) %>
     #
+    # @example Schemes
+    #   <%= render(Primer::CounterComponent.new(count: 25, scheme: :primary)) %>
+    #   <%= render(Primer::CounterComponent.new(count: 25, scheme: :secondary)) %>
+    #
     # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
-    # @param scheme [Symbol] Color scheme. One of `SCHEME_MAPPINGS.keys`.
+    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::CounterComponent::SCHEME_OPTIONS) %>
     # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
     # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
     # @param text [String] Text to display instead of count.
@@ -41,8 +52,9 @@ module Primer
       @system_arguments[:title] = title
       @system_arguments[:tag] = :span
       @system_arguments[:classes] = class_names(
+        "Counter",
         @system_arguments[:classes],
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)]
       )
       @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
     end
@@ -51,10 +63,6 @@ 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.rb

@@ -4,6 +4,7 @@ module Primer
   # Use DetailsComponent to reveal content after clicking a button.
   class DetailsComponent < Primer::Component
     include ViewComponent::SlotableV2
+    status :beta
 
     NO_OVERLAY = :none
     OVERLAY_MAPPINGS = {
@@ -16,12 +17,11 @@ module Primer
     #
     # @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
+    renders_one :summary, lambda { |button: true, **system_arguments|
       system_arguments[:tag] = :summary
       system_arguments[:role] = "button"
 
-      Primer::BaseComponent.new(**system_arguments) unless button
+      return Primer::BaseComponent.new(**system_arguments) unless button
 
       Primer::ButtonComponent.new(**system_arguments)
     }

data/app/components/primer/dropdown_menu_component.rb

@@ -5,6 +5,8 @@ module Primer
   # They're great for instances where you don't need the full power (and code)
   # of the select menu.
   class DropdownMenuComponent < Primer::Component
+    status :deprecated
+
     SCHEME_DEFAULT = :default
     SCHEME_MAPPINGS = {
       SCHEME_DEFAULT => "",
@@ -14,10 +16,6 @@ module Primer
     DIRECTION_DEFAULT = :se
     DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
 
-    def self.status
-      STATUSES[:deprecated]
-    end
-
     # @example With a header
     #   <div>
     #     <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>

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

@@ -1,9 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= primer(:octicon, 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">
-      <%= primer(:octicon, icon: "x") %>
+      <%= primer_octicon icon: "x" %>
     </button>
   <% end %>
 

data/app/components/primer/flash_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Use the Flash component to inform users of successful or pending actions.
   class FlashComponent < Primer::Component
+    status :beta
+
     include ViewComponent::SlotableV2
 
     # Optional action content showed on the right side of the component.
@@ -64,9 +66,5 @@ module Primer
       )
       @system_arguments[:mb] ||= spacious ? 4 : nil
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

data/app/components/primer/flex_component.rb

@@ -36,31 +36,31 @@ module Primer
     ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
     # @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" } %>
+    #   <%= render(Primer::FlexComponent.new(bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @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" } %>
+    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% 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" } %>
+    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @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" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :tertiary)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>

data/app/components/primer/heading_component.rb

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

data/app/components/primer/label_component.rb

@@ -3,16 +3,21 @@
 module Primer
   # Use labels to add contextual metadata to a design.
   class LabelComponent < Primer::Component
+    status :beta
+
     SCHEME_MAPPINGS = {
       primary: "Label--primary",
       secondary: "Label--secondary",
       info: "Label--info",
       success: "Label--success",
       warning: "Label--warning",
-      danger: "Label--danger"
+      danger: "Label--danger",
+      # deprecated
+      orange: "Label--orange",
+      purple: "Label--purple"
     }.freeze
-
-    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
+    DEPRECATED_SCHEME_OPTIONS = [:orange, :purple].freeze
+    SCHEME_OPTIONS = ([*SCHEME_MAPPINGS.keys, nil] - DEPRECATED_SCHEME_OPTIONS).freeze
 
     VARIANT_MAPPINGS = {
       large: "Label--large",
@@ -39,13 +44,12 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(title:, scheme: nil, variant: nil, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:bg] = :blue if scheme.nil?
       @system_arguments[:tag] ||= :span
       @system_arguments[:title] = title
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, deprecated_values: DEPRECATED_SCHEME_OPTIONS)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
       )
     end
@@ -53,9 +57,5 @@ 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/layout_component.html.erb

@@ -1,17 +1,11 @@
 <%= render(Primer::FlexComponent.new(**@system_arguments)) do %>
   <% if @side == :left %>
-    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
-      <%= sidebar %>
-    <% end %>
+    <%= sidebar %>
   <% end %>
 
-  <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @main_col] : @main_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
-    <%= main %>
-  <% end %>
+  <%= main %>
 
   <% if @side == :right %>
-    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)) do %>
-      <%= sidebar %>
-    <% end %>
+    <%= sidebar %>
   <% end %>
 <% end %>

data/app/components/primer/layout_component.rb

@@ -3,7 +3,32 @@
 module Primer
   # Use Layout to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
-    with_content_areas :main, :sidebar
+    include ViewComponent::SlotableV2
+
+    # The main content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :main, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @main_col] : @main_col)
+      system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+
+      Primer::BaseComponent.new(tag: :div, **system_arguments)
+    }
+
+    # The sidebar content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :sidebar, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)
+
+      if @side == :left
+        system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+      end
+
+      Primer::BaseComponent.new(tag: :div, **system_arguments)
+    }
 
     DEFAULT_SIDE = :right
     ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
@@ -14,14 +39,14 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::LayoutComponent.new) do |component| %>
-    #     <% component.with(:sidebar) { "Sidebar" } %>
-    #     <% component.with(:main) { "Main" } %>
+    #     <% component.sidebar { "Sidebar" } %>
+    #     <% component.main { "Main" } %>
     #   <% end %>
     #
     # @example Left sidebar
     #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
-    #     <% component.with(:sidebar) { "Sidebar" } %>
-    #     <% component.with(:main) { "Main" } %>
+    #     <% component.sidebar { "Sidebar" } %>
+    #     <% component.main { "Main" } %>
     #   <% end %>
     #
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.

data/app/components/primer/link_component.rb

@@ -3,22 +3,50 @@
 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
+    status :beta
+
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :primary => "Link--primary",
+      :secondary => "Link--secondary"
+    }.freeze
+
+    DEFAULT_TAG = :a
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
     # @example Default
-    #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com")) { "Link" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#")) { "Link" } %>
     #
     # @example Muted
-    #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com", muted: true)) { "Link" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
+    #
+    # @example Variants
+    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
+    #
+    # @example Without underline
+    #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
+    #
+    # @example Span as link
+    #   <%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>
     #
-    # @param href [String] URL to be used for the Link
-    # @param muted [Boolean] Uses light gray for Link color, and blue on hover
+    # @param tag [String]  <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
+    # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
+    # @param variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
+    # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
+    # @param underline [Boolean] Whether or not to underline the link.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(href:, muted: false, **system_arguments)
+    def initialize(href: nil, tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] = :a
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:href] = href
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "muted-link" => fetch_or_fallback_boolean(muted, false)
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        "Link" => tag == :span,
+        "Link--muted" => muted,
+        "no-underline" => !underline
       )
     end
 
@@ -26,8 +54,8 @@ module Primer
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
 
-    def self.status
-      Primer::Component::STATUSES[:beta]
+    def before_render
+      raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
     end
   end
 end