primer_view_components 0.0.27 → 0.0.28

data/app/components/primer/heading_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use the Heading component to wrap a component that will create a heading element
   class HeadingComponent < Primer::Component
-    view_helper :heading
+    status :beta
 
     # @example Default
     #   <%= render(Primer::HeadingComponent.new) { "H1 Text" } %>

data/app/components/primer/label_component.rb

@@ -16,7 +16,8 @@ module Primer
       orange: "Label--orange",
       purple: "Label--purple"
     }.freeze
-    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
+    DEPRECATED_SCHEME_OPTIONS = [:orange, :purple].freeze
+    SCHEME_OPTIONS = ([*SCHEME_MAPPINGS.keys, nil] - DEPRECATED_SCHEME_OPTIONS).freeze
 
     VARIANT_MAPPINGS = {
       large: "Label--large",
@@ -37,23 +38,18 @@ module Primer
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
     #
-    # @example Deprecated schemes
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :orange)) { "Orange" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :purple)) { "Purple" } %>
-    #
     # @param title [String] `title` attribute for the component element.
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(title:, scheme: nil, variant: nil, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:bg] = :blue if scheme.nil?
       @system_arguments[:tag] ||= :span
       @system_arguments[:title] = title
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, deprecated_values: DEPRECATED_SCHEME_OPTIONS)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
       )
     end

data/app/components/primer/link_component.rb

@@ -5,27 +5,57 @@ module Primer
   class LinkComponent < Primer::Component
     status :beta
 
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :primary => "Link--primary",
+      :secondary => "Link--secondary"
+    }.freeze
+
+    DEFAULT_TAG = :a
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
     # @example Default
-    #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com")) { "Link" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#")) { "Link" } %>
     #
     # @example Muted
-    #   <%= render(Primer::LinkComponent.new(href: "http://www.google.com", muted: true)) { "Link" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
+    #
+    # @example Variants
+    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
+    #
+    # @example Without underline
+    #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
     #
-    # @param href [String] URL to be used for the Link
-    # @param muted [Boolean] Uses light gray for Link color, and blue on hover
+    # @example Span as link
+    #   <%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>
+    #
+    # @param tag [String]  <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
+    # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
+    # @param variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
+    # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
+    # @param underline [Boolean] Whether or not to underline the link.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(href:, muted: false, **system_arguments)
+    def initialize(href: nil, tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] = :a
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:href] = href
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "muted-link" => fetch_or_fallback_boolean(muted, false)
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        "Link" => tag == :span,
+        "Link--muted" => muted,
+        "no-underline" => !underline
       )
     end
 
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
+
+    def before_render
+      raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
+    end
   end
 end

data/app/components/primer/octicon_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
   class OcticonComponent < Primer::Component
-    view_helper :octicon
     status :beta
 
     include ClassNameHelper

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

@@ -1,10 +1,6 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= render body.component do %>
-    <% if heading %>
-      <%= render heading.component do %>
-        <%= heading.content %>
-      <% end %>
-    <% end %>
-    <%= body.content %>
+  <%= render(body_component) do %>
+    <%= heading %>
+    <%= body %>
   <% end %>
 <% end %>

data/app/components/primer/popover_component.rb

@@ -5,37 +5,84 @@ module Primer
   #
   # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
   class PopoverComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
+    status :beta
 
-    with_slot :heading, class_name: "Heading"
-    with_slot :body, class_name: "Body"
+    CARET_DEFAULT = :top
+    CARET_MAPPINGS = {
+      CARET_DEFAULT => "",
+      :bottom => "Popover-message--bottom",
+      :bottom_right => "Popover-message--bottom-right",
+      :bottom_left => "Popover-message--bottom-left",
+      :left => "Popover-message--left",
+      :left_bottom => "Popover-message--left-bottom",
+      :left_top => "Popover-message--left-top",
+      :right => "Popover-message--right",
+      :right_bottom => "Popover-message--right-bottom",
+      :right_top => "Popover-message--right-top",
+      :top_left => "Popover-message--top-left",
+      :top_right => "Popover-message--top-right"
+    }.freeze
+
+    # The heading
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :heading, lambda { |**system_arguments|
+      system_arguments[:mb] ||= 2
+      system_arguments[:tag] ||= :h4
+
+      Primer::HeadingComponent.new(**system_arguments)
+    }
+
+    # The body
+    #
+    # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::CARET_MAPPINGS.keys) %>
+    # @param large [Boolean] Whether to use the large version of the component.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments, &block|
+      system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        "Popover-message Box",
+        CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+        "Popover-message--large" => large
+      )
+      system_arguments[:p] ||= 4
+      system_arguments[:mt] ||= 2
+      system_arguments[:mx] ||= :auto
+      system_arguments[:text_align] ||= :left
+      system_arguments[:box_shadow] ||= :large
+
+      # This is a hack to allow the parent to set the slot's content
+      @body_arguments = system_arguments
+      block&.call
+    }
 
     # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.slot(:body) do %>
+    #     <% component.body do %>
     #       This is the Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.slot(:body, large: true) do %>
+    #     <% component.body(large: true) do %>
     #       This is the large Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.slot(:heading) do %>
+    #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.slot(:body, caret: :left) do %>
+    #     <% component.body(caret: :left) do %>
     #       This is the large Popover body.
     #     <% end %>
     #   <% end %>
@@ -57,59 +104,8 @@ module Primer
       body.present?
     end
 
-    # :nodoc:
-    class Heading < Primer::Slot
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:mb] ||= 2
-        @system_arguments[:tag] ||= :h4
-      end
-
-      def component
-        Primer::HeadingComponent.new(**@system_arguments)
-      end
-    end
-
-    # :nodoc:
-    class Body < Slot
-      CARET_DEFAULT = :top
-      CARET_MAPPINGS = {
-        CARET_DEFAULT => "",
-        :bottom => "Popover-message--bottom",
-        :bottom_right => "Popover-message--bottom-right",
-        :bottom_left => "Popover-message--bottom-left",
-        :left => "Popover-message--left",
-        :left_bottom => "Popover-message--left-bottom",
-        :left_top => "Popover-message--left-top",
-        :right => "Popover-message--right",
-        :right_bottom => "Popover-message--right-bottom",
-        :right_top => "Popover-message--right-top",
-        :top_left => "Popover-message--top-left",
-        :top_right => "Popover-message--top-right"
-      }.freeze
-
-      # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::Body::CARET_MAPPINGS.keys) %>
-      # @param large [Boolean] Whether to use the large version of the component.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(caret: CARET_DEFAULT, large: false, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:classes] = class_names(
-          system_arguments[:classes],
-          "Popover-message Box",
-          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
-          "Popover-message--large" => large
-        )
-        @system_arguments[:p] ||= 4
-        @system_arguments[:mt] ||= 2
-        @system_arguments[:mx] ||= :auto
-        @system_arguments[:text_align] ||= :left
-        @system_arguments[:box_shadow] ||= :large
-      end
-
-      def component
-        Primer::BoxComponent.new(**@system_arguments)
-      end
+    def body_component
+      Primer::BoxComponent.new(**@body_arguments)
     end
   end
 end

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

@@ -11,7 +11,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 +39,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/tab_container_component.d.ts

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

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

@@ -4,6 +4,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 +41,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>

data/app/lib/primer/classify.rb

@@ -17,7 +17,6 @@ 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
@@ -80,18 +79,20 @@ module Primer
         ]
       }
     }.freeze
-    BORDER_KEYS = %i[border border_color].freeze
+    BORDER_KEY = :border
+    BORDER_COLOR_KEY = :border_color
     BORDER_MARGIN_KEYS = %i[border_top border_bottom border_left border_right].freeze
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
-      BORDER_KEYS +
       BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       [
+        BORDER_KEY,
+        BORDER_COLOR_KEY,
         BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
@@ -198,25 +199,17 @@ module Primer
           if val.to_s.start_with?("#")
             memo[:styles] << "background-color: #{val};"
           else
-            memo[:classes] << "bg-#{val.to_s.dasherize}"
+            memo[:classes] << Primer::Classify::FunctionalBackgroundColors.color(val)
           end
         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
-               FUNCTIONAL_COLOR_REGEX.match?(val)
-              "color-#{val.to_s.dasherize}"
-            else
-              "text-#{val.to_s.dasherize}"
-            end
+          memo[:classes] << Primer::Classify::FunctionalTextColors.color(val)
         elsif key == DISPLAY_KEY
           memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
         elsif key == VERTICAL_ALIGN_KEY
           memo[:classes] << "v-align-#{val.to_s.dasherize}"
         elsif key == WORD_BREAK_KEY
           memo[:classes] << "wb-#{val.to_s.dasherize}"
-        elsif BORDER_KEYS.include?(key)
+        elsif key == BORDER_KEY
           border_value = if val == true
                            "border"
                          else
@@ -224,6 +217,8 @@ module Primer
                          end
 
           memo[:classes] << border_value
+        elsif key == BORDER_COLOR_KEY
+          memo[:classes] << Primer::Classify::FunctionalBorderColors.color(val)
         elsif BORDER_MARGIN_KEYS.include?(key)
           memo[:classes] << "#{key.to_s.dasherize}-#{val}"
         elsif key == BORDER_RADIUS_KEY

data/app/lib/primer/classify/cache.rb

@@ -50,8 +50,13 @@ module Primer
           )
 
           preload(
-            keys: [Primer::Classify::COLOR_KEY, Primer::Classify::BG_KEY],
-            values: [:blue, :gray_dark, :gray, :gray_light, :red, :orange, :orange_light, :yellow, :green, :purple, :white, :pink]
+            keys: [Primer::Classify::COLOR_KEY],
+            values: [*Primer::Classify::FunctionalTextColors::OPTIONS, *Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS]
+          )
+
+          preload(
+            keys: [Primer::Classify::BG_KEY],
+            values: [*Primer::Classify::FunctionalBackgroundColors::OPTIONS, *Primer::Classify::FunctionalBackgroundColors::DEPRECATED_OPTIONS]
           )
 
           preload(