yummy-guide-generic-administrate 0.8.18 → 0.8.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b53bff1d61f85a0cf761db5b1268073c026170320b44cd8b02f1f8ebdcf42938
-  data.tar.gz: e1e7da598410b265d230ba48a204e604539c9e33e4318027ba0f03152e7083f9
+  metadata.gz: c85a364e43e99ea2fcb9440143675804196ced1b1d46b211cd202e1664232581
+  data.tar.gz: e6974ae9c103179acfc9fe77347336dac3feae4e305f1008dbc2ebd18eb1bd26
 SHA512:
-  metadata.gz: 973806241c05cb384995d1ce293af242adda092846ff9c0d94790bed8c4e04f82e7d418dbce3b1fa29843ab56d6e3c022c72d695da8f7fe3aff95806c7615f7c
-  data.tar.gz: b02c11686425c3ca4c120e7d286a076595ec3074f640252918d8278b5bbaa4d6dd58167482c23afe400dcc54617c905103c988cbf23876ebd3f08b56d4f5e2e7
+  metadata.gz: bddc130440fc835aabeca11cc79dafcaaecfcd6f06ab4c37a18318b618a4d20b835436e5f766adb4f31a4e25f391a447dbdce40af0e2694b2101f426f2153109
+  data.tar.gz: 87927272596c5bbb430f78982a5ba8d4e20626c88b907fa14613708a49de8d4dc357d8fe4c8160719f00a8e3d159aaea74dee74678aa1c22f5c41430fbadb117

data/app/assets/javascripts/yummy_guide_administrate/tooltips.js

@@ -6,10 +6,13 @@
   var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
   var EDGE_GAP = 8;
   var OFFSET = 8;
+  var WARNING_HOVER_HIDE_DELAY = 300;
   var activeTrigger = null;
   var hoveredTrigger = null;
   var focusedTrigger = null;
+  var pinnedTrigger = null;
   var tooltipElement = null;
+  var warningHideTimer = null;
 
   function isMobile() {
     return window.matchMedia && window.matchMedia(MOBILE_MEDIA_QUERY).matches;
@@ -21,6 +24,39 @@
     return target.closest(TRIGGER_SELECTOR);
   }
 
+  function warningTrigger(trigger) {
+    return trigger && trigger.getAttribute("data-admin-tooltip-variant") === "warning";
+  }
+
+  function interactiveTooltipTarget(target) {
+    return tooltipElement &&
+      tooltipElement.classList.contains("admin-tooltip--warning") &&
+      target &&
+      tooltipElement.contains(target);
+  }
+
+  function clearWarningHideTimer() {
+    if (!warningHideTimer) return;
+
+    window.clearTimeout(warningHideTimer);
+    warningHideTimer = null;
+  }
+
+  function hideTooltipAfterPointerLeave(trigger) {
+    if (!warningTrigger(trigger)) {
+      hideTooltip(trigger);
+      return;
+    }
+
+    clearWarningHideTimer();
+    warningHideTimer = window.setTimeout(function() {
+      warningHideTimer = null;
+      if (activeTrigger !== trigger || focusedTrigger === trigger || pinnedTrigger === trigger) return;
+
+      hideTooltip(trigger);
+    }, WARNING_HOVER_HIDE_DELAY);
+  }
+
   function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
   }
@@ -37,12 +73,23 @@
     return tooltipElement;
   }
 
+  function templateContentHtml(template) {
+    var html = template.innerHTML;
+    if (html) return html;
+
+    // React は <template> の子要素を template.content ではなく直接配置するため、
+    // innerHTML が空の場合は直接の子ノードから本文を復元する。
+    return Array.prototype.map.call(template.childNodes, function(node) {
+      return node.outerHTML || node.textContent || "";
+    }).join("");
+  }
+
   function tooltipContent(trigger) {
     var contentId = trigger.getAttribute("data-admin-tooltip-content-id");
     var template = contentId ? document.getElementById(contentId) : null;
     if (template) {
       return {
-        html: template.innerHTML,
+        html: templateContentHtml(template),
         text: ""
       };
     }
@@ -59,7 +106,14 @@
 
     trigger.setAttribute("aria-expanded", expanded ? "true" : "false");
 
-    if (expanded) {
+    if (warningTrigger(trigger)) {
+      trigger.removeAttribute("aria-describedby");
+      if (expanded) {
+        trigger.setAttribute("aria-controls", TOOLTIP_ID);
+      } else {
+        trigger.removeAttribute("aria-controls");
+      }
+    } else if (expanded) {
       trigger.setAttribute("aria-describedby", TOOLTIP_ID);
     } else {
       trigger.removeAttribute("aria-describedby");
@@ -106,8 +160,19 @@
       hideTooltip();
     }
 
+    clearWarningHideTimer();
     activeTrigger = trigger;
     tooltipElement = getTooltipElement();
+    tooltipElement.classList.toggle(
+      "admin-tooltip--warning",
+      warningTrigger(trigger)
+    );
+    tooltipElement.setAttribute("role", warningTrigger(trigger) ? "dialog" : "tooltip");
+    if (warningTrigger(trigger)) {
+      tooltipElement.setAttribute("aria-label", trigger.getAttribute("aria-label") || "Details");
+    } else {
+      tooltipElement.removeAttribute("aria-label");
+    }
     if (content.html) {
       tooltipElement.innerHTML = content.html;
     } else {
@@ -126,6 +191,7 @@
   function hideTooltip(trigger) {
     if (trigger && activeTrigger !== trigger) return;
 
+    clearWarningHideTimer();
     setTriggerState(activeTrigger, false);
 
     if (tooltipElement) {
@@ -133,14 +199,16 @@
     }
 
     activeTrigger = null;
+    pinnedTrigger = null;
   }
 
   function toggleTooltip(trigger) {
-    if (activeTrigger === trigger && tooltipElement && tooltipElement.classList.contains(VISIBLE_CLASS)) {
+    if (pinnedTrigger === trigger && tooltipElement && tooltipElement.classList.contains(VISIBLE_CLASS)) {
       hideTooltip(trigger);
       return;
     }
 
+    pinnedTrigger = trigger;
     showTooltip(trigger);
   }
 
@@ -148,23 +216,47 @@
     var trigger = closestTrigger(event.target);
     if (!trigger || isMobile() || (event.relatedTarget && trigger.contains(event.relatedTarget))) return;
 
+    clearWarningHideTimer();
     hoveredTrigger = trigger;
     showTooltip(trigger);
   });
 
+  document.addEventListener("mouseover", function(event) {
+    if (interactiveTooltipTarget(event.target)) {
+      clearWarningHideTimer();
+    }
+  });
+
   document.addEventListener("mouseout", function(event) {
     var trigger = closestTrigger(event.target);
-    if (!trigger || isMobile() || (event.relatedTarget && trigger.contains(event.relatedTarget))) return;
+    if (!trigger || isMobile() || (event.relatedTarget && (trigger.contains(event.relatedTarget) || interactiveTooltipTarget(event.relatedTarget)))) return;
 
     if (hoveredTrigger === trigger) {
       hoveredTrigger = null;
     }
-    if (focusedTrigger === trigger) return;
+    if (focusedTrigger === trigger || pinnedTrigger === trigger) return;
 
-    hideTooltip(trigger);
+    hideTooltipAfterPointerLeave(trigger);
+  });
+
+  document.addEventListener("mouseout", function(event) {
+    if (!interactiveTooltipTarget(event.target) || interactiveTooltipTarget(event.relatedTarget)) return;
+    if (activeTrigger && event.relatedTarget && activeTrigger.contains(event.relatedTarget)) return;
+
+    if (hoveredTrigger === activeTrigger) {
+      hoveredTrigger = null;
+    }
+    if (focusedTrigger === activeTrigger || pinnedTrigger === activeTrigger) return;
+
+    hideTooltipAfterPointerLeave(activeTrigger);
   });
 
   document.addEventListener("focusin", function(event) {
+    if (interactiveTooltipTarget(event.target)) {
+      clearWarningHideTimer();
+      return;
+    }
+
     var trigger = closestTrigger(event.target);
     if (!trigger || isMobile()) return;
 
@@ -179,24 +271,36 @@
     if (focusedTrigger === trigger) {
       focusedTrigger = null;
     }
-    if (hoveredTrigger === trigger) return;
+    if (warningTrigger(trigger) && interactiveTooltipTarget(event.relatedTarget)) {
+      clearWarningHideTimer();
+      return;
+    }
+    if (hoveredTrigger === trigger || pinnedTrigger === trigger) return;
 
     hideTooltip(trigger);
   });
 
+  document.addEventListener("focusout", function(event) {
+    if (!interactiveTooltipTarget(event.target)) return;
+    if (interactiveTooltipTarget(event.relatedTarget)) return;
+    if (activeTrigger && event.relatedTarget && (activeTrigger === event.relatedTarget || activeTrigger.contains(event.relatedTarget))) return;
+
+    hideTooltip();
+  });
+
   document.addEventListener("click", function(event) {
     var trigger = closestTrigger(event.target);
 
     if (trigger) {
-      if (!isMobile()) return;
-
       event.preventDefault();
       event.stopPropagation();
       toggleTooltip(trigger);
       return;
     }
 
-    if (activeTrigger && isMobile()) {
+    if (interactiveTooltipTarget(event.target)) return;
+
+    if (activeTrigger) {
       hideTooltip();
     }
   });

data/app/assets/stylesheets/yummy_guide_administrate/_tooltips.scss

@@ -55,6 +55,73 @@
   transform: translateY(0);
 }
 
+.admin-tooltip--warning {
+  max-width: 360px;
+  padding: 0;
+  border: 1px solid #fedf89;
+  border-left: 4px solid #f79009;
+  background: #fff;
+  color: #344054;
+}
+
+.admin-tooltip--warning.admin-tooltip--visible {
+  pointer-events: auto;
+}
+
+.admin-tooltip--warning::before {
+  background: #fff;
+}
+
+.admin-tooltip__warning-card {
+  padding: 0.75rem;
+}
+
+.admin-tooltip__warning-title {
+  display: block;
+  color: #7a2e0e;
+}
+
+.admin-tooltip__warning-message {
+  margin: 0.35rem 0 0.75rem;
+}
+
+.admin-tooltip__warning-details {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.admin-tooltip__warning-details > div {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #eaecf0;
+}
+
+.admin-tooltip__warning-details dt {
+  color: #667085;
+  font-weight: 600;
+}
+
+.admin-tooltip__warning-details dd {
+  margin: 0;
+  color: #344054;
+  text-align: right;
+}
+
+.admin-tooltip__warning-details dt,
+.admin-tooltip__warning-details dd {
+  line-height: 1.45;
+}
+
+.admin-tooltip__warning-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.75rem;
+}
+
 .admin-tooltip::before {
   content: "";
   position: absolute;

data/app/helpers/yummy_guide/administrate/integration_transition_helper.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module YummyGuide
+  module Administrate
+    module IntegrationTransitionHelper
+      # 外部連携の非同期遷移を、製品固有の文言を渡して共通表示する。
+      def integration_transition_notice(message:, state:, details: nil)
+        warning = state.to_s == 'warning'
+        color = (warning || state.to_s == 'failed') ? '#b42318' : '#175cd3'
+        background = warning ? '#fef3f2' : '#f8fafc'
+        border = warning ? '#fecdca' : color
+        icon = if warning
+                 content_tag(
+                   :span,
+                   '⚠',
+                   class: 'integration-transition-notice__caution-icon',
+                   aria: { hidden: true },
+                   style: "color: #{color}; font-size: 20px; line-height: 1;",
+                 )
+               end
+
+        content_tag(
+          :div,
+          role: 'status',
+          class: "integration-transition-notice integration-transition-notice--#{state}",
+          data: { integration_transition_state: state },
+          style: "display: flex; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid #{border}; border-left: 4px solid #{color}; background: #{background}; color: #{color};",
+        ) do
+          safe_join([
+            icon,
+            content_tag(:div, safe_join([content_tag(:strong, message), details.present? ? content_tag(:div, details, style: 'margin-top: 4px;') : nil].compact)),
+          ].compact)
+        end
+      end
+    end
+  end
+end

data/lib/yummy_guide/administrate/engine.rb

@@ -27,6 +27,7 @@ module YummyGuide
           ::Administrate::ApplicationController.helper YummyGuide::Administrate::FilterFormHelper
           ::Administrate::ApplicationController.helper YummyGuide::Administrate::FilterControlsHelper
           ::Administrate::ApplicationController.helper YummyGuide::Administrate::TooltipHelper
+          ::Administrate::ApplicationController.helper YummyGuide::Administrate::IntegrationTransitionHelper
         end
       end
     end

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.18"
+    VERSION = "0.8.19"
   end
 end

data/spec/yummy_guide/administrate/integration_transition_helper_spec.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe YummyGuide::Administrate::IntegrationTransitionHelper do
+  let(:view) { ActionView::Base.empty }
+
+  before { view.extend(described_class) }
+
+  # 製品固有の非同期連携状態を共通のアクセシブルな通知として表示すること
+  it "renders a status notice with the supplied message and details" do
+    html = view.integration_transition_notice(message: "処理中です", state: "processing", details: "対象 Assign: 2件")
+
+    expect(html).to include('role="status"')
+    expect(html).to include("処理中です")
+    expect(html).to include("対象 Assign: 2件")
+  end
+
+  # 紐付け設定が必要な警告は赤色カードとcautionアイコンで強調すること
+  it "renders a warning notice as a caution card" do
+    html = view.integration_transition_notice(message: "JobOption の紐付け設定が必要", state: "warning")
+
+    expect(html).to include("integration-transition-notice--warning")
+    expect(html).to include('data-integration-transition-state="warning"')
+    expect(html).to include("integration-transition-notice__caution-icon")
+    expect(html).to include("#fef3f2")
+  end
+end

data/spec/yummy_guide/administrate/tooltip_asset_spec.rb

@@ -22,31 +22,76 @@ RSpec.describe "tooltip assets" do
     expect(javascript_source).to include("showTooltip(trigger)")
   end
 
-  # モバイルではクリックで tooltip 表示をトグルする契約を持つことを静的に確認する
-  it "supports mobile click toggling" do
+  # 画面幅にかかわらずクリックで tooltip 表示を固定・トグルできることを静的に確認する
+  it "supports click toggling on every screen size" do
     expect(javascript_source).to include('MOBILE_MEDIA_QUERY = "(max-width: 767px)"')
     expect(javascript_source).to include("window.matchMedia")
     expect(javascript_source).to include('document.addEventListener("click"')
     expect(javascript_source).to include("toggleTooltip(trigger)")
+    expect(javascript_source).to include("pinnedTrigger = trigger")
     expect(javascript_source).to include("event.stopPropagation()")
   end
 
   # Esc / 外側クリック / resize で表示中 tooltip を閉じられることを静的に確認する
   it "closes the active tooltip from common dismissal events" do
     expect(javascript_source).to include('event.key !== "Escape"')
-    expect(javascript_source).to include("if (activeTrigger && isMobile())")
+    expect(javascript_source).to include("if (activeTrigger)")
     expect(javascript_source).to include('window.addEventListener("resize"')
     expect(javascript_source).to include("hideTooltip()")
   end
 
-  # block本文用のtemplateがある場合はHTML本文としてtooltipへ描画することを静的に確認する
+  # ERBのtemplate本文とReactが直接配置する子要素の両方をHTML本文としてtooltipへ描画することを静的に確認する
   it "renders template content for block tooltip bodies" do
     expect(javascript_source).to include('getAttribute("data-admin-tooltip-content-id")')
     expect(javascript_source).to include("template.innerHTML")
+    expect(javascript_source).to include("templateContentHtml")
+    expect(javascript_source).to include("Array.prototype.map.call(template.childNodes")
+    expect(javascript_source).to include("node.outerHTML || node.textContent")
     expect(javascript_source).to include("tooltipElement.innerHTML = content.html")
     expect(javascript_source).to include("tooltipElement.textContent = content.text")
   end
 
+  # warning variantでは白背景の項目別ポップオーバーを表示できることを静的に確認する
+  it "supports warning card tooltip variants" do
+    expect(javascript_source).to include('data-admin-tooltip-variant')
+    expect(javascript_source).to include('"admin-tooltip--warning"')
+    expect(stylesheet_source).to include('.admin-tooltip--warning')
+    expect(stylesheet_source).to include('background: #fff')
+    expect(stylesheet_source).to include('.admin-tooltip__warning-details')
+    expect(stylesheet_source).to include('align-items: baseline')
+    expect(stylesheet_source).to match(/\.admin-tooltip--warning\.admin-tooltip--visible\s*\{[^}]*pointer-events: auto;/m)
+  end
+
+  # warning cardはポインターをカード上へ移動しても閉じず、操作要素をクリックできることを静的に確認する
+  it "keeps interactive warning cards open while they are hovered" do
+    expect(javascript_source).to include('interactiveTooltipTarget(event.relatedTarget)')
+    expect(javascript_source).to include('if (interactiveTooltipTarget(event.target)) return')
+    expect(javascript_source).to include('WARNING_HOVER_HIDE_DELAY = 300')
+    expect(javascript_source).to include('clearWarningHideTimer()')
+    expect(javascript_source).to include('hideTooltipAfterPointerLeave(trigger)')
+    expect(javascript_source).to include('"dialog"')
+  end
+
+  # warning cardを閉じた後は透明な要素が背後の操作を妨げないことを静的に確認する
+  it "enables pointer events only while warning cards are visible" do
+    expect(stylesheet_source).to include('.admin-tooltip--warning.admin-tooltip--visible')
+    expect(stylesheet_source).to include('pointer-events: none')
+  end
+
+  # triggerとwarning card間のキーボードフォーカス移動では閉じず、外部への移動で閉じることを静的に確認する
+  it "keeps warning cards open while focus moves within the interactive card" do
+    expect(javascript_source).to include('warningTrigger(trigger) && interactiveTooltipTarget(event.relatedTarget)')
+    expect(javascript_source).to include('activeTrigger === event.relatedTarget || activeTrigger.contains(event.relatedTarget)')
+    expect(javascript_source).to include('if (!interactiveTooltipTarget(event.target)) return;')
+    expect(javascript_source).to include('hideTooltip();')
+  end
+
+  # warning cardの確認操作を詳細項目の右下へ配置するスタイルを持つことを確認する
+  it "right-aligns warning card actions" do
+    expect(stylesheet_source).to include('.admin-tooltip__warning-actions')
+    expect(stylesheet_source).to include('justify-content: flex-end')
+  end
+
   # tooltip の吹き出しと表示状態に必要な CSS class が定義されることを静的に確認する
   it "defines tooltip trigger and bubble styles" do
     expect(stylesheet_source).to include(".admin-tooltip-trigger")

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.18
+  version: 0.8.19
 platform: ruby
 authors:
 - akatsuki-kk
@@ -118,6 +118,7 @@ files:
 - app/helpers/yummy_guide/administrate/datetime_input_helper.rb
 - app/helpers/yummy_guide/administrate/filter_controls_helper.rb
 - app/helpers/yummy_guide/administrate/filter_form_helper.rb
+- app/helpers/yummy_guide/administrate/integration_transition_helper.rb
 - app/helpers/yummy_guide/administrate/number_input_helper.rb
 - app/helpers/yummy_guide/administrate/tooltip_helper.rb
 - app/views/administrate/application/_header_pagination.html.erb
@@ -161,6 +162,7 @@ files:
 - spec/yummy_guide/administrate/filter_form_asset_spec.rb
 - spec/yummy_guide/administrate/filter_form_helper_spec.rb
 - spec/yummy_guide/administrate/filters_spec.rb
+- spec/yummy_guide/administrate/integration_transition_helper_spec.rb
 - spec/yummy_guide/administrate/number_input_helper_spec.rb
 - spec/yummy_guide/administrate/tooltip_asset_spec.rb
 - spec/yummy_guide/administrate/tooltip_helper_spec.rb