primer_view_components 0.0.21 → 0.0.26

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

data/app/components/primer/text_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # The Text component is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
     #   <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
     #

data/app/components/primer/timeline_item_component.rb

@@ -36,7 +36,7 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
-    # @example auto|Default
+    # @example Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
     #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>

data/app/components/primer/tooltip_component.rb

@@ -26,29 +26,29 @@ module Primer
       se
     ]
 
-    # @example 55|Default
+    # @example Default
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
     #   </div>
     #
-    # @example 65|Wrapping another component
+    # @example Wrapping another component
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
     #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
     #     <% end %>
     #   </div>
     #
-    # @example 65|With a direction
+    # @example With a direction
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
     #   </div>
     #
-    # @example 65|With an alignment
+    # @example With an alignment
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
     #   </div>
     #
-    # @example 65|Without a delay
+    # @example Without a delay
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
     #   </div>

data/app/components/primer/truncate_component.rb

@@ -3,18 +3,18 @@
 module Primer
   # Use TruncateComponent to shorten overflowing text with an ellipsis.
   class TruncateComponent < Primer::Component
-    # @example auto|Default
+    # @example Default
     #   <div class="col-2">
     #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
     #   </div>
     #
-    # @example auto|Inline
+    # @example Inline
     #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
     #
-    # @example auto|Expandable
+    # @example Expandable
     #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
     #
-    # @example auto|Custom size
+    # @example Custom size
     #   <%= render(Primer::TruncateComponent.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).

data/app/components/primer/underline_nav_component.rb

@@ -10,7 +10,7 @@ module Primer
 
     with_content_areas :body, :actions
 
-    # @example auto|Default
+    # @example Default
     #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
     #     <% component.with(:body) do %>
     #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
@@ -20,7 +20,7 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example auto|Align right
+    # @example Align right
     #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
     #     <% component.with(:body) do %>
     #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>

data/{lib → app/lib}/primer/classify.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require_relative "classify/cache"
-
 module Primer
   # :nodoc:
   class Classify

data/app/lib/primer/view_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Primer
+  # Module to allow shorthand calls for registered Primer components
+  #
+  # Registered components can be called with
+  # `primer(:name, **kwargs) { block }` instead of
+  # `render Primer::NameComponent.new(**kwargs) { block }`
+  module ViewHelper
+    extend ActiveSupport::Concern
+
+    class ViewHelperNotFound < StandardError; end
+
+    def primer(name, **component_args, &block)
+      component = Primer::Component.primer_helpers[name]
+
+      raise ViewHelperNotFound, "no component defined for helper #{name}" if component.blank?
+
+      render component.new(**component_args), &block
+    end
+  end
+end

data/app/lib/primer/view_helper/dsl.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Primer
+  # :nodoc:
+  module ViewHelper
+    # DSL to allow components to register a View Helper for shorthand calls.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Primer::ViewHelper::Dsl
+    #   view_helper :my_component
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      class ViewHelperAlreadyDefined < StandardError; end
+
+      included do
+        class_attribute :primer_helpers, instance_writer: false, default: {}
+      end
+
+      class_methods do
+        def view_helper(name)
+          raise ViewHelperAlreadyDefined, "#{name} is already defined" if primer_helpers[name].present?
+
+          primer_helpers[name] = self
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/engine.rb

@@ -1,12 +1,20 @@
 # frozen_string_literal: true
 
+require "rails/engine"
+
 module Primer
   module ViewComponents
     # :nodoc:
     class Engine < ::Rails::Engine
       isolate_namespace Primer::ViewComponents
+      config.autoload_once_paths = %W[
+        #{root}/app/components
+        #{root}/app/lib
+      ]
+
+      initializer "primer_view_components.assets" do |app|
+        app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)
+      end
     end
   end
 end
-
-require "#{Primer::ViewComponents::Engine.root}/app/components/primer/view_components.rb"

data/lib/primer/view_components/version.rb

@@ -5,9 +5,13 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 21
+      PATCH = 26
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end
   end
 end
+
+# rubocop:disable Rails/Output
+puts Primer::ViewComponents::VERSION::STRING if __FILE__ == $PROGRAM_NAME
+# rubocop:enable Rails/Output

data/static/statuses.json

@@ -1 +1 @@
-{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"alpha","Primer::BlankslateComponent":"alpha","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"alpha","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"alpha","Primer::ProgressBarComponent":"alpha","Primer::SpinnerComponent":"beta","Primer::StateComponent":"alpha","Primer::SubheadComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimelineItemComponent":"alpha","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}
+{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"alpha","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"alpha","Primer::ProgressBarComponent":"alpha","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimelineItemComponent":"alpha","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.21
+  version: 0.0.26
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-23 00:00:00.000000000 Z
+date: 2021-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: octicons_helper
@@ -234,6 +234,8 @@ files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
+- app/assets/javascripts/primer_view_components.js
+- app/assets/javascripts/primer_view_components.js.map
 - app/components/primer/avatar_component.rb
 - app/components/primer/avatar_stack_component.html.erb
 - app/components/primer/avatar_stack_component.rb
@@ -274,6 +276,8 @@ files:
 - app/components/primer/octicon_component.rb
 - app/components/primer/popover_component.html.erb
 - app/components/primer/popover_component.rb
+- app/components/primer/primer.js
+- 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
@@ -282,6 +286,11 @@ files:
 - app/components/primer/state_component.rb
 - app/components/primer/subhead_component.html.erb
 - app/components/primer/subhead_component.rb
+- app/components/primer/tab_container_component.js
+- app/components/primer/tab_container_component.rb
+- app/components/primer/tab_container_component.ts
+- app/components/primer/tab_nav_component.html.erb
+- app/components/primer/tab_nav_component.rb
 - app/components/primer/text_component.rb
 - app/components/primer/timeline_item_component.html.erb
 - app/components/primer/timeline_item_component.rb
@@ -289,12 +298,13 @@ files:
 - app/components/primer/truncate_component.rb
 - app/components/primer/underline_nav_component.html.erb
 - app/components/primer/underline_nav_component.rb
-- app/components/primer/view_components.rb
-- lib/primer/class_name_helper.rb
-- lib/primer/classify.rb
-- lib/primer/classify/cache.rb
-- lib/primer/fetch_or_fallback_helper.rb
-- lib/primer/join_style_arguments_helper.rb
+- app/lib/primer/class_name_helper.rb
+- app/lib/primer/classify.rb
+- app/lib/primer/classify/cache.rb
+- app/lib/primer/fetch_or_fallback_helper.rb
+- app/lib/primer/join_style_arguments_helper.rb
+- app/lib/primer/view_helper.rb
+- app/lib/primer/view_helper/dsl.rb
 - lib/primer/view_components.rb
 - lib/primer/view_components/engine.rb
 - lib/primer/view_components/version.rb