primer_view_components 0.1.7 → 0.1.9

data/app/components/primer/component.rb

@@ -16,6 +16,7 @@ module Primer
       include ViewComponent::PolymorphicSlots
     end
 
+    include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper
@@ -25,15 +26,13 @@ module Primer
     include Audited::Dsl
 
     INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
-    PLURAL_ARIA_ATTRIBUTES = %i[describedby labelledby].freeze
-    PLURAL_DATA_ATTRIBUTES = %i[target targets].freeze
 
     def self.deprecated?
       status == :deprecated
     end
 
-    def self.generate_id
-      "#{name.demodulize.underscore.dasherize}-#{SecureRandom.uuid}"
+    def self.generate_id(base_name: name.demodulize.underscore.dasherize)
+      "#{base_name}-#{SecureRandom.uuid}"
     end
 
     private
@@ -56,98 +55,6 @@ module Primer
       ActiveSupport::Deprecation.warn(message)
     end
 
-    def aria(val, system_arguments)
-      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
-    end
-
-    # Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
-    # each hash and returns them in the new hash.
-    #
-    # Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
-    #     => { disabled: "true", invalid: "true" }
-    #
-    # Certain aria attributes can contain multiple values separated by spaces. merge_aria
-    # will combine these plural attributes into a composite string.
-    #
-    # Eg. merge_aria({ "aria-labelledby": "foo" }, { aria: { labelledby: "bar" } })
-    #     => { labelledby: "foo bar" }
-    #
-    # It's designed to be used to normalize and merge aria information from system_arguments
-    # hashes. Consider using this pattern in component initializers:
-    #
-    # @system_arguments[:aria] = merge_aria(
-    #   @system_arguments,
-    #   { aria: { labelled_by: id } }
-    # )
-    def merge_aria(*hashes)
-      merge_prefixed_attribute_hashes(
-        *hashes, prefix: :aria, plural_keys: PLURAL_ARIA_ATTRIBUTES
-      )
-    end
-
-    # Merges hashes that contain "data-*" keys and nested data: hashes. Removes keys from
-    # each hash and returns them in the new hash.
-    #
-    # Eg. merge_data({ "data-foo": "true" }, { data: { bar: "true" } })
-    #     => { foo: "true", bar: "true" }
-    #
-    # Certain data attributes can contain multiple values separated by spaces. merge_data
-    # will combine these plural attributes into a composite string.
-    #
-    # Eg. merge_data({ "data-target": "foo" }, { data: { target: "bar" } })
-    #     => { target: "foo bar" }
-    #
-    # It's designed to be used to normalize and merge data information from system_arguments
-    # hashes. Consider using this pattern in component initializers:
-    #
-    # @system_arguments[:data] = merge_aria(
-    #   @system_arguments,
-    #   { data: { foo: "bar" } }
-    # )
-    def merge_data(*hashes)
-      merge_prefixed_attribute_hashes(
-        *hashes, prefix: :data, plural_keys: PLURAL_DATA_ATTRIBUTES
-      )
-    end
-
-    def merge_prefixed_attribute_hashes(*hashes, prefix:, plural_keys:)
-      {}.tap do |result|
-        hashes.each do |hash|
-          next unless hash
-
-          prefix_hash = hash.delete(prefix) || {}
-
-          prefix_hash.each_pair do |key, val|
-            result[key] =
-              if plural_keys.include?(key)
-                [*(result[key] || "").split, val].join(" ").strip
-              else
-                val
-              end
-          end
-
-          hash.delete_if do |key, val|
-            key_s = key.to_s
-
-            if key.start_with?("#{prefix}-")
-              bare_key = key_s.sub("#{prefix}-", "").to_sym
-
-              result[bare_key] =
-                if plural_keys.include?(bare_key)
-                  [*(result[bare_key] || "").split, val].join(" ").strip
-                else
-                  val
-                end
-
-              true
-            else
-              false
-            end
-          end
-        end
-      end
-    end
-
     def validate_aria_label
       aria_label = aria("label", @system_arguments)
       aria_labelledby = aria("labelledby", @system_arguments)

data/app/components/primer/focus_group.js

@@ -14,11 +14,11 @@ import '@oddbird/popover-polyfill';
 const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
 const popoverSelector = (() => {
     try {
-        document.querySelector(':open');
-        return ':open';
+        document.querySelector(':popover-open');
+        return ':popover-open';
     }
     catch (_a) {
-        return '.\\:open';
+        return '.\\:popover-open';
     }
 })();
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
@@ -80,28 +80,34 @@ export default class FocusGroupElement extends HTMLElement {
             if (key === 'Up' || key === 'ArrowUp') {
                 if (direction === 'vertical' || direction === 'both') {
                     index -= index < 0 ? 0 : 1;
+                    event.preventDefault();
                 }
             }
             else if (key === 'Down' || key === 'ArrowDown') {
                 if (direction === 'vertical' || direction === 'both') {
                     index += 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Left' || event.key === 'ArrowLeft') {
                 if (direction === 'horizontal' || direction === 'both') {
                     index -= 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Right' || event.key === 'ArrowRight') {
                 if (direction === 'horizontal' || direction === 'both') {
                     index += 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Home' || event.key === 'PageUp') {
                 index = 0;
+                event.preventDefault();
             }
             else if (event.key === 'End' || event.key === 'PageDown') {
                 index = items.length - 1;
+                event.preventDefault();
             }
             else if (this.mnemonics && printable.test(key)) {
                 const mnemonic = key.toLowerCase();
@@ -126,9 +132,7 @@ export default class FocusGroupElement extends HTMLElement {
                     if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
                         el.showPopover();
                     }
-                    else {
-                        el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
-                    }
+                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
                 } while (el);
             }
             focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();

data/app/components/primer/focus_group.ts

@@ -4,10 +4,10 @@ const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="men
 
 const popoverSelector = (() => {
   try {
-    document.querySelector(':open')
-    return ':open'
+    document.querySelector(':popover-open')
+    return ':popover-open'
   } catch {
-    return '.\\:open'
+    return '.\\:popover-open'
   }
 })()
 
@@ -79,23 +79,29 @@ export default class FocusGroupElement extends HTMLElement {
       if (key === 'Up' || key === 'ArrowUp') {
         if (direction === 'vertical' || direction === 'both') {
           index -= index < 0 ? 0 : 1
+          event.preventDefault()
         }
       } else if (key === 'Down' || key === 'ArrowDown') {
         if (direction === 'vertical' || direction === 'both') {
           index += 1
+          event.preventDefault()
         }
       } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
         if (direction === 'horizontal' || direction === 'both') {
           index -= 1
+          event.preventDefault()
         }
       } else if (event.key === 'Right' || event.key === 'ArrowRight') {
         if (direction === 'horizontal' || direction === 'both') {
           index += 1
+          event.preventDefault()
         }
       } else if (event.key === 'Home' || event.key === 'PageUp') {
         index = 0
+        event.preventDefault()
       } else if (event.key === 'End' || event.key === 'PageDown') {
         index = items.length - 1
+        event.preventDefault()
       } else if (this.mnemonics && printable.test(key)) {
         const mnemonic = key.toLowerCase()
         const offset = index > 0 && getMnemonicFor(event.target as Element) === mnemonic ? index : 0
@@ -115,9 +121,8 @@ export default class FocusGroupElement extends HTMLElement {
           el = el.closest(`[popover]:not(${popoverSelector})`)
           if (el?.popover === 'auto') {
             el.showPopover()
-          } else {
-            el = el?.parentElement || null
           }
+          el = el?.parentElement || null
         } while (el)
       }
       focusEl?.focus()

data/app/lib/primer/attributes_helper.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module AttributesHelper
+    PLURAL_ARIA_ATTRIBUTES = %i[describedby labelledby].freeze
+    PLURAL_DATA_ATTRIBUTES = %i[target targets].freeze
+
+    def aria(val, system_arguments)
+      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
+    end
+
+    def data(val, system_arguments)
+      system_arguments[:"data-#{val}"] || system_arguments.dig(:data, val.to_sym)
+    end
+
+    # Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
+    #     => { disabled: "true", invalid: "true" }
+    #
+    # Certain aria attributes can contain multiple values separated by spaces. merge_aria
+    # will combine these plural attributes into a composite string.
+    #
+    # Eg. merge_aria({ "aria-labelledby": "foo" }, { aria: { labelledby: "bar" } })
+    #     => { labelledby: "foo bar" }
+    #
+    # It's designed to be used to normalize and merge aria information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:aria] = merge_aria(
+    #   @system_arguments,
+    #   { aria: { labelled_by: id } }
+    # )
+    def merge_aria(*hashes)
+      merge_prefixed_attribute_hashes(
+        *hashes, prefix: :aria, plural_keys: PLURAL_ARIA_ATTRIBUTES
+      )
+    end
+
+    # Merges hashes that contain "data-*" keys and nested data: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_data({ "data-foo": "true" }, { data: { bar: "true" } })
+    #     => { foo: "true", bar: "true" }
+    #
+    # Certain data attributes can contain multiple values separated by spaces. merge_data
+    # will combine these plural attributes into a composite string.
+    #
+    # Eg. merge_data({ "data-target": "foo" }, { data: { target: "bar" } })
+    #     => { target: "foo bar" }
+    #
+    # It's designed to be used to normalize and merge data information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:data] = merge_aria(
+    #   @system_arguments,
+    #   { data: { foo: "bar" } }
+    # )
+    def merge_data(*hashes)
+      merge_prefixed_attribute_hashes(
+        *hashes, prefix: :data, plural_keys: PLURAL_DATA_ATTRIBUTES
+      )
+    end
+
+    def merge_prefixed_attribute_hashes(*hashes, prefix:, plural_keys:)
+      {}.tap do |result|
+        hashes.each do |hash|
+          next unless hash
+
+          prefix_hash = hash.delete(prefix) || {}
+
+          prefix_hash.each_pair do |key, val|
+            result[key] =
+              if plural_keys.include?(key)
+                [*(result[key] || "").split, val].join(" ").strip
+              else
+                val
+              end
+          end
+
+          hash.delete_if do |key, val|
+            key_s = key.to_s
+
+            if key.start_with?("#{prefix}-")
+              bare_key = key_s.sub("#{prefix}-", "").to_sym
+
+              result[bare_key] =
+                if plural_keys.include?(bare_key)
+                  [*(result[bare_key] || "").split, val].join(" ").strip
+                else
+                  val
+                end
+
+              true
+            else
+              false
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -47,7 +47,7 @@ module Primer
 
         include Primer::ClassNameHelper
 
-        attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control
+        attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control, :base_id
 
         alias form_control? form_control
 
@@ -107,11 +107,11 @@ module Primer
 
           @input_arguments[:invalid] = "true" if invalid?
 
-          base_id = SecureRandom.uuid
+          @base_id = SecureRandom.uuid
 
           @ids = {}.tap do |id_map|
-            id_map[:validation] = "validation-#{base_id}" if invalid?
-            id_map[:caption] = "caption-#{base_id}" if caption? || caption_template?
+            id_map[:validation] = "validation-#{@base_id}"
+            id_map[:caption] = "caption-#{@base_id}" if caption? || caption_template?
           end
 
           add_input_aria(:required, true) if required?
@@ -264,10 +264,6 @@ module Primer
           true
         end
 
-        def need_validation_element?
-          invalid?
-        end
-
         def validation_arguments
           {
             class: "FormControl-inlineValidation",

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

@@ -57,10 +57,6 @@ module Primer
           !!@leading_visual
         end
 
-        def need_validation_element?
-          super || auto_check_src.present?
-        end
-
         def validation_arguments
           if auto_check_src.present?
             super.merge(

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

@@ -29,6 +29,10 @@ module Primer
         def type
           :toggle_switch
         end
+
+        def validation_arguments
+          super.merge(role: "alert")
+        end
       end
     end
   end

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

@@ -9,11 +9,9 @@
       <% end %>
     <% end %>
     <%= content %>
-    <% if @input.need_validation_element? %>
-      <%= content_tag(:div, **@input.validation_arguments) do %>
-        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
-        <%= content_tag(:span, @input.validation_messages.first, **@input.validation_message_arguments) %>
-      <% end %>
+    <%= content_tag(:div, **@input.validation_arguments) do %>
+      <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
     <% end %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>

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

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(classes: @classes, **@system_arguments)) do %>
+  <%= content %>
+<% end %>

data/lib/primer/forms/primer_base_component_wrapper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "primer/class_name_helper"
+
+module Primer
+  module Forms
+    # Wraps Primer::BaseComponent.
+    class PrimerBaseComponentWrapper < BaseComponent
+      include Primer::ClassNameHelper
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+
+        # Extract class and classes so they can be passed to Primer::BaseComponent
+        # as classes:. The class: argument is expected by Rails, but Primer expects
+        # classes:, reminiscent of HashWithIndifferentAccess shenanigans.
+        @classes = class_names(
+          system_arguments.delete(:classes),
+          system_arguments.delete(:class)
+        )
+      end
+    end
+  end
+end

data/lib/primer/forms/text_field.rb

@@ -6,6 +6,11 @@ module Primer
     class TextField < BaseComponent
       delegate :builder, :form, to: :@input
 
+      INPUT_WRAP_SIZE = {
+        small: "FormControl-input-wrap--small",
+        large: "FormControl-input-wrap--large"
+      }.freeze
+
       def initialize(input:)
         @input = input
 
@@ -17,6 +22,7 @@ module Primer
         @field_wrap_arguments = {
           class: class_names(
             "FormControl-input-wrap",
+            INPUT_WRAP_SIZE[input.size],
             "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
             "FormControl-input-wrap--leadingVisual": @input.leading_visual?
           ),

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

@@ -1,6 +1,6 @@
-<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
+<%= content_tag("toggle-switch-input", class: "FormControl-toggleSwitchInput", hidden: @input.hidden?) do %>
   <span style="flex-grow: 1">
-    <%= builder.label(@input.name, **@input.label_arguments) do %>
+    <%= render(Primer::Forms::PrimerBaseComponentWrapper.new(tag: :span, **@input.label_arguments)) do %>
       <%= @input.label %>
     <% end %>
 
@@ -18,5 +18,5 @@
       }
     )
   %>
-  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf)) %>
+  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
 <% end %>

data/lib/primer/forms/toggle_switch.rb

@@ -9,8 +9,12 @@ module Primer
       def initialize(input:)
         @input = input
         @input.add_label_classes("FormControl-label")
-        @input.add_input_classes("FormControl-toggleSwitchInput")
-        @input.input_arguments[:hidden] = "hidden" if @input.hidden?
+        @input.label_arguments[:id] = label_id
+        @input.add_input_aria(:labelledby, label_id)
+      end
+
+      def label_id
+        @label_id ||= "label-#{@input.base_id}"
       end
     end
   end

data/lib/primer/forms/toggle_switch_input.js

@@ -1,3 +1,4 @@
+/* eslint-disable custom-elements/expose-class-on-global */
 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);
@@ -8,11 +9,15 @@ import { controller, target } from '@github/catalyst';
 let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
     connectedCallback() {
         this.addEventListener('toggleSwitchError', (event) => {
-            this.validationMessageElement.innerText = event.detail;
+            this.validationMessageElement.textContent = event.detail;
             this.validationElement.removeAttribute('hidden');
         });
         this.addEventListener('toggleSwitchSuccess', () => {
-            this.validationMessageElement.innerText = '';
+            this.validationMessageElement.textContent = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+        this.addEventListener('toggleSwitchLoading', () => {
+            this.validationMessageElement.textContent = '';
             this.validationElement.setAttribute('hidden', 'hidden');
         });
     }

data/lib/primer/forms/toggle_switch_input.ts

@@ -1,3 +1,5 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+
 import {controller, target} from '@github/catalyst'
 
 @controller
@@ -7,12 +9,17 @@ export class ToggleSwitchInputElement extends HTMLElement {
 
   connectedCallback() {
     this.addEventListener('toggleSwitchError', (event: Event) => {
-      this.validationMessageElement.innerText = (event as CustomEvent).detail
+      this.validationMessageElement.textContent = (event as CustomEvent).detail
       this.validationElement.removeAttribute('hidden')
     })
 
     this.addEventListener('toggleSwitchSuccess', () => {
-      this.validationMessageElement.innerText = ''
+      this.validationMessageElement.textContent = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+
+    this.addEventListener('toggleSwitchLoading', () => {
+      this.validationMessageElement.textContent = ''
       this.validationElement.setAttribute('hidden', 'hidden')
     })
   }

data/lib/primer/static/generate_info_arch.rb

@@ -72,6 +72,9 @@ module Primer
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
+              "is_form_component" => docs.manifest_entry.form_component?,
+              "is_published" => docs.manifest_entry.published?,
+              "requires_js" => docs.manifest_entry.requires_js?,
               **arg_data,
               "slots" => slot_docs,
               "methods" => method_docs,

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -129,7 +129,7 @@ module Primer
         end
 
         def ref_for(klass)
-          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS[klass])
+          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS.fetch(klass, {}))
         end
 
         private

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -10,7 +10,7 @@ module Primer
       PREVIEW_MAP = {
         Primer::Alpha::TextField => [:single_text_field_form, :multi_text_field_form],
         Primer::Alpha::TextArea => [],
-        Primer::Alpha::Select => [:select_list_form],
+        Primer::Alpha::Select => [:select_form],
         Primer::Alpha::MultiInput => [:multi_input_form],
         Primer::Alpha::RadioButton => [:radio_button_with_nested_form],
         Primer::Alpha::RadioButtonGroup => [:radio_button_group_form],
@@ -49,6 +49,12 @@ module Primer
 
         preview_methods = PREVIEW_MAP[component]
         preview_erbs = preview_methods.map do |preview_method|
+          # rubocop:disable Style/IfUnlessModifier
+          if Primer::Forms::FormsPreview.instance_methods.exclude?(preview_method)
+            raise "Preview '#{preview_method}' does not exist in Primer::Forms::FormsPreview"
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
           "<%= embed Primer::Forms::FormsPreview, #{preview_method.inspect} %>"
         end
         # rubocop:enable Lint/UselessAssignment

data/lib/primer/yard/registry.rb

@@ -89,6 +89,10 @@ module Primer
       def a11y_reviewed?
         metadata[:a11y_reviewed]
       end
+
+      def manifest_entry
+        @manifest_entry ||= ComponentManifest.ref_for(component)
+      end
     end
 
     # Wrapper around an instance of YARD::Registry that provides easy access to component

data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb

@@ -1,19 +1,19 @@
-<%= render(Primer::Alpha::NavList.new) do |list| %>
+<%= render(Primer::Alpha::NavList.new(aria: { label: "Workflow results" })) do |list| %>
   <% list.with_group do |group| %>
-    <%= group.with_heading(title: "Shopping list") %>
-    <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
-      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+    <% group.with_heading(title: "Workflows") %>
+    <% group.with_item(label: "Build and Test", href: "/workflows/1") do |item| %>
+      <%= item.with_trailing_action(icon: :sync, aria: { label: "Build and test: re-run workflow" }, name: "build_and_test_button") %>
     <% end %>
-    <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
-      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>
+    <% group.with_item(label: "Publish", href: "/workflows/2") do |item| %>
+      <%= item.with_trailing_action(icon: :sync, aria: { label: "Publish: re-run workflow" }, name: "publish_button") %>
     <% end %>
   <% end %>
 <% end %>
 
 <script type="text/javascript" data-eval="true">
-  const breadButton = document.querySelector("[name=bread_button]")
-  breadButton.addEventListener("click", () => alert("You selected bread."))
+  const breadButton = document.querySelector("[name=build_and_test_button]")
+  breadButton.addEventListener("click", () => alert("The 'Build and Test' workflow will be re-run."))
 
-  const cheeseButton = document.querySelector("[name=cheese_button]")
-  cheeseButton.addEventListener("click", () => alert("You selected cheese."))
+  const cheeseButton = document.querySelector("[name=publish_button]")
+  cheeseButton.addEventListener("click", () => alert("The 'Publish' workflow will be re-run."))
 </script>