primer_view_components 0.0.27 → 0.0.32

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

@@ -0,0 +1,3 @@
+import './auto_complete_component';
+import './tab_container_component';
+import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,2 +1,3 @@
+import './auto_complete_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1,2 +1,3 @@
+import './auto_complete_component'
 import './tab_container_component'
 import './time_ago_component'

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
@@ -11,7 +10,7 @@ module Primer
     # @param percentage [Integer] The percent complete
     # @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: :green, **system_arguments|
+    renders_many :items, lambda { |percentage: 0, bg: :success_inverse, **system_arguments|
       percentage = percentage
       system_arguments = system_arguments
 
@@ -39,19 +38,19 @@ module Primer
     #
     # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.item(bg: :blue_4, percentage: 50) %>
+    #     <% component.item(bg: :info_inverse, percentage: 50) %>
     #   <% end %>
     #
     # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.item(bg: :red_4, percentage: 75) %>
+    #     <% component.item(bg: :danger_inverse, percentage: 75) %>
     #   <% end %>
     #
     # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.item(percentage: 10) %>
-    #     <% component.item(bg: :blue_4, percentage: 20) %>
-    #     <% component.item(bg: :red_4, percentage: 30) %>
+    #     <% component.item(bg: :info_inverse, percentage: 20) %>
+    #     <% component.item(bg: :danger_inverse, percentage: 30) %>
     #   <% end %>
     #
     # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.

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_container_component.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

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/text_component.rb

@@ -3,9 +3,11 @@
 module Primer
   # The Text component is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
+    status :beta
+
     # @example Default
     #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
-    #   <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
+    #   <%= render(Primer::TextComponent.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)

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

@@ -0,0 +1 @@
+import '@github/time-elements';

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,7 @@
 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.
     #
@@ -40,7 +40,7 @@ module Primer
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
     #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.badge(bg: :green, color: :white, icon: :check) %>
+    #       <% component.badge(bg: :success_inverse, color: :text_white, icon: :check) %>
     #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
@@ -77,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