Add a customization prop to drop the UI modifications

[yellowwoods12]

Adding recent changes in the UI of the module not only adds classes on top of the minimal component but also makes it difficult to modify for users who are looking for a minimal design.

One proposed solution here can be to pass a prop with the component that informs the component whether the UI should be kept minimal or not. If yes then just drop the on-top classes and render a simple UI otherwise proper UI will be rendered.

This is one solution of the above problem. There are possible alternatives to it and it would be great if one can come up with them in the comments before asking for assigning up this issue.

[abhushanaj]

@yellowwoods12 Ma'am how about we create different set of examples (different pincode component) each styled differently (minimal to advanced) and leave keep one for user to custom design.

Eg: <PinCodeMinimal/> <PinCodeDark> etc etc and put their source styling on websites to copy to users!!! And keep the basic just the way it it for users to manipulate!! Is this what you're explaining above or did I get it concept wriong!!!

[yellowwoods12]

@abhu-A-J No we cannot add multiple pincode components within a single module. What I am suggesting is to create a single component with all the UI that we want in it (as default) but provide a prop that can be passed by the user incase he/she wants to drop the UI modifications and want to render a minimal UI. Think of it as a boolean parameter passed to a function indicating whether or not UI modifications are required.