diff --git a/src/components/nps/nps-drawer.tsx b/src/components/nps/nps-drawer.tsx new file mode 100644 index 00000000..23cfa228 --- /dev/null +++ b/src/components/nps/nps-drawer.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import Drawer from 'components/drawer' +import { DrawerPlacement } from 'components/drawer/drawer' +import { NPSInput } from './nps' + +export type NPSDrawerProps = { + visible: boolean + title?: string + message?: (score: number) => React.ReactNode + onSubmit?: (score: number) => void + onDismiss?: () => void +} + +export function NPSDrawer({ + visible, + title, + message, + onSubmit, + onDismiss, +}: NPSDrawerProps) { + return ( + + + + ) +} diff --git a/src/components/nps/nps.stories.tsx b/src/components/nps/nps.stories.tsx index 8aea355c..ce5e6dc7 100644 --- a/src/components/nps/nps.stories.tsx +++ b/src/components/nps/nps.stories.tsx @@ -3,6 +3,7 @@ import { Meta } from '@storybook/react/types-6-0' import { action } from '@storybook/addon-actions' import Button from 'components/button' import { NPSInput } from './nps' +import { NPSDrawer } from './nps-drawer' export default { title: 'Survey/NPS', @@ -60,3 +61,22 @@ export function WithCustomMessage() { ) } + +export function NPSInDrawer() { + const [show, setShow] = useState(false) + + function showDrawer() { + setShow(true) + } + + function onClose() { + setShow(false) + } + + return ( + <> +