Support labels on Toggle component

[mnicole]

Sometimes the toggle component is unclear, so having labels is easier for the user to understand, for example "on" and "off" or "yes" and "no".

We should add support for these labels in the Toggle component.

<span className="gds-form-group__toggleswitch-indicator-labels" gg-enabled-text={onText} gg-disabled-text={offText}></span>

[asifsha]

I can have a look on this

[edrpls]

Thanks @asifsha!

[mnicole]

thank you @asifsha! we have a contributing guide and git guide:

https://github.com/gumgum/gumdrops/blob/master/CONTRIBUTING.md
https://github.com/gumgum/gumdrops/blob/master/GITWORKFLOW.md

please let us know if you have any questions!

[asifsha]

Thanks for the response,
I cannot find the theme-blue.css in repository, I downloaded it from https://assets.ggops.com/stable/theme-blue.css, and the CSS class "gds-form-group__toggleswitch-indicator-labels" is already defined. If I am applying that class, right now the layout is not correct. Do I need to fix the CSS class to correct the layout or just need to adjust it in Toggle.jsx?

[mnicole]

hi @asifsha , you shouldn't need the css if you build the project locally because we have a setting in the .storybook folder that imports the css file there. you can clone the project and then run yarn and yarn install and go to http://localhost:6006/ to see the storybook.

the sample code in the ticket description should be placed inside the <span className="gds-form-group__toggleswitch-indicator"> tag in the components/molecules/Toggle. sorry i was originally unclear about the placement. thanks!