Check out a free preview of the full Design Systems with React & Storybook course:
The "Modal Documentation Solution" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

Emma live codes the solution to the modal documentation exercise.

Get Unlimited Access Now

Transcript from the "Modal Documentation Solution" Lesson

[00:00:00]
>> For the Modal exercise, all I did was create a new file called Modals.stories.mdx inside of components and I just copy and pasted over all of the code for my button stories. So it's very similar and has the same exact structure, all I did was instantiate the SignupModal.

[00:00:16] And then, all we need to do to get this working with the show and hide modal is just to create a showModal attribute here passing in our state. It's a boolean, and we're going to initialize it to true. So if we come in here to our norms we can see now we've got our Show Modal.

[00:00:33] And if I uncheck this, it fades out and if I check, it fades in. I believe it's not transitioning just because the CSS like it doesn't know where to go. So, at least, it's showing and it's not showing that it's good enough for me.