@flamingo-stack/openframe-frontend-core 0.0.253 → 0.0.254

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

@@ -7,7 +7,21 @@ import { CheckIcon } from '../icons-v2-generated'
 import { useCopyToClipboard } from '../../hooks'
 import { ProgressBar } from './progress-bar'
 
-interface InfoCardData {
+export interface InfoCardFooterData {
+  /** Leading icon next to the text, expected at 24x24 (e.g. <ShieldCheckIcon size={24} />) */
+  icon?: React.ReactNode
+  text: string
+  /** Trailing icon/logo aligned to the right edge, expected at 24x24 */
+  logo?: React.ReactNode
+  /** External resource link rendered below the text row */
+  link?: {
+    href: string
+    /** Defaults to href without the protocol */
+    label?: string
+  }
+}
+
+export interface InfoCardData {
   title?: string
   subtitle?: string
   icon?: React.ReactNode
@@ -22,6 +36,8 @@ interface InfoCardData {
     criticalThreshold?: number
     inverted?: boolean  // if true, high values are good (green), low values are bad (red)
   }
+  /** Optional footer rendered below the content, separated by a divider line */
+  footer?: InfoCardFooterData
 }
 
 interface InfoCardProps {
@@ -33,54 +49,83 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
   return (
     <div
       className={cn(
-        'bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-m)] flex flex-col gap-[var(--spacing-system-s)] items-start w-full',
+        'bg-ods-card border border-ods-border rounded-md overflow-hidden flex flex-col w-full',
         className,
       )}
     >
-      {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>
-      )}
+      <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}
-        </div>
-      )}
+        {/* Subtitle */}
+        {data.subtitle && (
+          <div className="text-h4 text-ods-text-secondary truncate self-stretch" title={data.subtitle}>
+            {data.subtitle}
+          </div>
+        )}
 
-      {/* Info items */}
-      {data.items.map((item, index) => {
-        const values = Array.isArray(item.value) ? item.value : [item.value]
+        {/* 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}
-                copyAriaLabel={`Copy ${item.label} ${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}
+                  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>
+
+      {/* Footer */}
+      {data.footer && <InfoCardFooter footer={data.footer} />}
+    </div>
+  )
+}
+
+function InfoCardFooter({ footer }: { footer: InfoCardFooterData }) {
+  return (
+    <div className="mt-auto border-t border-ods-border p-[var(--spacing-system-m)] flex flex-col w-full">
+      <div className="flex items-center justify-between gap-1 w-full">
+        <div className="flex items-center gap-1">
+          {footer.icon}
+          <span className="text-h4 text-ods-text-primary">{footer.text}</span>
+        </div>
+        {footer.logo}
+      </div>
+      {footer.link && (
+        <a
+          href={footer.link.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-h6 text-ods-text-secondary underline truncate hover:text-ods-text-primary"
+        >
+          {footer.link.label ?? footer.link.href.replace(/^https?:\/\//, '')}
+        </a>
       )}
     </div>
   )

package/src/stories/InfoCard.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { InfoCard } from '../components'
+import { ShieldCheckIcon } from '../components/icons-v2-generated/security'
+import { FlamingoLogo } from '../components/icons'
 
 const meta = {
   title: 'UI/InfoCard',
@@ -9,7 +11,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'A dark-themed info card showing a title, optional subtitle, label/value rows with dotted leaders, optional copy buttons, and an optional progress bar.',
+          'A dark-themed info card showing a title, optional subtitle, label/value rows with dotted leaders, optional copy buttons, an optional progress bar, and an optional footer with an icon, text, trailing logo, and external link, separated by a divider line.',
       },
     },
   },
@@ -32,7 +34,7 @@ export const DiskC: Story = {
     },
   },
   render: (args) => (
-    <div style={{ width: 320 }}>
+    <div className="w-80">
       <InfoCard {...args} />
     </div>
   ),
@@ -51,7 +53,7 @@ export const DiskD: Story = {
     },
   },
   render: (args) => (
-    <div style={{ width: 320 }}>
+    <div className="w-80">
       <InfoCard {...args} />
     </div>
   ),
@@ -70,7 +72,7 @@ export const PhysicalRAM: Story = {
     },
   },
   render: (args) => (
-    <div style={{ width: 320 }}>
+    <div className="w-80">
       <InfoCard {...args} />
     </div>
   ),
@@ -86,10 +88,63 @@ export const WithCopyableValues: Story = {
         { label: 'IPv4', value: '192.168.1.100', copyable: true },
         { label: 'MAC', value: '00:1A:2B:3C:4D:5E', copyable: true },
       ],
+      footer: {
+        icon: <ShieldCheckIcon size={24} className="text-ods-success" />,
+        text: 'Signed by Flamingo',
+        logo: <FlamingoLogo width={24} height={24} />,
+        link: { href: 'https://github.com/flamingo-ai/fleetdm' },
+      },
+    },
+  },
+  render: (args) => (
+    <div className="w-96">
+      <InfoCard {...args} />
+    </div>
+  ),
+}
+
+export const WithFooter: Story = {
+  args: {
+    data: {
+      title: 'Fleet',
+      items: [
+        { label: 'Status', value: 'ONLINE' },
+        { label: 'Last seen', value: '06/11/26 9:35 AM' },
+        { label: 'ID', value: '7', copyable: true },
+        { label: 'Version', value: '0.1.8' },
+      ],
+      footer: {
+        icon: <ShieldCheckIcon size={24} className="text-ods-success" />,
+        text: 'Signed by Flamingo',
+        logo: <FlamingoLogo width={24} height={24} />,
+        link: { href: 'https://github.com/flamingo-ai/fleetdm' },
+      },
+    },
+  },
+  render: (args) => (
+    <div className="w-96">
+      <InfoCard {...args} />
+    </div>
+  ),
+}
+
+export const WithFooterWithoutLink: Story = {
+  args: {
+    data: {
+      title: 'Fleet',
+      items: [
+        { label: 'Status', value: 'ONLINE' },
+        { label: 'Version', value: '0.1.8' },
+      ],
+      footer: {
+        icon: <ShieldCheckIcon size={24} className="text-ods-success" />,
+        text: 'Signed by Flamingo',
+        logo: <FlamingoLogo width={24} height={24} />,
+      },
     },
   },
   render: (args) => (
-    <div style={{ width: 360 }}>
+    <div className="w-96">
       <InfoCard {...args} />
     </div>
   ),