primer_view_components 0.0.18 → 0.0.23

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 70|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.html.erb

@@ -1,17 +1,5 @@
-<%= render Primer::BaseComponent.new(**system_arguments) do %>
-  <% if avatar %>
-    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.system_arguments) %>
-  <% end %>
-
-  <% if badge %>
-    <%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
-      <%= octicon badge.icon %>
-    <% end %>
-  <% end %>
-
-  <% if body %>
-    <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
-      <%= body.content %>
-    <% end %>
-  <% end %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= avatar %>
+  <%= badge %>
+  <%= body %>
 <% end %>

data/app/components/primer/timeline_item_component.rb

@@ -3,20 +3,45 @@
 module Primer
   # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :avatar, class_name: "Avatar"
-    with_slot :badge, class_name: "Badge"
-    with_slot :body, class_name: "Body"
+    # Avatar to be rendered to the left of the Badge.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
+    renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "TimelineItem-avatar",
+        system_arguments[:classes]
+      )
+
+      Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
+    }
 
-    attr_reader :system_arguments
+    # Badge that will be connected to other TimelineItems.
+    #
+    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :badge, "BadgeComponent"
 
-    # @example 75|Default
+    # Body to be rendered to the left of the Badge.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        "TimelineItem-body",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
-    #       <% component.slot(:body) { "Success!" } %>
+    #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.badge(bg: :green, color: :white, icon: :check) %>
+    #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
     #
@@ -36,36 +61,9 @@ module Primer
       avatar.present? || badge.present? || body.present?
     end
 
-    # :nodoc
-    class Avatar < Primer::Slot
-      attr_reader :system_arguments, :alt, :src, :size, :square
-
-      # @param alt [String] Alt text for avatar image.
-      # @param src [String] Src attribute for avatar image.
-      # @param size [Integer] Image size.
-      # @param square [Boolean] Whether to round the edges of the image.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
-        @alt = alt
-        @src = src
-        @size = size
-        @square = square
-
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-avatar",
-          system_arguments[:classes]
-        )
-      end
-    end
-
-    # :nodoc
-    class Badge < Primer::Slot
-      attr_reader :system_arguments, :icon
-
-      # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    # This component is part of `Primer::TimelineItemComponent` and should not be
+    # used as a standalone component.
+    class BadgeComponent < Primer::Component
       def initialize(icon: nil, **system_arguments)
         @icon = icon
 
@@ -76,20 +74,11 @@ module Primer
           system_arguments[:classes]
         )
       end
-    end
-
-    # :nodoc
-    class Body < Primer::Slot
-      attr_reader :system_arguments
 
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-body",
-          system_arguments[:classes]
-        )
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::OcticonComponent.new(icon: @icon))
+        end
       end
     end
   end

data/app/components/primer/tooltip_component.rb

@@ -26,29 +26,29 @@ module Primer
       se
     ]
 
-    # @example 100|Default
+    # @example Default
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
     #   </div>
     #
-    # @example 100|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 100|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 100|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 100|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 25|Default
+    # @example Default
     #   <div class="col-2">
     #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
     #   </div>
     #
-    # @example 25|Inline
+    # @example Inline
     #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
     #
-    # @example 25|Expandable
+    # @example Expandable
     #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
     #
-    # @example 25|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 70|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 70|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

@@ -17,6 +17,7 @@ module Primer
 
     INVALID_CLASS_NAME_PREFIXES =
       (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+    FUNCTIONAL_COLOR_REGEX = /(primary|secondary|tertiary|link|success|warning|danger|info)/.freeze
 
     COLOR_KEY = :color
     BG_KEY = :bg
@@ -166,10 +167,10 @@ module Primer
             raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
 
             value.each_with_index do |val, index|
-              extract_value(memo, key, val, BREAKPOINTS[index])
+              Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
             end
           else
-            extract_value(memo, key, value, BREAKPOINTS[0])
+            Primer::Classify::Cache.read(memo, key, value, BREAKPOINTS[0]) || extract_value(memo, key, value, BREAKPOINTS[0])
           end
         end
 
@@ -179,7 +180,7 @@ module Primer
       end
 
       def extract_value(memo, key, val, breakpoint)
-        return if val.nil?
+        return if val.nil? || val == ""
 
         if SPACING_KEYS.include?(key)
           if MARGIN_DIRECTION_KEYS.include?(key)
@@ -194,7 +195,7 @@ module Primer
             memo[:classes] << css_class
           end
         elsif key == BG_KEY
-          if val.to_s.starts_with?("#")
+          if val.to_s.start_with?("#")
             memo[:styles] << "background-color: #{val};"
           else
             memo[:classes] << "bg-#{val.to_s.dasherize}"
@@ -202,11 +203,13 @@ module Primer
         elsif key == COLOR_KEY
           char_code = val[-1].ord
           # Does this string end in a character that is NOT a number?
-          memo[:classes] << if char_code >= 48 && char_code <= 57 # 48 is the charcode for 0; 57 is the charcode for 9
-                              "color-#{val.to_s.dasherize}"
-                            else
-                              "text-#{val.to_s.dasherize}"
-                            end
+          memo[:classes] <<
+            if (char_code >= 48 && char_code <= 57) || # 48 is the charcode for 0; 57 is the charcode for 9
+               FUNCTIONAL_COLOR_REGEX.match?(val)
+              "color-#{val.to_s.dasherize}"
+            else
+              "text-#{val.to_s.dasherize}"
+            end
         elsif key == DISPLAY_KEY
           memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
         elsif key == VERTICAL_ALIGN_KEY
@@ -214,7 +217,13 @@ module Primer
         elsif key == WORD_BREAK_KEY
           memo[:classes] << "wb-#{val.to_s.dasherize}"
         elsif BORDER_KEYS.include?(key)
-          memo[:classes] << "border-#{val.to_s.dasherize}"
+          border_value = if val == true
+                           "border"
+                         else
+                           "border-#{val.to_s.dasherize}"
+                         end
+
+          memo[:classes] << border_value
         elsif BORDER_MARGIN_KEYS.include?(key)
           memo[:classes] << "#{key.to_s.dasherize}-#{val}"
         elsif key == BORDER_RADIUS_KEY
@@ -265,5 +274,7 @@ module Primer
         end
       end
     end
+
+    Cache.preload!
   end
 end