Add Timer (countdown) component#40
Open
SouravBandyopadhyay wants to merge 4 commits into
Open
Conversation
The @unlayer/exporters engine already shipped a first-class Timer (countdown) exporter, defaults, and types, but the React package never exposed a wrapper. Countdown timers are a core email-marketing element, so wire one through the existing component factory. - Add Timer via createItemComponent (TimerExporters/TimerDefaults), exported from the barrel with TimerProps + TimerValues re-exported through shared. - Expose an `imageUrl` prop (alias for countdown.countdownUrl) so authors can point at any server-rendered countdown image (NiftyImages, Sendtric, etc.). A countdown in email is a plain <img>, not JS, so it is Gmail/Outlook-safe. - Map `alt` -> altText and `href` -> action (storage shape) so links round-trip through renderToJson; pull `width` out to the display group to avoid the countdown.width name collision. - Tests: Timer.test.tsx (no <script>, imageUrl verbatim, JSON round-trip), snapshot cases, and index export assertions. Add Timer stories and regenerate the Storybook visual-drift baseline. - Commit the Storybook Node-global shims required for the exporter-backed stories to render in-browser (needed by the visual/smoke gates). Co-Authored-By: Cursor <cursoragent@cursor.com>
Collaborator
|
Thanks for the contribution! @SouravBandyopadhyay would you mind checking the failing CI? you need to update the baseline for the storybook tests |
Regenerate the visual-drift baseline to include the new Timer component's 6 stories (x2 viewports). Verified no existing story fingerprints changed. Co-authored-by: Cursor <cursoragent@cursor.com>
Extend and rework packages/react/scripts/storybook-visual-baseline.json: add many new baseline CSS entries and component mappings for custom tools (accordion, map, product library, QR, tabs, etc.) and registered tools (countdown, product card, inside-a-full-design). Update example/story index arrays and reorder references to support new visual tests and components. This change ensures Storybook visual regression tests include the new custom tool layouts and updated style baselines.
Author
|
fix(timer): resolve the baseline issue and updated json
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The @unlayer/exporters engine already shipped a first-class Timer (countdown) exporter, defaults, and types, but the React package never exposed a wrapper. Countdown timers are a core email-marketing element, so wire one through the existing component factory.
imageUrlprop (alias for countdown.countdownUrl) so authors can point at any server-rendered countdown image (NiftyImages, Sendtric, etc.). A countdown in email is a plainalt-> altText andhref-> action (storage shape) so links round-trip through renderToJson; pullwidthout to the display group to avoid the countdown.width name collision.Test Plan
pnpm buildpassespnpm testpasses