Storybook: Adds FormToggle component

[enejb]

Description

Adds FormToggle component to storybook

How has this been tested?

Run npm run design-system:dev and confirm component shows up under Form Toggle
Click on the toggle does it work as expected?

Screenshots

Types of changes

Storybook

[ItsJonQ]

@enejb Awesome! Thank you for creating this and helping out with Storybook!

It looks good to me 👍

[gziolo]

@enejb great work jumping into creating a story 🥇

I have a more general question in regards to using React hooks in the exports. I saw the same approach in the past and I see it in other PRs so I think we should clarify how we tackle it first.

[mkaz]

@ItsJonQ My only issue with the <Example/> export you showed is the View Code from the Docs tab isn't quite complete. If you view the source from the Story tab, its fine, so not the biggest deal.

Here's a screen shot of what it looks like in ScrollLock.

[ItsJonQ]

@mkaz Oh dang! That's a bit of a bummer... :(

[enejb]

Thanks for the reviews!
Let me know if there is anything else that I missed.

[gziolo]

Nice, thanks for the refactor. Looks great now 💯

[gziolo]

One more thing which I discovered while testing:

We should add the label and it can be integrated with knobs, see:

gutenberg/packages/components/src/external-link/stories/index.js

Line 13 in f56110d

const title = text( 'children', 'WordPress' );

or

gutenberg/packages/components/src/checkbox-control/stories/index.js

Line 31 in f56110d

const label = text( 'Label', 'Is author' );

[gziolo]

I added a commit which formats file with Prettier.

Let's get it in and iterate. @enejb, thank you for doing your part :)