Check out a free preview of the full Design Systems with React & Storybook course

The "Actions" 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 demonstrates how to add actions add-ons to be able to use the buttons added to the marked down file.

Preview
Close

Transcript from the "Actions" Lesson

[00:00:00]
>> So just a couple more add ons that we're gonna use, these ones are pretty quick, they're not gonna be as heavy duty. So the first one is actions, and actions are gonna allow you to simulate different events in your UI. So we have buttons, let's go ahead and add a couple of options to those.

[00:00:16]
Inside main.js you can see add on actions is actually already installed with storybook so that's really good we don't need to add that. What we can do now let's go into our Button Stories and on Primary button first of all first we need to import it or else it's not gonna work.

[00:00:31]
So import { action } from "@storybook" also if you're getting errors make sure all your story books haven't at sign before them, I did make that mistake already. And it's going to import from add on actions with an S, And, now we can actually go and simulate a click, so unclick.

[00:00:55]
Let's simulate an action and let's say let's simulate a button click a button, click [LAUGH] a button click, Okay? So on our primary button, anytime you click it, lets simulate that, And if you look down here, we've got our little Actions panel, and if you click our primary button, we can simulate those clicks.

[00:01:15]
There's not much going on in here, it's simulating a DOM event, but you can use this to test the functionality of your different components. So like if you have a text field for example, with an on change that actually validates the data being passed in you can do that.

[00:01:29]
Like if you have the error state depicted as a red border, this is a great way to check that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now