primer_view_components 0.0.54 → 0.0.55

data/static/classes.yml

@@ -76,6 +76,7 @@
 - ".border"
 - ".border-bottom-0"
 - ".breadcrumb-item"
+- ".breadcrumb-item-selected"
 - ".btn"
 - ".btn-block"
 - ".btn-danger"

data/static/constants.json

@@ -33,17 +33,23 @@
       "large"
     ]
   },
+  "Primer::Alpha::TabNav": {
+    "BODY_TAG_DEFAULT": "ul",
+    "TAG_DEFAULT": "nav",
+    "TAG_OPTIONS": [
+      "nav",
+      "div"
+    ]
+  },
+  "Primer::Alpha::TabPanels": {
+    "BODY_TAG_DEFAULT": "ul",
+    "TAG_DEFAULT": "nav",
+    "TAG_OPTIONS": [
+      "nav",
+      "div"
+    ]
+  },
   "Primer::Alpha::UnderlineNav": {
-    "ACTIONS_TAG_DEFAULT": "div",
-    "ACTIONS_TAG_OPTIONS": [
-      "div",
-      "span"
-    ],
-    "ALIGN_DEFAULT": "left",
-    "ALIGN_OPTIONS": [
-      "left",
-      "right"
-    ],
     "BODY_TAG_DEFAULT": "ul",
     "TAG_DEFAULT": "nav",
     "TAG_OPTIONS": [
@@ -594,13 +600,6 @@
   },
   "Primer::TabContainerComponent": {
   },
-  "Primer::TabNavComponent": {
-    "DEFAULT_EXTRA_ALIGN": "left",
-    "EXTRA_ALIGN_OPTIONS": [
-      "left",
-      "right"
-    ]
-  },
   "Primer::TimeAgoComponent": {
   },
   "Primer::TimelineItemComponent": {

data/static/statuses.json

@@ -1,5 +1,7 @@
 {
   "Primer::Alpha::ButtonMarketing": "alpha",
+  "Primer::Alpha::TabNav": "alpha",
+  "Primer::Alpha::TabPanels": "alpha",
   "Primer::Alpha::UnderlineNav": "alpha",
   "Primer::Alpha::UnderlinePanels": "alpha",
   "Primer::BaseButton": "beta",
@@ -50,7 +52,6 @@
   "Primer::StateComponent": "beta",
   "Primer::SubheadComponent": "beta",
   "Primer::TabContainerComponent": "alpha",
-  "Primer::TabNavComponent": "beta",
   "Primer::TimeAgoComponent": "beta",
   "Primer::TimelineItemComponent": "beta",
   "Primer::TimelineItemComponent::BadgeComponent": "alpha",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.54
+  version: 0.0.55
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-08-31 00:00:00.000000000 Z
+date: 2021-09-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -72,6 +72,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: allocation_stats
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
 - !ruby/object:Gem::Dependency
   name: allocation_tracer
   requirement: !ruby/object:Gem::Requirement
@@ -365,6 +379,10 @@ files:
 - app/assets/javascripts/primer_view_components.js
 - app/assets/javascripts/primer_view_components.js.map
 - app/components/primer/alpha/button_marketing.rb
+- app/components/primer/alpha/tab_nav.html.erb
+- app/components/primer/alpha/tab_nav.rb
+- app/components/primer/alpha/tab_panels.html.erb
+- app/components/primer/alpha/tab_panels.rb
 - app/components/primer/alpha/underline_nav.html.erb
 - app/components/primer/alpha/underline_nav.rb
 - app/components/primer/alpha/underline_panels.html.erb
@@ -464,8 +482,6 @@ files:
 - 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/time_ago_component.d.ts
 - app/components/primer/time_ago_component.js
 - app/components/primer/time_ago_component.rb
@@ -479,6 +495,7 @@ files:
 - app/lib/primer/join_style_arguments_helper.rb
 - app/lib/primer/octicon/cache.rb
 - app/lib/primer/status/dsl.rb
+- app/lib/primer/tab_nav_helper.rb
 - app/lib/primer/tabbed_component_helper.rb
 - app/lib/primer/test_selector_helper.rb
 - app/lib/primer/underline_nav_helper.rb
@@ -489,7 +506,6 @@ files:
 - lib/primer/classify/functional_background_colors.rb
 - lib/primer/classify/functional_border_colors.rb
 - lib/primer/classify/functional_colors.rb
-- lib/primer/classify/functional_text_colors.rb
 - lib/primer/classify/grid.rb
 - lib/primer/classify/utilities.rb
 - lib/primer/classify/utilities.yml
@@ -518,6 +534,7 @@ files:
 - lib/primer/view_components/version.rb
 - lib/rubocop/config/default.yml
 - lib/rubocop/cop/primer.rb
+- lib/rubocop/cop/primer/base_cop.rb
 - lib/rubocop/cop/primer/deprecated_arguments.rb
 - lib/rubocop/cop/primer/no_tag_memoize.rb
 - lib/rubocop/cop/primer/primer_octicon.rb

data/app/components/primer/tab_nav_component.rb

@@ -1,151 +0,0 @@
-# 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.
-  class TabNavComponent < Primer::Component
-    include Primer::TabbedComponentHelper
-
-    status :beta
-
-    DEFAULT_EXTRA_ALIGN = :left
-    EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
-
-    # Tabs to be rendered. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
-    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
-    #
-    # @param panel_id [String] Only applies if `with_panel` is `true`. Unique ID of panel.
-    # @param selected [Boolean] Whether the tab is selected.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :tabs, lambda { |selected: false, **system_arguments|
-      system_arguments[:classes] = class_names(
-        "tabnav-tab",
-        system_arguments[:classes]
-      )
-
-      Primer::Navigation::TabComponent.new(
-        selected: selected,
-        with_panel: @with_panel,
-        **system_arguments
-      )
-    }
-
-    # Renders extra content to the `TabNav`. This will be rendered after the tabs.
-    #
-    # @param align [Symbol] <%= one_of(Primer::TabNavComponent::EXTRA_ALIGN_OPTIONS) %>
-    renders_one :extra, lambda { |align: DEFAULT_EXTRA_ALIGN, &block|
-      @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, DEFAULT_EXTRA_ALIGN)
-
-      view_context.capture { block&.call }
-    }
-
-    # @example Default
-    #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @example With icons and counters
-    #   <%= render(Primer::TabNavComponent.new(label: "With icons and counters")) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 2" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 3" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With panels
-    #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true, panel_id: "panel-1", id: "tab-1") do |t| %>
-    #       <% t.text { "Tab 1" } %>
-    #       <% t.panel do %>
-    #         Panel 1
-    #       <% end %>
-    #     <% end %>
-    #     <% c.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
-    #       <% t.text { "Tab 2" } %>
-    #       <% t.panel do %>
-    #         Panel 2
-    #       <% end %>
-    #     <% end %>
-    #     <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
-    #       <% t.text { "Tab 3" } %>
-    #       <% t.panel do %>
-    #         Panel 3
-    #       <% end %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With extra content
-    #   <%= render(Primer::TabNavComponent.new(label: "With extra content")) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #     <% c.extra do %>
-    #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Adding extra content after the tabs
-    #   <%= render(Primer::TabNavComponent.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #     <% c.extra(align: :right) do %>
-    #       <div>
-    #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
-    #       </div>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Customizing the body
-    #   <%= render(Primer::TabNavComponent.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @example Customizing the wrapper
-    #   <%= render(Primer::TabNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %>
-    #   is rendered along with JavaScript behavior. Additionally, the `tab` slot will render as a button as opposed to an anchor.
-    # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
-    # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
-      @align = DEFAULT_EXTRA_ALIGN
-      @with_panel = with_panel
-      @system_arguments = system_arguments
-      @body_arguments = body_arguments
-      @wrapper_arguments = wrapper_arguments
-
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        "tabnav",
-        system_arguments[:classes]
-      )
-
-      @body_arguments[:tag] = navigation_tag(with_panel)
-      @body_arguments[:"aria-label"] = label
-      @body_arguments[:role] = :tablist if @with_panel
-      @body_arguments[:classes] = class_names(
-        "tabnav-tabs",
-        body_arguments[:classes]
-      )
-    end
-  end
-end

data/lib/primer/classify/functional_text_colors.rb

@@ -1,64 +0,0 @@
-# frozen_string_literal: true
-
-require_relative "functional_colors"
-
-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