primer_view_components 0.0.38 → 0.0.39

data/app/components/primer/subhead_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use the Subhead component for page headings.
+  # Use `Subhead` for page headings.
   class SubheadComponent < Primer::Component
     status :beta
 

data/app/components/primer/tab_container_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TabContainer to create tabbed content with keyboard support. This component does not add any styles.
+  # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
   # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::TabNavComponent) %>.
   #
   # This component requires javascript.

data/app/components/primer/tab_nav_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
+  # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
   class TabNavComponent < Primer::Component
     include Primer::TabbedComponentHelper
 

data/app/components/primer/text_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # The Text component is a wrapper component that will apply typography styles to the text inside.
+  # `Text` is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
     status :beta
 

data/app/components/primer/time_ago_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
+  # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
   class TimeAgoComponent < Primer::Component
     status :beta
 

data/app/components/primer/timeline_item_component.rb

@@ -19,7 +19,7 @@ module Primer
 
     # Badge that will be connected to other TimelineItems.
     #
-    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :badge, "BadgeComponent"
 

data/app/components/primer/tooltip_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
+  # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class TooltipComponent < Primer::Component
     DIRECTION_DEFAULT = :n
     ALIGN_DEFAULT = :default

data/app/components/primer/truncate.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Truncate to shorten overflowing text with an ellipsis.
+  # Use `Truncate` to shorten overflowing text with an ellipsis.
   class Truncate < Primer::Component
     status :beta
 

data/app/components/primer/underline_nav_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use the UnderlineNav component to style navigation with a minimal
+  # Use `UnderlineNav` to style navigation with a minimal
   # underlined selected state, typically used for navigation placed at the top
   # of the page.
   class UnderlineNavComponent < Primer::Component

data/app/lib/primer/classify.rb

@@ -3,13 +3,8 @@
 module Primer
   # :nodoc:
   class Classify
-    DIRECTION_KEY = :direction
-    JUSTIFY_CONTENT_KEY = :justify_content
-    ALIGN_ITEMS_KEY = :align_items
     DISPLAY_KEY = :display
     SPACING_KEYS = Primer::Classify::Spacing::KEYS
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
-    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
@@ -22,16 +17,15 @@ module Primer
     VERTICAL_ALIGN_KEY = :vertical_align
     WORD_BREAK_KEY = :word_break
     TEXT_KEYS = %i[text_align font_weight].freeze
-    FLEX_KEY = :flex
-    FLEX_GROW_KEY = :flex_grow
-    FLEX_SHRINK_KEY = :flex_shrink
-    ALIGN_SELF_KEY = :align_self
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
     VISIBILITY_KEY = :visibility
     ANIMATION_KEY = :animation
 
+    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+
     BOOLEAN_MAPPINGS = {
       underline: {
         mappings: [
@@ -89,6 +83,7 @@ module Primer
       BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
+      Primer::Classify::Flex::KEYS +
       [
         BORDER_KEY,
         BORDER_COLOR_KEY,
@@ -98,13 +93,6 @@ module Primer
         DISPLAY_KEY,
         VERTICAL_ALIGN_KEY,
         WORD_BREAK_KEY,
-        DIRECTION_KEY,
-        JUSTIFY_CONTENT_KEY,
-        ALIGN_ITEMS_KEY,
-        FLEX_KEY,
-        FLEX_GROW_KEY,
-        FLEX_SHRINK_KEY,
-        ALIGN_SELF_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
@@ -120,7 +108,7 @@ module Primer
         extracted_results[:class] = [
           validated_class_names(classes),
           extracted_results.delete(:classes)
-        ].compact.join(" ").presence
+        ].compact.join(" ").strip.presence
 
         extracted_results[:style] = [
           extracted_results.delete(:styles),
@@ -216,21 +204,8 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}-#{val}"
         elsif key == BORDER_RADIUS_KEY
           memo[:classes] << "rounded-#{val}"
-        elsif key == DIRECTION_KEY
-          memo[:classes] << "flex#{breakpoint}-#{val.to_s.dasherize}"
-        elsif key == JUSTIFY_CONTENT_KEY
-          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
-          memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
-        elsif key == ALIGN_ITEMS_KEY
-          memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
-        elsif key == FLEX_KEY
-          memo[:classes] << "flex-#{val}"
-        elsif key == FLEX_GROW_KEY
-          memo[:classes] << "flex-grow-#{val}"
-        elsif key == FLEX_SHRINK_KEY
-          memo[:classes] << "flex-shrink-#{val}"
-        elsif key == ALIGN_SELF_KEY
-          memo[:classes] << "flex-self-#{val}"
+        elsif Primer::Classify::Flex::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
         elsif key == WIDTH_KEY || key == HEIGHT_KEY
           if val == :fit || val == :fill
             memo[:classes] << "#{key}-#{val}"

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

@@ -40,18 +40,18 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::DIRECTION_KEY,
-            values: [:row, :column]
+            keys: Primer::Classify::Flex::DIRECTION_KEY,
+            values: Primer::Classify::Flex::DIRECTION_VALUES
           )
 
           preload(
-            keys: Primer::Classify::JUSTIFY_CONTENT_KEY,
-            values: [:flex_start, :flex_end, :center, :space_between, :space_around]
+            keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
+            values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
           )
 
           preload(
-            keys: Primer::Classify::ALIGN_ITEMS_KEY,
-            values: [:flex_start, :flex_end, :center, :baseline, :stretch]
+            keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
+            values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
           )
 
           preload(
@@ -61,12 +61,12 @@ module Primer
 
           preload(
             keys: [Primer::Classify::COLOR_KEY],
-            values: [*Primer::Classify::FunctionalTextColors::OPTIONS, *Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS]
+            values: Primer::Classify::FunctionalTextColors::OPTIONS
           )
 
           preload(
             keys: [Primer::Classify::BG_KEY],
-            values: [*Primer::Classify::FunctionalBackgroundColors::OPTIONS, *Primer::Classify::FunctionalBackgroundColors::DEPRECATED_OPTIONS]
+            values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
           )
 
           preload(
@@ -90,18 +90,23 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::FLEX_KEY,
-            values: [1, :auto]
+            keys: Primer::Classify::Flex::FLEX_KEY,
+            values: Primer::Classify::Flex::FLEX_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::FLEX_GROW_KEY, Primer::Classify::FLEX_SHRINK_KEY],
-            values: [0]
+            keys: Primer::Classify::Flex::GROW_KEY,
+            values: Primer::Classify::Flex::GROW_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::ALIGN_SELF_KEY],
-            values: [:auto, :start, :end, :center, :baseline, :stretch]
+            keys: Primer::Classify::Flex::SHRINK_KEY,
+            values: Primer::Classify::Flex::SHRINK_VALUES
+          )
+
+          preload(
+            keys: Primer::Classify::Flex::ALIGN_SELF_KEY,
+            values: Primer::Classify::Flex::ALIGN_SELF_VALUES
           )
 
           preload(

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

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Handler for PrimerCSS flex classes.
+    class Flex
+      extend Primer::FetchOrFallbackHelper
+
+      FLEX_KEY = :flex
+      FLEX_VALUES = [1, :auto].freeze
+
+      WRAP_KEY = :flex_wrap
+      WRAP_MAPPINGS = {
+        wrap: "flex-wrap",
+        nowrap: "flex-nowrap",
+        reverse: "flex-wrap-reverse"
+      }.freeze
+
+      SHRINK_KEY = :flex_shrink
+      SHRINK_VALUES = [0].freeze
+
+      GROW_KEY = :flex_grow
+      GROW_VALUES = [0].freeze
+
+      ALIGN_SELF_KEY = :align_self
+      ALIGN_SELF_VALUES = [:auto, :start, :end, :center, :baseline, :stretch].freeze
+
+      DIRECTION_KEY = :direction
+      DIRECTION_VALUES = [:column, :column_reverse, :row, :row_reverse].freeze
+
+      JUSTIFY_CONTENT_KEY = :justify_content
+      JUSTIFY_CONTENT_VALUES = [:flex_start, :flex_end, :center, :space_between, :space_around].freeze
+
+      ALIGN_ITEMS_KEY = :align_items
+      ALIGN_ITEMS_VALUES = [:flex_start, :flex_end, :center, :baseline, :stretch].freeze
+
+      KEYS = [FLEX_KEY, WRAP_KEY, SHRINK_KEY, GROW_KEY, ALIGN_SELF_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY].freeze
+      RESPONSIVE_KEYS = [DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY].freeze
+
+      class << self
+        def classes(key, value, breakpoint)
+          send(key, value, breakpoint)
+        end
+
+        private
+
+        def flex(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: FLEX_VALUES,
+            prefix: "flex"
+          )
+        end
+
+        def flex_shrink(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: SHRINK_VALUES,
+            prefix: "flex-shrink"
+          )
+        end
+
+        def flex_grow(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: GROW_VALUES,
+            prefix: "flex-grow"
+          )
+        end
+
+        def align_self(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: ALIGN_SELF_VALUES,
+            prefix: "flex-self"
+          )
+        end
+
+        def flex_wrap(value, _breakpoint)
+          WRAP_MAPPINGS[fetch_or_fallback(WRAP_MAPPINGS.keys, value)]
+        end
+
+        def direction(value, breakpoint)
+          val = fetch_or_fallback(DIRECTION_VALUES, value)
+
+          "flex#{breakpoint}-#{val.to_s.dasherize}"
+        end
+
+        def justify_content(value, breakpoint)
+          val = fetch_or_fallback(JUSTIFY_CONTENT_VALUES, value)
+
+          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          "flex#{breakpoint}-justify-#{formatted_value}"
+        end
+
+        def align_items(value, breakpoint)
+          val = fetch_or_fallback(ALIGN_ITEMS_VALUES, value)
+
+          formatted_value = val.to_s.gsub("flex_", "")
+          "flex#{breakpoint}-items-#{formatted_value}"
+        end
+
+        def generate(value:, allowed_values:, prefix:)
+          val = fetch_or_fallback(allowed_values, value)
+
+          "#{prefix}-#{val}"
+        end
+      end
+    end
+  end
+end

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

@@ -13,8 +13,7 @@ module Primer
         success: :success,
         warning: :warning,
         danger: :danger,
-        inverse: :inverse,
-        overlay: :overlay
+        inverse: :inverse
       }.freeze
 
       MAPPINGS = {

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -25,10 +25,10 @@ module Primer
 
     InvalidValueError = Class.new(StandardError)
 
-    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: [])
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
       if allowed_values.include?(given_value)
         given_value
-      elsif deprecated_values.include?(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

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module Octicon
+    # :nodoc:
+    class Cache
+      LOOKUP = {} # rubocop:disable Style/MutableConstant
+      # Preload the top 20 used icons.
+      PRELOADED_ICONS = [:alert, :check, :"chevron-down", :clippy, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
+
+      class << self
+        def read(key)
+          LOOKUP[key]
+        end
+
+        # Cache size limit.
+        def limit
+          500
+        end
+
+        def set(key, value)
+          LOOKUP[key] = value
+
+          # Remove first item when the cache is too large.
+          LOOKUP.shift if LOOKUP.size > limit
+        end
+
+        def clear!
+          LOOKUP.clear
+        end
+
+        def preload!
+          PRELOADED_ICONS.each { |icon| Primer::OcticonComponent.new(icon: icon) }
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

data/static/statuses.json

@@ -1 +1 @@
-{"Primer::AutoComplete":"beta","Primer::AutoComplete::Item":"beta","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"beta","Primer::BaseButton":"beta","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"beta","Primer::ButtonGroup":"beta","Primer::ButtonMarketingComponent":"alpha","Primer::ClipboardCopy":"alpha","Primer::CloseButton":"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::HiddenTextExpander":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::Navigation::TabComponent":"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::TextComponent":"beta","Primer::TimeAgoComponent":"beta","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::Truncate":"beta","Primer::UnderlineNavComponent":"alpha"}
+{"Primer::AutoComplete":"beta","Primer::AutoComplete::Item":"beta","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"beta","Primer::BaseButton":"beta","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"beta","Primer::ButtonGroup":"beta","Primer::ButtonMarketingComponent":"alpha","Primer::ClipboardCopy":"alpha","Primer::CloseButton":"beta","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"deprecated","Primer::HeadingComponent":"beta","Primer::HiddenTextExpander":"alpha","Primer::IconButton":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::Navigation::TabComponent":"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::TextComponent":"beta","Primer::TimeAgoComponent":"beta","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::Truncate":"beta","Primer::UnderlineNavComponent":"alpha"}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.38
+  version: 0.0.39
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-26 00:00:00.000000000 Z
+date: 2021-04-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -39,7 +39,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 5.0.0
 - !ruby/object:Gem::Dependency
-  name: octicons_helper
+  name: octicons
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -342,8 +342,8 @@ files:
 - app/components/primer/box_component.rb
 - app/components/primer/breadcrumb_component.html.erb
 - app/components/primer/breadcrumb_component.rb
+- app/components/primer/button_component.html.erb
 - app/components/primer/button_component.rb
-- app/components/primer/button_component.rb.orig
 - app/components/primer/button_group.html.erb
 - app/components/primer/button_group.rb
 - app/components/primer/button_marketing_component.rb
@@ -367,10 +367,9 @@ files:
 - app/components/primer/flash_component.rb
 - app/components/primer/flex_component.rb
 - app/components/primer/flex_item_component.rb
-- app/components/primer/foo_bar.d.ts
-- app/components/primer/foo_bar.js
 - app/components/primer/heading_component.rb
 - app/components/primer/hidden_text_expander.rb
+- app/components/primer/icon_button.rb
 - app/components/primer/label_component.rb
 - app/components/primer/layout_component.html.erb
 - app/components/primer/layout_component.rb
@@ -413,6 +412,7 @@ files:
 - app/lib/primer/class_name_helper.rb
 - app/lib/primer/classify.rb
 - app/lib/primer/classify/cache.rb
+- app/lib/primer/classify/flex.rb
 - app/lib/primer/classify/functional_background_colors.rb
 - app/lib/primer/classify/functional_border_colors.rb
 - app/lib/primer/classify/functional_colors.rb
@@ -420,6 +420,7 @@ files:
 - app/lib/primer/classify/spacing.rb
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
+- app/lib/primer/octicon/cache.rb
 - app/lib/primer/status/dsl.rb
 - app/lib/primer/tabbed_component_helper.rb
 - app/lib/primer/test_selector_helper.rb