primer_view_components 0.0.28 → 0.0.33

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 842de1db349eaaf6956078181ab990b4cb9e7162da56b2736743b828a71ab981
-  data.tar.gz: 17ea0d2942a359a138cee586627b270bf9e4ba33925923a13462b928e51e749b
+  metadata.gz: bc1d93aedd6cfbf47bbea33d144f7dfbad5fdd3297acc343952a4c5853a27423
+  data.tar.gz: 952bfd2071bf837067f9970952d5348c372453e891cdcec911fc8e4480166974
 SHA512:
-  metadata.gz: 79c7733109048742731ae0d1f9ba137ecd9aa4818d1287784d289d6ae09e7ee5a34f3a3c5bdde533aba12427f236ce49cedb2730e6f4d8bd9354d958c6a6e24e
-  data.tar.gz: d8c547b9476ed43e7a586e884e795ea5f4ba11f70867c211db9a7ddf528b4bd81e7b65fa4bacb74fbb79816233083ccf5ebea91d04d0dd6b47dd6358e3d5ccac
+  metadata.gz: 69d0b38e3b03833e5656b1e54defff8336e46e3e1d571815fb62db27c6759e8637ba9357d74706e3495f49d1a2b30073f2b9f8c35c0594f7d750904473b52611
+  data.tar.gz: 2d18d853748fbfc3998077cb82dde8f42d84e0fb1e832461bf2197f9b2200972eb9811c12f28f874a7416896c1075815bb823a62a25a2c40f91b9766d0ce99a7

data/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 ## main
 
+## 0.0.33
+
+* Remove `TabbedComponent` validation requiring a tab to be selected.
+
+    *Manuel Puyol*
+
+## 0.0.32
+
+* Allow passing the icon name as a positional argument to `OcticonComponent`.
+
+    *Manuel Puyol*
+
+* Promote `TimeAgoComponent` to beta.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Update `TabNav#tab` API to accept the tab content as a block and panel content as a slot.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Update `UnderlineNavComponent` API be more strict and support `TabContainer`.
+
+    *Manuel Puyol*
+
+## 0.0.31
+
+* Fix `Popover` bug where body was only returning the last line of the HTML.
+
+    *Manuel Puyol, Blake Williams*
+
+## 0.0.30
+
+* Make `color:`, `bg:` and `border_color:` accept string values.
+
+    *Manuel Puyol*
+
+## 0.0.29
+
+* Add `primer_time_ago` helper.
+
+    *Simon Taranto*
+
+* Add `silence_deprecations` config to supress deprecation warnings.
+
+    *Manuel Puyol*
+
 ## 0.0.28
 
 * Update `CounterComponent` to accept functional schemes `primary` and `secondary`. Deprecate `gray` and `light_gray` schemes.

data/README.md

@@ -1,12 +1,12 @@
 <p align="center">
-  <img width="300px" src="/static/assets/readme-components.png">
+  <img width="300px" src="/static/assets/view-components.svg">
 </p>
 
 <h1 align="center">Primer ViewComponents</h1>
 
 <p align="center">ViewComponents for the Primer Design System</p>
 
-_Note: This library is in pre-release development and should not be considered stable._
+_Note: This library is under active pre-1.0 development. Breaking changes are likely in patch releases._
 
 ## Documentation
 

data/app/components/primer/auto_complete_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use AutoComplete to populate input values from server search results.
   class AutoCompleteComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     DEFAULT_INPUT_TYPE = :text
     INPUT_TYPE_OPTIONS = [DEFAULT_INPUT_TYPE, :search].freeze
 

data/app/components/primer/auto_complete_item_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use AutoCompleteItem to list results of an auto-completed search.
   class AutoCompleteItemComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # @example Default
     #   <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>
     #     Selected

data/app/components/primer/avatar_stack_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use AvatarStack to stack multiple avatars together.
   class AvatarStackComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 

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

@@ -2,7 +2,7 @@
   <% if spinner.present? %>
     <%= spinner %>
   <% elsif @icon.present? %>
-    <%= primer_octicon icon: @icon, size: @icon_size, classes: "blankslate-icon" %>
+    <%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
   <% elsif @image_src.present? && @image_alt.present? %>
     <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
   <% end %>

data/app/components/primer/blankslate_component.rb

@@ -5,8 +5,6 @@ module Primer
   class BlankslateComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # Optional Spinner.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.

data/app/components/primer/border_box_component.rb

@@ -5,8 +5,6 @@ module Primer
   class BorderBoxComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     DEFAULT_PADDING = :default
     PADDING_MAPPINGS = {
       DEFAULT_PADDING => "",

data/app/components/primer/breadcrumb_component.rb

@@ -3,7 +3,6 @@
 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::SlotableV2
     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._

data/app/components/primer/button_group_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use ButtonGroupComponent to render a series of buttons.
   class ButtonGroupComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Required list of buttons to be rendered.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.

data/app/components/primer/component.rb

@@ -1,10 +1,12 @@
 # frozen_string_literal: true
 
 require "octicons_helper/helper"
+require "view_component/version"
 
 module Primer
   # @private
   class Component < ViewComponent::Base
+    include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
     include ClassNameHelper
     include FetchOrFallbackHelper
     include OcticonsHelper

data/app/components/primer/details_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use DetailsComponent to reveal content after clicking a button.
   class DetailsComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     NO_OVERLAY = :none

data/app/components/primer/dropdown/menu_component.rb

@@ -5,8 +5,6 @@ module Primer
     # This component is part of `Primer::DropdownComponent` and should not be
     # used as a standalone component.
     class MenuComponent < Primer::Component
-      include ViewComponent::SlotableV2
-
       SCHEME_DEFAULT = :default
       SCHEME_MAPPINGS = {
         SCHEME_DEFAULT => "",

data/app/components/primer/dropdown_component.rb

@@ -4,8 +4,6 @@ module Primer
   # Dropdowns are lightweight context menus for housing navigation and actions.
   # They're great for instances where you don't need the full power (and code) of the select menu.
   class DropdownComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Required trigger for the dropdown. Only accepts a content.
     # Its classes can be customized by the `summary_classes` param in the parent component
     renders_one :button

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 if @icon %>
   <%= content %>
   <% if @dismissible %>
     <button class="flash-close js-flash-close" type="button" aria-label="Close">
-      <%= primer_octicon icon: "x" %>
+      <%= primer_octicon "x" %>
     </button>
   <% end %>
 

data/app/components/primer/flash_component.rb

@@ -5,8 +5,6 @@ module Primer
   class FlashComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # Optional action content showed on the right side of the component.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/layout_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use Layout to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # The main content
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/menu_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use menus to create vertical lists of navigational links.
   class MenuComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Optional menu heading
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -44,11 +42,11 @@ module Primer
     #       Item 1
     #     <% end %>
     #     <% c.item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon
     #     <% end %>
     #     <% c.item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon and Counter
     #       <%= render(Primer::CounterComponent.new(count: 25)) %>
     #     <% end %>

data/app/components/primer/navigation/tab_component.html.erb

@@ -0,0 +1,9 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= icon %>
+  <% if text.present? %>
+    <%= text %>
+  <% else %>
+    <%= content %>
+  <% end %>
+  <%= counter %>
+<% end %>

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

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+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.
+    class TabComponent < Primer::Component
+      # 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.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :panel, lambda { |**system_arguments|
+        system_arguments[:tag] ||= :div
+        system_arguments[:role] ||= :tabpanel
+        system_arguments[:hidden] = true unless @selected
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Icon to be rendered in the Tab left.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :icon, lambda { |icon = nil, **system_arguments|
+        system_arguments[:classes] = class_names(
+          @icon_classes,
+          system_arguments[:classes]
+        )
+        Primer::OcticonComponent.new(icon, **system_arguments)
+      }
+
+      # The Tab's text.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::TextComponent) %>.
+      renders_one :text, Primer::TextComponent
+
+      # Counter to be rendered in the Tab right.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::CounterComponent) %>.
+      renders_one :counter, Primer::CounterComponent
+
+      attr_reader :selected
+
+      # @example Default
+      #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
+      #     <% c.text { "Selected" } %>
+      #   <% end %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.text { "Not selected" } %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.icon(:star) %>
+      #     <% c.text { "Tab" } %>
+      #   <% end %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.icon(:star) %>
+      #     <% c.text { "Tab" } %>
+      #     <% c.counter(count: 10) %>
+      #   <% end %>
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <% c.text { "Tab" } %>
+      #     <% c.counter(count: 10) %>
+      #   <% end %>
+      #
+      # @example With custom HTML
+      #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
+      #     <div>
+      #       This is my <strong>custom HTML</strong>
+      #     </div>
+      #   <% end %>
+      #
+      # @param selected [Boolean] Whether the Tab is selected or not.
+      # @param with_panel [Boolean] Whether the Tab has an associated panel.
+      # @param icon_classes [Boolean] Classes that must always be applied to icons.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments)
+        @selected = selected
+        @icon_classes = icon_classes
+        @system_arguments = system_arguments
+        @system_arguments[:role] = :tab
+
+        if with_panel
+          @system_arguments[:tag] ||= :button
+          @system_arguments[:type] = :button
+        else
+          @system_arguments[:tag] ||= :a
+        end
+
+        return unless @selected
+
+        if @system_arguments[:tag] == :a
+          @system_arguments[:"aria-current"] = :page
+        else
+          @system_arguments[:"aria-selected"] = true
+        end
+      end
+    end
+  end
+end

data/app/components/primer/octicon_component.rb

@@ -18,19 +18,20 @@ module Primer
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     # @example Default
+    #   <%= render(Primer::OcticonComponent.new("check")) %>
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
     # @example Medium
-    #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
+    #   <%= render(Primer::OcticonComponent.new("people", size: :medium)) %>
     #
     # @example Large
-    #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
+    #   <%= render(Primer::OcticonComponent.new("x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
     # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
-      @icon = icon
+    def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, **system_arguments)
+      @icon = icon_name || icon
       @system_arguments = system_arguments
 
       @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]

data/app/components/primer/popover_component.rb

@@ -5,7 +5,6 @@ module Primer
   #
   # 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
-    include ViewComponent::SlotableV2
     status :beta
 
     CARET_DEFAULT = :top
@@ -54,7 +53,7 @@ module Primer
 
       # This is a hack to allow the parent to set the slot's content
       @body_arguments = system_arguments
-      block&.call
+      view_context.capture { block&.call }
     }
 
     # @example Default
@@ -83,7 +82,24 @@ module Primer
     #       Activity feed
     #     <% end %>
     #     <% component.body(caret: :left) do %>
-    #       This is the large Popover body.
+    #       This is the Popover body.
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With HTML body
+    #   <%= render Primer::PopoverComponent.new do |component| %>
+    #     <% component.heading do %>
+    #       Activity feed
+    #     <% end %>
+    #     <% component.body(caret: :left) do %>
+    #       <p> This is the Popover body.</p>
+    #       <div>
+    #         This is using HTML.
+    #         <ul>
+    #           <li>Thing #1</li>
+    #           <li>Thing #2</li>
+    #         </ul>
+    #       </div>
     #     <% end %>
     #   <% end %>
     #

data/app/components/primer/progress_bar_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use ProgressBar to visualize task completion.
   class ProgressBarComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     # Use the Item slot to add an item to the progress bas

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

@@ -1,6 +1,4 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
-  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
-    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
-  </path>
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
 <% end %>

data/app/components/primer/spinner_component.rb

@@ -31,6 +31,7 @@ module Primer
       @system_arguments = system_arguments
       @system_arguments[:tag] = :svg
       @system_arguments[:style] ||= DEFAULT_STYLE
+      @system_arguments[:animation] = :rotate
       @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
       @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
       @system_arguments[:viewBox] = "0 0 16 16"

data/app/components/primer/subhead_component.rb

@@ -5,8 +5,6 @@ module Primer
   class SubheadComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # The heading
     #
     # @param danger [Boolean] Whether to style the heading as dangerous.

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

@@ -1,17 +1,15 @@
-<%= render wrapper.new(**@system_arguments) do %>
-  <nav role="tablist" aria-label="<%= @aria_label %>" class="tabnav-tabs">
-    <% tabs.each do |tab| %>
-      <%= tab %>
-    <% end %>
-  </nav >
+<%= wrapper do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <nav role="tablist" aria-label="<%= @aria_label %>" class="tabnav-tabs">
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    </nav>
+  <% end %>
 
   <% if @with_panel %>
     <% tabs.each do |tab| %>
-      <% if tab.panel.present? %>
-        <div role="tabpanel" <%= "hidden" if tab.hidden? %>>
-          <%= tab.panel %>
-        </div>
-      <% end %>
+      <%= tab.panel %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/primer/tab_nav_component.rb

@@ -3,34 +3,64 @@
 module Primer
   # 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 ViewComponent::SlotableV2
+    include Primer::TabbedComponentHelper
 
-    class MultipleSelectedTabsError < StandardError; end
-    class NoSelectedTabsError < StandardError; end
-
-    # Tabs to be rendered.
+    # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
-    # @param title [String] Text to be rendered by the tab.
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :tabs, lambda { |**system_arguments|
-      return TabComponent.new(**system_arguments) unless @with_panel
-
-      TabComponent.new(tag: :button, type: :button, **system_arguments)
+    renders_many :tabs, lambda { |selected: false, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "tabnav-tab",
+        system_arguments[:classes]
+      )
+      Primer::Navigation::TabComponent.new(selected: selected, with_panel: @with_panel, **system_arguments)
     }
 
     # @example Default
     #   <%= render(Primer::TabNavComponent.new) do |c| %>
-    #     <% c.tab(selected: true, title: "Tab 1", href: "#") %>
-    #     <% c.tab(title: "Tab 2", href: "#") %>
-    #     <% c.tab(title: "Tab 3", href: "#") %>
+    #     <% 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| %>
+    #     <% 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 %>
     #   <% end %>
     #
     # @example With panels
     #   <%= render(Primer::TabNavComponent.new(with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true, title: "Tab 1") { "Panel 1" } %>
-    #     <% c.tab(title: "Tab 2") { "Panel 1" } %>
-    #     <% c.tab(title: "Tab 3") { "Panel 1" } %>
+    #     <% c.tab(selected: true) do |t| %>
+    #       <% t.text { "Tab 1" } %>
+    #       <% t.panel do %>
+    #         Panel 1
+    #       <% end %>
+    #     <% end %>
+    #     <% c.tab do |t| %>
+    #       <% t.text { "Tab 2" } %>
+    #       <% t.panel do %>
+    #         Panel 2
+    #       <% end %>
+    #     <% end %>
+    #     <% c.tab do |t| %>
+    #       <% t.text { "Tab 3" } %>
+    #       <% t.panel do %>
+    #         Panel 3
+    #       <% end %>
+    #     <% end %>
     #   <% end %>
     #
     # @param aria_label [String] Used to set the `aria-label` on the top level `<nav>` element.
@@ -47,62 +77,5 @@ module Primer
         system_arguments[:classes]
       )
     end
-
-    def before_render
-      validate_single_selected_tab
-    end
-
-    private
-
-    def wrapper
-      @with_panel ? Primer::TabContainerComponent : Primer::BaseComponent
-    end
-
-    def validate_single_selected_tab
-      raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
-      raise NoSelectedTabsError, "a tab must be selected" if selected_tabs_count != 1
-    end
-
-    def selected_tabs_count
-      @selected_tabs_count ||= tabs.count(&:selected)
-    end
-
-    # Tabs to be rendered.
-    class TabComponent < Primer::Component
-      attr_reader :selected
-
-      def initialize(title:, selected: false, **system_arguments)
-        @title = title
-        @selected = selected
-        @system_arguments = system_arguments
-        @system_arguments[:tag] ||= :a
-        @system_arguments[:role] = :tab
-
-        if selected
-          if @system_arguments[:tag] == :a
-            @system_arguments[:"aria-current"] = :page
-          else
-            @system_arguments[:"aria-selected"] = true
-          end
-        end
-
-        @system_arguments[:classes] = class_names(
-          "tabnav-tab",
-          system_arguments[:classes]
-        )
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments)) { @title }
-      end
-
-      def panel
-        content
-      end
-
-      def hidden?
-        !@selected
-      end
-    end
   end
 end

data/app/components/primer/time_ago_component.rb

@@ -3,7 +3,8 @@
 module Primer
   # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
   class TimeAgoComponent < Primer::Component
-    #
+    status :beta
+
     # @example Default
     #   <%= render(Primer::TimeAgoComponent.new(time: Time.at(628232400))) %>
     #

data/app/components/primer/timeline_item_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     # Avatar to be rendered to the left of the Badge.
@@ -78,7 +77,7 @@ module Primer
 
       def call
         render(Primer::BaseComponent.new(**@system_arguments)) do
-          render(Primer::OcticonComponent.new(icon: @icon))
+          render(Primer::OcticonComponent.new(@icon))
         end
       end
     end

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

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

data/app/components/primer/underline_nav_component.rb

@@ -5,34 +5,61 @@ module Primer
   # underlined selected state, typically used for navigation placed at the top
   # of the page.
   class UnderlineNavComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    include Primer::TabbedComponentHelper
 
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
-    #  Use the body for the navigation items
+    # 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.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |**system_arguments|
-      system_arguments[:classes] = class_names("UnderlineNav-body", "list-style-none", system_arguments[:classes])
-      system_arguments[:tag] ||= :ul
-
-      Primer::BaseComponent.new(**system_arguments) { content }
+    renders_many :tabs, lambda { |selected: false, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "UnderlineNav-item",
+        system_arguments[:classes]
+      )
+      Primer::Navigation::TabComponent.new(
+        selected: selected,
+        with_panel: @with_panel,
+        icon_classes: "UnderlineNav-octicon",
+        **system_arguments
+      )
     }
 
-    #  Use actions for a call to action
+    # Use actions for a call to action.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :actions, lambda { |**system_arguments|
       system_arguments[:tag] ||= :div
       system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
-      Primer::BaseComponent.new(**system_arguments) { content }
+
+      Primer::BaseComponent.new(**system_arguments)
     }
 
     # @example Default
     #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
-    #     <% component.body do %>
-    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% 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::UnderlineNavComponent.new) 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!" } %>
@@ -41,26 +68,65 @@ module Primer
     #
     # @example Align right
     #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
-    #     <% component.body do %>
-    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% 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 With panels
+    #   <%= render(Primer::UnderlineNavComponent.new(with_panel: true)) do |component| %>
+    #     <% component.tab(selected: true) do |t| %>
+    #       <% t.text { "Item 1" } %>
+    #       <% t.panel do %>
+    #         Panel 1
+    #       <% end %>
+    #     <% end %>
+    #     <% component.tab do |t| %>
+    #       <% t.text { "Item 2" } %>
+    #       <% t.panel do %>
+    #         Panel 2
+    #       <% end %>
     #     <% end %>
     #     <% component.actions do %>
     #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
     #     <% end %>
     #   <% end %>
     #
+    # @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 system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(align: ALIGN_DEFAULT, **system_arguments)
+    def initialize(with_panel: false, align: ALIGN_DEFAULT, body_classes: "", **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[:classes] = class_names(
         @system_arguments[:classes],
         "UnderlineNav",
         "UnderlineNav--right" => @align == :right
       )
+
+      @body_arguments = {
+        tag: :div,
+        classes: class_names(
+          "UnderlineNav-body",
+          body_classes
+        )
+      }
+    end
+
+    private
+
+    def body
+      Primer::BaseComponent.new(**@body_arguments)
     end
   end
 end

data/app/lib/primer/classify.rb

@@ -192,8 +192,8 @@ module Primer
         end
 
         if BOOLEAN_MAPPINGS.key?(key)
-          BOOLEAN_MAPPINGS[key][:mappings].map { |m| m[:css_class] if m[:value] == val }.compact.each do |css_class|
-            memo[:classes] << css_class
+          BOOLEAN_MAPPINGS[key][:mappings].each do |m|
+            memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
           end
         elsif key == BG_KEY
           if val.to_s.start_with?("#")
@@ -252,9 +252,11 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
         elsif key == BOX_SHADOW_KEY
           memo[:classes] << if val == true
-                              "box-shadow"
+                              "color-shadow-small"
+                            elsif val == :none || val.blank?
+                              "box-shadow-none"
                             else
-                              "box-shadow-#{val.to_s.dasherize}"
+                              "color-shadow-#{val.to_s.dasherize}"
                             end
         elsif key == VISIBILITY_KEY
           memo[:classes] << "v-#{val.to_s.dasherize}"

data/app/lib/primer/classify/cache.rb

@@ -101,7 +101,7 @@ module Primer
 
           preload(
             keys: Primer::Classify::BOX_SHADOW_KEY,
-            values: [true, :medium, :large, :extra_large, :none]
+            values: [true, :small, :medium, :large, :extra_large, :none]
           )
 
           preload(

data/app/lib/primer/classify/functional_colors.rb

@@ -29,18 +29,20 @@ module Primer
           functional_options:,
           options_without_mappigs: []
         )
+          sym_value = value.to_sym
+          dasherized_value = value.to_s.dasherize
           # the value is a functional color
-          return "#{number_prefix}-#{value.to_s.dasherize}" if ends_with_number?(value)
-          return "#{functional_prefix}-#{value.to_s.dasherize}" if functional_options.include?(value)
+          return "#{number_prefix}-#{dasherized_value}" if ends_with_number?(sym_value)
+          return "#{functional_prefix}-#{dasherized_value}" if functional_options.include?(sym_value)
           # if the app still allows non functional colors
-          return "#{non_functional_prefix}-#{value.to_s.dasherize}" unless force_functional_colors?
+          return "#{non_functional_prefix}-#{dasherized_value}" unless force_functional_colors?
 
-          if mappings.key?(value) || options_without_mappigs.include?(value)
-            functional_color = mappings[value]
+          if mappings.key?(sym_value) || options_without_mappigs.include?(sym_value)
+            functional_color = mappings[sym_value]
             # colors without functional mapping stay the same
-            return "#{non_functional_prefix}-#{value.to_s.dasherize}" if functional_color.blank?
+            return "#{non_functional_prefix}-#{dasherized_value}" if functional_color.blank?
 
-            ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production? || silence_color_deprecations?
+            ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production? || silence_deprecations?
 
             return "#{functional_prefix}-#{functional_color.to_s.dasherize}"
           end
@@ -57,8 +59,8 @@ module Primer
           Rails.application.config.primer_view_components.force_functional_colors
         end
 
-        def silence_color_deprecations?
-          Rails.application.config.primer_view_components.silence_color_deprecations
+        def silence_deprecations?
+          Rails.application.config.primer_view_components.silence_deprecations
         end
       end
     end

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -29,7 +29,7 @@ module Primer
       if allowed_values.include?(given_value)
         given_value
       elsif deprecated_values.include?(given_value)
-        ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production?
+        ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
 
         given_value
       else
@@ -55,5 +55,9 @@ module Primer
         fallback
       end
     end
+
+    def silence_deprecations?
+      Rails.application.config.primer_view_components.silence_deprecations
+    end
   end
 end

data/app/lib/primer/tabbed_component_helper.rb

@@ -0,0 +1,35 @@
+# 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 TabbedComponentHelper
+    extend ActiveSupport::Concern
+
+    class MultipleSelectedTabsError < StandardError; end
+
+    def before_render
+      validate_single_selected_tab unless Rails.env.production?
+    end
+
+    private
+
+    def wrapper
+      return yield unless @with_panel
+
+      render Primer::TabContainerComponent.new do
+        yield
+      end
+    end
+
+    def validate_single_selected_tab
+      raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
+    end
+
+    def selected_tabs_count
+      @selected_tabs_count ||= tabs.count(&:selected)
+    end
+  end
+end

data/app/lib/primer/view_helper.rb

@@ -7,12 +7,13 @@ module Primer
 
     HELPERS = {
       octicon: "Primer::OcticonComponent",
-      heading: "Primer::HeadingComponent"
+      heading: "Primer::HeadingComponent",
+      time_ago: "Primer::TimeAgoComponent"
     }.freeze
 
     HELPERS.each do |name, component|
-      define_method "primer_#{name}" do |**component_args, &block|
-        render component.constantize.new(**component_args), &block
+      define_method "primer_#{name}" do |*args, **kwargs, &block|
+        render component.constantize.new(*args, **kwargs), &block
       end
     end
   end

data/lib/primer/view_components/engine.rb

@@ -14,7 +14,7 @@ module Primer
 
       config.primer_view_components = ActiveSupport::OrderedOptions.new
       config.primer_view_components.force_functional_colors = true
-      config.primer_view_components.silence_color_deprecations = false
+      config.primer_view_components.silence_deprecations = false
 
       initializer "primer_view_components.assets" do |app|
         app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 28
+      PATCH = 33
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/static/statuses.json

@@ -1 +1 @@
-{"Primer::AutoCompleteComponent":"alpha","Primer::AutoCompleteItemComponent":"alpha","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"beta","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"alpha","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}
+{"Primer::AutoCompleteComponent":"alpha","Primer::AutoCompleteItemComponent":"alpha","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"beta","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::Navigation::TabComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"beta","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.28
+  version: 0.0.33
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-11 00:00:00.000000000 Z
+date: 2021-03-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: octicons_helper
@@ -295,6 +295,8 @@ files:
 - app/components/primer/markdown_component.rb
 - app/components/primer/menu_component.html.erb
 - app/components/primer/menu_component.rb
+- app/components/primer/navigation/tab_component.html.erb
+- app/components/primer/navigation/tab_component.rb
 - app/components/primer/octicon_component.rb
 - app/components/primer/popover_component.html.erb
 - app/components/primer/popover_component.rb
@@ -303,7 +305,6 @@ files:
 - app/components/primer/primer.ts
 - app/components/primer/progress_bar_component.html.erb
 - app/components/primer/progress_bar_component.rb
-- app/components/primer/slot.rb
 - app/components/primer/spinner_component.html.erb
 - app/components/primer/spinner_component.rb
 - app/components/primer/state_component.rb
@@ -336,6 +337,7 @@ files:
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
 - app/lib/primer/status/dsl.rb
+- app/lib/primer/tabbed_component_helper.rb
 - app/lib/primer/test_selector_helper.rb
 - app/lib/primer/view_helper.rb
 - lib/primer/view_components.rb

data/app/components/primer/slot.rb

@@ -1,10 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # @private
-  class Slot < ViewComponent::Slot
-    include ClassNameHelper
-    include FetchOrFallbackHelper
-    include JoinStyleArgumentsHelper
-  end
-end