diff --git a/CODEOWNERS b/CODEOWNERS index d01b1d4e..b0894972 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -10,4 +10,4 @@ /src/components/SharePopover @niktverd /src/components/StoreBadge @NikitaCG /src/components/Stories @darkgenius - +/src/components/ConfirmDialog @kseniya57 diff --git a/src/components/ConfirmDialog/ConfirmDialog.scss b/src/components/ConfirmDialog/ConfirmDialog.scss new file mode 100644 index 00000000..ba3f4c26 --- /dev/null +++ b/src/components/ConfirmDialog/ConfirmDialog.scss @@ -0,0 +1,10 @@ +@use '@gravity-ui/uikit/styles/mixins'; +@use '../../components/variables'; + +$block: '.#{variables.$ns}confirm-dialog'; + +#{$block} { + &__message { + @include mixins.text-body-2; + } +} diff --git a/src/components/ConfirmDialog/ConfirmDialog.tsx b/src/components/ConfirmDialog/ConfirmDialog.tsx new file mode 100644 index 00000000..45867521 --- /dev/null +++ b/src/components/ConfirmDialog/ConfirmDialog.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +import type {DialogProps} from '@gravity-ui/uikit'; +import {Dialog, DialogFooterProps} from '@gravity-ui/uikit'; + +import {block} from '../utils/cn'; + +import './ConfirmDialog.scss'; + +const b = block('confirm-dialog'); + +export type ConfirmDialogProps = { + title?: string; + message?: React.ReactNode; +} & Omit & + Pick< + DialogFooterProps, + | 'textButtonApply' + | 'textButtonCancel' + | 'onClickButtonCancel' + | 'onClickButtonApply' + | 'propsButtonCancel' + | 'propsButtonApply' + >; + +export const ConfirmDialog = ({ + title, + message, + textButtonApply, + textButtonCancel, + onClickButtonApply, + onClickButtonCancel, + propsButtonCancel, + propsButtonApply, + ...dialogProps +}: ConfirmDialogProps) => { + return ( + + + +
{message}
+
+ +
+ ); +}; diff --git a/src/components/ConfirmDialog/README.md b/src/components/ConfirmDialog/README.md new file mode 100644 index 00000000..89e6b22c --- /dev/null +++ b/src/components/ConfirmDialog/README.md @@ -0,0 +1,60 @@ + + +# ConfirmDialog + + + +```tsx +import {ConfirmDialog} from '@gravity-ui/components'; +``` + +`ConfirmDialog` is a utility component, which renders confirmation dialogs + +## Properties + +| Name | Description | Type | Required | +| :------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------: | :------: | +| title | The confirm dialog title | `string` | Yes | +| message | The confirmation message | `ReactNode` | Yes | +| textButtonCancel | The cancel button text | `string` | Yes | +| propsButtonCancel | The cancel buttonProps | `ButtonProps` | | +| onClickButtonCancel | The cancel button click handler | `(event: React.MouseEvent) => void` | Yes | +| textButtonApply | The ok button text | `string` | Yes | +| propsButtonApply | The ok button props | `ButtonProps` | | +| onClickButtonApply | The ok button click handler | `(event: React.MouseEvent) => void` | Yes | +| onClose | The dialog close handler | `(event: MouseEvent or KeyboardEvent, reason: ModalCloseReason or 'closeButtonClick') => void` | Yes | + +And other Dialog props + +## Usage + +```tsx +import {ConfirmDialog} from '@gravity-ui/components'; + +const [open, setOpen] = React.useState(false); + +return ( + + + { + alert('Confirmed'); + setOpen(false); + }} + onClickButtonCancel={() => { + alert('Cancelled'); + setOpen(false); + }} + onClose={() => setOpen(false)} + textButtonCancel="No" + textButtonApply="Yes" + open={open} + aria-labelledby="app-confirmation-dialog-title" + /> + +); +``` diff --git a/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx b/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx new file mode 100644 index 00000000..32e64a5c --- /dev/null +++ b/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx @@ -0,0 +1,45 @@ +import React from 'react'; + +import {Button} from '@gravity-ui/uikit'; +import type {Meta, StoryFn} from '@storybook/react'; + +import {ConfirmDialog} from '../ConfirmDialog'; +import type {ConfirmDialogProps} from '../ConfirmDialog'; + +export default { + title: 'Components/ConfirmDialog', + component: ConfirmDialog, +} as Meta; + +const DefaultTemplate: StoryFn = (args) => { + const [open, setOpen] = React.useState(false); + + return ( + + + { + alert('Confirmed'); + setOpen(false); + }} + onClickButtonCancel={() => { + alert('Cancelled'); + setOpen(false); + }} + onClose={() => setOpen(false)} + open={open} + /> + + ); +}; +export const Default = DefaultTemplate.bind({}); + +Default.args = { + title: 'Do you want to confirm?', + textButtonCancel: 'No', + textButtonApply: 'Yes', + 'aria-labelledby': 'app-confirmation-dialog-title', +}; diff --git a/src/components/ConfirmDialog/index.ts b/src/components/ConfirmDialog/index.ts new file mode 100644 index 00000000..7c30ee33 --- /dev/null +++ b/src/components/ConfirmDialog/index.ts @@ -0,0 +1 @@ +export * from './ConfirmDialog'; diff --git a/src/components/index.ts b/src/components/index.ts index d689e697..537d7982 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -19,3 +19,4 @@ export * from './SharePopover'; export * from './StoreBadge'; export * from './Stories'; export * from './StoriesGroup'; +export * from './ConfirmDialog';