Km.24 hour input exploration

[kiley-mitti]

Brief Description

--WIP --

This is a proof of concept for a new Astro Component for forces 24hour/12hour time input. It uses iMaskJs for masking.

The component is basically complete with just review and bug reports to work through, however, this PR also needs cleaning up and storybook additions before committing.

Update 1/22 - removed the 12hour masking functionality in favor of type="time" when 24h is not chosen

TODO:

• should changing include-seconds or timeformat programmatically update the mask? - probably.
• add storybook
• add changeset

JIRA Link

R2C2-119

Related Issue

General Notes

Motivation and Context

This exploration of new components was undertaken because <rux-input type="time"> is not as flexible as it could be regarding time input. There have been several requests from members of the current project for a component capable of forcing 24h time input.

Issues and Limitations

There are still a couple of bugs I'd like to sort out at this time:

• adding include-seconds / changing timeformat after first render will not actually change the input masking. This should be handled.
• iMaskJs is a little large as a dependency.. also, not positive all spaces will approve its use. Ultimately we should write our own masking but it will take more time than this POC.

Types of changes

• Bug fix
• New feature
• Breaking change

Checklist

• This PR adds or removes a Storybook story.
• I have added tests to cover my changes.
• Regressions are passing and/or failures are documented
• Changes have been checked in evergreen browsers

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8395b0a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for astro-preview ready!

Name	Link
🔨 Latest commit	8395b0a
🔍 Latest deploy log	https://app.netlify.com/sites/astro-preview/deploys/65ae9477f15b9f00083f9fef
😎 Deploy Preview	https://deploy-preview-1274--astro-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for astro-stencil ready!

Name	Link
🔨 Latest commit	8395b0a
🔍 Latest deploy log	https://app.netlify.com/sites/astro-stencil/deploys/65ae94778ecc110008c6daf9
😎 Deploy Preview	https://deploy-preview-1274--astro-stencil.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.