primer_view_components 0.0.24 → 0.0.29

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(
@@ -96,7 +101,7 @@ module Primer
 
           preload(
             keys: Primer::Classify::BOX_SHADOW_KEY,
-            values: [true, :medium, :large, :extra_large, :none]
+            values: [true, :small, :medium, :large, :extra_large, :none]
           )
 
           preload(

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Background specific functional colors
+    # https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#background
+    class FunctionalBackgroundColors < FunctionalColors
+      FUNCTIONAL_OPTIONS = {
+        primary: :primary,
+        secondary: :secondary,
+        tertiary: :tertiary,
+        canvas: :canvas,
+        canvas_inset: :canvas_inset,
+        canvas_inverse: :canvas_inverse,
+        info: :info,
+        info_inverse: :info_inverse,
+        success: :success,
+        success_inverse: :success_inverse,
+        warning: :warning,
+        warning_inverse: :warning_inverse,
+        danger: :danger,
+        danger_inverse: :danger_inverse,
+        overlay: :overlay
+      }.freeze
+
+      MAPPINGS = {
+        white: FUNCTIONAL_OPTIONS[:primary],
+        gray_light: FUNCTIONAL_OPTIONS[:secondary],
+        gray: FUNCTIONAL_OPTIONS[:tertiary],
+        gray_dark: FUNCTIONAL_OPTIONS[:canvas_inverse],
+        blue_light: FUNCTIONAL_OPTIONS[:info],
+        blue: FUNCTIONAL_OPTIONS[:info_inverse],
+        green_light: FUNCTIONAL_OPTIONS[:success],
+        green: FUNCTIONAL_OPTIONS[:success_inverse],
+        yellow_light: FUNCTIONAL_OPTIONS[:warning],
+        yellow: FUNCTIONAL_OPTIONS[:warning_inverse],
+        red_light: FUNCTIONAL_OPTIONS[:danger],
+        red: FUNCTIONAL_OPTIONS[:danger_inverse]
+      }.freeze
+
+      OPTIONS = FUNCTIONAL_OPTIONS.values.freeze
+      OPTIONS_WITHOUT_MAPPINGS = [:purple_light, :purple, :yellow_dark, :orange, :pink].freeze
+      DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
+
+      class << self
+        def color(val)
+          functional_color(
+            key: "background",
+            value: val,
+            mappings: MAPPINGS,
+            non_functional_prefix: "bg",
+            functional_prefix: "color-bg",
+            number_prefix: "bg",
+            functional_options: OPTIONS,
+            options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Border specific functional colors
+    # https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#border
+    class FunctionalBorderColors < FunctionalColors
+      FUNCTIONAL_OPTIONS = {
+        primary: :primary,
+        secondary: :secondary,
+        tertiary: :tertiary,
+        info: :info,
+        success: :success,
+        warning: :warning,
+        danger: :danger,
+        inverse: :inverse,
+        overlay: :overlay
+      }.freeze
+
+      MAPPINGS = {
+        gray: FUNCTIONAL_OPTIONS[:primary],
+        gray_light: FUNCTIONAL_OPTIONS[:secondary],
+        gray_dark: FUNCTIONAL_OPTIONS[:tertiary],
+        blue: FUNCTIONAL_OPTIONS[:info],
+        green: FUNCTIONAL_OPTIONS[:success],
+        yellow: FUNCTIONAL_OPTIONS[:warning],
+        red: FUNCTIONAL_OPTIONS[:danger],
+        white: FUNCTIONAL_OPTIONS[:inverse]
+      }.freeze
+
+      OPTIONS = FUNCTIONAL_OPTIONS.values.freeze
+      OPTIONS_WITHOUT_MAPPINGS = [:gray_darker, :blue_light, :red_light, :purple, :black_fade, :white_fade].freeze
+      DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
+
+      class << self
+        def color(val)
+          functional_color(
+            key: "border",
+            value: val,
+            mappings: MAPPINGS,
+            non_functional_prefix: "border",
+            functional_prefix: "color-border",
+            number_prefix: "border",
+            functional_options: OPTIONS,
+            options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,66 @@
+# 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
+      class << self
+        def color(val)
+          # Implemented by class' childrens.
+        end
+
+        private
+
+        # @param key [String|Symbol] Option name.
+        # @param value [String|Symbol] Option value.
+        # @param mappings [Hash] A `color` => `functional_color` mapping hash.
+        # @param non_functional_prefix [String] The prefix to use for the non-functional color classes. E.g. "text" would create "text-value".
+        # @param functional_prefix [String] The prefix to use for the functional color classes. E.g. "color-text" would create "color-text-value".
+        # @param number_prefix [String] The prefix to use for colors ending with number. E.g. "text" would create "text-value-1".
+        # @param functional_options [Array] All the acceptable functional values.
+        # @param options_without_mappigs [Array] Non functional values that don't have an associated functional color.
+        def functional_color(
+          key:,
+          value:,
+          mappings:,
+          non_functional_prefix:,
+          functional_prefix: "",
+          number_prefix: "",
+          functional_options:,
+          options_without_mappigs: []
+        )
+          # the value is a functional color
+          return "#{number_prefix}-#{value.to_s.dasherize}" if ends_with_number?(value)
+          return "#{functional_prefix}-#{value.to_s.dasherize}" if functional_options.include?(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) || options_without_mappigs.include?(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? || silence_deprecations?
+
+            return "#{functional_prefix}-#{functional_color.to_s.dasherize}"
+          end
+
+          raise ArgumentError, "#{key} #{value} does not exist." unless Rails.env.production?
+        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
+
+        def silence_deprecations?
+          Rails.application.config.primer_view_components.silence_deprecations
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Text specific functional colors.
+    # https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#text
+    class FunctionalTextColors < FunctionalColors
+      FUNCTIONAL_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
+
+      # colors mapping to `nil` will preserve the old classes.
+      # e.g. `text: :orange` will generate `text-orange`.
+      MAPPINGS = {
+        gray_dark: FUNCTIONAL_OPTIONS[:primary],
+        gray: FUNCTIONAL_OPTIONS[:secondary],
+        gray_light: FUNCTIONAL_OPTIONS[:tertiary],
+        blue: FUNCTIONAL_OPTIONS[:link],
+        green: FUNCTIONAL_OPTIONS[:success],
+        yellow: FUNCTIONAL_OPTIONS[:warning],
+        red: FUNCTIONAL_OPTIONS[:danger],
+        white: FUNCTIONAL_OPTIONS[:white]
+      }.freeze
+
+      OPTIONS = [
+        :icon_primary,
+        :icon_secondary,
+        :icon_tertiary,
+        :icon_info,
+        :icon_success,
+        :icon_warning,
+        :icon_danger,
+        *FUNCTIONAL_OPTIONS.values
+      ].freeze
+      OPTIONS_WITHOUT_MAPPINGS = [:black, :orange, :orange_light, :purple, :pink, :inherit].freeze
+      DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
+
+      class << self
+        def color(val)
+          functional_color(
+            key: "color",
+            value: val,
+            mappings: MAPPINGS,
+            non_functional_prefix: "text",
+            functional_prefix: "color",
+            number_prefix: "color",
+            functional_options: OPTIONS,
+            options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
+          )
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -6,13 +6,18 @@
 # Use this helper to quietly ensure a value is
 # one that you expect:
 #
-# allowed_values  - allowed options for *value*
-# given_value     - input being coerced
-# fallback        - returned if *given_value* is not included in *allowed_values*
+# allowed_values    - allowed options for *value*
+# given_value       - input being coerced
+# fallback          - returned if *given_value* is not included in *allowed_values*
+# deprecated_values - deprecated options for *value*. Will warn of deprecation if not in production
 #
 # fetch_or_fallback([1,2,3], 5, 2) => 2
 # fetch_or_fallback([1,2,3], 1, 2) => 1
 # fetch_or_fallback([1,2,3], nil, 2) => 2
+#
+# With deprecations:
+# fetch_or_fallback([1,2], 3, 2, deprecated_values: [3]) => 3
+# fetch_or_fallback([1,2], nil, 2, deprecated_values: [3]) => 2
 module Primer
   # :nodoc:
   module FetchOrFallbackHelper
@@ -20,8 +25,12 @@ module Primer
 
     InvalidValueError = Class.new(StandardError)
 
-    def fetch_or_fallback(allowed_values, given_value, fallback = nil)
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: [])
       if allowed_values.include?(given_value)
+        given_value
+      elsif deprecated_values.include?(given_value)
+        ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
+
         given_value
       else
         if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
@@ -46,5 +55,9 @@ module Primer
         fallback
       end
     end
+
+    def silence_deprecations?
+      Rails.application.config.primer_view_components.silence_deprecations
+    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.rb

@@ -1,22 +1,20 @@
 # 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 to allow shorthand calls for Primer components
   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?
+    HELPERS = {
+      octicon: "Primer::OcticonComponent",
+      heading: "Primer::HeadingComponent",
+      time_ago: "Primer::TimeAgoComponent"
+    }.freeze
 
-      render component.new(**component_args), &block
+    HELPERS.each do |name, component|
+      define_method "primer_#{name}" do |**component_args, &block|
+        render component.constantize.new(**component_args), &block
+      end
     end
   end
 end

data/lib/primer/view_components/engine.rb

@@ -12,6 +12,10 @@ module Primer
         #{root}/app/lib
       ]
 
+      config.primer_view_components = ActiveSupport::OrderedOptions.new
+      config.primer_view_components.force_functional_colors = true
+      config.primer_view_components.silence_deprecations = false
+
       initializer "primer_view_components.assets" do |app|
         app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)
       end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 24
+      PATCH = 29
 
       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::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":"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::AutoCompleteComponent":"alpha","Primer::AutoCompleteItemComponent":"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":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"beta","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"alpha","Primer::TimelineItemComponent":"beta","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.24
+  version: 0.0.29
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-02 00:00:00.000000000 Z
+date: 2021-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: octicons_helper
@@ -126,6 +126,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 5.6.0
+- !ruby/object:Gem::Dependency
+  name: mocha
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: pry
   requirement: !ruby/object:Gem::Requirement
@@ -236,6 +250,14 @@ 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.d.ts
+- app/components/primer/auto_complete_component.html.erb
+- app/components/primer/auto_complete_component.js
+- app/components/primer/auto_complete_component.rb
+- app/components/primer/auto_complete_component.ts
+- app/components/primer/auto_complete_item_component.rb
 - app/components/primer/avatar_component.rb
 - app/components/primer/avatar_stack_component.html.erb
 - app/components/primer/avatar_stack_component.rb
@@ -276,6 +298,7 @@ files:
 - app/components/primer/octicon_component.rb
 - app/components/primer/popover_component.html.erb
 - app/components/primer/popover_component.rb
+- app/components/primer/primer.d.ts
 - app/components/primer/primer.js
 - app/components/primer/primer.ts
 - app/components/primer/progress_bar_component.html.erb
@@ -286,12 +309,17 @@ 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.d.ts
 - 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/time_ago_component.d.ts
+- 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,10 +329,15 @@ files:
 - app/lib/primer/class_name_helper.rb
 - app/lib/primer/classify.rb
 - app/lib/primer/classify/cache.rb
+- app/lib/primer/classify/functional_background_colors.rb
+- app/lib/primer/classify/functional_border_colors.rb
+- app/lib/primer/classify/functional_colors.rb
+- app/lib/primer/classify/functional_text_colors.rb
 - 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
 - lib/primer/view_components/engine.rb
 - lib/primer/view_components/version.rb
@@ -331,7 +364,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