I've got a component, 'Dialog', that renders a modal dialog box basically, when a user clicks on a link or button to invoke/open the dialog. I'm building a storybook component for the Dialog component, and so I need to be able to have a clickable HTML element (anchor tag or button, preferably anchor tag) and open the Dialog component when that clickable HTML element is clicked. I don't know how to go about this in Storybook.
Here is my storybook element as it exists so far:
const Template: ComponentStory<typeof Dialog> = (args) => <Dialog {...args} />;
export const Regular = Template.bind({});
Regular.args = {
type:"regular",
show: false,
children: "Content of Dialog Box",
dismissable: true,
classNames: "",
maxWidth: "1000px",
displayBoxShadow: true,
renderOnLoad: false,
}
An example of an implementation of this component/story would be a Log In button that, when clicked, would render a slide-out dialog with appropriate fields (children). I'm trying to implement the Dialog part of the story, as the Dialog component is invoked when another HTML object on page is clicked/interacted with.
from Storybook: Render a component by clicking on a link (React)
No comments:
Post a Comment