primer_view_components 0.0.51 → 0.0.55

data/app/components/primer/alpha/underline_nav.rb

@@ -0,0 +1,137 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlineNav` to style navigation links with a minimal
+    # underlined selected state, typically placed at the top
+    # of the page.
+    # For panel navigation, use <%= link_to_component(Primer::Alpha::UnderlinePanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
+    #     implicit landmark role of `navigation` which should be reserved for main links.
+    #     For all other set of links, set tag to `:div`.
+    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #     accessibility considerations.
+    class UnderlineNav < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Use the tabs to list page links.
+      #
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |selected: false, **system_arguments|
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+        Primer::Navigation::TabComponent.new(
+          list: true,
+          selected: selected,
+          icon_classes: "UnderlineNav-octicon",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default with `<nav>`
+      #   @description
+      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
+      #       <% component.tab(href: "#", selected: true) { "Item 1" } %>
+      #       <% component.tab(href: "#") { "Item 2" } %>
+      #       <% component.actions do %>
+      #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With `<div>`
+      #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
+      #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
+      #     <% component.tab(href: "#") { "Item 2" } %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
+      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #       <% t.icon(icon: :star) %>
+      #       <% t.text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.icon(icon: :star) %>
+      #       <% t.text { "Item 2" } %>
+      #       <% t.counter(count: 10) %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.text { "Item 3" } %>
+      #       <% t.counter(count: 10) %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Align right
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
+      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #       <% t.text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.text { "Item 2" } %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.tab(href: "#") { "Tab 2" } %>
+      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, tag: TAG_DEFAULT, align: ALIGN_DEFAULT, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        aria_label_for_page_nav(label)
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/{underline_nav_component.html.erb → alpha/underline_panels.html.erb}

@@ -1,23 +1,18 @@
-<%= wrapper(**@wrapper_arguments) do %>
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>
     <% end %>
-
     <%= render body do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
-
     <% if @align == :left %>
       <%= actions %>
     <% end %>
   <% end %>
-
-  <% if @with_panel %>
-    <% tabs.each do |tab| %>
-      <%= tab.panel %>
-    <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
   <% end %>
 <% end %>

data/app/components/primer/alpha/underline_panels.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.
+    class UnderlinePanels < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      #
+      # @param id [String] Unique ID of tab.
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |id:, selected: false, **system_arguments|
+        system_arguments[:id] = id
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+
+        Primer::Navigation::TabComponent.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          icon_classes: "UnderlineNav-octicon",
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
+      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #       <% t.text { "Tab 1" } %>
+      #       <% t.panel do %>
+      #         Panel 1
+      #       <% end %>
+      #     <% end %>
+      #     <% component.tab(id: "tab-2") do |t| %>
+      #       <% t.text { "Tab 2" } %>
+      #       <% t.panel do %>
+      #         Panel 2
+      #       <% end %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/base_component.rb

@@ -65,7 +65,7 @@ module Primer
     # | :- | :- | :- |
     # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBackgroundColors::OPTIONS, lower: true) %> |
     # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
-    # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
+    # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::Utilities.mappings(:color)) %> |
     #
     # ## Flex
     #

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

@@ -21,23 +21,23 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example Align right
       #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example With tooltip
       #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>

data/app/components/primer/{breadcrumb_component.html.erb → beta/breadcrumbs.html.erb}

@@ -1,6 +1,7 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <ol>
-    <% items.each do |item| %>
+    <% items.each_with_index do |item, index| %>
+      <% item.selected = index == items.length - 1 %>
       <%= item %>
     <% end %>
   </ol>

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Breadcrumbs` to display page hierarchy.
+    class Breadcrumbs < Primer::Component
+      status :beta
+
+      # @param href [String] The URL to link to.
+      # @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(href: "/about/team") 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
+        attr_accessor :selected, :href
+
+        def initialize(href:, **system_arguments)
+          @href = href
+          @system_arguments = system_arguments
+          @selected = false
+
+          @system_arguments[:tag] = :li
+          @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
+        end
+
+        def call
+          link_arguments = { href: @href }
+
+          if selected
+            link_arguments[:"aria-current"] = "page"
+            link_arguments[:classes] = "breadcrumb-item-selected"
+            @system_arguments[:classes] = "#{@system_arguments[:classes]} breadcrumb-item-selected"
+          end
+
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            render(Primer::LinkComponent.new(**link_arguments)) { content }
+          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