@flamingo-stack/openframe-frontend-core 0.0.466 → 0.0.467-snapshot.20260723125044

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

@@ -0,0 +1,94 @@
+'use client';
+
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+export interface AnnouncementBarViewProps {
+  /**
+   * Leading slot — typically an icon. Rendered before the title. Per the
+   * mockup icons are 16px below `md` and 24px from `md` up — size them with
+   * the responsive token: `size-[var(--icon-size-icon-size)]`.
+   */
+  startAdornment?: ReactNode;
+  /**
+   * Bar message. A plain string gets the mockup's text treatment (`text-h4`,
+   * single line from `md` up, wrapping below); pass a ReactElement to fully
+   * own the markup/typography (e.g. bold title + inline description).
+   */
+  title?: string | ReactElement;
+  /**
+   * Primary CTA. From `md` up it sits at content width in one trailing
+   * container with `endAdornment`; below `md` it drops to its own
+   * full-width second row (Figma ODS 2862-8391). Omit it entirely to
+   * collapse that row — the bar height then follows the remaining content.
+   */
+  actionBlock?: ReactElement;
+  /**
+   * Trailing slot (e.g. a dismiss button). Always keeps its content width:
+   * inline after the title below `md` (and on every breakpoint when there is
+   * no `actionBlock`), after the action from `md` up. NOTE: with an
+   * `actionBlock` present the element is mounted twice (one copy per
+   * breakpoint, the inactive one `display:none`) — keep it stateless.
+   */
+  endAdornment?: ReactElement;
+  /** Surface styling (background, text color, theme scope) is the consumer's — pass it here. */
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Pure presentational announcement/notification bar (Figma 9364-40603 desktop,
+ * 9418-43969 tablet, ODS 2862-8391 mobile). No data fetching, storage, or
+ * navigation — consumers own state and pass content through slots.
+ *
+ * Layout: `md` (800px) and up is a single row — `startAdornment` + title
+ * (flex-1, truncating) + trailing container (`actionBlock` + `endAdornment`)
+ * at content width. Below `md`: `startAdornment` + wrapping title +
+ * `endAdornment` share the first row (top-aligned so a two-line title keeps
+ * the adornments on line one, each centered in a line-height box), and the
+ * action alone stretches across its own second row. No action → no second
+ * row; the bar height follows the content. Spacing/typography use responsive
+ * ODS tokens, so paddings and font sizes track the breakpoint automatically.
+ */
+export function AnnouncementBarView({
+  startAdornment,
+  title,
+  actionBlock,
+  endAdornment,
+  className,
+  style,
+}: AnnouncementBarViewProps) {
+  // Below `md` adornments center inside a box matching the title's first
+  // text line (20px), so `items-start` keeps them on line one of a wrapped
+  // title without hugging the row's top edge. From `md` up the row is
+  // single-line and center-aligned, so the boxes dissolve (`h-auto`).
+  const adornmentBox = 'flex h-5 shrink-0 items-center md:h-auto';
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-col gap-[var(--spacing-system-s)] px-[var(--spacing-system-l)] py-[var(--spacing-system-sf)] md:flex-row md:items-center',
+        className,
+      )}
+      style={style}
+    >
+      <div className="flex min-w-0 flex-1 items-start gap-[var(--spacing-system-s)] md:items-center">
+        {startAdornment && <div className={adornmentBox}>{startAdornment}</div>}
+        {typeof title === 'string' ? (
+          <p className="min-w-0 flex-1 break-words text-h4 md:truncate">{title}</p>
+        ) : (
+          title != null && <div className="min-w-0 flex-1">{title}</div>
+        )}
+        {/* Mobile home of the trailing adornment — and its only home when
+            there is no action row to share from `md` up. */}
+        {endAdornment && <div className={cn(adornmentBox, actionBlock && 'md:hidden')}>{endAdornment}</div>}
+      </div>
+      {actionBlock && (
+        <div className="flex w-full shrink-0 items-center gap-[var(--spacing-system-s)] md:w-auto">
+          <div className="flex min-w-0 flex-1 md:flex-none [&>*]:w-full md:[&>*]:w-auto">{actionBlock}</div>
+          {endAdornment && <div className="hidden shrink-0 md:flex">{endAdornment}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/index.ts

@@ -2,6 +2,7 @@
 
 // UI Components exports
 export * from './allowed-domains-input'
+export * from './announcement-bar-view'
 export * from './autocomplete'
 export * from './button'
 export * from './card'

package/src/components/ui/tab-selector.tsx

@@ -46,15 +46,15 @@ export function TabSelector({
 }: TabSelectorProps) {
   return (
     <div
-      className={cn('flex flex-col gap-1', disabled && 'opacity-50', className)}
+      className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', disabled && 'opacity-50', className)}
       aria-disabled={disabled || undefined}
     >
       {label && (
-        <p className="text-ods-text-primary text-h3">
+        <p className="text-ods-text-primary text-h4">
           {label}
         </p>
       )}
-      <div className="flex w-full bg-ods-bg border border-ods-border rounded-md p-1 gap-1 h-12">
+      <div className="flex w-full bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-xxs)] gap-[var(--spacing-system-xxs)] h-11 md:h-12">
         {items.map((item) => {
           const isActive = value === item.id
           const isDisabled = disabled || item.disabled
@@ -67,10 +67,10 @@ export function TabSelector({
               onClick={() => onValueChange(item.id)}
               aria-label={!item.label ? item.ariaLabel : undefined}
               className={cn(
-                // Bold on BOTH states — a medium↔bold flip between the active
-                // and inactive tabs read as inconsistent weight (and nudged
-                // label widths on every switch).
-                'flex flex-1 items-center justify-center gap-2 rounded-xs p-2 text-h4 font-bold transition-colors duration-200 whitespace-nowrap',
+                // Bold on BOTH states (text-h3 = DM Sans bold) — a medium↔bold
+                // flip between the active and inactive tabs read as inconsistent
+                // weight (and nudged label widths on every switch).
+                'flex flex-1 items-center justify-center gap-[var(--spacing-system-xs)] rounded-xs p-[var(--spacing-system-xsf)] text-h4 transition-colors duration-200 whitespace-nowrap',
                 isDisabled
                   ? isActive
                     ? 'cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary'
@@ -83,7 +83,7 @@ export function TabSelector({
               )}
             >
               {item.icon && (
-                <span className="shrink-0 size-6 flex items-center justify-center">
+                <span className="shrink-0 size-4 md:size-6 flex items-center justify-center">
                   {item.icon}
                 </span>
               )}

package/src/styles/ods-colors.css

@@ -336,6 +336,22 @@
   --ods-accent: var(--ods-open-yellow-base);
 }
 
+/* Tier-2 re-anchor for NESTED theme scopes. Tier-2 aliases declared at
+ * `:root` compute there (custom properties substitute var() where the
+ * property is declared), so descendants of a nested `.theme-light` /
+ * `.theme-dark` island inherit the ROOT-theme value — the island's Tier-1
+ * flips never reach them. Re-declaring an alias inside the scope classes
+ * recomputes it against the scoped Tier-1 primitives, letting components
+ * inside theme islands (e.g. AnnouncementBar) use semantic tokens instead
+ * of reaching for Tier-1 directly. Values are identical to the `:root`
+ * declarations above — keep them in sync. */
+.theme-dark,
+.theme-light {
+  --color-text-primary: var(--ods-system-greys-white);
+  --color-bg-hover: var(--ods-system-greys-black-hover);
+  --color-bg-active: var(--ods-system-greys-black-action);
+}
+
 /* Alpha-based semantic tokens that need a light-theme tweak (the only
  * Tier-2 values not derived from a flipping primitive). */
 :root[data-theme="light"],