Refine use cases rule examples

app/components/cards/Rule/Rule.container.tsx

@@ -28,6 +28,8 @@ const RuleContainer = memo<RuleProps>(
     onDescriptionClick,
     descriptionEmptyHint,
     descriptionEditAriaLabel,
+    onTitleClick,
+    titleEditAriaLabel,
     icon,
     backgroundColor = "bg-[var(--color-community-teal-100)]",
     className = "",
@@ -84,6 +86,8 @@ const RuleContainer = memo<RuleProps>(
         onDescriptionClick={onDescriptionClick}
         descriptionEmptyHint={descriptionEmptyHint}
         descriptionEditAriaLabel={descriptionEditAriaLabel}
+        onTitleClick={onTitleClick}
+        titleEditAriaLabel={titleEditAriaLabel}
         icon={icon}
         backgroundColor={backgroundColor}
         className={className}

app/components/cards/Rule/Rule.types.ts

@@ -39,6 +39,13 @@ export interface RuleProps {
   descriptionEditAriaLabel?: string;
   /** Shown when {@link onDescriptionClick} is set and `description` is empty. */
   descriptionEmptyHint?: string;
+  /**
+   * When set, the title in the card header is clickable — caller handles modal /
+   * navigation (e.g. edit published rule).
+   */
+  onTitleClick?: () => void;
+  /** When {@link onTitleClick} is set, forwarded to the control’s `aria-label`. */
+  titleEditAriaLabel?: string;
   icon?: React.ReactNode;
   backgroundColor?: string;
   className?: string;
@@ -80,6 +87,8 @@ export interface RuleViewProps {
   onDescriptionClick?: () => void;
   descriptionEmptyHint?: string;
   descriptionEditAriaLabel?: string;
+  onTitleClick?: () => void;
+  titleEditAriaLabel?: string;
   icon?: React.ReactNode;
   backgroundColor: string;
   className: string;

app/components/cards/Rule/Rule.view.tsx

@@ -14,6 +14,8 @@ export function RuleView({
   onDescriptionClick,
   descriptionEmptyHint,
   descriptionEditAriaLabel,
+  onTitleClick,
+  titleEditAriaLabel,
   icon,
   backgroundColor,
   className,
@@ -307,11 +309,27 @@ export function RuleView({
                   {t("recommendedLabel")}
                 </Tag>
               ) : null}
-              <h3
-                className={`${titleClass} cursor-inherit text-[var(--color-content-invert-primary)] overflow-hidden text-ellipsis w-full`}
-              >
-                {title}
-              </h3>
+              {onTitleClick ? (
+                <InlineTextButton
+                  type="button"
+                  underline={false}
+                  data-testid="rule-title-edit"
+                  ariaLabel={titleEditAriaLabel}
+                  className={`${titleClass} w-full min-w-0 cursor-pointer text-left text-[var(--color-content-invert-primary)] hover:!opacity-100 overflow-hidden text-ellipsis`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onTitleClick();
+                  }}
+                >
+                  {title}
+                </InlineTextButton>
+              ) : (
+                <h3
+                  className={`${titleClass} cursor-inherit text-[var(--color-content-invert-primary)] overflow-hidden text-ellipsis w-full`}
+                >
+                  {title}
+                </h3>
+              )}
             </div>
           </div>
         )}