primer_view_components 0.0.66 → 0.0.69

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/details_component.rb

@@ -49,7 +49,7 @@ module Primer
     #   <% end %>
     #
     # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
-    # @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
+    # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)

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/icon_button.rb

@@ -6,7 +6,7 @@ module Primer
   # @accessibility
   #   `IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.
   #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
-  #   if your `IconButton` renders a magnifying glass icon and invokves a search action, the `aria-label` should be
+  #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
   #   `"Search"` instead of `"Magnifying glass"`.
   #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
   class IconButton < Primer::Component

data/app/components/primer/markdown.rb

@@ -93,7 +93,7 @@ module Primer
     #     <ol>
     #       <li>Michael Jackson</li>
     #       <li>Michael Bolton</li>
-    #       <li>Michael Buble</li>
+    #       <li>Michael Bublé</li>
     #     </ol>
     #
     #     <p>And an unordered task list:</p>

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/primer.d.ts

@@ -5,3 +5,4 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
+import './alpha/tooltip';

data/app/components/primer/primer.js

@@ -5,3 +5,4 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
+import './alpha/tooltip';

data/app/components/primer/primer.ts

@@ -5,3 +5,4 @@ import './time_ago_component'
 import './local_time'
 import './image_crop'
 import './dropdown'
+import './alpha/tooltip'

data/app/components/primer/subhead_component.html.erb

@@ -1,5 +1,5 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= heading %>
-  <%= actions %>
   <%= description %>
+  <%= actions %>
 <% end %>

data/app/components/primer/subhead_component.rb

@@ -4,7 +4,7 @@ module Primer
   # Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
   #
   # - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
-  # - Use a succint, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
+  # - Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
   # - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::LinkComponent) %>.
   #
   # @accessibility

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.yml

@@ -39,6 +39,10 @@
   - color-fg-severe
   :danger:
   - color-fg-danger
+  :open:
+  - color-fg-open
+  :closed:
+  - color-fg-closed
   :done:
   - color-fg-done
   :sponsors:
@@ -78,6 +82,14 @@
   - color-bg-danger
   :danger_emphasis:
   - color-bg-danger-emphasis
+  :open:
+  - color-bg-open
+  :open_emphasis:
+  - color-bg-open-emphasis
+  :closed:
+  - color-bg-closed
+  :closed_emphasis:
+  - color-bg-closed-emphasis
   :done:
   - color-bg-done
   :done_emphasis:
@@ -113,6 +125,14 @@
   - color-border-danger
   :danger_emphasis:
   - color-border-danger-emphasis
+  :open:
+  - color-border-open
+  :open_emphasis:
+  - color-border-open-emphasis
+  :closed:
+  - color-border-closed
+  :closed_emphasis:
+  - color-border-closed-emphasis
   :done:
   - color-border-done
   :done_emphasis:

data/lib/primer/view_components/linters/button_component_migration_counter.rb

@@ -15,7 +15,7 @@ module ERBLint
         constant: "TAG_OPTIONS"
       ).freeze
 
-      # CloseButton component has preference when this class is seen in conjuction with `btn`.
+      # CloseButton component has preference when this class is seen in conjunction with `btn`.
       DISALLOWED_CLASSES = %w[close-button].freeze
       CLASSES = %w[btn btn-link].freeze
       MESSAGE = "We are migrating buttons to use [Primer::ButtonComponent](https://primer.style/view-components/components/button), please try to use that instead of raw HTML."

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 66
+      PATCH = 69
 
       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/rubocop/cop/primer/primer_octicon.rb

@@ -207,7 +207,7 @@ module RuboCop
           return node.source unless node.type == :str
           return ":#{node.value}" unless node.value.include?("-")
 
-          # If the icon contains `-` we need to cast the string as a symbole
+          # If the icon contains `-` we need to cast the string as a symbol
           # E.g: `arrow-down` becomes `:"arrow-down"`
           ":#{node.source}"
         end

data/lib/tasks/docs.rake

@@ -82,7 +82,8 @@ namespace :docs do
       Primer::Alpha::UnderlineNav,
       Primer::Alpha::UnderlinePanels,
       Primer::Alpha::TabNav,
-      Primer::Alpha::TabPanels
+      Primer::Alpha::TabPanels,
+      Primer::Alpha::Tooltip
     ]
 
     js_components = [
@@ -94,7 +95,8 @@ namespace :docs do
       Primer::TabContainerComponent,
       Primer::TimeAgoComponent,
       Primer::Alpha::UnderlinePanels,
-      Primer::Alpha::TabPanels
+      Primer::Alpha::TabPanels,
+      Primer::Alpha::Tooltip
     ]
 
     all_components = Primer::Component.descendants - [Primer::BaseComponent]
@@ -106,7 +108,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 +117,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]}")
@@ -167,12 +170,12 @@ namespace :docs do
         f.puts("| Name | Type | Default | Description |")
         f.puts("| :- | :- | :- | :- |")
 
-        docummented_params = params.map(&:name)
+        documented_params = params.map(&:name)
         component_params = component.instance_method(:initialize).parameters.map { |p| p.last.to_s }
 
-        if (docummented_params & component_params).size != component_params.size
+        if (documented_params & component_params).size != component_params.size
           err = { arguments: {} }
-          (component_params - docummented_params).each do |arg|
+          (component_params - documented_params).each do |arg|
             err[:arguments][arg] = "Not documented"
           end
 
@@ -315,7 +318,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 +325,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 +340,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 +368,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

@@ -86,7 +86,7 @@ namespace :utilities do
         classname.sub!(/^[^-]+-/, "")
       end
 
-      # Change the rest from hypens to underscores
+      # Change the rest from hyphens to underscores
       classname.sub!(/-/, "_")
 
       # convert padding/margin negative values ie n7 to -7

data/static/arguments.yml

@@ -95,6 +95,30 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Tooltip
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb
+  parameters:
+  - name: for_id
+    type: String
+    default: N/A
+    description: The ID of the element that the tooltip should be attached to.
+  - name: type
+    type: Symbol
+    default: N/A
+    description: One of `:description` and `:label`.
+  - name: direction
+    type: Symbol
+    default: "`:s`"
+    description: One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.
+  - name: text
+    type: String
+    default: N/A
+    description: The text content of the tooltip. This should be brief and no longer
+      than a sentence.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: UnderlineNav
   source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb
   parameters:
@@ -165,6 +189,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 +205,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
@@ -444,7 +477,7 @@
   - name: reset
     type: Boolean
     default: "`false`"
-    description: Defatuls to false. If set to true, it will remove the default caret
+    description: Defaults to false. If set to true, it will remove the default caret
       and remove style from the summary element
   - name: system_arguments
     type: Hash

data/static/audited_at.json

@@ -6,12 +6,12 @@
   "Primer::Alpha::Layout::Sidebar": "",
   "Primer::Alpha::TabNav": "",
   "Primer::Alpha::TabPanels": "",
+  "Primer::Alpha::Tooltip": "",
   "Primer::Alpha::UnderlineNav": "",
   "Primer::Alpha::UnderlinePanels": "",
   "Primer::BaseButton": "",
   "Primer::BaseComponent": "",
   "Primer::Beta::AutoComplete": "",
-  "Primer::Beta::AutoComplete::Input": "",
   "Primer::Beta::AutoComplete::Item": "",
   "Primer::Beta::Avatar": "",
   "Primer::Beta::AvatarStack": "",
@@ -28,6 +28,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,17 +166,15 @@
 - ".form-control"
 - ".gutter-condensed"
 - ".gutter-lg"
-- ".h2"
 - ".hidden-text-expander"
 - ".inline"
 - ".left-0"
 - ".lh-0"
 - ".list-style-none"
+- ".m-2"
 - ".markdown-body"
 - ".mb-0"
-- ".mb-1"
 - ".mb-2"
-- ".mb-3"
 - ".menu"
 - ".menu-heading"
 - ".menu-item"
@@ -181,7 +182,6 @@
 - ".mr-2"
 - ".mr-n1"
 - ".mt-2"
-- ".mt-3"
 - ".mt-5"
 - ".mx-auto"
 - ".no-underline"
@@ -194,6 +194,7 @@
 - ".pr-2"
 - ".pt-5"
 - ".right-0"
+- ".sr-only"
 - ".tabnav"
 - ".tabnav-tab"
 - ".tabnav-tabs"

data/static/constants.json

@@ -138,6 +138,24 @@
       "div"
     ]
   },
+  "Primer::Alpha::Tooltip": {
+    "DIRECTION_DEFAULT": "s",
+    "DIRECTION_OPTIONS": [
+      "s",
+      "n",
+      "e",
+      "w",
+      "ne",
+      "nw",
+      "se",
+      "sw"
+    ],
+    "TYPE_FALLBACK": "description",
+    "TYPE_OPTIONS": [
+      "label",
+      "description"
+    ]
+  },
   "Primer::Alpha::UnderlineNav": {
     "BODY_TAG_DEFAULT": "ul",
     "TAG_DEFAULT": "nav",
@@ -181,16 +199,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 +327,8 @@
       "submit"
     ]
   },
+  "Primer::Content": {
+  },
   "Primer::CounterComponent": {
     "DEFAULT_SCHEME": "default",
     "DEPRECATED_SCHEME_OPTIONS": [

data/static/statuses.json

@@ -6,12 +6,12 @@
   "Primer::Alpha::Layout::Sidebar": "alpha",
   "Primer::Alpha::TabNav": "alpha",
   "Primer::Alpha::TabPanels": "alpha",
+  "Primer::Alpha::Tooltip": "alpha",
   "Primer::Alpha::UnderlineNav": "alpha",
   "Primer::Alpha::UnderlinePanels": "alpha",
   "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 +28,7 @@
   "Primer::ButtonGroup": "beta",
   "Primer::ClipboardCopy": "beta",
   "Primer::CloseButton": "beta",
+  "Primer::Content": "stable",
   "Primer::CounterComponent": "beta",
   "Primer::DetailsComponent": "beta",
   "Primer::Dropdown": "alpha",
@@ -61,6 +62,6 @@
   "Primer::TimeAgoComponent": "beta",
   "Primer::TimelineItemComponent": "beta",
   "Primer::TimelineItemComponent::BadgeComponent": "alpha",
-  "Primer::Tooltip": "beta",
+  "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "beta"
 }