feat(ui): rebuild Alchemy Alert layout, add actionPlacement, errorMessage, and Storybook

[annadoesdesign]

Summary

Rebuilds the Alchemy Alert component into a column layout where the
description and other body content span the full container width, independent
of what's on the right side of the header. Previously the description was
constrained by whatever sat to its right (close button + any actions), which
caused awkward wrapping for longer text.

Also adds several capabilities to bring the OSS Alert in line with how it's
already being used downstream, plus first-time Storybook coverage.

New layout

[icon] Title                         [topRight action] [X]
       Description spans the full container width…
       [errorMessage]
       [inline action]

• Header row: icon + title on the left, optional topRight action + close X on the right.
• Body section (description, errorMessage, inline action) is indented 28px so it aligns flush with the title text rather than the icon's left edge.

New props / variants

• actionPlacement?: 'inline' | 'topRight' — where to render the optional action element. Defaults to 'inline' (under the description). 'topRight' places it next to the close X without sacrificing description width.
• errorMessage?: string — technical error detail rendered in a monospace block beneath the description.
• unknown variant — neutral surface + Question icon for indeterminate states.
• data-testid is now forwarded to the container so test selectors work.

Polish

• Variant-matched colors for in-Alert buttons via VARIANT_BUTTON_COLOR_MAP (close X reads as the same hue as the banner).
• Description bumped from 12px → 14px to match the title size.
• AlertActions is pulled left by 12px so the inline button label sits flush with the description while the button itself keeps its normal hit-target padding.
• AlertBody pulls -4px to tighten the title → description leading.

Side fix

Button.tsx now imports Icon via the specific path
(@components/components/Icon) instead of the barrel (@components). This
breaks a circular-dependency chain (Alert → Button → @components →
FileDragAndDropArea → styled(Button)) that previously caused
Cannot create styled-component for component: undefined during testing.

Backward compatibility

Public API is fully additive — every existing prop (variant, title,
description, icon, action, onClose, className, style) keeps the
same behavior. No consumer changes required.

Storybook

First-time Storybook coverage for Alert:

• sandbox (interactive playground with toggles for every prop, including actionPlacement)
• variants, dismissible, withAction, topRightAction, withErrorMessage, customIcon, titleOnly, kitchenSink

Checklist

• PR conforms to the Contributing Guideline (PR Title Format: feat(ui): …)
• Tests for the changes have been added/updated (16/16 passing in Alert.test.tsx, including new coverage for errorMessage rendering, unknown variant, and actionPlacement="topRight")
• Storybook coverage added (Alert.stories.tsx)
• No breaking changes — public API is fully backward compatible

Test plan

• tsc --noEmit -p . clean
• eslint clean (only the pre-existing react-refresh/only-export-components warning, consistent with the existing Button.tsx buttonDefaults co-export pattern)
• vitest run Alert.test.tsx — 16/16 pass
• prettier --check clean on all touched files
• Verify Storybook renders all stories locally (yarn storybook)
• Visual regression: confirm long-description case wraps correctly with topRight action + close button present

Made with Cursor

[alwaysmeticulous]

🔴 Meticulous spotted visual differences in 21 of 1442 screens tested: view and approve differences detected.

Meticulous evaluated ~10 hours of user flows against your PR.

_{Last updated for commit 6a664f0 feat(ui): rebuild Alchemy Alert layout, add actionPlacement, errorMessag.... This comment will update as new commits are pushed.}

[codecov]

Bundle Report

Changes will increase total bundle size by 827 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	23.51MB	827 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/index-*.js	827 bytes	8.85MB	0.01%

Files in assets/index-*.js:

• ./src/alchemy-components/components/Alert/components.ts → Total Size: 2.23kB

• ./src/alchemy-components/components/Button/Button.tsx → Total Size: 1.24kB

• ./src/alchemy-components/components/Alert/Alert.tsx → Total Size: 2.56kB

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[benjiaming]

Shouldn't we use typography.fonts.mono from @components/theme?