@flamingo-stack/openframe-frontend-core 0.0.338 → 0.0.339-snapshot.20260630004216

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

@@ -55,52 +55,66 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
         className,
       )}
     >
-      <div className="p-[var(--spacing-system-m)] flex flex-col gap-[var(--spacing-system-s)] items-start w-full">
-        {data.title && (
-          <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch h-6">
-            <span className="text-h4 text-ods-text-primary truncate" title={data.title}>
-              {data.title}
-            </span>
-            {data.icon}
-          </div>
-        )}
-
-        {/* Subtitle */}
-        {data.subtitle && (
-          <div className="text-h4 text-ods-text-secondary truncate self-stretch" title={data.subtitle}>
-            {data.subtitle}
+      {/* Header (title + subtitle) and body (rows + progress) are two groups separated by
+          `gap-l`; the title/subtitle stack tightly and the rows use `gap-xs` — matching the ODS
+          "Info-card" design. With no title/subtitle, the body is the only group. */}
+      <div className="p-[var(--spacing-system-m)] flex flex-col gap-[var(--spacing-system-l)] items-start w-full">
+        {(data.title || data.subtitle) && (
+          <div className="flex flex-col items-start self-stretch w-full">
+            {data.title && (
+              <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch">
+                <span className="text-h4 text-ods-text-primary truncate min-w-0" title={data.title}>
+                  {data.title}
+                </span>
+                {data.icon}
+              </div>
+            )}
+            {data.subtitle && (
+              <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch">
+                <span className="text-h4 text-ods-text-secondary truncate min-w-0" title={data.subtitle}>
+                  {data.subtitle}
+                </span>
+                {/* Icon lives with the title when present; otherwise it falls to the subtitle so
+                    subtitle-only cards still render it. */}
+                {!data.title && data.icon}
+              </div>
+            )}
           </div>
         )}
 
-        {/* Info items */}
-        {data.items.map((item, index) => {
-          const values = Array.isArray(item.value) ? item.value : [item.value]
+        {(data.items.length > 0 || data.progress) && (
+          <div className="flex flex-col gap-[var(--spacing-system-xs)] items-start self-stretch w-full">
+            {/* Info items */}
+            {data.items.map((item, index) => {
+              const values = Array.isArray(item.value) ? item.value : [item.value]
 
-          return (
-            <React.Fragment key={index}>
-              {values.map((val, valIndex) => (
-                <InfoCardValueRow
-                  key={`${index}-${valIndex}`}
-                  label={item.label}
-                  value={val}
-                  showLabel={valIndex === 0}
-                  copyable={item.copyable}
-                  icon={valIndex === 0 ? item.icon : undefined}
-                  copyAriaLabel={`Copy ${item.label ?? 'value'} ${valIndex + 1}`}
-                />
-              ))}
-            </React.Fragment>
-          )
-        })}
+              return (
+                <React.Fragment key={index}>
+                  {values.map((val, valIndex) => (
+                    <InfoCardValueRow
+                      key={`${index}-${valIndex}`}
+                      label={item.label}
+                      value={val}
+                      showLabel={valIndex === 0}
+                      copyable={item.copyable}
+                      icon={valIndex === 0 ? item.icon : undefined}
+                      copyAriaLabel={`Copy ${item.label ?? 'value'} ${valIndex + 1}`}
+                    />
+                  ))}
+                </React.Fragment>
+              )
+            })}
 
-        {/* Progress bar */}
-        {data.progress && (
-          <ProgressBar
-            progress={data.progress.value}
-            warningThreshold={data.progress.warningThreshold}
-            criticalThreshold={data.progress.criticalThreshold}
-            inverted={data.progress.inverted}
-          />
+            {/* Progress bar */}
+            {data.progress && (
+              <ProgressBar
+                progress={data.progress.value}
+                warningThreshold={data.progress.warningThreshold}
+                criticalThreshold={data.progress.criticalThreshold}
+                inverted={data.progress.inverted}
+              />
+            )}
+          </div>
         )}
       </div>