feat(pfSwitch): add pf-switch component - #73

this is looking good!!

Reviewed your test page @agathver . The switches look good. Personally I like the animation turned on. Looks like this is an optional setting. Are there reasons we may want to turn off the animation? The only other thing I wanted to make sure of is that when the switch is to the right and the work "ON" is exposed, that's the ON state. From your test page I wasn't clear if that was intended to be the on or off state so please confirm whether we are thinking the same thing.

@mcarrano

Looks like this is an optional setting. Are there reasons we may want to turn off the animation?

It is a feature that is available with core pf. Personally I don't see any reason why anyone would disable the animation. We can make animated = true as default.

The only other thing I wanted to make sure of is that when the switch is to the right and the work "ON" is exposed, that's the ON state. From your test page I wasn't clear if that was intended to be the on or off state so please confirm whether we are thinking the same thing.

Yes. The state is what currently visible.

@agathver Thanks for your reply. Why don't we go ahead and make the animation default as 'animated = true' unless anyone has an objection.

@agathver this PR looks excellent to me. Major kudos for getting this done so quickly, making the code concise, and showing all the different use cases.

@cdcabrera do you mind taking a second pass at this? I did not get a chance to review for accessibility. @agathver if you have a chance, please just confirm you are meeting a11y standards and adding aria-roles/aria-labels as needed.

@mcarrano @agathver i'm fine with animating by default. It should be possible to toggle this via an attribute for the consumer, but animating by default is expected i suppose.

Nice options for this component.
On the switches with check boxes, the checkbox doesn't seem to alternate as the toggle does. Is this intended?
Also, just my 2 cents, but the slide feels backwards to me. When I click the toggle, I expect the selected piece to slide to the other side, not slide away off the edge.
One other nit - the third example under Custom Labels appears to have an extra 1px showing on the left edge in the "off" state. The Test at the bottom will get this also depending on the number of characters in the text options.

@srambach

On the switches with check boxes, the checkbox doesn't seem to alternate as the toggle does. Is this intended?

The switch and checkbox are connected with one-way binding. Toggling the switch will change the checkbox but not vice-versa.

Also, just my 2 cents, but the slide feels backwards to me. When I click the toggle, I expect the selected piece to slide to the other side, not slide away off the edge.

It is consistent with what is shown here: http://www.patternfly.org/pattern-library/widgets/

One other nit - the third example under Custom Labels appears to have an extra 1px showing on the left edge in the "off" state. The Test at the bottom will get this also depending on the number of characters in the text options.

I could not reproduce this. I tried with 5, 10 and 15 characters.

I see the 1px blue line in Chrome only, and I am on a Mac. (Chrome Version 60.0.3112.113 (Official Build) (64-bit)) Firefox and Safari both look fine to me.

Pardon my ignorance on the binding of the checkbox to the toggle, but if the checkbox itself is clicked, the state of the checkbox never changes. This is intended behavior?

We should clarify the purpose of the checkbox in the test page. I did not pay that much attention to what the checkbox was doing as I assumed this was only there to reflect the state change resulting from the toggling of the switch. But based on @srambach 's comments, this does seem confusing. @agathver can you clarify what you are trying to show here? If it's just to show the effect of clicking the switch, then maybe just a text field that toggles from On and Off would be better.