@flamingo-stack/openframe-frontend-core 0.0.428 → 0.0.429-snapshot.20260715222543

package/src/components/features/board/ticket-card.tsx

@@ -4,7 +4,7 @@ import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import Link from '../../../embed-shims/next-link'
 import * as React from 'react'
-import { LaptopIcon, Flag02Icon, MessagesIcon, CheckCircleIcon } from '../../icons-v2-generated'
+import { LaptopIcon, Flag02Icon, MessagesIcon } from '../../icons-v2-generated'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { Tag } from '../../ui/tag'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip'
@@ -24,64 +24,36 @@ const PRIORITY_COLOR_CLASS: Record<BoardPriority, string> = {
 const MAX_VISIBLE_TAGS = 2
 const MAX_VISIBLE_ASSIGNEES = 3
 
-export interface TicketCardProps {
+/** Shared card shell (border / padding / bg). Same footprint for the draggable
+ *  board card and the static {@link TicketCardView}. */
+const TICKET_CARD_SHELL =
+  'relative flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] select-none text-left'
+
+// =============================================================================
+// Presentational body — the ONE ticket-card design, no drag/link/board context.
+// Reused by the draggable `TicketCard` AND the static `TicketCardView`.
+// =============================================================================
+
+export interface TicketCardBodyProps {
   ticket: BoardTicket
-  columnId: string
   columnColor?: string
-  href?: string
-  isOverlay?: boolean
-  dragDisabled?: boolean
-  approved?: boolean
   renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
-  onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
-  onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
+  /** Approval callbacks receive the request id directly (the draggable
+   *  `TicketCard` adapts its own `(ticketId, requestId)` signature onto these). */
+  onApprove?: (requestId?: string) => void | Promise<void>
+  onReject?: (requestId?: string) => void | Promise<void>
 }
 
-export function TicketCard({
-  ticket,
-  columnId,
-  columnColor,
-  href,
-  isOverlay = false,
-  dragDisabled,
-  approved = false,
-  renderAssignSlot,
-  onApprove,
-  onReject,
-}: TicketCardProps) {
-  const sortableData = React.useMemo(
-    () => ({ columnId, type: 'ticket' as const }),
-    [columnId],
-  )
-  const sortable = useSortable({
-    id: ticket.id,
-    data: sortableData,
-    disabled: dragDisabled,
-  })
-
+/** The card's inner content: title + device/org, priority + assignees, tags,
+ *  timestamp, "New Message", and the approval row. Pure — driven only by props. */
+export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprove, onReject }: TicketCardBodyProps) {
   const showNewMessage = !!ticket.hasNewMessage && !!columnColor
   const newMessageTextColor = columnColor ? getReadableTextColor(columnColor) : undefined
 
-  const style: React.CSSProperties = isOverlay
-    ? {}
-    : {
-        transform: CSS.Transform.toString(sortable.transform),
-        transition: sortable.transition,
-      }
-  if (showNewMessage) style.borderColor = columnColor
-
   const showDeviceRow = !!(ticket.deviceHostnames?.length || ticket.organizationName)
-  const deviceText = [
-    ticket.deviceHostnames?.join(', '),
-    ticket.organizationName,
-  ].filter(Boolean).join(', ')
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (sortable.isDragging) e.preventDefault()
-  }
-
-  const hasRightSection = !!(approved || ticket.priority || ticket.assignees?.length || renderAssignSlot)
+  const deviceText = [ticket.deviceHostnames?.join(', '), ticket.organizationName].filter(Boolean).join(', ')
 
+  const hasRightSection = !!(ticket.priority || ticket.assignees?.length || renderAssignSlot)
   const rightSection = hasRightSection ? (
     <div className="pointer-events-auto flex shrink-0 items-center gap-[var(--spacing-system-xsf)]">
       {ticket.priority && (
@@ -90,14 +62,6 @@ export function TicketCard({
           aria-label={`Priority: ${ticket.priority}`}
         />
       )}
-      {approved && (
-        <CheckCircleIcon
-          size={20}
-          color="var(--ods-attention-green-success)"
-          className="shrink-0"
-          aria-label="Approved"
-        />
-      )}
       {renderAssignSlot ? (
         renderAssignSlot(ticket)
       ) : ticket.assignees?.length ? (
@@ -125,7 +89,7 @@ export function TicketCard({
   const timestampLabel = ticket.createdAt ? formatTicketRelativeTime(ticket.createdAt) : null
   const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null
 
-  const body = (
+  return (
     <>
       <div className="flex items-start gap-[var(--spacing-system-sf)]">
         <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]" title={ticket.title}>
@@ -159,17 +123,97 @@ export function TicketCard({
         />
       )}
       {ticket.pendingApproval && (
-        <BoardTicketApproval
-          pendingApproval={ticket.pendingApproval}
-          onApprove={onApprove ? requestId => onApprove(ticket.id, requestId) : undefined}
-          onReject={onReject ? requestId => onReject(ticket.id, requestId) : undefined}
-        />
+        <BoardTicketApproval pendingApproval={ticket.pendingApproval} onApprove={onApprove} onReject={onReject} />
       )}
     </>
   )
+}
+
+// =============================================================================
+// Static card — the real board card design, rendered from props with NO
+// drag-and-drop / board context (for embeds, marketing heroes, previews).
+// =============================================================================
+
+export interface TicketCardViewProps extends TicketCardBodyProps {
+  className?: string
+}
+
+/**
+ * The exact board `TicketCard` visual, standalone — same shell + `TicketCardBody`
+ * as the draggable card, but without the `useSortable` dnd-kit dependency, so it
+ * renders anywhere from static props. Use this outside a `<Board>`.
+ */
+export function TicketCardView({ className, ...bodyProps }: TicketCardViewProps) {
+  const { ticket, columnColor } = bodyProps
+  const showNewMessage = !!ticket.hasNewMessage && !!columnColor
+  return (
+    <div
+      className={cn(TICKET_CARD_SHELL, className)}
+      style={showNewMessage ? { borderColor: columnColor } : undefined}
+    >
+      <div className="relative z-10 flex flex-col gap-[var(--spacing-system-sf)]">
+        <TicketCardBody {...bodyProps} />
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// Draggable board card
+// =============================================================================
+
+export interface TicketCardProps {
+  ticket: BoardTicket
+  columnId: string
+  columnColor?: string
+  href?: string
+  isOverlay?: boolean
+  dragDisabled?: boolean
+  renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
+  onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
+}
+
+export function TicketCard({
+  ticket,
+  columnId,
+  columnColor,
+  href,
+  isOverlay = false,
+  dragDisabled,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+}: TicketCardProps) {
+  const sortableData = React.useMemo(() => ({ columnId, type: 'ticket' as const }), [columnId])
+  const sortable = useSortable({ id: ticket.id, data: sortableData, disabled: dragDisabled })
+
+  const showNewMessage = !!ticket.hasNewMessage && !!columnColor
+
+  const style: React.CSSProperties = isOverlay
+    ? {}
+    : {
+        transform: CSS.Transform.toString(sortable.transform),
+        transition: sortable.transition,
+      }
+  if (showNewMessage) style.borderColor = columnColor
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (sortable.isDragging) e.preventDefault()
+  }
+
+  const body = (
+    <TicketCardBody
+      ticket={ticket}
+      columnColor={columnColor}
+      renderAssignSlot={renderAssignSlot}
+      onApprove={onApprove ? requestId => onApprove(ticket.id, requestId) : undefined}
+      onReject={onReject ? requestId => onReject(ticket.id, requestId) : undefined}
+    />
+  )
 
   const cardClasses = cn(
-    'relative flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] select-none text-left',
+    TICKET_CARD_SHELL,
     !dragDisabled && 'cursor-pointer',
     sortable.isDragging && !isOverlay && 'opacity-40',
     isOverlay && 'rotate-1 shadow-card-hover',

package/src/components/ui/index.ts

@@ -83,6 +83,7 @@ export * from './chevron-button'
 export * from './circular-progress'
 export { CheckIcon, CheckCircleIcon as LucideCheckCircleIcon, XIcon as LucideXIcon, MinusIcon, XCircleIcon } from './custom-icons'
 export * from './dashboard-info-card'
+export * from './info-card-row'
 export * from './device-card'
 export * from './device-card-compact'
 export * from './entity-image'

package/src/components/ui/info-card-row.tsx

@@ -0,0 +1,70 @@
+import type * as React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface InfoCardRowSection {
+  title: string
+  caption: string
+  icon?: React.ReactNode
+}
+
+export interface InfoCardRowProps {
+  lead: InfoCardRowSection
+  stats: [InfoCardRowSection, InfoCardRowSection]
+  className?: string
+}
+
+const CELL =
+  'flex items-center gap-[var(--spacing-system-s)] min-w-0 p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] min-h-[60px] md:min-h-[76px]'
+
+function StatCell({ section, className }: { section: InfoCardRowSection; className?: string }) {
+  return (
+    <div className={cn(CELL, 'flex-1', className)}>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <p className="truncate text-h5 uppercase text-ods-text-secondary">{section.title}</p>
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-s)]">
+          <p className="min-w-0 flex-1 truncate text-h3 text-ods-text-primary">
+            {section.caption}
+          </p>
+          {section.icon && (
+            <div className="flex size-6 shrink-0 items-center justify-center md:hidden">
+              {section.icon}
+            </div>
+          )}
+        </div>
+      </div>
+      {section.icon && (
+        <div className="hidden size-6 shrink-0 items-center justify-center md:flex">
+          {section.icon}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function InfoCardRow({ lead, stats, className }: InfoCardRowProps) {
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card md:flex-row',
+        className,
+      )}
+    >
+      <div className={cn(CELL, 'border-b border-ods-border md:flex-1 md:border-b-0 md:border-r')}>
+        {lead.icon && (
+          <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-ods-border [&>*]:size-full [&_img]:object-cover">
+            {lead.icon}
+          </div>
+        )}
+        <div className="flex min-w-0 flex-1 flex-col justify-center">
+          <p className="truncate text-h3 text-ods-text-primary">{lead.title}</p>
+          <p className="truncate text-h6 text-ods-text-secondary">{lead.caption}</p>
+        </div>
+      </div>
+
+      <div className="flex md:flex-1">
+        <StatCell section={stats[0]} className="border-r border-ods-border" />
+        <StatCell section={stats[1]} />
+      </div>
+    </div>
+  )
+}

package/src/components/ui/tag.tsx

@@ -58,6 +58,13 @@ const tagVariants = cva(
           "hover:bg-[var(--ods-flamingo-pink-secondary-hover)] hover:border-[var(--ods-flamingo-pink-base)]",
           "active:bg-[var(--ods-flamingo-pink-secondary-action)]",
         ],
+        // Cyan twin of `selected` (Mingo's accent) — same active-chip skin in the
+        // cyan theme so agent chip groups can match their own accent.
+        selectedCyan: [
+          "bg-[var(--ods-flamingo-cyan-secondary)] text-[var(--ods-system-greys-white)] border border-[var(--ods-flamingo-cyan-base)]",
+          "hover:bg-[var(--ods-flamingo-cyan-secondary-hover)] hover:border-[var(--ods-flamingo-cyan-base)]",
+          "active:bg-[var(--ods-flamingo-cyan-secondary-action)]",
+        ],
         // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
         // mono uppercase) so the tag-editor chips render identically to the public
         // tag badges. Used for FilterChipData variant 'tag' (see search-input).

package/src/stories/InfoCardRow.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { InfoCardRow } from '../components/ui/info-card-row'
+import { CheckCircleIcon } from '../components/icons-v2-generated/signs-and-symbols/check-circle-icon'
+import { TagIcon } from '../components/icons-v2-generated/shopping/tag-icon'
+
+// Stand-in company logo — the lead `icon` fills the 40px bordered avatar box.
+// In real usage this is typically an `<img>` logo (rendered with object-cover).
+const companyLogo = (
+  <div className="size-full" style={{ background: 'linear-gradient(135deg, #5EFAF0, #F357BB)' }} />
+)
+
+const meta = {
+  title: 'UI/InfoCardRow',
+  component: InfoCardRow,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A responsive summary row: a 50%-width lead section (icon + title/caption) and two 25%-width stat sections (title + caption + right icon). On mobile the two stat sections wrap into their own row beneath the lead (76px rows on desktop/tablet, 60px on mobile), and each stat icon drops onto the caption line. Neighbouring sections share inner borders; only the outer edges are rounded. Each section takes a required `title` and `caption`, and an optional `icon`.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    lead: { control: false, description: 'Lead section (50% width): { title, caption, icon? }' },
+    stats: {
+      control: false,
+      description: 'Two stat sections (25% width each): { title, caption, icon? }',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-[1024px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InfoCardRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Full row — lead logo + name/devices, and two stats with icons. Matches Figma. */
+export const Default: Story = {
+  args: {
+    lead: { title: 'Precision Accounting Partners', caption: '847 devices', icon: companyLogo },
+    stats: [
+      {
+        title: 'Resolved this week',
+        caption: '312',
+        icon: <CheckCircleIcon className="text-ods-success" />,
+      },
+      { title: 'Open tickets', caption: '2', icon: <TagIcon className="text-ods-text-secondary" /> },
+    ],
+  },
+}
+
+/** Icons omitted — text-only sections. */
+export const WithoutIcons: Story = {
+  args: {
+    lead: { title: 'Precision Accounting Partners', caption: '847 devices' },
+    stats: [
+      { title: 'Resolved this week', caption: '312' },
+      { title: 'Open tickets', caption: '2' },
+    ],
+  },
+}