feat: toggle updates

[saad-mo]

Closes #969

• Updated toggle to the latest design
• added compact size option
• added label modifier to support inline label
• added semantic modifier for the semantic version of the toggle with colors and icon
• updated documentation to reflect the newly available options

Test

• http://localhost:3030/toggle
• http://127.0.0.1:4000/components/toggle.html

Changelog

New

• compact size modifier
• label modifier
• semantic modifier

Changed

• refactored scss to support default width extension if the labels need to be longer than three characters

Removed

nothing. this is a non-breaking change with no changes to existing markup or modifiers

[netlify]

Deploy preview for fundamental ready!

Built with commit 495f4f1

https://deploy-preview-1466--fundamental.netlify.com

[saad-mo]

@LeoT7508 for your review - https://deploy-preview-1466--fundamental.netlify.com/components/toggle.html

[droshev]

I am fine with putting an icon inside the toggle, but what about the text inside. In English we have short words ON and OFF, but in other languages this is longer, which won't fit.
@jeannewalters @LeoT7508 what do you think?

[jeannewalters]

@droshev I would suggest always putting the value such as on/off should be outside to account for longer translations.

[LeoT7508]

@jeannewalters @droshev

This is something you would have to file under "get feedback from GD". At this point this is how they are suggesting we do it. There isn't a design for the label outside.

[jeannewalters]

@LeoT7508 I just checked the latest Sketch file (v. 1.66) and they still have a version with the label on the outside.

[LeoT7508]

@jeannewalters

Ah yes, I missed that, thanks for the correction.

@saad-mo i'll put that in the design sheet quickly.

[LeoT7508]

@saad-mo

We have 2 updates:

1. Add the option for a label outside.
2. Add the outline for selected state.

[saad-mo]

@droshev, @jeannewalters - If you look at the documentation page I have a note on how you can increase the width of the toggle if you need to support more than 3 characters. I feel we need to provide this version as it is part of the design specs from GD.

Toggles always supported a label on the outside. I'll update the docs page to show this along with leo's updates.

[droshev]

It would be useful to document that we recommend labeling the text next to the toggle. you write that for 1-3 latin letters then can put it inside.

[saad-mo]

@droshev @jeannewalters @LeoT7508

Documentation page has been updated with the latest text from @jeannewalters please review.

as recommended, the documentation does not include the toggle with labels on the inside. we can leave it in the code if someone requests it down the line.

[LeoT7508]

These changes look good.

[saad-mo]

these changes have been applied to fundamental-styles as well