primer_view_components 0.0.120 → 0.0.121

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b86cf7d29399d5c0823b25d1b7a595350a5bd50d1854bb3b3e35016a72f51d73
-  data.tar.gz: dbb4ab2a74bc733388e478dab5f51e32094cd0294dd74aafc57d7eeb924eb664
+  metadata.gz: e9a50600b509b2d0196b508f726bd49c3d363325f6e883401252e10501be137f
+  data.tar.gz: d03535e6e7d149e9260276143ecfc9239331a692339fb042d5c0cc1b0ccff4f9
 SHA512:
-  metadata.gz: f6e7acce0c2a4a8bf64d195d26f12620a26f051ac12f5ed66089b286517f30120788544c18d4f8589f6675b00a9ccf67a3c8c3066816f8c9de4b608dd01d27e5
-  data.tar.gz: 764d4292cb364d036c6b9b914fa798686c399e8df41173557990771a82a0d78877769084ed60381d3d2e1d7a84541fc37dd5eeb895bb5d527bfa21a3d06968eb
+  metadata.gz: 79bb3edef7b103d469bab7414855899fa47584038ae5877e0ec09b0421d5e3210e17233fc27e861c7c1797f0f3b644a95a063ceb4f8c31c621874f7a8161796b
+  data.tar.gz: 5e765a6a44aa171f43c96d4b5be73e13138e9ef601f41316c575a122488650937a383ea2025f33537f67ec0b77cbde69d5a6d6fa468903ded54e6dc82953b752

data/CHANGELOG.md

@@ -1,5 +1,43 @@
 # CHANGELOG
 
+## 0.0.121
+
+### Patch Changes
+
+- [#1791](https://github.com/primer/view_components/pull/1791) [`b68cf7f7`](https://github.com/primer/view_components/commit/b68cf7f7d74379765cd373a5ea060204e3cf7db2) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing the deprecated Primer::LocalTime component
+
+* [#1808](https://github.com/primer/view_components/pull/1808) [`31544417`](https://github.com/primer/view_components/commit/31544417010274b4f8b3b6574587b917a0bbf0e4) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Rename URLHelpers to UrlHelpers to fix console error.
+
+- [#1788](https://github.com/primer/view_components/pull/1788) [`7ad70066`](https://github.com/primer/view_components/commit/7ad7006651dc4dbbd21f444ad10ee1fdb5c3eeba) Thanks [@camertron](https://github.com/camertron)! - Document TextField's auto_check_src argument
+
+* [#1784](https://github.com/primer/view_components/pull/1784) [`3b830167`](https://github.com/primer/view_components/commit/3b8301674ccd74e7ae31826a766883a0612a3960) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove unused deprecated component wrappers
+
+       - "Primer::Dropdown::Menu::Item"
+       - "Primer::Dropdown::Menu"
+       - "Primer::Dropdown"
+       - "Primer::HellipButton"
+       - "Primer::LabelComponent"
+       - "Primer::LinkComponent"
+       - "Primer::Markdown"
+       - "Primer::MenuComponent"
+       - "Primer::OcticonComponent"
+       - "Primer::OcticonSymbolsComponent"
+       - "Primer::PopoverComponent"
+       - "Primer::SpinnerComponent"
+       - "Primer::StateComponent"
+       - "Primer::SubheadComponent"
+       - "Primer::TabContainerComponent"
+       - "Primer::TimelineItemComponent::BadgeComponent"
+       - "Primer::TimelineItemComponent"
+
+- [#1787](https://github.com/primer/view_components/pull/1787) [`972dd7bd`](https://github.com/primer/view_components/commit/972dd7bd92e79b2e8b54555f91770c4c1b280709) Thanks [@neall](https://github.com/neall)! - Allow toggle-switch forms to use caption templates.
+
+* [#1792](https://github.com/primer/view_components/pull/1792) [`730b0a8d`](https://github.com/primer/view_components/commit/730b0a8d70a9e5bc42856c3f30779ebf0d2b9ac9) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing the deprecated Primer::TimeAgoComponent
+
+- [#1776](https://github.com/primer/view_components/pull/1776) [`61b28872`](https://github.com/primer/view_components/commit/61b288721a0315bcad4694615c9b34ddad5d10b7) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding aria labeled by and described by check to SegmentedControl component. Marking as accessibility reviewed
+
+* [#1805](https://github.com/primer/view_components/pull/1805) [`238328a7`](https://github.com/primer/view_components/commit/238328a734cff1322d18c129d340bb5a254bc272) Thanks [@paulcsmith](https://github.com/paulcsmith)! - Update CloseButton to work with more aria-label types
+
 ## 0.0.120
 
 ### Patch Changes

data/app/components/primer/alpha/segmented_control/item.rb

@@ -7,6 +7,7 @@ module Primer
       # It wraps the Button and IconButton components to provide the correct styles
       class Item < Primer::BaseComponent
         status :alpha
+        audited_at "2023-02-01"
 
         # @param label [String] The label to use
         # @param selected [Boolean] Whether the item is selected

data/app/components/primer/alpha/segmented_control.rb

@@ -3,8 +3,12 @@
 module Primer
   module Alpha
     # Use a segmented control to let users select an option from a short list and immediately apply the selection
+    # @accessibility
+    #   A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.
+    #   See the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.
     class SegmentedControl < Primer::Component
       status :alpha
+      audited_at "2023-02-01"
 
       FULL_WIDTH_DEFAULT = false
       HIDE_LABELS_DEFAULT = false
@@ -24,6 +28,30 @@ module Primer
         )
       }
 
+      # @example With a label above and caption below
+      #   <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
+      #     <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
+      #     <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
+      #       <% component.with_item(label: "Preview", selected: true) %>
+      #       <% component.with_item(label: "Raw") %>
+      #       <% component.with_item(label: "Blame") %>
+      #     <% end %>
+      #     <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
+      #   <% end %>
+      #
+      # @example With a label and caption on the left
+      #   <%= render(Primer::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(id: "scLabel-vert") { "File view" } %>
+      #     <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
+      #         <% component.with_item(label: "Preview", selected: true) %>
+      #         <% component.with_item(label: "Raw") %>
+      #         <% component.with_item(label: "Blame") %>
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
       # @example Basic usage
       #
       #   <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
@@ -79,6 +107,8 @@ module Primer
           "SegmentedControl--iconOnly": hide_labels,
           "SegmentedControl--fullWidth": full_width
         )
+
+        validate_aria_label
       end
 
       def render?

data/app/components/primer/alpha/text_field.rb

@@ -98,6 +98,7 @@ module Primer
       # @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon component](https://primer.style/view-components/components/octicon).
       # @param validation_message [String] A validation message to display beneath the input. Implicitly sets `invalid` to `true`.
       # @param label_arguments [Hash] System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag.
+      # @param auto_check_src [String] When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       # @param block [Proc] Unused.
     end

data/app/components/primer/base_component.rb

@@ -134,12 +134,12 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
+    # | `font_family` | Symbol | Font family. <%= one_of([:mono]) %> |
     # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
-    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
+    # | `font_style` | Symbol | Font style. <%= one_of([:italic]) %> |
     # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
-    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
+    # | `text_transform` | Symbol | Text transformation. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
     # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
     #

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

@@ -28,7 +28,7 @@ module Primer
           "close-button",
           system_arguments[:classes]
         )
-        @system_arguments[:"aria-label"] ||= "Close"
+        @system_arguments[:"aria-label"] = aria("label", system_arguments) || "Close"
       end
 
       def call

data/app/components/primer/component.rb

@@ -52,7 +52,8 @@ module Primer
 
     def validate_aria_label
       aria_label = aria("label", @system_arguments)
-      raise ArgumentError, "`aria-label` is required." if aria_label.nil? && !Rails.env.production?
+      aria_labelledby = aria("labelledby", @system_arguments)
+      raise ArgumentError, "`aria-label` or `aria-labelledby` is required." if aria_label.nil? && aria_labelledby.nil? && !Rails.env.production?
     end
 
     def silence_deprecations?

data/app/components/primer/primer.d.ts

@@ -8,9 +8,8 @@ import './alpha/tool_tip';
 import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
-import './local_time';
+import './beta/relative_time';
 import './alpha/tab_container';
-import './time_ago_component';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';

data/app/components/primer/primer.js

@@ -8,9 +8,8 @@ import './alpha/tool_tip';
 import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
-import './local_time';
+import './beta/relative_time';
 import './alpha/tab_container';
-import './time_ago_component';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';

data/app/components/primer/primer.ts

@@ -8,9 +8,8 @@ import './alpha/tool_tip'
 import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
 import './beta/clipboard_copy'
-import './local_time'
+import './beta/relative_time'
 import './alpha/tab_container'
-import './time_ago_component'
 import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'

data/app/forms/example_toggle_switch_form.rb

@@ -3,6 +3,6 @@
 # :nodoc:
 class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
   def initialize(**system_arguments)
-    super(name: :example_field, label: "Example", caption: "This is an example toggle switch.", **system_arguments)
+    super(name: :example_field, label: "Example", **system_arguments)
   end
 end

data/app/lib/primer/view_helper.rb

@@ -9,7 +9,6 @@ module Primer
     HELPERS = {
       octicon: "Primer::Beta::Octicon",
       heading: "Primer::Beta::Heading",
-      time_ago: "Primer::TimeAgoComponent",
       image: "Primer::Alpha::Image"
     }.freeze
 

data/lib/primer/deprecations.yml

@@ -22,88 +22,10 @@ deprecations:
     replacement: "Primer::Beta::Button"
     guide: "https://primer.style/view-components/guides/primer_button_component"
 
-  - component: "Primer::Dropdown"
-    autocorrect: true
-    replacement: "Primer::Alpha::Dropdown"
-
-  - component: "Primer::Dropdown::Menu"
-    autocorrect: true
-    replacement: "Primer::Alpha::Dropdown::Menu"
-
-  - component: "Primer::Dropdown::Menu::Item"
-    autocorrect: true
-    replacement: "Primer::Alpha::Dropdown::Menu::Item"
-
-  - component: "Primer::HellipButton"
-    autocorrect: true
-    replacement: "Primer::Alpha::HellipButton"
-
   - component: "Primer::IconButton"
     autocorrect: true
     replacement: "Primer::Beta::IconButton"
 
-  - component: "Primer::LabelComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Label"
-
-  - component: "Primer::LocalTime"
-    autocorrect: false
-    replacement: "Primer::Beta::RelativeTime"
-    guide: "https://primer.style/view-components/guides/primer_local_time"
-
-  - component: "Primer::LinkComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Link"
-
-  - component: "Primer::Markdown"
-    autocorrect: true
-    replacement: "Primer::Beta::Markdown"
-
-  - component: "Primer::MenuComponent"
-    autocorrect: true
-    replacement: "Primer::Alpha::Menu"
-
-  - component: "Primer::OcticonComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Octicon"
-
-  - component: "Primer::OcticonSymbolsComponent"
-    autocorrect: true
-    replacement: "Primer::Alpha::OcticonSymbols"
-
-  - component: "Primer::PopoverComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Popover"
-
-  - component: "Primer::SpinnerComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Spinner"
-
-  - component: "Primer::StateComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::State"
-
-  - component: "Primer::SubheadComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::Subhead"
-
-  - component: "Primer::TabContainerComponent"
-    autocorrect: true
-    replacement: "Primer::Alpha::TabContainer"
-
-  - component: "Primer::TimeAgoComponent"
-    autocorrect: false
-    replacement: "Primer::Beta::RelativeTime"
-    guide: "https://primer.style/view-components/guides/primer_time_ago"
-
-  - component: "Primer::TimelineItemComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::TimelineItem"
-
-  - component: "Primer::TimelineItemComponent::BadgeComponent"
-    autocorrect: true
-    replacement: "Primer::Beta::TimelineItem::Badge"
-
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"

data/lib/primer/forms/acts_as_component.rb

@@ -8,7 +8,7 @@ module Primer
     module ActsAsComponent
       # :nodoc:
       module InstanceMethods
-        delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
+        delegate :render, :content_tag, :output_buffer, to: :@view_context
 
         def render_in(view_context, &block)
           @view_context = view_context
@@ -16,6 +16,17 @@ module Primer
           perform_render(&block)
         end
 
+        # This is necessary to restore the functionality changed by https://github.com/rails/rails/pull/47194.
+        # I would love to remove this at some point, perhaps if we ever decide to replace
+        # ActsAsComponent with view component.
+        def capture(*args, &block)
+          old_buffer = @view_context.output_buffer
+          @view_context.output_buffer = ActionView::OutputBuffer.new
+          @view_context.capture(*args, &block)
+        ensure
+          @view_context.output_buffer = old_buffer
+        end
+
         # :nocov:
         def perform_render(&_block)
           raise NotImplementedError, "subclasses must implement ##{__method__}."

data/lib/primer/forms/toggle_switch_form.rb

@@ -32,8 +32,10 @@ module Primer
     #
     class ToggleSwitchForm < Primer::Forms::Base
       # Define the form on subclasses so render(Subclass.new) works as expected.
-      def self.inherited(base)
-        base.form do |toggle_switch_form|
+      # (this is called directly on this class, but also on classes
+      # that inherit from this class)
+      def self.define_form_on(klass)
+        klass.form do |toggle_switch_form|
           input = Dsl::ToggleSwitchInput.new(
             builder: toggle_switch_form.builder, form: self, **@system_arguments
           )
@@ -42,8 +44,13 @@ module Primer
         end
       end
 
+      def self.inherited(base)
+        super
+        define_form_on(base)
+      end
+
       # Define the form on self so render(ToggleSwitchForm.new) works as expected.
-      inherited(self)
+      define_form_on(self)
 
       # Override to avoid accepting a builder argument. We create our own builder
       # on render. See the implementation of render_in below.

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 120
+      PATCH = 121
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -13,7 +13,6 @@ module Primer
         Primer::Alpha::Layout => {},
         Primer::Alpha::HellipButton => {},
         Primer::Alpha::Image => {},
-        Primer::LocalTime => { js: true },
         Primer::Alpha::OcticonSymbols => {},
         Primer::Alpha::ImageCrop => { js: true },
         Primer::IconButton => { js: true },
@@ -54,7 +53,6 @@ module Primer
         Primer::Beta::Subhead => {},
         Primer::Alpha::TabContainer => { js: true },
         Primer::Beta::Text => {},
-        Primer::TimeAgoComponent => { js: true },
         Primer::Beta::TimelineItem => {},
         Primer::Tooltip => {},
         Primer::Truncate => {},

data/lib/tasks/static.rake

@@ -5,11 +5,33 @@ namespace :static do
     ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
+    require "lookbook"
     # Loads all components for `.descendants` to work properly
     Dir["./app/components/primer/**/*.rb"].sort.each { |file| require file }
 
     Primer::ViewComponents.dump(:statuses)
     Primer::ViewComponents.dump(:constants)
     Primer::ViewComponents.dump(:audited_at)
+
+    previews = Lookbook.previews.map do |preview|
+      {
+        name: preview.name,
+        lookup_path: preview.lookup_path,
+        examples: preview.examples.map { |example|
+          {
+            inspect_path: example.url_path,
+            preview_path: example.url_path.sub("/inspect/", "/preview/"),
+            name: example.name
+          }
+        }
+      }
+    end
+
+    require "json"
+
+    File.open(File.join(Primer::ViewComponents::DEFAULT_STATIC_PATH, "previews.json"), "w") do |f|
+      f.write(JSON.pretty_generate(previews))
+      f.write($INPUT_RECORD_SEPARATOR)
+    end
   end
 end

data/previews/primer/alpha/auto_complete_preview.rb

@@ -19,7 +19,7 @@ module Primer
             label_text: label_text,
             input_id: "input-id",
             list_id: "test-id",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_visible: is_label_visible,
             is_label_inline: is_label_inline,
             with_icon: with_icon,
@@ -42,7 +42,7 @@ module Primer
             label_text: label_text,
             input_id: "input-id",
             list_id: "test-id",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_visible: is_label_visible,
             is_label_inline: is_label_inline,
             with_icon: with_icon,
@@ -62,7 +62,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-1",
             list_id: "test-id-1",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_visible: false
           )
         )
@@ -77,7 +77,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-2",
             list_id: "test-id-2",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_label_inline: true
           )
         )
@@ -92,7 +92,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-3",
             list_id: "test-id-3",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             with_icon: true
           )
         )
@@ -107,7 +107,7 @@ module Primer
             label_text: "Select a fruit",
             input_id: "input-id-4",
             list_id: "test-id-4",
-            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            src: UrlHelpers.autocomplete_index_path(version: "alpha"),
             is_clearable: true
           )
         )

data/previews/primer/alpha/segmented_control_preview/with_label_and_caption.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
+  <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
+  <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
+    <% component.with_item(label: "Preview", selected: true) %>
+    <% component.with_item(label: "Raw") %>
+    <% component.with_item(label: "Blame") %>
+  <% end %>
+  <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
+<% end %>

data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::Beta::Subhead.new) do |component| %>
+  <% component.with_heading(id: "scLabel-vert") { "File view" } %>
+  <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
+  <% component.with_actions do %>
+    <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
+      <% component.with_item(label: "Preview", selected: true) %>
+      <% component.with_item(label: "Raw") %>
+      <% component.with_item(label: "Blame") %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/segmented_control_preview.rb

@@ -152,13 +152,19 @@ module Primer
       # NOTE: this preview uses a group to force it's display below the other groups
       # @!group With link as tag
       def with_link_as_tag
-        render(Primer::Alpha::SegmentedControl.new) do |component|
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
           component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
           component.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
           component.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
         end
       end
       # @!endgroup
+
+      # @!group With aria labeled headings
+      def with_subhead_actions; end
+
+      def with_label_and_caption; end
+      # @!endgroup
     end
   end
 end

data/previews/primer/alpha/text_field_preview.rb

@@ -144,6 +144,20 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @!group Auto check
+      #
+      # @label Auto check request ok
+      def with_auto_check_ok
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Auto check request error
+      def with_auto_check_error
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -9,31 +9,31 @@ module Primer
       include ActionView::Helpers::FormTagHelper
 
       def playground
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
       end
 
       def default
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
       end
 
       def checked
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true))
       end
 
       def disabled
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, enabled: false))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, enabled: false))
       end
 
       def checked_disabled
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true, enabled: false))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, checked: true, enabled: false))
       end
 
       def small
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, size: :small))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, size: :small))
       end
 
       def with_status_label_position_end
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, status_label_position: :end))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, status_label_position: :end))
       end
 
       def with_a_bad_src
@@ -45,11 +45,11 @@ module Primer
       end
 
       def with_csrf_token
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
       end
 
       def with_bad_csrf_token
-        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
+        render(ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
       end
     end
   end