Button timer

[lhbrennan]

Description

Build new Button Timed component: https://zeroheight.com/6d2425e9f/p/81070d-button-timed/b/284ec6

Scope

Minor: New Feature

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5c52d14:

Sandbox	Source
Basic usage	Configuration

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	5c52d14
Status:	✅  Deploy successful!
Preview URL:	https://fccec21d.baseweb.pages.dev
Branch Preview URL:	https://button-timer.baseweb.pages.dev

View logs

[UberOpenSourceBot]

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5161

[chasestarr]

The visuals look good to me. I'm most interested in how a developer should be using this component. Currently it seems to be set up where when loaded to the page it will begin counting down from the set time and firing an event when finished. I'd like to see some way to stop/start the timer from outside the component.

An alternative api could be something similar to progress-bar where the application controls the progress through the timer and visuals are a pure function of props. Would that be too burdensome?

[UberOpenSourceBot]

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5161

[lhbrennan]

An alternative api could be something similar to progress-bar where the application controls the progress through the timer and visuals are a pure function of props. Would that be too burdensome?

Yea that would be more flexible. In terms of the API, I think we'd want something like timeRemaining (or maybe currentTime), as well as something like totalTime (or initialTime, or targetTime). Thoughts on naming those props? Should we use "seconds" instead of "time" to be more explicit?

[chasestarr]

Yea that would be more flexible. In terms of the API, I think we'd want something like timeRemaining (or maybe currentTime), as well as something like totalTime (or initialTime, or targetTime). Thoughts on naming those props? Should we use "seconds" instead of "time" to be more explicit?

Accepting a float between 0-1 is probably the 'cleanest' api, but maybe consider aligning with the existing progress-bar pattern. I guess this does not support rendering the time-remaining. Number of seconds remaining seems appropriate

[UberOpenSourceBot]

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5161

[chasestarr]

lgtm after some more integration tests

[UberOpenSourceBot]

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #5190