primer_view_components 0.0.50 → 0.0.54

data/app/components/primer/beta/breadcrumbs.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Breadcrumb` 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 Breadcrumbs < Primer::Component
+      status :beta
+
+      # _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, "Item"
+
+      # @example Basic
+      #   <%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
+      #     <% 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 %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :nav
+        @system_arguments[:aria] = { label: "Breadcrumb" }
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Primer::Beta::Breadcrumbs` and should not be
+      # used as a standalone component.
+      class Item < Primer::Component
+        def initialize(href: nil, selected: false, **system_arguments)
+          @href = href
+          @system_arguments = system_arguments
+
+          @href = nil if selected
+          @system_arguments[:tag] = :li
+          @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
+end

data/app/components/primer/beta/truncate.html.erb

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

data/app/components/primer/beta/truncate.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Truncate` to shorten overflowing text with an ellipsis.
+    class Truncate < Primer::Component
+      status :beta
+
+      # Text slot used for the truncated text.
+      #
+      # @param priority [Boolean] if true, the text will be given priority
+      # @param expandable [Boolean] if true, the text will expand on hover or focus
+      # @param max_width [Integer] if provided, the text will be truncated at a maximum width
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "TruncateText"
+
+      # @example Default
+      #   <%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(font_weight: :bold) do %>
+      #       <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Advanced multiple items
+      #   <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
+      #     <% component.item(tag: :li) do %>primer<% end %>
+      #     <% component.item(tag: :li, priority: true) do %>/ css<% end %>
+      #     <% component.item(tag: :li) do %>/ Issues<% end %>
+      #     <% component.item(tag: :li) do %>/ #123 —<% end %>
+      #     <% component.item(tag: :li, priority: true) do %>
+      #       Visual bug on primer.style found in lists
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Expand on hover or focus
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #   <% end %>
+      #
+      # @example Max widths
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @example Max widths on new lines
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = system_arguments[:tag] || :span
+        @system_arguments[:classes] = class_names(
+          "Truncate",
+          system_arguments[:classes]
+        )
+      end
+
+      def before_render
+        return unless content.present? && items.empty?
+
+        item { content }
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Primer::Beta::Truncate` and should not be
+      # used as a standalone component.
+      class TruncateText < Primer::Component
+        def initialize(priority: false, expandable: false, max_width: nil, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = system_arguments[:tag] || :span
+          @system_arguments[:classes] = class_names(
+            "Truncate-text",
+            "Truncate-text--primary": priority,
+            "Truncate-text--expandable": expandable
+          )
+
+          @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/border_box_component.rb

@@ -13,6 +13,14 @@ module Primer
     }.freeze
     PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
 
+    DEFAULT_ROW_SCHEME = :default
+    ROW_SCHEME_MAPPINGS = {
+      DEFAULT_ROW_SCHEME => "",
+      :neutral => "Box-row--gray",
+      :info => "Box-row--blue",
+      :warning => "Box-row--yellow"
+    }.freeze
+
     # Optional Header.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -54,11 +62,13 @@ module Primer
 
     # Use Rows to add rows with borders and maintain the same padding.
     #
+    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::BorderBoxComponent::ROW_SCHEME_MAPPINGS.keys) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :rows, lambda { |**system_arguments|
+    renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
       system_arguments[:tag] = :li
       system_arguments[:classes] = class_names(
         "Box-row",
+        ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
         system_arguments[:classes]
       )
 
@@ -102,6 +112,22 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Row colors
+    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
+    #     <% component.row do %>
+    #       Default
+    #     <% end %>
+    #     <% component.row(scheme: :neutral) do %>
+    #       Neutral
+    #     <% end %>
+    #     <% component.row(scheme: :info) do %>
+    #       Info
+    #     <% end %>
+    #     <% component.row(scheme: :warning) do %>
+    #       Warning
+    #     <% end %>
+    #   <% end %>
+    #
     # @param padding [Symbol] <%= one_of(Primer::BorderBoxComponent::PADDING_MAPPINGS.keys) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(padding: DEFAULT_PADDING, **system_arguments)

data/app/components/primer/clipboard_copy.rb

@@ -6,7 +6,7 @@ module Primer
   # @accessibility
   #   Always set an accessible label to help the user interact with the component.
   class ClipboardCopy < Primer::Component
-    status :alpha
+    status :beta
 
     # @example Default
     #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>

data/app/components/primer/dropdown.rb

@@ -28,7 +28,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -45,7 +45,7 @@ module Primer
     #         Dropdown
     #       <% end %>
     #
-    #       <%= c.menu(header: "Options") do |menu|
+    #       <% c.menu(header: "Options") do |menu|
     #         menu.item { "Item 1" }
     #         menu.item { "Item 2" }
     #         menu.item(divider: true)
@@ -63,7 +63,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options", direction: :s) do |menu|
+    #     <% c.menu(header: "Options", direction: :s) do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -77,7 +77,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -91,7 +91,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -105,7 +105,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(as: :list, header: "Options") do |menu|
+    #     <% c.menu(as: :list, header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item(divider: true)
@@ -120,7 +120,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item(tag: :button) { "Item 1" }
     #       menu.item(classes: "custom-class") { "Item 2" }
     #       menu.item { "Item 3" }

data/app/components/primer/icon_button.rb

@@ -42,7 +42,7 @@ module Primer
     # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::BorderBoxComponent) %>. If `true`, the button will have the `Box-btn-octicon` class.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(scheme: DEFAULT_SCHEME, icon:, box: false, **system_arguments)
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
       @icon = icon
 
       @system_arguments = system_arguments

data/app/components/primer/navigation/tab_component.rb

@@ -3,7 +3,7 @@
 module Primer
   module Navigation
     # This component is part of navigation components such as `Primer::TabNavComponent`
-    # and `Primer::UnderlineNavComponent` and should not be used by itself.
+    # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
     #
     # @accessibility
     #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
@@ -14,7 +14,7 @@ module Primer
       # Panel controlled by the Tab. This will not render anything in the tab itself.
       # It will provide a accessor for the Tab's parent to call and render the panel
       # content in the appropriate place.
-      # Refer to `UnderlineNavComponent` and `TabNavComponent` implementations for examples.
+      # Refer to `UnderlineNav` and `TabNavComponent` implementations for examples.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :panel, lambda { |**system_arguments|
@@ -111,19 +111,21 @@ module Primer
 
         @system_arguments = system_arguments
         @id = @system_arguments[:id]
+        @wrapper_arguments = wrapper_arguments
 
         if with_panel || @system_arguments[:tag] == :button
           @system_arguments[:tag] = :button
           @system_arguments[:type] = :button
           @system_arguments[:role] = :tab
           panel_id(panel_id)
+          # https://www.w3.org/TR/wai-aria-practices/#presentation_role
+          @wrapper_arguments[:role] = :presentation
         else
           @system_arguments[:tag] = :a
         end
 
-        @wrapper_arguments = wrapper_arguments
         @wrapper_arguments[:tag] = :li
-        @wrapper_arguments[:display] ||= :flex
+        @wrapper_arguments[:display] ||= :inline_flex
 
         return unless @selected
 
@@ -142,7 +144,7 @@ module Primer
         end
 
         render(Primer::BaseComponent.new(**@wrapper_arguments)) do
-          yield
+          yield if block_given?
         end
       end
 

data/app/components/primer/progress_bar_component.rb

@@ -11,9 +11,6 @@ module Primer
     # @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: :success_inverse, **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}%;")

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

@@ -1,4 +1,4 @@
-<%= wrapper(**@wrapper_arguments) do %>
+<%= wrapper(with_panel: @with_panel, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= extra if @align == :left %>
 

data/app/components/primer/tab_nav_component.rb

@@ -40,7 +40,7 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
     #     <% c.tab(href: "#") { "Tab 2" } %>
     #     <% c.tab(href: "#") { "Tab 3" } %>
     #   <% end %>

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -48,6 +48,7 @@ module Primer
       end
     end
 
+    # rubocop:disable Style/OptionalBooleanParameter
     def fetch_or_fallback_boolean(given_value, fallback = false)
       if [true, false].include?(given_value)
         given_value
@@ -55,6 +56,7 @@ module Primer
         fallback
       end
     end
+    # rubocop:enable Style/OptionalBooleanParameter
 
     def silence_deprecations?
       Rails.application.config.primer_view_components.silence_deprecations

data/app/lib/primer/tabbed_component_helper.rb

@@ -20,11 +20,11 @@ module Primer
       with_panel ? :div : :nav
     end
 
-    def wrapper(**system_arguments)
-      return yield unless @with_panel
+    def wrapper(with_panel:, **system_arguments)
+      return yield unless with_panel
 
       render Primer::TabContainerComponent.new(**system_arguments) do
-        yield
+        yield if block_given?
       end
     end
 

data/app/lib/primer/underline_nav_helper.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Primer
+  # Helper to share tab validation logic between components.
+  # The component will raise an error if there are 0 or 2+ selected tabs.
+  module UnderlineNavHelper
+    extend ActiveSupport::Concern
+
+    ALIGN_DEFAULT = :left
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+    ACTIONS_TAG_DEFAULT = :div
+    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+    def underline_nav_classes(classes, align)
+      class_names(
+        classes,
+        "UnderlineNav",
+        "UnderlineNav--right" => align == :right
+      )
+    end
+
+    def underline_nav_body_classes(classes)
+      class_names(
+        "UnderlineNav-body",
+        classes,
+        "list-style-none"
+      )
+    end
+
+    def underline_nav_action_classes(classes)
+      class_names("UnderlineNav-actions", classes)
+    end
+
+    def underline_nav_tab_classes(classes)
+      class_names(
+        "UnderlineNav-item",
+        classes
+      )
+    end
+  end
+end