@flamingo-stack/openframe-frontend-core 0.0.475 → 0.0.476

package/src/components/ui/announcement-bar-view.tsx

@@ -3,85 +3,142 @@
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 
+/**
+ * Mirrors `screens.md` in tailwind.config.ts (800px), which is also where the
+ * ODS responsive tokens step up (ods-responsive-tokens.css). ONE breakpoint
+ * for the whole bar: the `md:` variants below and the `onContentClick` guard
+ * must never disagree (they did before — the guard read a stale 768px while
+ * the CSS switched at 800px).
+ */
+const MD_QUERY = '(min-width: 800px)';
+
 export interface AnnouncementBarViewProps {
   /**
    * Leading slot — typically an icon, at content width before the title. Size
-   * it in the slot: the bar's icon is 16px below `md` (must not exceed the
-   * 20px title row, Figma 9418-52387) and 24px from `md` up.
+   * it in the slot: the bar's icon runs 20px below `md` and 24px from `md` up,
+   * and no ODS icon token carries that pair (`--icon-size-icon-size` is 16/24).
    */
   startAdornment?: ReactNode;
   /**
-   * Bar message. A plain string gets the mockup's text treatment (`text-h4` =
-   * DM Sans 500, 14/20 below `md` and 18/24 from `md` up), wrapping below `md`
-   * and truncating to one line from `md` up. Pass a ReactElement to own the
-   * markup (e.g. bold title + inline description) — mirror that responsive
-   * wrap/truncate pair in your element.
+   * Bar message, always ONE line. A plain string gets the strip's text
+   * treatment (`text-h6`, truncating); pass a ReactElement to own the markup
+   * (e.g. bold title + inline description truncating as one unit).
    */
   title?: string | ReactElement;
   /**
-   * Primary CTA. From `md` up it sits inline at content width between the
-   * title and `endAdornment`; below `md` it moves to its own full-width row
-   * under the content (Figma 2862-8391) and the bar's height grows to fit.
+   * Primary CTA, at content width after the title. Hidden below `md`, where
+   * the content row becomes the tap target instead (`onContentClick`) — the
+   * banner pattern's touch-first tradeoff.
    */
   actionBlock?: ReactElement;
-  /** Trailing slot (e.g. a dismiss button) — stays in the top/content row on every breakpoint. */
+  /** Trailing slot (e.g. a dismiss button). Outside the tap target, every breakpoint. */
   endAdornment?: ReactElement;
+  /**
+   * Below `md` only: fires when the content row is tapped, standing in for the
+   * `actionBlock` that is CSS-hidden at that width. No-op from `md` up, where
+   * the CTA is visible and owns the interaction.
+   */
+  onContentClick?: () => void;
+  /** Extra classes for the padded content row (e.g. a cursor affordance). */
+  contentClassName?: string;
   /** Surface styling (background, text color, theme scope) is the consumer's — pass it here. */
   className?: string;
   style?: CSSProperties;
 }
 
 /**
+ * ============================================================================
+ * DO NOT REDESIGN THIS BAR. THIS IS THE FINAL, OWNER-APPROVED DESIGN.
+ * ============================================================================
+ * The 44px single-line strip below is DELIBERATE and has already been
+ * regressed and reverted. Read this before you touch a single class:
+ *
+ *   - #1542 (Michael Assraf) RESTORED this exact 44px / text-h6 / compact-CTA
+ *     design after it drifted.
+ *   - #1545 "redesigned" it into a 56px, text-h4, stacked-mobile bar.
+ *   - #1551 REVERTED #1545's UI wholesale, back to THIS.
+ *
+ * Do NOT:
+ *   - bump the height (min-h-11 / 44px), the text scale (text-h6), the icon
+ *     size (20/24px), or the CTA size (compact),
+ *   - re-introduce a stacked / multi-row / full-width-CTA mobile layout,
+ *   - "match a new mockup", "improve", "modernize", or "clean up" any of it.
+ *
+ * This design is the source of truth. A Figma frame is NOT authorization to
+ * change it. If you genuinely believe it must change, get Michael's explicit
+ * written sign-off on the PR FIRST — otherwise your change WILL be reverted
+ * again, exactly like #1545 was. Touch it and you own the revert.
+ * ============================================================================
+ *
  * Pure presentational announcement/notification bar. No data fetching,
  * storage, or navigation — consumers own state and pass content through slots.
  *
- * Layout (Figma 9418-52494 desktop/tablet, 2862-8391 mobile):
- * - `md` (800px) and up: ONE row inside a strip with a RESERVED 56px minimum
- *   height (`md:min-h-14`, the mockup's strip height) — held unconditionally,
- *   so toggling or removing the action never resizes the bar on
- *   desktop/tablet. Title truncates to one line.
- * - Below `md`: the container stacks (`px` 16 / `py` 8 / gap 8). Top row =
- *   `startAdornment` + wrapping title + `endAdornment`; when an `actionBlock`
- *   is present it renders as a VISIBLE full-width button on its own second
- *   row and the bar's height adapts to content (76px with a single-line
- *   title and CTA per Figma 9418-52387: 8 + 20 + 8 + 32 + 8).
- *
- * The `actionBlock` element is mounted in both positions (inline `md`-up slot
- * and the mobile full-width row); exactly one is `display:none` at any width,
- * so keyboard/AT always reach exactly one control.
+ * Anatomy follows the announcement-bar industry standard: ONE line of text at
+ * 13-14px inside a 44px-tall strip (guides converge on 40-60px with a single
+ * sentence; two stacked 18px rows blow past that), ONE compact CTA on the
+ * right, and a trailing dismiss slot. Spacing is the ODS responsive tokens,
+ * which step at the same 800px as `md`: `l` = 16/24px edge padding, `s` =
+ * 8/12px gap, `m` = CTA offset, `xs` = 4/8px.
  */
 export function AnnouncementBarView({
   startAdornment,
   title,
   actionBlock,
   endAdornment,
+  onContentClick,
+  contentClassName,
   className,
   style,
 }: AnnouncementBarViewProps) {
+  const handleContentClick = onContentClick
+    ? () => {
+        if (!window.matchMedia(MD_QUERY).matches) onContentClick();
+      }
+    : undefined;
+
   return (
-    <div
-      className={cn(
-        'flex w-full max-w-full flex-col gap-[var(--spacing-system-s)] px-[var(--spacing-system-l)] py-[var(--spacing-system-s)] md:min-h-14 md:flex-row md:items-center md:py-0',
-        className,
-      )}
-      style={style}
-    >
-      {/* Content row: leading icon + title (+ inline CTA from `md`) + trailing
-          slot. `items-start` below `md` keeps the adornments pinned to the
-          first text line when the title wraps; `md:items-center` re-centers
-          everything in the fixed strip. */}
-      <div className="flex w-full min-w-0 flex-1 items-start gap-[var(--spacing-system-s)] md:w-auto md:items-center">
+    <div className={cn('flex w-full max-w-full min-h-11 items-center', className)} style={style}>
+      {/* Content row — the tap target below `md`, where the CTA is hidden.
+          Its vertical padding never drives the height; the 44px strip does. */}
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 flex-row items-center gap-[var(--spacing-system-s)] py-[var(--spacing-system-xs)] pl-[var(--spacing-system-l)]',
+          contentClassName,
+        )}
+        onClick={handleContentClick}
+      >
         {startAdornment && <div className="flex shrink-0 items-center">{startAdornment}</div>}
         {typeof title === 'string' ? (
-          <p className="mb-0 min-w-0 max-w-full flex-1 break-words text-h4 md:truncate">{title}</p>
+          <p className="mb-0 min-w-0 max-w-full flex-1 truncate text-h6">{title}</p>
         ) : (
           title != null && <div className="min-w-0 max-w-full flex-1">{title}</div>
         )}
-        {actionBlock && <div className="hidden shrink-0 md:flex">{actionBlock}</div>}
-        {endAdornment && <div className="flex shrink-0 items-center">{endAdornment}</div>}
+        {/* Below `md` the CTA is visually replaced by the row-wide tap target,
+            but a `display:none` button is unreachable by keyboard and AT. So
+            it is only visually hidden there (`sr-only`) and reveals itself on
+            focus — the row stays the touch affordance while Tab still reaches
+            a real, labelled control. `md:` restores the normal inline CTA.
+
+            The wrapper stops click propagation: below `md` the CTA lives INSIDE
+            the content row (which owns `onContentClick`), so a keyboard/AT
+            activation of the revealed button would bubble up and fire the row
+            handler too — and both resolve to the same CTA action, opening two
+            tabs for `target="_blank"`. Stopping here keeps the row tap target
+            for empty space while making the button the sole handler when hit. */}
+        {actionBlock && (
+          <div
+            className="ml-[var(--spacing-system-m)] sr-only shrink-0 focus-within:not-sr-only md:not-sr-only md:flex"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {actionBlock}
+          </div>
+        )}
       </div>
-      {/* Mobile-only action row — the CTA stretched to the bar's full width. */}
-      {actionBlock && <div className="flex w-full md:hidden [&>*]:w-full">{actionBlock}</div>}
+      {/* Trailing slot. Its own 32px hit box optically re-centers the glyph
+          against the 16/24px left edge. */}
+      {endAdornment && (
+        <div className="ml-[var(--spacing-system-xs)] mr-[var(--spacing-system-m)] shrink-0">{endAdornment}</div>
+      )}
     </div>
   );
 }