primer_view_components 0.0.34 → 0.0.39

data/app/components/primer/octicon_component.rb

@@ -1,14 +1,12 @@
 # frozen_string_literal: true
 
+require "octicons"
+
 module Primer
-  # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
+  # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
     status :beta
 
-    include ClassNameHelper
-    include TestSelectorHelper
-    include OcticonsHelper
-
     SIZE_DEFAULT = :small
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
@@ -27,24 +25,47 @@ module Primer
     # @example Large
     #   <%= render(Primer::OcticonComponent.new("x", size: :large)) %>
     #
-    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, **system_arguments)
-      @icon = icon_name || icon
+      icon_key = icon_name || icon
+      cache_key = [icon_key, size, system_arguments.slice(:height, :width)].join("_")
+
       @system_arguments = system_arguments
+      @system_arguments[:tag] = :svg
+      @system_arguments[:aria] ||= {}
 
-      @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
-      @system_arguments[:height] ||= SIZE_MAPPINGS[size]
+      if @system_arguments[:aria][:label] || @system_arguments[:"aria-label"]
+        @system_arguments[:role] = "img"
+      else
+        @system_arguments[:aria][:hidden] = true
+      end
 
-      # Filter out classify options to prevent them from becoming invalid html attributes.
-      # Note height and width are both classify options and valid html attributes.
-      octicon_helper_options = @system_arguments.slice(:height, :width)
-      @system_arguments = add_test_selector(@system_arguments).except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
+      if (cache_icon = Primer::Octicon::Cache.read(cache_key))
+        @icon = cache_icon
+      else
+        # Filter out classify options to prevent them from becoming invalid html attributes.
+        # Note height and width are both classify options and valid html attributes.
+        octicon_options = {
+          height: SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        }.merge(@system_arguments.slice(:height, :width))
+
+        @icon = Octicons::Octicon.new(icon_key, octicon_options)
+        Primer::Octicon::Cache.set(cache_key, @icon)
+      end
+
+      @system_arguments[:classes] = class_names(
+        @icon.options[:class],
+        @system_arguments[:classes]
+      )
+      @system_arguments.merge!(@icon.options.except(:class, :'aria-hidden'))
     end
 
     def call
-      octicon(@icon, { **@system_arguments })
+      render(Primer::BaseComponent.new(**@system_arguments)) { @icon.path.html_safe } # rubocop:disable Rails/OutputSafety
     end
+
+    Primer::Octicon::Cache.preload!
   end
 end

data/app/components/primer/popover_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use popovers to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+  # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
   #
   # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
   class PopoverComponent < Primer::Component

data/app/components/primer/primer.d.ts

@@ -1,3 +1,4 @@
-import './auto_complete_component';
+import './auto_complete/auto_complete';
+import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,3 +1,4 @@
-import './auto_complete_component';
+import './auto_complete/auto_complete';
+import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1,3 +1,4 @@
-import './auto_complete_component'
+import './auto_complete/auto_complete'
+import './clipboard_copy_component'
 import './tab_container_component'
 import './time_ago_component'

data/app/components/primer/progress_bar_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use ProgressBar to visualize task completion.
+  # Use `ProgressBar` to visualize task completion.
   class ProgressBarComponent < Primer::Component
     status :beta
 

data/app/components/primer/spinner_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Primer::SpinnerComponent to let users know that content is being loaded.
+  # Use `Spinner` to let users know that content is being loaded.
   class SpinnerComponent < Primer::Component
     status :beta
 

data/app/components/primer/state_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Component for rendering the status of an item.
+  # Use `State` for rendering the status of an item.
   class StateComponent < Primer::Component
     status :beta
 
@@ -29,7 +29,7 @@ module Primer
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
+    TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
 
     # @example Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>

data/app/components/primer/subhead_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use the Subhead component for page headings.
+  # Use `Subhead` for page headings.
   class SubheadComponent < Primer::Component
     status :beta
 

data/app/components/primer/tab_container_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TabContainer to create tabbed content with keyboard support. This component does not add any styles.
+  # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
   # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::TabNavComponent) %>.
   #
   # This component requires javascript.

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

@@ -1,10 +1,10 @@
 <%= wrapper do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <nav role="tablist" aria-label="<%= @aria_label %>" class="tabnav-tabs">
+    <%= render Primer::BaseComponent.new(**@body_arguments) do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
-    </nav>
+    <% end %>
   <% end %>
 
   <% if @with_panel %>

data/app/components/primer/tab_nav_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
+  # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
   class TabNavComponent < Primer::Component
     include Primer::TabbedComponentHelper
 
@@ -14,18 +14,23 @@ module Primer
         "tabnav-tab",
         system_arguments[:classes]
       )
-      Primer::Navigation::TabComponent.new(selected: selected, with_panel: @with_panel, **system_arguments)
+
+      Primer::Navigation::TabComponent.new(
+        selected: selected,
+        with_panel: @with_panel,
+        **system_arguments
+      )
     }
 
     # @example Default
-    #   <%= render(Primer::TabNavComponent.new) do |c| %>
+    #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
     #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
     #     <% c.tab(href: "#") { "Tab 2" } %>
     #     <% c.tab(href: "#") { "Tab 3" } %>
     #   <% end %>
     #
     # @example With icons and counters
-    #   <%= render(Primer::TabNavComponent.new) do |component| %>
+    #   <%= render(Primer::TabNavComponent.new(label: "With icons and counters")) do |component| %>
     #     <% component.tab(href: "#", selected: true) do |t| %>
     #       <% t.icon(icon: :star) %>
     #       <% t.text { "Item 1" } %>
@@ -42,7 +47,7 @@ module Primer
     #   <% end %>
     #
     # @example With panels
-    #   <%= render(Primer::TabNavComponent.new(with_panel: true)) do |c| %>
+    #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
     #     <% c.tab(selected: true) do |t| %>
     #       <% t.text { "Tab 1" } %>
     #       <% t.panel do %>
@@ -63,19 +68,28 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @param aria_label [String] Used to set the `aria-label` on the top level `<nav>` element.
+    # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
     # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(aria_label: nil, with_panel: false, **system_arguments)
-      @aria_label = aria_label
+    def initialize(label:, with_panel: false, **system_arguments)
       @with_panel = with_panel
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
 
+      @system_arguments[:tag] ||= :div
       @system_arguments[:classes] = class_names(
         "tabnav",
         system_arguments[:classes]
       )
+
+      @body_arguments = {
+        tag: navigation_tag(with_panel),
+        classes: "tabnav-tabs",
+        aria: {
+          label: label
+        }
+      }
+
+      @body_arguments[:role] = :tablist if @with_panel
     end
   end
 end

data/app/components/primer/text_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # The Text component is a wrapper component that will apply typography styles to the text inside.
+  # `Text` is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
     status :beta
 

data/app/components/primer/time_ago_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
+  # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
   class TimeAgoComponent < Primer::Component
     status :beta
 

data/app/components/primer/timeline_item_component.rb

@@ -19,7 +19,7 @@ module Primer
 
     # Badge that will be connected to other TimelineItems.
     #
-    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :badge, "BadgeComponent"
 

data/app/components/primer/tooltip_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
+  # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class TooltipComponent < Primer::Component
     DIRECTION_DEFAULT = :n
     ALIGN_DEFAULT = :default

data/app/components/primer/{truncate_component.rb → truncate.rb}

@@ -1,21 +1,23 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TruncateComponent to shorten overflowing text with an ellipsis.
-  class TruncateComponent < Primer::Component
+  # Use `Truncate` to shorten overflowing text with an ellipsis.
+  class Truncate < Primer::Component
+    status :beta
+
     # @example Default
     #   <div class="col-2">
-    #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
     #   </div>
     #
     # @example Inline
-    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
     #
     # @example Expandable
-    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
     #
     # @example Custom size
-    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
     #
     # @param inline [Boolean] Whether the element is inline (or inline-block).
     # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.

data/app/components/primer/underline_nav_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use the UnderlineNav component to style navigation with a minimal
+  # Use `UnderlineNav` to style navigation with a minimal
   # underlined selected state, typically used for navigation placed at the top
   # of the page.
   class UnderlineNavComponent < Primer::Component
@@ -10,6 +10,9 @@ module Primer
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
+    BODY_TAG_DEFAULT = :div
+    BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
+
     # Use the tabs to list navigation items. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
     # @param selected [Boolean] Whether the tab is selected.
@@ -19,7 +22,9 @@ module Primer
         "UnderlineNav-item",
         system_arguments[:classes]
       )
+
       Primer::Navigation::TabComponent.new(
+        list: list?,
         selected: selected,
         with_panel: @with_panel,
         icon_classes: "UnderlineNav-octicon",
@@ -38,7 +43,7 @@ module Primer
     }
 
     # @example Default
-    #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default")) do |component| %>
     #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
     #     <% component.tab(href: "#") { "Item 2" } %>
     #     <% component.actions do %>
@@ -47,7 +52,7 @@ module Primer
     #   <% end %>
     #
     # @example With icons and counters
-    #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "With icons and counters")) do |component| %>
     #     <% component.tab(href: "#", selected: true) do |t| %>
     #       <% t.icon(icon: :star) %>
     #       <% t.text { "Item 1" } %>
@@ -67,7 +72,20 @@ module Primer
     #   <% end %>
     #
     # @example Align right
-    #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
+    #   <%= render(Primer::UnderlineNavComponent.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 As a list
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "As a list", body_arguments: { tag: :ul })) do |component| %>
     #     <% component.tab(href: "#", selected: true) do |t| %>
     #       <% t.text { "Item 1" } %>
     #     <% end %>
@@ -80,7 +98,7 @@ module Primer
     #   <% end %>
     #
     # @example With panels
-    #   <%= render(Primer::UnderlineNavComponent.new(with_panel: true)) do |component| %>
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
     #     <% component.tab(selected: true) do |t| %>
     #       <% t.text { "Item 1" } %>
     #       <% t.panel do %>
@@ -98,33 +116,47 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @param label [String] The `aria-label` on top level `<nav>` element.
     # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
     # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::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(with_panel: false, align: ALIGN_DEFAULT, body_classes: "", **system_arguments)
+    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, **system_arguments)
       @with_panel = with_panel
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
 
       @system_arguments = system_arguments
-      @system_arguments[:tag] = :nav
-      @system_arguments[:role] = :tablist
+      @system_arguments[:tag] = navigation_tag(with_panel)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "UnderlineNav",
         "UnderlineNav--right" => @align == :right
       )
 
-      @body_arguments = {
-        tag: :div,
-        classes: class_names(
-          "UnderlineNav-body",
-          body_classes
-        )
-      }
+      @body_arguments = body_arguments
+      @body_tag = fetch_or_fallback(BODY_TAG_OPTIONS, body_arguments[:tag]&.to_sym, BODY_TAG_DEFAULT)
+
+      @body_arguments[:tag] = @body_tag
+      @body_arguments[:classes] = class_names(
+        "UnderlineNav-body",
+        @body_arguments[:classes],
+        "list-style-none" => list?
+      )
+
+      if with_panel
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      else
+        @system_arguments[:"aria-label"] = label
+      end
     end
 
     private
 
+    def list?
+      @body_tag == :ul
+    end
+
     def body
       Primer::BaseComponent.new(**@body_arguments)
     end