primer_view_components 0.0.118 → 0.0.120

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

@@ -107,10 +107,11 @@ module Primer
 
         @text = text
         @system_arguments = system_arguments
+        @system_arguments[:id] ||= self.class.generate_id
         @system_arguments[:tag] = :"tool-tip"
         @system_arguments[:for] = for_id
-        system_arguments[:classes] = class_names(
-          system_arguments[:classes],
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
           "sr-only"
         )
         @system_arguments[:position] = :absolute
@@ -121,6 +122,6 @@ module Primer
       def call
         render(Primer::BaseComponent.new(**@system_arguments)) { @text }
       end
-      end
     end
   end
+end

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

@@ -63,7 +63,7 @@ module Primer
         @wrapper_arguments = wrapper_arguments
         @show_tooltip = show_tooltip
         @system_arguments = system_arguments
-        @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+        @system_arguments[:id] ||= self.class.generate_id
 
         @system_arguments[:classes] = class_names(
           "Button",

data/app/components/primer/component.rb

@@ -22,6 +22,10 @@ module Primer
       status == :deprecated
     end
 
+    def self.generate_id
+      "#{name.demodulize.underscore.dasherize}-#{SecureRandom.uuid}"
+    end
+
     private
 
     def raise_on_invalid_options?

data/app/components/primer/icon_button.rb

@@ -65,7 +65,7 @@ module Primer
 
       @system_arguments = system_arguments
 
-      @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+      @system_arguments[:id] ||= self.class.generate_id
 
       @system_arguments[:classes] = class_names(
         "btn-octicon",

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

@@ -13,3 +13,4 @@ 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

@@ -13,3 +13,4 @@ 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

@@ -13,3 +13,4 @@ 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", **system_arguments)
+    super(name: :example_field, label: "Example", caption: "This is an example toggle switch.", **system_arguments)
   end
 end

data/lib/primer/deprecations.yml

@@ -17,24 +17,11 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::Blankslate"
 
-  - component: "Primer::BoxComponent"
-    autocorrect: true
-    replacement: "Primer::Box"
-
   - component: "Primer::ButtonComponent"
     autocorrect: false
     replacement: "Primer::Beta::Button"
     guide: "https://primer.style/view-components/guides/primer_button_component"
 
-  - component: "Primer::ClipboardCopy"
-    autocorrect: true
-    replacement: "Primer::Beta::ClipboardCopy"
-
-  - component: "Primer::DropdownMenuComponent"
-    autocorrect: false
-    replacement: "Primer::Beta::Dropdown"
-    guide: "https://primer.style/view-components/guides/primer_dropdown_menu_component"
-
   - component: "Primer::Dropdown"
     autocorrect: true
     replacement: "Primer::Alpha::Dropdown"

data/lib/primer/forms/dsl/input.rb

@@ -76,7 +76,7 @@ module Primer
 
           @input_arguments[:invalid] = "true" if invalid?
 
-          base_id = SecureRandom.hex[0..5]
+          base_id = SecureRandom.uuid
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{base_id}" if invalid?

data/lib/primer/forms/toggle_switch.html.erb

@@ -1,9 +1,14 @@
-<%= content_tag(:div, **@form_group_arguments) do %>
+<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
   <span style="flex-grow: 1">
     <%= builder.label(@input.name, **@input.label_arguments) do %>
       <%= @input.label %>
     <% end %>
-    <%= render(Caption.new(input: @input)) %>
+
+    <%= content_tag(:div, data: { target: "toggle-switch-input.validationElement" }, **@input.validation_arguments) do %>
+      <%= content_tag(:span, @input.validation_messages.first, data: { target: "toggle-switch-input.validationMessageElement" }, **@input.validation_message_arguments) %>
+    <% end %>
+
+    <div><%= render(Caption.new(input: @input)) %></div>
   </span>
   <%
     csrf = @input.csrf || @view_context.form_authenticity_token(

data/lib/primer/forms/toggle_switch.rb

@@ -9,10 +9,8 @@ module Primer
       def initialize(input:)
         @input = input
         @input.add_label_classes("FormControl-label")
-
-        @form_group_arguments = { class: "d-flex" }
-
-        @form_group_arguments[:hidden] = "hidden" if @input.hidden?
+        @input.add_input_classes("FormControl-toggleSwitchInput")
+        @input.input_arguments[:hidden] = "hidden" if @input.hidden?
       end
     end
   end

data/lib/primer/forms/toggle_switch_input.d.ts

@@ -0,0 +1,5 @@
+export declare class ToggleSwitchInputElement extends HTMLElement {
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    connectedCallback(): void;
+}

data/lib/primer/forms/toggle_switch_input.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('toggleSwitchError', (event) => {
+            this.validationMessageElement.innerText = event.detail;
+            this.validationElement.removeAttribute('hidden');
+        });
+        this.addEventListener('toggleSwitchSuccess', () => {
+            this.validationMessageElement.innerText = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+    }
+};
+__decorate([
+    target
+], ToggleSwitchInputElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
+ToggleSwitchInputElement = __decorate([
+    controller
+], ToggleSwitchInputElement);
+export { ToggleSwitchInputElement };

data/lib/primer/forms/toggle_switch_input.ts

@@ -0,0 +1,19 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+export class ToggleSwitchInputElement extends HTMLElement {
+  @target validationElement: HTMLElement
+  @target validationMessageElement: HTMLElement
+
+  connectedCallback() {
+    this.addEventListener('toggleSwitchError', (event: Event) => {
+      this.validationMessageElement.innerText = (event as CustomEvent).detail
+      this.validationElement.removeAttribute('hidden')
+    })
+
+    this.addEventListener('toggleSwitchSuccess', () => {
+      this.validationMessageElement.innerText = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+  }
+}

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

@@ -18,9 +18,9 @@ module ERBLint
       # 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."
+      MESSAGE = "We are migrating buttons to use [Primer::Beta::Button](https://primer.style/view-components/components/beta/button), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::Button
-      COMPONENT = "Primer::ButtonComponent"
+      COMPONENT = "Primer::Beta::Button"
     end
   end
 end

data/lib/primer/view_components/version.rb

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

data/lib/primer/view_components.rb

@@ -54,5 +54,10 @@ module Primer
     def self.read(stats)
       File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
     end
+
+    # primer/view_components root directory.
+    def self.root
+      Pathname(File.expand_path(File.join("..", ".."), __dir__))
+    end
   end
 end

data/lib/primer/yard/backend.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module YARD
+    # Shared functionality for generating documentation from YARD comments.
+    class Backend
+      include DocsHelper
+
+      private
+
+      def pretty_default_value(tag, component)
+        params = tag.object.parameters.find { |param| [tag.name.to_s, "#{tag.name}:"].include?(param[0]) }
+        default = tag.defaults&.first || params&.second
+
+        return "N/A" unless default
+
+        constant_name = "#{component.name}::#{default}"
+        constant_value = default.safe_constantize || constant_name.safe_constantize
+
+        return pretty_value(default) if constant_value.nil?
+
+        pretty_value(constant_value)
+      end
+
+      def view_context
+        @view_context ||= begin
+          # Rails controller for rendering arbitrary ERB
+          vc = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
+          vc.singleton_class.include(DocsHelper)
+          vc.singleton_class.include(Primer::ViewHelper)
+          vc
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/primer/yard/component_manifest.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module YARD
+    # The set of documented components (and associated metadata).
+    class ComponentManifest
+      COMPONENTS = {
+        Primer::Beta::RelativeTime => {},
+        Primer::Beta::IconButton => {},
+        Primer::Beta::Button => {},
+        Primer::Alpha::SegmentedControl => {},
+        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 },
+        Primer::Beta::AutoComplete => { js: true },
+        Primer::Beta::AutoComplete::Item => {},
+        Primer::Beta::Avatar => {},
+        Primer::Beta::AvatarStack => {},
+        Primer::Beta::BaseButton => {},
+        Primer::Alpha::Banner => { js: true },
+        Primer::Beta::Blankslate => {},
+        Primer::Beta::BorderBox => {},
+        Primer::Beta::BorderBox::Header => {},
+        Primer::Box => {},
+        Primer::Beta::Breadcrumbs => {},
+        Primer::ButtonComponent => { js: true },
+        Primer::Beta::ButtonGroup => {},
+        Primer::Alpha::ButtonMarketing => {},
+        Primer::Beta::ClipboardCopy => { js: true },
+        Primer::Beta::CloseButton => {},
+        Primer::Beta::Counter => {},
+        Primer::Beta::Details => {},
+        Primer::Alpha::Dialog => {},
+        Primer::Alpha::Dropdown => { js: true },
+        Primer::Beta::Flash => {},
+        Primer::Beta::Heading => {},
+        Primer::Alpha::HiddenTextExpander => {},
+        Primer::Beta::Label => {},
+        Primer::LayoutComponent => {},
+        Primer::Beta::Link => { js: true },
+        Primer::Beta::Markdown => {},
+        Primer::Alpha::Menu => {},
+        Primer::Navigation::TabComponent => {},
+        Primer::Beta::Octicon => {},
+        Primer::Beta::Popover => {},
+        Primer::Beta::ProgressBar => {},
+        Primer::Beta::State => {},
+        Primer::Beta::Spinner => {},
+        Primer::Beta::Subhead => {},
+        Primer::Alpha::TabContainer => { js: true },
+        Primer::Beta::Text => {},
+        Primer::TimeAgoComponent => { js: true },
+        Primer::Beta::TimelineItem => {},
+        Primer::Tooltip => {},
+        Primer::Truncate => {},
+        Primer::Beta::Truncate => {},
+        Primer::Alpha::UnderlineNav => {},
+        Primer::Alpha::UnderlinePanels => { js: true },
+        Primer::Alpha::TabNav => {},
+        Primer::Alpha::TabPanels => { js: true },
+        Primer::Alpha::Tooltip => { js: true },
+        Primer::Alpha::ToggleSwitch => { js: true },
+
+        # Examples can be seen in the NavList docs
+        Primer::Alpha::NavList => { js: true },
+        Primer::Alpha::NavList::Item => { js: true, examples: false },
+        Primer::Alpha::NavList::Section => { js: true, examples: false },
+
+        # ActionList is a base component that should not be used by itself, and thus
+        # does not have examples of its own
+        Primer::Alpha::ActionList => { js: true, examples: false },
+        Primer::Alpha::ActionList::Divider => { examples: false },
+        Primer::Alpha::ActionList::Heading => { examples: false },
+        Primer::Alpha::ActionList::Item => { examples: false },
+
+        # Forms
+        Primer::Alpha::TextField => { form_component: true }
+      }.freeze
+
+      class << self
+        def each(&block)
+          COMPONENTS.keys.each(&block)
+        end
+
+        def components_with_docs
+          @components_with_docs ||= COMPONENTS.keys
+        end
+
+        def all_components
+          @all_components ||= Primer::Component.descendants - [Primer::BaseComponent]
+        end
+
+        def components_without_docs
+          @components_without_docs ||= all_components - components_with_docs
+        end
+
+        def components_with_examples
+          @components_with_examples ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:examples, true)
+          end
+        end
+
+        def components_requiring_js
+          @components_requiring_js ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:js, false)
+          end
+        end
+
+        def form_components
+          @form_components ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:form_component, false)
+          end
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/primer/yard/docs_helper.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+module Primer
+  module YARD
+    # Helper methods to use for yard documentation
+    module DocsHelper
+      def one_of(enumerable, lower: false, sort: true)
+        # Sort the array if requested
+        if sort
+          enumerable = enumerable.sort do |a, b|
+            a.instance_of?(b.class) ? a <=> b : a.class.to_s <=> b.class.to_s
+          end
+        end
+
+        values =
+          case enumerable
+          when Hash
+            enumerable.map do |key, value|
+              "#{pretty_value(key)} (#{pretty_value(value)})"
+            end
+          else
+            enumerable.map do |key|
+              pretty_value(key)
+            end
+          end
+
+        prefix = "One of"
+        prefix = prefix.downcase if lower
+
+        "#{prefix} #{values.to_sentence(two_words_connector: ' or ', last_word_connector: ', or ')}."
+      end
+
+      def link_to_accessibility
+        "[Accessibility](#accessibility)"
+      end
+
+      def link_to_system_arguments_docs
+        "[System arguments](/system-arguments)"
+      end
+
+      def link_to_typography_docs
+        "[Typography](/system-arguments#typography)"
+      end
+
+      def link_to_component(component)
+        status_module, short_name, class_name = status_module_and_short_name(component)
+        status_path = status_module.nil? ? "" : "#{status_module}/"
+
+        "[#{class_name}](/components/#{status_path}#{short_name.downcase})"
+      end
+
+      def link_to_octicons
+        "[Octicon](https://primer.style/octicons/)"
+      end
+
+      def link_to_heading_practices
+        "[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
+      end
+
+      def status_module_and_short_name(component)
+        name_with_status = component.name.gsub(/Primer::|Component/, "")
+
+        m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(?<_colons>::)?(?<name>.*)/)
+        [m[:status]&.downcase, m[:name].gsub("::", ""), m[:name]]
+      end
+
+      def pretty_value(val)
+        case val
+        when nil
+          "`nil`"
+        when Symbol
+          "`:#{val}`"
+        else
+          "`#{val}`"
+        end
+      end
+    end
+  end
+end