primer_view_components 0.0.18 → 0.0.19

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

@@ -0,0 +1,6 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= heading %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/primer/menu_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+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 %>
+    renders_one :heading, lambda { |**system_arguments|
+      system_arguments[:tag] ||= :span
+      system_arguments[:classes] = class_names(
+        "menu-heading",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # Required list of navigational links
+    #
+    # @param href [String] URL to be used for the Link
+    # @param selected [Boolean] Whether the item is the current selection
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :items, lambda { |href:, selected: false, **system_arguments|
+      system_arguments[:tag] = :a
+      system_arguments[:href] = href
+      system_arguments[:"aria-current"] = :page if selected
+      system_arguments[:classes] = class_names(
+        "menu-item",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example auto|Default
+    #   <%= render(Primer::MenuComponent.new) do |c| %>
+    #     <% c.heading do %>
+    #       Heading
+    #     <% end %>
+    #     <% c.item(selected: true, href: "#url") do %>
+    #       Item 1
+    #     <% end %>
+    #     <% c.item(href: "#url") do %>
+    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       With Icon
+    #     <% end %>
+    #     <% c.item(href: "#url") do %>
+    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       With Icon and Counter
+    #       <%= render(Primer::CounterComponent.new(count: 25)) %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :nav
+      @system_arguments[:classes] = class_names(
+        "menu",
+        @system_arguments[:classes]
+      )
+    end
+
+    def render?
+      items.any?
+    end
+  end
+end

data/app/components/primer/octicon_component.rb

@@ -14,13 +14,13 @@ module Primer
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-    # @example 25|Default
+    # @example auto|Default
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
-    # @example 40|Medium
+    # @example auto|Medium
     #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
     #
-    # @example 80|Large
+    # @example auto|Large
     #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
@@ -42,5 +42,9 @@ module Primer
     def call
       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 auto|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 auto|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 auto|Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.slot(:heading) do %>
     #       Activity feed
@@ -57,7 +57,7 @@ module Primer
       body.present?
     end
 
-    # :nodoc
+    # :nodoc:
     class Heading < Primer::Slot
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
@@ -71,7 +71,7 @@ module Primer
       end
     end
 
-    # :nodoc
+    # :nodoc:
     class Body < Slot
       CARET_DEFAULT = :top
       CARET_MAPPINGS = {

data/app/components/primer/progress_bar_component.rb

@@ -16,22 +16,22 @@ module Primer
     }.freeze
 
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example 20|Default
+    # @example auto|Default
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 25) %>
     #   <% end %>
     #
-    # @example 20|Small
+    # @example auto|Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 50) %>
     #   <% end %>
     #
-    # @example 30|Large
+    # @example auto|Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
     #     <% component.slot(:item, bg: :red_4, percentage: 75) %>
     #   <% end %>
     #
-    # @example 20|Multiple items
+    # @example auto|Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.slot(:item, percentage: 10) %>
     #     <% component.slot(:item, bg: :blue_4, percentage: 20) %>
@@ -54,7 +54,7 @@ module Primer
       items.any?
     end
 
-    # :nodoc
+    # :nodoc:
     class Item < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/spinner_component.rb

@@ -15,13 +15,13 @@ module Primer
     DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
 
     #
-    # @example 48|Default
+    # @example auto|Default
     #   <%= render(Primer::SpinnerComponent.new) %>
     #
-    # @example 32|Small
+    # @example auto|Small
     #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
     #
-    # @example 80|Large
+    # @example auto|Large
     #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
     #
     # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
@@ -34,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

@@ -22,16 +22,16 @@ module Primer
     TAG_DEFAULT = :span
     TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
 
-    # @example 40|Default
+    # @example auto|Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
     #
-    # @example 40|Colors
+    # @example auto|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" } %>
     #
-    # @example 40|Sizes
+    # @example auto|Sizes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
     #

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 auto|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 auto|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 auto|With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
     #     <% component.slot(:heading) do %>
     #       My Heading
@@ -67,7 +67,7 @@ module Primer
       heading.present?
     end
 
-    # :nodoc
+    # :nodoc:
     class Heading < ViewComponent::Slot
       include ClassNameHelper
 
@@ -86,7 +86,7 @@ module Primer
       end
     end
 
-    # :nodoc
+    # :nodoc:
     class Actions < ViewComponent::Slot
       include ClassNameHelper
 
@@ -100,7 +100,7 @@ module Primer
       end
     end
 
-    # :nodoc
+    # :nodoc:
     class Description < ViewComponent::Slot
       include ClassNameHelper
 

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 auto|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

@@ -11,7 +11,7 @@ module Primer
 
     attr_reader :system_arguments
 
-    # @example 75|Default
+    # @example auto|Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
     #       <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
@@ -36,7 +36,7 @@ module Primer
       avatar.present? || badge.present? || body.present?
     end
 
-    # :nodoc
+    # :nodoc:
     class Avatar < Primer::Slot
       attr_reader :system_arguments, :alt, :src, :size, :square
 
@@ -60,7 +60,7 @@ module Primer
       end
     end
 
-    # :nodoc
+    # :nodoc:
     class Badge < Primer::Slot
       attr_reader :system_arguments, :icon
 
@@ -78,7 +78,7 @@ module Primer
       end
     end
 
-    # :nodoc
+    # :nodoc:
     class Body < Primer::Slot
       attr_reader :system_arguments
 

data/app/components/primer/tooltip_component.rb

@@ -26,29 +26,29 @@ module Primer
       se
     ]
 
-    # @example 100|Default
+    # @example 55|Default
     #   <div class="pt-5">
     #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
     #   </div>
     #
-    # @example 100|Wrapping another component
+    # @example 65|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 65|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 65|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 65|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 auto|Default
     #   <div class="col-2">
     #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
     #   </div>
     #
-    # @example 25|Inline
+    # @example auto|Inline
     #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
     #
-    # @example 25|Expandable
+    # @example auto|Expandable
     #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
     #
-    # @example 25|Custom size
+    # @example auto|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 auto|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 auto|Align right
     #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
     #     <% component.with(:body) do %>
     #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>

data/app/components/primer/view_components.rb

@@ -26,6 +26,7 @@ require_relative "slot"
 # Components
 
 require_relative "avatar_component"
+require_relative "avatar_stack_component"
 require_relative "blankslate_component"
 require_relative "border_box_component"
 require_relative "box_component"
@@ -35,6 +36,7 @@ require_relative "button_group_component"
 require_relative "button_marketing_component"
 require_relative "counter_component"
 require_relative "details_component"
+require_relative "dropdown_component"
 require_relative "dropdown_menu_component"
 require_relative "flash_component"
 require_relative "flex_component"
@@ -43,6 +45,8 @@ require_relative "heading_component"
 require_relative "label_component"
 require_relative "layout_component"
 require_relative "link_component"
+require_relative "markdown_component"
+require_relative "menu_component"
 require_relative "octicon_component"
 require_relative "popover_component"
 require_relative "progress_bar_component"

data/lib/primer/classify.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "classify/cache"
+
 module Primer
   # :nodoc:
   class Classify
@@ -17,6 +19,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 +169,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
 
@@ -194,7 +197,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 +205,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 +219,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 +276,7 @@ module Primer
         end
       end
     end
+
+    Cache.preload!
   end
 end