primer_view_components 0.0.118 → 0.0.119

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

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

data/previews/primer/alpha/tooltip_preview.rb

@@ -7,7 +7,7 @@ module Primer
       # @param type [Symbol] select [["Description", description], ["Label", label]]
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
-      def playground(type: :description, direction: :s, tooltip_text: "Tooltip text")
+      def playground(type: :description, direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
           component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
@@ -17,7 +17,7 @@ module Primer
       # @param type [Symbol] select [["Description", description], ["Label", label]]
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
-      def default(type: :description, direction: :s, tooltip_text: "Tooltip text")
+      def default(type: :description, direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
           component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
@@ -26,7 +26,7 @@ module Primer
 
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
-      def label_tooltip_on_button_with_existing_labelledby(type: :label, direction: :s, tooltip_text: "Tooltip text")
+      def label_tooltip_on_button_with_existing_labelledby(type: :label, direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::Button.new(id: "button-with-existing-label", "aria-labelledby": "existing-label-id")) do |component|
           component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
@@ -35,7 +35,7 @@ module Primer
 
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
-      def description_tooltip_on_button_with_existing_describedby(type: :description, direction: :s, tooltip_text: "Tooltip text")
+      def description_tooltip_on_button_with_existing_describedby(type: :description, direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::Button.new(id: "button-with-existing-description", "aria-describedby": "existing-description-id")) do |component|
           component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
@@ -56,7 +56,7 @@ module Primer
 
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
-      def with_multiple_on_a_page(type: :description, direction: :s, tooltip_text: "Tooltip text")
+      def with_multiple_on_a_page(type: :description, direction: :s, tooltip_text: "You can press a button")
         render_with_template(
           locals: {
             type: type,
@@ -68,7 +68,7 @@ module Primer
 
       # @!group Tooltip enabled elements
       # @label Tooltip with Primer::Beta::Button
-      def tooltip_with_button(type: :description, direction: :s, tooltip_text: "Tooltip text")
+      def tooltip_with_button(type: :description, direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
           component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
@@ -76,7 +76,7 @@ module Primer
       end
 
       # @label Tooltip with Primer::Beta::Link
-      def tooltip_with_link(type: :description, direction: :s, tooltip_text: "Tooltip text")
+      def tooltip_with_link(type: :description, direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |component|
           component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
@@ -84,7 +84,7 @@ module Primer
       end
 
       # @label Tooltip with Primer::IconButton
-      def tooltip_with_icon_button(direction: :s, tooltip_text: "Tooltip text")
+      def tooltip_with_icon_button(direction: :s, tooltip_text: "You can press a button")
         render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
       end
       # @!endgroup

data/previews/primer/beta/clipboard_copy_preview.rb

@@ -24,7 +24,7 @@ module Primer
       #
       # @param aria_label [String]
       # @param value [String]
-      def text(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+      def text(value: "Text to copy", aria_label: "Click to copy!")
         render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label)) { "Click to copy!" }
       end
 

data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb

@@ -1 +1,3 @@
-<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path)) %>
+<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path, id: "success-toggle")) %>
+<hr>
+<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", src: toggle_switch_index_path, id: "error-toggle")) %>

data/static/arguments.json

@@ -194,7 +194,7 @@
       {
         "name": "id",
         "type": "String",
-        "default": "`SecureRandom.hex`",
+        "default": "`self.class.generate_id`",
         "description": "Used internally."
       },
       {
@@ -308,7 +308,7 @@
       {
         "name": "id",
         "type": "String",
-        "default": "`\"dialog-#{(36**3 + rand(36**4)).to_s(36)}\"`",
+        "default": "`self.class.generate_id`",
         "description": "The id of the dialog."
       },
       {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.118
+  version: 0.0.119
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-01-11 00:00:00.000000000 Z
+date: 2023-01-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -100,20 +100,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.6.3
-- !ruby/object:Gem::Dependency
-  name: axe-core-api
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.2.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.2.0
 - !ruby/object:Gem::Dependency
   name: benchmark-ips
   requirement: !ruby/object:Gem::Requirement
@@ -851,6 +837,9 @@ files:
 - lib/primer/forms/toggle_switch.html.erb
 - lib/primer/forms/toggle_switch.rb
 - lib/primer/forms/toggle_switch_form.rb
+- lib/primer/forms/toggle_switch_input.d.ts
+- lib/primer/forms/toggle_switch_input.js
+- lib/primer/forms/toggle_switch_input.ts
 - lib/primer/forms/utils.rb
 - lib/primer/view_components.rb
 - lib/primer/view_components/audited.rb