[Admin] Add toggle switch component

[the-krg]

Summary

recording.mov

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

• I have written a thorough PR description.
• I have kept my commits small and atomic.
• I have used clear, explanatory commit messages.

The following are not always needed:

• 📖 I have updated the README to account for my changes.
• 📑 I have documented new code with YARD.
• 🛣️ I have opened a PR to update the guides.
• ✅ I have added automated tests to cover my changes.
• 📸 I have attached screenshots to demo visual changes.

[codecov]

Codecov Report

Merging #5299 (8d035a5) into nebulab/admin (226ea39) will increase coverage by 0.00%.
Report is 11 commits behind head on nebulab/admin.
The diff coverage is 100.00%.

❗ Current head 8d035a5 differs from pull request most recent head 79e8821. Consider uploading reports for the commit 79e8821 to get more accurate results

@@              Coverage Diff               @@
##           nebulab/admin    #5299   +/-   ##
==============================================
  Coverage          88.56%   88.57%           
==============================================
  Files                599      600    +1     
  Lines              14573    14581    +8     
==============================================
+ Hits               12907    12915    +8     
  Misses              1666     1666           

Files Changed	Coverage Δ
...ponents/solidus_admin/ui/forms/switch/component.rb	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[elia]

Great work! It's awesome to see components come alive ✨

I left a couple of comments over internal details, but looks good overall 🙌

[elia]

I saw this is the most common implementation of a toggle switch, would be great if there was an alternative only using the input element (e.g. by using SVG backgrounds, like the checkbox does) or one in which there was a single root (e.g. the label <label><input …/></label>).

Having a single root makes it simpler to organize the component from outside (e.g. putting it in a flex container and expect it to be a single element).

At worst maybe we can wrap it into a div or span.

Thoughts?

[the-krg]

the problem on putting the <input> inside the <label> tag is that the Tailwind peer won't work, since it requires the peer to be defined first (which is the <input> tag), so the label can change depending on its status.

the tag on the current solution is 0x0 with an invisible property, which shouldn't affect much, but it's definitely better to keep as one tag.

I'll study your first suggestion, in case I'm not successful I'll stick with wrapping it on a <div> tag.

--
Update:
Managed to reduce to only an input element :)

[elia]

That's awesome!!!!

[elia]

🚀 🚀 🚀

[elia]

That's awesome!!!!

[rainerdema]

Great job! 👏