primer_view_components 0.0.26 → 0.0.27

data/app/components/primer/state_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Component for rendering the status of an item.
   class StateComponent < Primer::Component
+    status :beta
+
     COLOR_DEFAULT = :default
     NEW_COLOR_MAPPINGS = {
       open: "State--open",
@@ -68,9 +70,5 @@ module Primer
     def call
       render(Primer::BaseComponent.new(**@system_arguments)) { content }
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

data/app/components/primer/subhead_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Use the Subhead component for page headings.
   class SubheadComponent < Primer::Component
+    status :beta
+
     include ViewComponent::SlotableV2
 
     # The heading
@@ -97,9 +99,5 @@ module Primer
     def render?
       heading.present?
     end
-
-    def self.status
-      Primer::Component::STATUSES[:beta]
-    end
   end
 end

data/app/components/primer/time_ago_component.js

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

data/app/components/primer/time_ago_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
+  class TimeAgoComponent < Primer::Component
+    #
+    # @example Default
+    #   <%= render(Primer::TimeAgoComponent.new(time: Time.at(628232400))) %>
+    #
+    # @param time [Time] The time to be formatted
+    # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(time:, micro: false, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:datetime] = time.utc.iso8601
+      @system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
+      @system_arguments[:tag] = "time-ago"
+      @system_arguments[:format] = "micro" if micro
+      @time = time
+      @micro = micro
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { time_in_words }
+    end
+
+    private
+
+    def time_in_words
+      return @time.in_time_zone.strftime("%b %-d, %Y") unless @micro
+
+      seconds_ago = Time.current - @time
+
+      if seconds_ago < 1.minute
+        "1m"
+      elsif seconds_ago >= 1.minute && seconds_ago < 1.hour
+        "#{(seconds_ago / 60).floor}m"
+      elsif seconds_ago >= 1.hour && seconds_ago < 1.day
+        "#{(seconds_ago / 60 / 60).floor}h"
+      elsif seconds_ago >= 1.day && seconds_ago < 1.year
+        "#{(seconds_ago / 60 / 60 / 24).floor}d"
+      elsif seconds_ago >= 1.year
+        "#{(seconds_ago / 60 / 60 / 24 / 365).floor}y"
+      end
+    end
+  end
+end

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/lib/primer/view_components/version.rb

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

data/static/statuses.json

@@ -1 +1 @@
-{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","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":"beta","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.26
+  version: 0.0.27
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-03 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