search

daniel-norris / neu_ui

Prototype and build projects faster using Neu UI - an open source React component library designed to neumorphic style. Built using React, Styled Components, Jest and Storybook.
https://ui-neu.netlify.app/
MIT License
24 stars 31 forks source link

Refactor toggle component #92

Closed mankal111 closed 3 years ago

mankal111 commented 3 years ago

I've added a hidden input[type=checkbox] element in the component following w3schools custom checkbox example and I kept the custom one. Both elements listen to the state and trigger the handleClick method.

To test it I selected the hidden checkbox in devTools, in a variable called "nativeComponent", and after clicking the component I've printed the "checked" attribute: custom to native As you see clicking the component also changes the "checked" attribute of the hidden element.

On the other hand I've triggered a "click" event on the hidden element and the component responded too. native to custom

I am not sure if this meets the criteria of #5. Let me know if it needs something more. Closes #5

mankal111 commented 3 years ago

I've also added tests for the component, that check the existence of the native input element and its response on the component click.

mankal111 commented 3 years ago

Hey @daniel-norris, I've refactored the component following the W3Schools example. The checkbox is still hidden (you can check the '.switch input' selector in the css of the example you referenced) but since it is wrapped in a label, clicking everywhere on label checks/unchecks the checkbox. Then using the ':checked' selector, I style the 'on' state of the switch and the indicator.

I have also removed state, converted the component to a functional one and added a 'indicatorColor' prop to enable the user to set it.

I just saw today that another contributor is working on the tests of the component (#80), so I removed mine. We can create one more test for the 'indicatorColor' prop later.

daniel-norris commented 3 years ago

Thanks @mankal111, I'll take a look this evening.

daniel-norris commented 3 years ago

Merged!