import React from "react" ; import { Story } from "@storybook/react" ; import { useArgs } from "@storybook/client-api" ; import { Modal , ModalProps , Button } from "@okta/odyssey-react" ; import { Modal as Source } from "../../../../odyssey-react/src" ; import ModalMdx from "./Modal.mdx" ; export default { title : `Components/Modal` , component : Source , parameters : { layout : "fullscreen" , docs : { page : ModalMdx } } , argTypes : { open : { control : { type : "boolean" } } } } ; const Template = ( ) => { const [ { open } , updateArgs ] = useArgs ( ) ; const handleOpen = ( ) => { console . log ( "modal/onOpen" ) ; } ; const handleClose = ( ) => { console . log ( "modal/onClose" ) ; updateArgs ( { open : false } ) ; } ; return ( < > < Button onClick = { ( ) => { updateArgs ( { open : true } ) ; } } > Open modal < /Button> < Modal open = { open } onOpen = { handleOpen } onClose = { handleClose } closeMessage = "close" > < Modal . Header > Modal Title < /Modal.Header> < Modal . Body > < p > This is the modal content area . It 's width is determined based on the amount of content within it . < /p> < /Modal.Body> < Modal . Footer > < Modal . Button variant = "clear" > Cancel < /Modal.Button> < Modal . Button close > Continue < /Modal.Button> < /Modal.Footer> < /Modal> < />); } ; export const Default = Template . bind ( { } ) ; Default . args = { open : true } ; Default . argTypes = { onOpen : { action : "modal/onOpen" } , onClose : { action : "modal/onClose" } } ;