pdh-design-system/src/molecules/Confirm/Confirm.stories.js

PDH Design System React Components

import React from "react"
import Confirm from "@/molecules/Confirm/Confirm"
import Button from "@atoms/Button/Button"
import { useState } from "storybook/preview-api"

export default {
    title: "molecules/Confirm",
    component: Confirm,
    argTypes: {},
}

const Template = (args) => {
    const [show, setShow] = useState(args.show)
    const onClose = () => setShow(false)

    return (
        <>
            <Button onClick={() => setShow(true)}>Open Confirm</Button>

            <Confirm {...args} show={show} onHide={onClose} onCancel={onClose} onSave={onClose}>
                Are you sure you want to delete it?
            </Confirm>
        </>
    )
}

export const _Confirm = Template.bind({})
_Confirm.args = {
    show: true,
}