@duro-app/ui 0.42.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.42.0"
+    "@duro-app/tokens": "^0.43.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Callout/Callout.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Block-level informational message with icon and colored background. More prominent than Alert. Use for important notices, onboarding tips, or contextual guidance that should stand out.',
+    'Block-level informational message with icon and colored background. More prominent than Alert. Use for important notices, onboarding tips, or contextual guidance that should stand out. `align` controls icon↔message vertical alignment: `center` (default) for short messages, `start` for long multi-paragraph content.',
   whenToUse: [
     'Important notices that need visual prominence',
     'Onboarding tips or contextual guidance',

package/src/components/Callout/Callout.stories.tsx

@@ -11,15 +11,21 @@ const meta: Meta<typeof Callout> = {
       control: 'select',
       options: ['error', 'success', 'warning', 'info'],
     },
+    align: {
+      control: 'inline-radio',
+      options: ['center', 'start'],
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof Callout>
 
+// Long, multi-paragraph messages align the icon to the first line.
 export const Info: Story = {
   args: {
     variant: 'info',
+    align: 'start',
     children:
       'A new version of the application is available. Please save your work and refresh the page to get the latest features and security updates.',
   },
@@ -28,6 +34,7 @@ export const Info: Story = {
 export const Warning: Story = {
   args: {
     variant: 'warning',
+    align: 'start',
     children:
       "It looks like your certificate isn't installed yet. Install the .p12 file from your email, then click the button below. After installing the certificate, you may need to close and reopen your browser for it to be recognized.",
   },
@@ -36,6 +43,7 @@ export const Warning: Story = {
 export const Success: Story = {
   args: {
     variant: 'success',
+    align: 'start',
     children:
       'Your account has been created and your certificate is installed. You can now access all resources assigned to your groups. Check your email for a welcome guide with next steps.',
   },
@@ -44,16 +52,24 @@ export const Success: Story = {
 export const Error: Story = {
   args: {
     variant: 'error',
+    align: 'start',
     children:
       'We could not verify your identity. This may happen if your invite link has expired or was already used. Please contact your administrator to request a new invitation.',
   },
 }
 
-export const ShortText: Story = {
-  name: 'Short text (still wraps)',
+// Short single-line message — the default `align="center"` vertically centres
+// the icon against the text.
+export const ShortCentered: Story = {
   args: {
-    variant: 'info',
-    children: 'System update available.',
+    variant: 'success',
+    children: "You're all caught up — no requests awaiting review.",
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('note')).toBeInTheDocument()
+    await expect(canvas.getByText(/all caught up/)).toBeInTheDocument()
+    // Exactly one icon (svg) — the component's own, no duplicate.
+    await expect(canvas.getByRole('note').querySelectorAll('svg')).toHaveLength(1)
   },
 }
 
@@ -72,22 +88,19 @@ const stackStyles = css.create({
 export const AllVariants: Story = {
   render: () => (
     <html.div style={stackStyles.stack}>
-      <Callout variant="error">
+      <Callout variant="error" align="start">
         We could not verify your identity. This may happen if your invite link has expired or was
         already used. Please contact your administrator.
       </Callout>
-      <Callout variant="success">
+      <Callout variant="success" align="start">
         Your account has been created and your certificate is installed. You can now access all
         resources assigned to your groups.
       </Callout>
-      <Callout variant="warning">
+      <Callout variant="warning" align="start">
         It looks like your certificate is not installed yet. Install the .p12 file from your email,
         then click the button below.
       </Callout>
-      <Callout variant="info">
-        A new version of the application is available. Please save your work and refresh the page to
-        get the latest features.
-      </Callout>
+      <Callout variant="info">A new version is available.</Callout>
     </html.div>
   ),
   play: async ({canvas}) => {

package/src/components/Callout/Callout.tsx

@@ -17,6 +17,12 @@ interface CalloutProps {
   variant?: CalloutVariant
   /** Built-in icon name, custom ReactNode, or false to hide. Defaults to variant icon. */
   icon?: IconName | ReactNode | false
+  /**
+   * Vertical alignment of the icon against the message. `center` (default)
+   * suits short single/two-line messages; `start` aligns the icon to the first
+   * line for long multi-paragraph content.
+   */
+  align?: 'center' | 'start'
   children: ReactNode
 }
 
@@ -27,13 +33,20 @@ function resolveIcon(icon: CalloutProps['icon'], variant: CalloutVariant): React
   return icon
 }
 
-export function Callout({variant = 'info', icon, children}: CalloutProps) {
+export function Callout({variant = 'info', icon, align = 'center', children}: CalloutProps) {
   const resolvedIcon = resolveIcon(icon, variant)
 
   return (
-    <html.div role="note" style={[styles.base, styles[variant]]}>
+    <html.div
+      role="note"
+      style={[
+        styles.base,
+        styles[variant],
+        align === 'center' ? styles.alignCenter : styles.alignStart,
+      ]}
+    >
       {resolvedIcon && <html.span style={styles.icon}>{resolvedIcon}</html.span>}
-      {children}
+      <html.div style={styles.content}>{children}</html.div>
     </html.div>
   )
 }

package/src/components/Callout/styles.css.ts

@@ -5,23 +5,35 @@ import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
   base: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: spacing.sm,
     padding: spacing.md,
     borderRadius: radii.sm,
     borderWidth: 1,
     borderStyle: 'solid',
     fontSize: typography.fontSizeSm,
     lineHeight: typography.lineHeight,
-    overflow: 'hidden', // contain the float
+  },
+  // Vertically centres the icon with the message — the right default for the
+  // short, single/two-line messages callouts usually carry.
+  alignCenter: {
+    alignItems: 'center',
+  },
+  // Aligns the icon to the first line — for long, multi-paragraph messages.
+  alignStart: {
+    alignItems: 'flex-start',
   },
   icon: {
-    float: 'left',
-    marginRight: spacing.sm,
-    marginBottom: spacing.xs,
-    marginTop: 2,
+    flexShrink: 0,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  content: {
+    flexGrow: 1,
+    minWidth: 0,
+  },
   error: {
     backgroundColor: colors.errorBg,
     borderColor: colors.errorBorder,