primer_view_components 0.0.65 → 0.0.68

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63241aa31675216aea8f62b033158b0c4579b6d23948a1e18a37121227db5950
-  data.tar.gz: 318312368ae79269609964c085921d6c3a152644e2e0fbe14bd0d60d277f47ce
+  metadata.gz: 537c5d2b6d37e3cfc2493426db201a7ea7268a00b3e5b06536d49956ad25658f
+  data.tar.gz: a8aa51d217947855498867c2e18e0ad8d34ee5c9dd565170544e3deeec63a25f
 SHA512:
-  metadata.gz: 13aed5a21c4b87d3934b5b8269bf5fa24547b1616c9872be2d88897b3a1d712ea337b510119a07496d64f7ad1af2e8f337596c4a8d8e089d069fa2a31a1cd922
-  data.tar.gz: c4b70c2613f21b890c9a6cac679bac409160acc055a16dc669a90bb318c617c477d595d51c2ae07841e277aef1a2c6125b82caa3783240caea958731fb4cb4e0
+  metadata.gz: e5965f3012b7407029185f7698020c0207d9541dcc8fe78e93fabf207de062eba38358f00c3c270189ee2811ace542f97941e2b6e4f96d77f05c33da23af9098
+  data.tar.gz: 63b806a174ea5f35c89d2e5568781c010e307680b8bee36bb4de835b77cea5cc82c816bbfdd03d2b0ec283f47b23c8c351c9ef552a691dcd42097964bc88fa88

data/CHANGELOG.md

@@ -30,6 +30,64 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.68
+
+### Updates
+
+- Add accessible labels to Search AutoComplete when provided with an icon.
+
+    _Andri Alexandrou_
+
+- Restricts children for AutoComplete API to prevent accessibility violations and misuse
+
+    _Lindsey Wild_
+
+- Migrate from Heroku to Azure for the Rails storybook server.
+
+    _Cameron Dutro_
+
+- Remove CSS utilities from Blankslate
+
+    _Hector Garcia_
+
+- Improve last example on the PopoverComponent docs
+
+    _Hector Garcia_
+
+### Bug Fixes
+
+- Fix live reloading during local docs development.
+
+    _Cameron Dutro_
+
+### Deprecations
+
+- Deprecate `Tooltip` component.
+
+  _Kate Higa_
+
+### Misc
+
+- Updates README with missing `alt` attribute on image
+
+  _Kate Higa_
+
+- Updates contributing docs
+
+  _Lindsey Wild_
+
+## 0.0.67
+
+- Updating octicons to `> 16`
+
+    _Jon Rohan_
+
+## 0.0.66
+
+- Revert optimization changes to utilities.
+
+  _Josh Klina_
+
 ## 0.0.65
 
 ### Breaking Changes

data/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300px" src="/static/assets/view-components.svg">
+  <img width="300px" alt="" src="/static/assets/view-components.svg">
 </p>
 
 <h1 align="center">Primer ViewComponents</h1>

data/app/components/primer/beta/auto_complete/auto_complete.html.erb

@@ -1,6 +1,14 @@
-<%= label %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= input %>
-  <%= icon %>
+  <label for="<%= @input_id %>">
+    <% if @is_label_visible %>
+      <%= @label_text %>
+    <% else %>
+      <span class="sr-only"><%= @label_text %></span>
+    <% end %>
+    <% if icon.present? %>
+      <%= icon %>
+    <% end %>
+  </label>
+  <input id="<%= @input_id %>" name="<%= @input_id %>" type="text" class="form-control" autocomplete="off">
   <%= results %>
 <% end %>

data/app/components/primer/beta/auto_complete.rb

@@ -7,41 +7,14 @@ module Primer
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
     #
-    #   * Set the `label` slot to render a visible label. Alternatively, associate an existing visible text element
-    #   as a label by setting `aria-labelledby`.
-    #   * If you must use a non-visible label, set `:"aria-label"` on `AutoComplete` and Primer
-    #   will apply it to the correct elements. However, please note that a visible label should almost
-    #   always be used unless there is compelling reason not to. A placeholder is not a label.
+    #   * `label_text` is required and visible by default.
+    #   * If you must use a non-visible label, set `is_label_visible` to `false`.
+    #   However, please note that a visible label should almost always
+    #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
       status :beta
 
-      # Optionally render a visible label. See <%= link_to_accessibility %>
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :label, lambda { |**system_arguments|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:for] = @input_id
-        system_arguments[:tag] = :label
-        Primer::BaseComponent.new(**system_arguments)
-      }
-
-      # Required input used to search for results
-      #
-      # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :input, lambda { |**system_arguments|
-        aria_label = aria("label", system_arguments) || @aria_label
-        if aria_label.present?
-          system_arguments[:"aria-label"] = aria_label
-          system_arguments[:aria]&.delete(:label)
-        end
-
-        name = system_arguments[:name] || @input_id
-        Input.new(id: @input_id, name: name, **system_arguments)
-      }
-
       # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
-      #
       renders_one :icon, Primer::OcticonComponent
 
       # Customizable results list.
@@ -56,34 +29,17 @@ module Primer
           system_arguments[:classes]
         )
 
-        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
-        system_arguments[:"aria-label"] = aria_label if aria_label.present?
-        system_arguments[:aria]&.delete(:label)
-
         Primer::BaseComponent.new(**system_arguments)
       }
 
       # @example Default
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) do |c| %>
-      #     <% c.label(classes:"").with_content("Fruits") %>
-      #     <% c.input(type: :text) %>
-      #   <% end %>
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) %>
       #
-      # @example With `aria-label`
-      #   <%= render(Primer::Beta::AutoComplete.new("aria-label": "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", position: :relative)) do |c| %>
-      #     <% c.input(type: :text) %>
-      #   <% end %>
-      #
-      # @example With `aria-labelledby`
-      #   <%= render(Primer::HeadingComponent.new(tag: :h2, id: "search-1")) { "Search" } %>
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-2", position: :relative)) do |c| %>
-      #     <% c.input("aria-labelledby": "search-1") %>
-      #   <% end %>
+      # @example With Non-Visible Label
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", is_label_visible: false, position: :relative)) %>
       #
-      # @example With custom classes for the results
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-4", list_id: "fruits-popup-3", position: :relative)) do |c| %>
-      #     <% c.label(classes:"").with_content("Fruits") %>
-      #     <% c.input(type: :text) %>
+      # @example With Custom Classes for the Results
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-3", position: :relative)) do |c| %>
       #     <% c.results(classes: "custom-class") do %>
       #       <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
       #         Apple
@@ -95,22 +51,25 @@ module Primer
       #   <% end %>
       #
       # @example With Icon
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
-      #     <% c.label(classes:"").with_content("Fruits") %>
-      #     <% c.input(type: :text) %>
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
       #     <% c.icon(icon: :search) %>
       #   <% end %>
       #
+      # @example With Icon and Non-Visible Label
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup-5", input_id: "fruits-input-5", is_label_visible: false, position: :relative)) do |c| %>
+      #     <% c.icon(icon: :search) %>
+      #   <% end %>
+      # @param label_text [String] The label of the input.
       # @param src [String] The route to query.
       # @param input_id [String] Id of the input element.
       # @param list_id [String] Id of the list element.
+      # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src:, list_id:, input_id:, **system_arguments)
+      def initialize(label_text:, src:, list_id:, input_id:, is_label_visible: true, **system_arguments)
+        @label_text = label_text
         @list_id = list_id
         @input_id = input_id
-        @aria_label = aria("label", system_arguments)
-
-        system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
+        @is_label_visible = is_label_visible
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "auto-complete"
@@ -118,44 +77,10 @@ module Primer
         @system_arguments[:for] = list_id
       end
 
-      # add `results` without needing to explicitly call it in the view
+      # add `results` without needing to explicitly call them in the view
       def before_render
-        raise ArgumentError, "Missing `input` slot" if input.blank?
-        raise ArgumentError, "Accessible label is required." if label.blank? && input.missing_label?
-
         results(classes: "") unless results
       end
-
-      # This component is part of `Primer::Beta::AutoCompleteComponent` and should not be
-      # used as a standalone component.
-      class Input < Primer::Component
-        DEFAULT_TYPE = :text
-        TYPE_OPTIONS = [DEFAULT_TYPE, :search].freeze
-
-        # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(type: DEFAULT_TYPE, **system_arguments)
-          @system_arguments = deny_tag_argument(**system_arguments)
-          @system_arguments[:tag] = :input
-
-          @aria_label = system_arguments[:"aria-label"]
-          @aria_labelledby = system_arguments[:"aria-labelledby"] || system_arguments.dig(:aria, :labelledby)
-
-          @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-          @system_arguments[:classes] = class_names(
-            "form-control",
-            system_arguments[:classes]
-          )
-        end
-
-        def missing_label?
-          @aria_label.blank? && @aria_labelledby.blank?
-        end
-
-        def call
-          render(Primer::BaseComponent.new(**@system_arguments))
-        end
-      end
     end
   end
 end

data/app/components/primer/beta/blankslate.html.erb

@@ -5,9 +5,13 @@
     <%= heading %>
     <%= description %>
 
-    <%= primary_action %>
+    <% if primary_action.present? %>
+      <div class="blankslate-action">
+        <%= primary_action %>
+      </div>
+    <% end %>
     <% if secondary_action.present? %>
-      <div class="mt-3">
+      <div class="blankslate-action">
         <%= secondary_action %>
       </div>
     <% end %>

data/app/components/primer/beta/blankslate.rb

@@ -5,9 +5,11 @@ module Primer
     # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
     #
     # @accessibility
-    #   - Set the `heading` level based on what is appropriate for your page hierarchy. <%= link_to_heading_practices %>
-    #   - `secondary_action` can be set to provide more information that is relevant in the context of the `Blankslate`.
+    #   - The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.
+    #   - All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`,  which will hide the visual from screen reader users.
+    #   - The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.
     #   - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
+    #   - The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.
     class Blankslate < Primer::Component
       status :beta
 
@@ -24,20 +26,19 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :visual, types: {
         icon: lambda { |**system_arguments|
-          system_arguments[:mb] = 3
           system_arguments[:size] ||= :medium
           system_arguments[:classes] = class_names("blankslate-icon", system_arguments[:classes])
 
           Primer::OcticonComponent.new(**system_arguments)
         },
         spinner: lambda { |**system_arguments|
-          system_arguments[:mb] = 3
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
           Primer::SpinnerComponent.new(**system_arguments)
         },
         image: lambda { |**system_arguments|
-          system_arguments[:mb] = 3
           system_arguments[:size] = "56x56"
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
           Primer::Image.new(**system_arguments)
         }
@@ -50,8 +51,7 @@ module Primer
       renders_one :heading, lambda { |tag:, **system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = tag
-        system_arguments[:mb] = 1
-        system_arguments[:classes] = class_names("h2", system_arguments[:classes])
+        system_arguments[:classes] = class_names("blankslate-heading", system_arguments[:classes])
 
         Primer::HeadingComponent.new(**system_arguments)
       }
@@ -64,7 +64,7 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :description, lambda { |**system_arguments|
         deny_tag_argument(**system_arguments)
-        system_arguments[:tag] = :div
+        system_arguments[:tag] = :p
 
         Primer::BaseComponent.new(**system_arguments)
       }
@@ -80,7 +80,6 @@ module Primer
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
         system_arguments[:href] = href
-        system_arguments[:mt] = 5
         system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
@@ -96,8 +95,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :secondary_action, lambda { |href:, **system_arguments|
         system_arguments[:href] = href
-        # Padding is needed to increase touch area.
-        system_arguments[:p] = 3
 
         Primer::LinkComponent.new(**system_arguments)
       }

data/app/components/primer/content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Content` as a helper to render content passed to a slot without adding any tags.
+  class Content < Primer::Component
+    status :stable
+
+    def call
+      content
+    end
+  end
+end

data/app/components/primer/dropdown.rb

@@ -6,12 +6,12 @@ module Primer
   class Dropdown < Primer::Component
     # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
     # but it is locked as a `summary` tag.
-    renders_one :button, lambda { |**system_arguments, &block|
+    renders_one :button, lambda { |**system_arguments|
       @button_arguments = system_arguments
       @button_arguments[:button] = true
       @button_arguments[:dropdown] = @with_caret
 
-      view_context.capture { block&.call }
+      Primer::Content.new
     }
 
     # Required context menu for the dropdown.

data/app/components/primer/popover_component.rb

@@ -41,22 +41,21 @@ module Primer
     # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::CARET_MAPPINGS.keys) %>
     # @param large [Boolean] Whether to use the large version of the component.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments, &block|
-      system_arguments[:classes] = class_names(
-        system_arguments[:classes],
+    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
+      @body_arguments = system_arguments
+      @body_arguments[:classes] = class_names(
+        @body_arguments[:classes],
         "Popover-message Box",
         CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
         "Popover-message--large" => large
       )
-      system_arguments[:p] ||= 4
-      system_arguments[:mt] ||= 2
-      system_arguments[:mx] ||= :auto
-      system_arguments[:text_align] ||= :left
-      system_arguments[:box_shadow] ||= :large
+      @body_arguments[:p] ||= 4
+      @body_arguments[:mt] ||= 2
+      @body_arguments[:mx] ||= :auto
+      @body_arguments[:text_align] ||= :left
+      @body_arguments[:box_shadow] ||= :large
 
-      # This is a hack to allow the parent to set the slot's content
-      @body_arguments = system_arguments
-      view_context.capture { block&.call }
+      Primer::Content.new
     }
 
     # @example Default
@@ -89,20 +88,16 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example With HTML body
+    # @example With multiple elements in the body
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
     #     <% component.body(caret: :left) do %>
-    #       <p> This is the Popover body.</p>
-    #       <div>
-    #         This is using HTML.
-    #         <ul>
-    #           <li>Thing #1</li>
-    #           <li>Thing #2</li>
-    #         </ul>
-    #       </div>
+    #       <p>This is the Popover body.</p>
+    #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
+    #         Got it!
+    #       <% end %>
     #     <% end %>
     #   <% end %>
     #

data/app/components/primer/tooltip.rb

@@ -3,7 +3,7 @@
 module Primer
   # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class Tooltip < Primer::Component
-    status :beta
+    status :deprecated
 
     DIRECTION_DEFAULT = :n
     ALIGN_DEFAULT = :default

data/app/lib/primer/test_selector_helper.rb

@@ -4,7 +4,7 @@ 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"
+  # test_selector: "foo" => data-test-selector="foo"
   module TestSelectorHelper
     TEST_SELECTOR_TAG = :test_selector
 

data/lib/primer/classify/utilities.rb

@@ -19,6 +19,20 @@ module Primer
 
       BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
+      # Replacements for some classnames that end up being a different argument key
+      REPLACEMENT_KEYS = {
+        "^anim" => "animation",
+        "^v-align" => "vertical_align",
+        "^d" => "display",
+        "^wb" => "word_break",
+        "^v" => "visibility",
+        "^width" => "w",
+        "^height" => "h",
+        "^color-bg" => "bg",
+        "^color-border" => "border_color",
+        "^color-fg" => "color"
+      }.freeze
+
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
       BREAKPOINT_INDEX_CACHE = Hash.new { |h, k| h[k] = BREAKPOINTS.index(k) }
 
@@ -159,15 +173,30 @@ module Primer
         private
 
         def find_selector(selector)
-          # Build hash indexed on the selector for fast lookup.
-          @selector_cache ||= UTILITIES.each_with_object({}) do |(keyword, argument_w_selectors), dict|
-            argument_w_selectors.each do |argument, selectors|
-              selectors.each_with_index do |css_selector, index|
-                dict[css_selector] = [keyword, argument, index]
-              end
-            end
+          key = infer_selector_key(selector)
+          value_hash = UTILITIES[key]
+
+          return nil if value_hash.blank?
+
+          # Each value hash will also contain an array of classnames for breakpoints
+          # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
+          value_hash.each do |key_argument, classnames|
+            # Skip each value hash until we get one with the selector
+            next unless classnames.include?(selector)
+
+            # Return [:mr, 0, 1]
+            # has index of classname, so we can match it up with responsive array `mr: [nil, 0]`
+            return [key, key_argument, classnames.index(selector)]
+          end
+
+          nil
+        end
+
+        def infer_selector_key(selector)
+          REPLACEMENT_KEYS.each do |k, v|
+            return v.to_sym if selector.match?(Regexp.new(k))
           end
-          @selector_cache[selector]
+          selector.split("-").first.to_sym
         end
       end
     end

data/lib/primer/view_components/version.rb

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

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+# :nocov:
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that components don't use deprecated component names
+      #
+      # bad
+      # Primer::ComponentNameComponent.new()
+      #
+      # good
+      # Primer::Beta::ComponentName.new()
+      class ComponentNameMigration < BaseCop
+        DEPRECATIONS = {
+          "Primer::TestComponent" => "Primer::Beta::Test"
+        }.freeze
+
+        def on_send(node)
+          return unless node.method_name == :new && !node.receiver.nil? && DEPRECATIONS.key?(node.receiver.const_name)
+
+          add_offense(node.receiver, message: "Don't use deprecated names")
+        end
+
+        def autocorrect(node)
+          lambda do |corrector|
+            corrector.replace(node, DEPRECATIONS[node.const_name])
+          end
+        end
+      end
+    end
+  end
+end

data/lib/tasks/docs.rake

@@ -106,7 +106,8 @@ namespace :docs do
     errors = []
 
     # Deletes docs before regenerating them, guaranteeing that we don't keep stale docs.
-    FileUtils.rm_rf(Dir.glob("docs/content/components/**/*.md"))
+    components_content_glob = File.join(*%w[docs content components ** *.md])
+    FileUtils.rm_rf(components_content_glob)
 
     components.sort_by(&:name).each do |component|
       documentation = registry.get(component.name)
@@ -114,7 +115,7 @@ namespace :docs do
       data = docs_metadata(component)
 
       path = Pathname.new(data[:path])
-      path.dirname.mkdir unless path.dirname.exist?
+      path.dirname.mkpath unless path.dirname.exist?
       File.open(path, "w") do |f|
         f.puts("---")
         f.puts("title: #{data[:title]}")
@@ -315,7 +316,6 @@ namespace :docs do
     nav_entries = Dir[File.join(*%w[adr *.md])].sort.map do |orig_path|
       orig_file_name = File.basename(orig_path)
       url_name = orig_file_name.chomp(".md")
-      title = ActiveSupport::Inflector.titleize(url_name.sub(/\A\d+-/, ""))
 
       file_contents = File.read(orig_path)
       file_contents = <<~CONTENTS.sub(/\n+\z/, "\n")
@@ -323,6 +323,12 @@ namespace :docs do
         #{file_contents}
       CONTENTS
 
+      title_match = /^# (.+)/.match(file_contents)
+      title = title_match[1]
+
+      # Don't include initial ADR for recording ADRs
+      next nil if title == "Record architecture decisions"
+
       File.write(File.join(adr_content_dir, orig_file_name), file_contents)
       puts "Copied #{orig_path}"
 
@@ -332,9 +338,9 @@ namespace :docs do
     nav_yaml_file = File.join(*%w[docs src @primer gatsby-theme-doctocat nav.yml])
     nav_yaml = YAML.load_file(nav_yaml_file)
     adr_entry = {
-      "title" => "Architecture Decisions",
+      "title" => "Architecture decisions",
       "url" => "/adr",
-      "children" => nav_entries
+      "children" => nav_entries.compact
     }
 
     existing_index = nav_yaml.index { |entry| entry["url"] == "/adr" }
@@ -360,7 +366,7 @@ namespace :docs do
       short_name = component.name.gsub(/Primer|::/, "")
       initialize_method = documentation.meths.find(&:constructor?)
 
-      next unless initialize_method.tags(:example).any?
+      next unless initialize_method&.tags(:example)&.any?
 
       yard_example_tags = initialize_method.tags(:example)
 

data/lib/tasks/utilities.rake

@@ -5,6 +5,7 @@ namespace :utilities do
     require "yaml"
     require "json"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
+    require "primer/classify/utilities"
 
     # Keys that are looked for to be included in the utilities.yml file
     # rubocop:disable Lint/ConstantDefinitionInBlock
@@ -28,20 +29,6 @@ namespace :utilities do
       /^v\b/
     ].freeze
 
-    # Replacements for some classnames that end up being a different argument key
-    REPLACEMENT_KEYS = {
-      "^anim" => "animation",
-      "^v-align" => "vertical_align",
-      "^d" => "display",
-      "^wb" => "word_break",
-      "^v" => "visibility",
-      "^width" => "w",
-      "^height" => "h",
-      "^color-bg" => "bg",
-      "^color-border" => "border_color",
-      "^color-fg" => "color"
-    }.freeze
-
     BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
     # rubocop:enable Lint/ConstantDefinitionInBlock
 
@@ -80,7 +67,7 @@ namespace :utilities do
       key = ""
 
       # Look for a replacement key
-      REPLACEMENT_KEYS.each do |k, v|
+      Primer::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
         next unless classname.match?(Regexp.new(k))
 
         key = v

data/static/arguments.yml

@@ -165,6 +165,10 @@
 - component: AutoComplete
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb
   parameters:
+  - name: label_text
+    type: String
+    default: N/A
+    description: The label of the input.
   - name: src
     type: String
     default: N/A
@@ -177,6 +181,11 @@
     type: String
     default: N/A
     description: Id of the list element.
+  - name: is_label_visible
+    type: Boolean
+    default: "`true`"
+    description: Controls if the label is visible. If `false`, screen reader only
+      text will be added.
   - name: system_arguments
     type: Hash
     default: N/A

data/static/audited_at.json

@@ -11,7 +11,6 @@
   "Primer::BaseButton": "",
   "Primer::BaseComponent": "",
   "Primer::Beta::AutoComplete": "",
-  "Primer::Beta::AutoComplete::Input": "",
   "Primer::Beta::AutoComplete::Item": "",
   "Primer::Beta::Avatar": "",
   "Primer::Beta::AvatarStack": "",
@@ -28,6 +27,7 @@
   "Primer::ButtonGroup": "",
   "Primer::ClipboardCopy": "",
   "Primer::CloseButton": "",
+  "Primer::Content": "",
   "Primer::CounterComponent": "",
   "Primer::DetailsComponent": "",
   "Primer::Dropdown": "",

data/static/classes.yml

@@ -88,7 +88,10 @@
 - ".avatar-more"
 - ".avatar-small"
 - ".blankslate"
+- ".blankslate-action"
+- ".blankslate-heading"
 - ".blankslate-icon"
+- ".blankslate-image"
 - ".blankslate-narrow"
 - ".blankslate-spacious"
 - ".border"
@@ -163,7 +166,6 @@
 - ".form-control"
 - ".gutter-condensed"
 - ".gutter-lg"
-- ".h2"
 - ".hidden-text-expander"
 - ".inline"
 - ".left-0"
@@ -171,9 +173,7 @@
 - ".list-style-none"
 - ".markdown-body"
 - ".mb-0"
-- ".mb-1"
 - ".mb-2"
-- ".mb-3"
 - ".menu"
 - ".menu-heading"
 - ".menu-item"
@@ -181,7 +181,6 @@
 - ".mr-2"
 - ".mr-n1"
 - ".mt-2"
-- ".mt-3"
 - ".mt-5"
 - ".mx-auto"
 - ".no-underline"
@@ -194,6 +193,7 @@
 - ".pr-2"
 - ".pt-5"
 - ".right-0"
+- ".sr-only"
 - ".tabnav"
 - ".tabnav-tab"
 - ".tabnav-tabs"

data/static/constants.json

@@ -181,16 +181,8 @@
     ]
   },
   "Primer::Beta::AutoComplete": {
-    "Input": "Primer::Beta::AutoComplete::Input",
     "Item": "Primer::Beta::AutoComplete::Item"
   },
-  "Primer::Beta::AutoComplete::Input": {
-    "DEFAULT_TYPE": "text",
-    "TYPE_OPTIONS": [
-      "text",
-      "search"
-    ]
-  },
   "Primer::Beta::AutoComplete::Item": {
   },
   "Primer::Beta::Avatar": {
@@ -317,6 +309,8 @@
       "submit"
     ]
   },
+  "Primer::Content": {
+  },
   "Primer::CounterComponent": {
     "DEFAULT_SCHEME": "default",
     "DEPRECATED_SCHEME_OPTIONS": [

data/static/statuses.json

@@ -11,7 +11,6 @@
   "Primer::BaseButton": "beta",
   "Primer::BaseComponent": "beta",
   "Primer::Beta::AutoComplete": "beta",
-  "Primer::Beta::AutoComplete::Input": "alpha",
   "Primer::Beta::AutoComplete::Item": "beta",
   "Primer::Beta::Avatar": "beta",
   "Primer::Beta::AvatarStack": "beta",
@@ -28,6 +27,7 @@
   "Primer::ButtonGroup": "beta",
   "Primer::ClipboardCopy": "beta",
   "Primer::CloseButton": "beta",
+  "Primer::Content": "stable",
   "Primer::CounterComponent": "beta",
   "Primer::DetailsComponent": "beta",
   "Primer::Dropdown": "alpha",
@@ -61,6 +61,6 @@
   "Primer::TimeAgoComponent": "beta",
   "Primer::TimelineItemComponent": "beta",
   "Primer::TimelineItemComponent::BadgeComponent": "alpha",
-  "Primer::Tooltip": "beta",
+  "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "beta"
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.65
+  version: 0.0.68
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-12-17 00:00:00.000000000 Z
+date: 2022-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '15'
+        version: '16'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '15'
+        version: '16'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -425,6 +425,7 @@ files:
 - app/components/primer/clipboard_copy_component.ts
 - app/components/primer/close_button.rb
 - app/components/primer/component.rb
+- app/components/primer/content.rb
 - app/components/primer/counter_component.rb
 - app/components/primer/details_component.html.erb
 - app/components/primer/details_component.rb
@@ -542,6 +543,7 @@ files:
 - lib/rubocop/config/default.yml
 - lib/rubocop/cop/primer.rb
 - lib/rubocop/cop/primer/base_cop.rb
+- lib/rubocop/cop/primer/component_name_migration.rb
 - lib/rubocop/cop/primer/deprecated_arguments.rb
 - lib/rubocop/cop/primer/deprecated_button_arguments.rb
 - lib/rubocop/cop/primer/deprecated_label_schemes.rb
@@ -586,7 +588,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System