@flamingo-stack/openframe-frontend-core 0.0.325 → 0.0.326-snapshot.20260626135722

package/src/components/ui/page-actions.tsx

@@ -6,6 +6,7 @@ import { Chevron02DownIcon } from '../icons-v2-generated'
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from './actions-menu'
 import type { ButtonProps, SplitButtonIconAction } from './button'
 import { Button, SplitButton } from './button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
 
 export type PageActionButton = {
   /** Button label. Omit to render an icon-only button. */
@@ -50,6 +51,8 @@ export type PageActionButton = {
    * Mutually exclusive with `iconAction` and `href`/`onClick`.
    */
   submenu?: ActionsMenuItem[]
+  /** When set, the rendered desktop button is wrapped in a hover tooltip. */
+  tooltip?: React.ReactNode
 }
 
 function actionKey(action: PageActionButton, idx: number) {
@@ -97,6 +100,19 @@ interface RenderOptions {
 }
 
 function renderActionButton(action: PageActionButton, opts: RenderOptions = {}): React.ReactNode {
+  const button = renderRawActionButton(action, opts)
+  if (!action.tooltip) return button
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{action.tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+function renderRawActionButton(action: PageActionButton, opts: RenderOptions = {}): React.ReactNode {
   // Two-target SplitButton — primary action + secondary icon action.
   if (action.iconAction) {
     return (

package/src/components/ui/ticket-attachments-list.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Download, FileIcon } from "lucide-react"
+import { Download02Icon, FileIcon, TrashIcon } from "../icons-v2-generated"
 import { cn } from "../../utils/cn"
 import { SquareAvatar } from "./square-avatar"
 
@@ -11,6 +11,8 @@ export interface TicketAttachment {
   fileSize: string
   thumbnailSrc?: string
   onDownload?: () => void
+  /** When set, a trash button is rendered before the download button. */
+  onDelete?: () => void
 }
 
 export interface TicketAttachmentsListProps {
@@ -65,6 +67,16 @@ export function TicketAttachmentsList({ attachments, className, size = 'default'
               <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
             )}
           </div>
+          {attachment.onDelete && (
+            <button
+              type="button"
+              onClick={attachment.onDelete}
+              className="shrink-0 text-ods-text-secondary hover:text-ods-error transition-colors"
+              aria-label={`Delete ${attachment.fileName}`}
+            >
+              <TrashIcon className={compact ? "size-4" : "size-5"} />
+            </button>
+          )}
           {attachment.onDownload && (
             <button
               type="button"
@@ -72,7 +84,7 @@ export function TicketAttachmentsList({ attachments, className, size = 'default'
               className="shrink-0 text-ods-text-secondary hover:text-ods-text-primary transition-colors"
               aria-label={`Download ${attachment.fileName}`}
             >
-              <Download className={compact ? "size-4" : "size-6"} />
+              <Download02Icon className={compact ? "size-4" : "size-6"} />
             </button>
           )}
         </div>

package/src/stories/InfoSection.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { Badge } from '../components/ui/badge';
+import { InfoSection, type InfoSectionRow } from '../components/ui/info-section';
+
+const meta = {
+  title: 'Tickets/InfoSection',
+  component: InfoSection,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A labelled info card: a vertical stack of `label —— value` rows. Each value is configurable — plain text (with an optional trailing image), an inline assignee picker (autocomplete with search), an inline status dropdown, or an arbitrary node.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ width: '360px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InfoSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const assigneeOptions = [
+  { value: 'u1', label: 'Roman Smith' },
+  { value: 'u2', label: 'John Doe' },
+  { value: 'u3', label: 'Marcus Chen' },
+];
+
+const statusOptions = [
+  { id: 's1', name: 'AI Assistance', color: '#3a3a3a' },
+  { id: 's2', name: 'Tech Required', color: '#f59e0b' },
+  { id: 's3', name: 'Resolved', color: '#5ea62e' },
+];
+
+/**
+ * The "Ticket Details" card from the design: text, text-with-avatar, an inline
+ * assignee picker, and an inline status dropdown.
+ */
+export const TicketDetails: Story = {
+  args: {
+    title: 'Ticket Details',
+    rows: [
+      { id: 'customer', label: 'Customer', value: { text: 'Acme Corp', imageFallback: 'Acme Corp' } },
+      { id: 'device', label: 'Device', value: { text: 'TB-156-SEA', onClick: () => alert('Navigate to device') } },
+      {
+        id: 'assigned',
+        label: 'Assigned',
+        value: { type: 'assignee', options: assigneeOptions, onAssign: id => alert(`Assign: ${id}`) },
+      },
+      { id: 'created', label: 'Created', value: { text: '07/12/25, 10:03 AM' } },
+      { id: 'created-by', label: 'Created by', value: { text: 'Fae', imageFallback: 'Fae' } },
+      {
+        id: 'status',
+        label: 'Status',
+        value: { type: 'status', status: 'AI_ASSISTANCE', options: statusOptions, onSelect: id => alert(`Status: ${id}`) },
+      },
+    ],
+  },
+};
+
+/**
+ * Live state: assigning a user and changing status update the rows in place.
+ */
+export const Interactive: Story = {
+  args: { title: 'Ticket Details', rows: [] },
+  render: function InteractiveStory() {
+    const [assignee, setAssignee] = useState<string | null>(null);
+    const [statusId, setStatusId] = useState('s1');
+
+    const current = assigneeOptions.find(o => o.value === assignee);
+    const status = statusOptions.find(o => o.id === statusId);
+
+    const rows: InfoSectionRow[] = [
+      { id: 'customer', label: 'Customer', value: { text: 'Acme Corp', imageFallback: 'Acme Corp' } },
+      {
+        id: 'assigned',
+        label: 'Assigned',
+        value: {
+          type: 'assignee',
+          currentAssignee: current ? { id: current.value, name: current.label } : undefined,
+          options: assigneeOptions,
+          onAssign: setAssignee,
+        },
+      },
+      {
+        id: 'status',
+        label: 'Status',
+        value: {
+          type: 'status',
+          status: 'AI_ASSISTANCE',
+          label: status?.name,
+          color: status?.color,
+          options: statusOptions,
+          onSelect: setStatusId,
+        },
+      },
+      { id: 'priority', label: 'Priority', value: { type: 'custom', content: <Badge>High</Badge> } },
+    ];
+
+    return <InfoSection title="Ticket Details" rows={rows} />;
+  },
+};