primer_view_components 0.0.17 → 0.0.22

data/app/components/primer/octicon_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
+    view_helper :octicon
+
     include Primer::ClassNameHelper
     include OcticonsHelper
 
@@ -10,24 +12,25 @@ module Primer
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
       :medium => 32,
-      :large => 64,
+      :large => 64
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-    # @example 25|Default
+    # @example Default
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
-    # @example 40|Medium
+    # @example Medium
     #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
     #
-    # @example 80|Large
+    # @example Large
     #   <%= render(Primer::OcticonComponent.new(icon: "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, @system_arguments = icon, system_arguments
+      @icon = icon
+      @system_arguments = system_arguments
 
       @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
       @system_arguments[:height] ||= SIZE_MAPPINGS[size]
@@ -39,7 +42,11 @@ module Primer
     end
 
     def call
-      octicon(@icon, **@system_arguments)
+      octicon(@icon, { **@system_arguments })
+    end
+
+    def self.status
+      Primer::Component::STATUSES[:beta]
     end
   end
 end

data/app/components/primer/popover_component.rb

@@ -10,7 +10,7 @@ module Primer
     with_slot :heading, class_name: "Heading"
     with_slot :body, class_name: "Body"
 
-    # @example 150|Default
+    # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -20,7 +20,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 150|Large
+    # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -30,7 +30,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 150|Caret position
+    # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -57,6 +57,7 @@ module Primer
       body.present?
     end
 
+    # :nodoc:
     class Heading < Primer::Slot
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
@@ -70,6 +71,7 @@ module Primer
       end
     end
 
+    # :nodoc:
     class Body < Slot
       CARET_DEFAULT = :top
       CARET_MAPPINGS = {

data/app/components/primer/primer.js

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

data/app/components/primer/primer.ts

@@ -0,0 +1 @@
+import './tab_container_component'

data/app/components/primer/progress_bar_component.rb

@@ -12,26 +12,26 @@ module Primer
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
       :small => "Progress--small",
-      :large => "Progress--large",
+      :large => "Progress--large"
     }.freeze
 
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example 20|Default
+    # @example Default
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 25) %>
     #   <% end %>
     #
-    # @example 20|Small
+    # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 50) %>
     #   <% end %>
     #
-    # @example 30|Large
+    # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
     #     <% component.slot(:item, bg: :red_4, percentage: 75) %>
     #   <% end %>
     #
-    # @example 20|Multiple items
+    # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 10) %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 20) %>
@@ -48,13 +48,13 @@ module Primer
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
       @system_arguments[:tag] = :span
-
     end
 
     def render?
       items.any?
     end
 
+    # :nodoc:
     class Item < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/spinner_component.rb

@@ -3,12 +3,11 @@
 module Primer
   # Use Primer::SpinnerComponent to let users know that content is being loaded.
   class SpinnerComponent < Primer::Component
-
     DEFAULT_SIZE = :medium
     SIZE_MAPPINGS = {
       :small => 16,
       DEFAULT_SIZE => 32,
-      :large => 64,
+      :large => 64
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
     # Setting `box-sizing: content-box` allows consumers to add padding
@@ -16,13 +15,13 @@ module Primer
     DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
 
     #
-    # @example 48|Default
+    # @example Default
     #   <%= render(Primer::SpinnerComponent.new) %>
     #
-    # @example 32|Small
+    # @example Small
     #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
     #
-    # @example 80|Large
+    # @example Large
     #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
     #
     # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
@@ -35,5 +34,9 @@ module Primer
       @system_arguments[:viewBox] = "0 0 16 16"
       @system_arguments[:fill] = :none
     end
+
+    def self.status
+      Primer::Component::STATUSES[:beta]
+    end
   end
 end

data/app/components/primer/state_component.rb

@@ -4,34 +4,41 @@ module Primer
   # Component for rendering the status of an item.
   class StateComponent < Primer::Component
     COLOR_DEFAULT = :default
-    COLOR_MAPPINGS = {
+    NEW_COLOR_MAPPINGS = {
+      open: "State--open",
+      closed: "State--closed",
+      merged: "State--merged"
+    }.freeze
+
+    DEPRECATED_COLOR_MAPPINGS = {
       COLOR_DEFAULT => "",
-      :green => "State--green",
-      :red => "State--red",
-      :purple => "State--purple",
+      :green => "State--open",
+      :red => "State--closed",
+      :purple => "State--merged"
     }.freeze
+    COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
-      :small => "State--small",
+      :small => "State--small"
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     TAG_DEFAULT = :span
-    TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
+    TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
 
-    # @example 40|Default
+    # @example Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
     #
-    # @example 40|Colors
+    # @example Colors
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :green)) { "Green" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :red)) { "Red" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :purple)) { "Purple" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
     #
-    # @example 40|Sizes
+    # @example Sizes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
     #
@@ -61,5 +68,9 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    def self.status
+      Primer::Component::STATUSES[:beta]
+    end
   end
 end

data/app/components/primer/subhead_component.rb

@@ -9,7 +9,7 @@ module Primer
     with_slot :actions, class_name: "Actions"
     with_slot :description, class_name: "Description"
 
-    # @example 95|Default
+    # @example Default
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -19,7 +19,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 95|Without border
+    # @example Without border
     #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -29,7 +29,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example 95|With actions
+    # @example With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -67,6 +67,7 @@ module Primer
       heading.present?
     end
 
+    # :nodoc:
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
@@ -85,6 +86,7 @@ module Primer
       end
     end
 
+    # :nodoc:
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
@@ -98,6 +100,7 @@ module Primer
       end
     end
 
+    # :nodoc:
     class Description < ViewComponent::Slot
       include ClassNameHelper
 

data/app/components/primer/tab_container_component.js

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

data/app/components/primer/tab_container_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  # 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.
+  class TabContainerComponent < Primer::Component
+    # @example Default
+    #   <%= render(Primer::TabContainerComponent.new)  do %>
+    #     <div role="tablist">
+    #       <button type="button" role="tab" aria-selected="true">Tab one</button>
+    #       <button type="button" role="tab" tabindex="-1">Tab two</button>
+    #       <button type="button" role="tab" tabindex="-1">Tab three</button>
+    #     </div>
+    #     <div role="tabpanel">
+    #       Panel 1
+    #     </div>
+    #     <div role="tabpanel" hidden>
+    #       Panel 2
+    #     </div>
+    #     <div role="tabpanel" hidden>
+    #       Panel 3
+    #     </div>
+    #   <% end %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "tab-container"
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/primer/tab_container_component.ts

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

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

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

data/app/components/primer/tab_nav_component.rb

@@ -0,0 +1,108 @@
+# 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.
+  class TabNavComponent < Primer::Component
+    include ViewComponent::SlotableV2
+
+    class MultipleSelectedTabsError < StandardError; end
+    class NoSelectedTabsError < StandardError; end
+
+    # Tabs to be rendered.
+    #
+    # @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)
+    }
+
+    # @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: "#") %>
+    #   <% 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" } %>
+    #   <% end %>
+    #
+    # @param aria_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
+      @with_panel = with_panel
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+
+      @system_arguments[:classes] = class_names(
+        "tabnav",
+        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