primer_view_components 0.0.22 → 0.0.27

data/app/components/primer/time_ago_component.ts

@@ -0,0 +1 @@
+import '@github/time-elements'

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

@@ -1,11 +1,11 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if actions && @align == :right %>
+  <% if @align == :right %>
     <%= actions %>
   <% end %>
-  <%= render Primer::BaseComponent.new(tag: :ul, classes: "UnderlineNav-body list-style-none") do %>
-    <%= body %>
-  <% end %>
-  <% if actions && @align == :left %>
+
+  <%= body %>
+
+  <% if @align == :left %>
     <%= actions %>
   <% end %>
 <% end %>

data/app/components/primer/underline_nav_component.rb

@@ -5,27 +5,46 @@ module Primer
   # underlined selected state, typically used for navigation placed at the top
   # of the page.
   class UnderlineNavComponent < Primer::Component
+    include ViewComponent::SlotableV2
+
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
-    with_content_areas :body, :actions
+    #  Use the body for the navigation items
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("UnderlineNav-body", "list-style-none", system_arguments[:classes])
+      system_arguments[:tag] ||= :ul
+
+      Primer::BaseComponent.new(**system_arguments) { content }
+    }
+
+    #  Use actions for a call to action
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :actions, lambda { |**system_arguments|
+      system_arguments[:tag] ||= :div
+      system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
+      Primer::BaseComponent.new(**system_arguments) { content }
+    }
 
     # @example Default
     #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
-    #     <% component.with(:body) do %>
+    #     <% component.body do %>
     #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
     #     <% end %>
-    #     <% component.with(:actions) do %>
+    #     <% component.actions do %>
     #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
     #     <% end %>
     #   <% end %>
     #
     # @example Align right
     #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
-    #     <% component.with(:body) do %>
+    #     <% component.body do %>
     #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
     #     <% end %>
-    #     <% component.with(:actions) do %>
+    #     <% component.actions do %>
     #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
     #     <% end %>
     #   <% end %>

data/app/lib/primer/classify/functional_colors.rb.orig

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration
+    class FunctionalColors
+      FUNCTIONAL_COLOR_REGEX = /(primary|secondary|tertiary|link|success|warning|danger|info|inverse|text_white)/.freeze
+
+      FUNCTIONAL_TEXT_OPTIONS = {
+        primary: :text_primary,
+        secondary: :text_secondary,
+        tertiary: :text_tertiary,
+        link: :text_link,
+        success: :text_success,
+        warning: :text_warning,
+        danger: :text_danger,
+        white: :text_white,
+        inverse: :text_inverse,
+      }.freeze
+
+      TEXT_COLOR_MAPPINGS = {
+        gray_dark: FUNCTIONAL_TEXT_OPTIONS[:primary],
+        gray: FUNCTIONAL_TEXT_OPTIONS[:secondary],
+        gray_light: FUNCTIONAL_TEXT_OPTIONS[:tertiary],
+        blue: FUNCTIONAL_TEXT_OPTIONS[:link],
+        green: FUNCTIONAL_TEXT_OPTIONS[:success],
+        yellow: FUNCTIONAL_TEXT_OPTIONS[:warning],
+        red: FUNCTIONAL_TEXT_OPTIONS[:danger],
+        white: FUNCTIONAL_TEXT_OPTIONS[:white],
+        # still unsure what will happen with these colors
+        black: nil,
+        orange: nil,
+        orange_light: nil,
+        purple: nil,
+        pink: nil,
+        inherit: nil
+      }.freeze
+
+<<<<<<< HEAD
+      TEXT_OPTIONS = [
+        :icon_primary,
+        :icon_secondary,
+        :icon_tertiary,
+        :icon_info,
+        :icon_success,
+        :icon_warning,
+        :icon_danger,
+        *FUNCTIONAL_TEXT_OPTIONS.values
+      ].freeze
+      DEPRECATED_TEXT_OPTIONS = TEXT_COLOR_MAPPINGS.keys.freeze
+=======
+      BORDER_COLOR_MAPPINGS = {
+        gray: :primary,
+        gray_light: :secondary,
+        gray_dark: :tertiary,
+        blue: :info,
+        green: :success,
+        yellow: :warning,
+        red: :danger,
+        white: :inverse,
+        # still unsure what will happen with these colors
+        gray_darker: nil,
+        blue_light: nil,
+        red_light: nil,
+        purple: nil,
+        black_fade: nil,
+        white_fade: nil
+      }.freeze
+>>>>>>> extract functional color method and apply it to border
+
+      class << self
+        def text_color(val)
+          functional_color(
+            value: val,
+            functional_prefix: "color",
+            non_functional_prefix: "text",
+            mappings: TEXT_COLOR_MAPPINGS,
+            key: "color"
+          )
+        end
+
+        def border_color(val)
+          functional_color(
+            value: val,
+            functional_prefix: "color-border",
+            non_functional_prefix: "border",
+            mappings: BORDER_COLOR_MAPPINGS,
+            key: "border"
+          )
+        end
+
+        private
+
+        def functional_color(value:, functional_prefix:, non_functional_prefix:, mappings:, key:)
+          # the value is a functional color
+          return "#{functional_prefix}-#{value.to_s.dasherize}" if ends_with_number?(value) || FUNCTIONAL_COLOR_REGEX.match?(value)
+          # if the app still allows non functional colors
+          return "#{non_functional_prefix}-#{value.to_s.dasherize}" unless force_functional_colors?
+
+          if mappings.key?(value)
+            functional_color = mappings[value]
+            # colors without functional mapping stay the same
+            return "#{non_functional_prefix}-#{value.to_s.dasherize}" if functional_color.blank?
+
+            ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production?
+
+            return "#{functional_prefix}-#{functional_color.to_s.dasherize}"
+          end
+
+          raise ArgumentError, "#{key} #{value} does not exist."
+        end
+
+        def ends_with_number?(val)
+          char_code = val[-1].ord
+          char_code >= 48 && char_code <= 57
+        end
+
+        def force_functional_colors?
+          Rails.application.config.primer_view_components.force_functional_colors
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Primer
+  # :nodoc:
+  module Status
+    # DSL to allow components to register their status.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Primer::Status::Dsl
+    #   status :beta
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      STATUSES = {
+        alpha: :alpha,
+        beta: :beta,
+        stable: :stable,
+        deprecated: :deprecated
+      }.freeze
+
+      class UnknownStatusError < StandardError; end
+
+      included do
+        class_attribute :component_status, instance_writer: false, default: STATUSES[:alpha]
+      end
+
+      class_methods do
+        def status(status = nil)
+          return component_status if status.nil?
+
+          raise UnknownStatusError, "status #{status} does not exist" if STATUSES[status].nil?
+
+          self.component_status = STATUSES[status]
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/test_selector_helper.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Primer
+  # Module to allow components to deal with the `test_selector` argument.
+  # It will only add the selector if env is not Production.
+  #
+  # test_selecotr: "foo" => data-test-selector="foo"
+  module TestSelectorHelper
+    TEST_SELECTOR_TAG = :test_selector
+
+    def add_test_selector(args)
+      if args.key?(TEST_SELECTOR_TAG) && !Rails.env.production?
+        args[:data] ||= {}
+        args[:data][TEST_SELECTOR_TAG] = args[TEST_SELECTOR_TAG]
+      end
+
+      args.except(TEST_SELECTOR_TAG)
+    end
+  end
+end

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

@@ -10,10 +10,10 @@ module Primer
     # Example:
     #
     # class MyComponent < ViewComponent::Base
-    #   include Primer::ViewHelper::DSL
+    #   include Primer::ViewHelper::Dsl
     #   view_helper :my_component
     # end
-    module DSL
+    module Dsl
       extend ActiveSupport::Concern
 
       class ViewHelperAlreadyDefined < StandardError; end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 22
+      PATCH = 27
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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":"beta","Primer::SubheadComponent":"alpha","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"}
+{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","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":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimeAgoComponent":"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.22
+  version: 0.0.27
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-01 00:00:00.000000000 Z
+date: 2021-03-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: octicons_helper
@@ -236,6 +236,9 @@ files:
 - README.md
 - app/assets/javascripts/primer_view_components.js
 - app/assets/javascripts/primer_view_components.js.map
+- app/assets/javascripts/primer_view_components.js.map.orig
+- app/assets/javascripts/primer_view_components.js.orig
+- app/components/primer/auto_complete_component.js
 - app/components/primer/avatar_component.rb
 - app/components/primer/avatar_stack_component.html.erb
 - app/components/primer/avatar_stack_component.rb
@@ -292,6 +295,9 @@ files:
 - app/components/primer/tab_nav_component.html.erb
 - app/components/primer/tab_nav_component.rb
 - app/components/primer/text_component.rb
+- app/components/primer/time_ago_component.js
+- app/components/primer/time_ago_component.rb
+- app/components/primer/time_ago_component.ts
 - app/components/primer/timeline_item_component.html.erb
 - app/components/primer/timeline_item_component.rb
 - app/components/primer/tooltip_component.rb
@@ -301,8 +307,11 @@ files:
 - app/lib/primer/class_name_helper.rb
 - app/lib/primer/classify.rb
 - app/lib/primer/classify/cache.rb
+- app/lib/primer/classify/functional_colors.rb.orig
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
+- app/lib/primer/status/dsl.rb
+- app/lib/primer/test_selector_helper.rb
 - app/lib/primer/view_helper.rb
 - app/lib/primer/view_helper/dsl.rb
 - lib/primer/view_components.rb
@@ -331,7 +340,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System