diff --git a/CODEOWNERS b/CODEOWNERS index d01b1d4e..9782bfc3 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -10,4 +10,4 @@ /src/components/SharePopover @niktverd /src/components/StoreBadge @NikitaCG /src/components/Stories @darkgenius - +/src/components/Confirm @kseniya57 diff --git a/src/components/Confirm/Confirm.scss b/src/components/Confirm/Confirm.scss new file mode 100644 index 00000000..149ed44c --- /dev/null +++ b/src/components/Confirm/Confirm.scss @@ -0,0 +1,11 @@ +@use '@gravity-ui/uikit/styles/mixins'; +@use '../../components/variables'; + +$block: '.#{variables.$ns}confirm'; + +#{$block} { + &__message { + margin: 0; + @include mixins.text-body-2; + } +} diff --git a/src/components/Confirm/Confirm.tsx b/src/components/Confirm/Confirm.tsx new file mode 100644 index 00000000..e693a219 --- /dev/null +++ b/src/components/Confirm/Confirm.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +import type {ButtonProps, DialogProps} from '@gravity-ui/uikit'; +import {Dialog} from '@gravity-ui/uikit'; + +import {block} from '../utils/cn'; + +import './Confirm.scss'; + +const b = block('confirm'); + +export type ConfirmProps = { + title?: string; + message?: string; + content?: React.ReactNode; + confirmButtonText?: string; + cancelButtonText?: string; + onConfirm: () => void; + onCancel: () => void; + confirmButtonProps?: ButtonProps; + cancelButtonProps?: ButtonProps; + onClose?: DialogProps['onClose']; +} & Omit; + +export const Confirm = ({ + title, + message = '', + content, + confirmButtonText, + cancelButtonText, + onConfirm, + onCancel, + confirmButtonProps, + cancelButtonProps, + onClose, + ...dialogProps +}: ConfirmProps) => { + return ( + + + + {content} + {message && !content &&

{message}

} +
+ +
+ ); +}; diff --git a/src/components/Confirm/README.md b/src/components/Confirm/README.md new file mode 100644 index 00000000..9c9e9e3a --- /dev/null +++ b/src/components/Confirm/README.md @@ -0,0 +1,54 @@ + + +# Confirm + + + +```tsx +import {Confirm} from '@gravity-ui/components'; +``` + +`Confirm` is a utility component, which renders confirmation dialogs + +## Properties + +| Name | Description | Type | Required | +| :----------------- | :------------------------------------------------------------- | :-----------: | :------: | +| title | The confirm dialog title | `string` | Yes | +| cancelButtonText | The cancel button text | `string` | Yes | +| confirmButtonText | The ok button text | `string` | Yes | +| message | The confirmation message (used if the content is not provided) | `string` | | +| content | The confirmation custom content | `ReactNode` | | +| confirmButtonProps | The ok button props | `ButtonProps` | | +| cancelButtonProps | The cancel buttonProps | `ButtonProps` | | + +And other Dialog props + +## Usage + +```tsx +import {Confirm} from '@gravity-ui/components'; + +const [open, setOpen] = React.useState(false); + +return ( + + + { + alert('Confirmed'); + setOpen(false); + }} + onCancel={() => setOpen(false)} + cancelButtonText="No" + confirmButtonText="Yes" + open={open} + aria-labelledby="app-confirmation-dialog-title" + /> + +); +``` diff --git a/src/components/Confirm/__stories__/Confirm.stories.tsx b/src/components/Confirm/__stories__/Confirm.stories.tsx new file mode 100644 index 00000000..bf5f379f --- /dev/null +++ b/src/components/Confirm/__stories__/Confirm.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import {Button} from '@gravity-ui/uikit'; +import type {Meta, StoryFn} from '@storybook/react'; + +import {Confirm} from '../Confirm'; +import type {ConfirmProps} from '../Confirm'; + +export default { + title: 'Components/Confirm', + component: Confirm, +} as Meta; + +const DefaultTemplate: StoryFn = (args) => { + const [open, setOpen] = React.useState(false); + + return ( + + + { + alert('Confirmed'); + setOpen(false); + }} + onCancel={() => setOpen(false)} + cancelButtonText="No" + confirmButtonText="Yes" + open={open} + aria-labelledby="app-confirmation-dialog-title" + /> + + ); +}; +export const Default = DefaultTemplate.bind({}); diff --git a/src/components/Confirm/index.ts b/src/components/Confirm/index.ts new file mode 100644 index 00000000..d8e1c97b --- /dev/null +++ b/src/components/Confirm/index.ts @@ -0,0 +1 @@ +export * from './Confirm'; diff --git a/src/components/index.ts b/src/components/index.ts index d689e697..95dfb67f 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 './Confirm';