feat(Confirm): add confirm component

CODEOWNERS

@@ -10,4 +10,4 @@
 /src/components/SharePopover @niktverd
 /src/components/StoreBadge @NikitaCG
 /src/components/Stories @darkgenius
-
+/src/components/Confirm @kseniya57

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;
+    }
+}

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<DialogProps, 'children' | 'onClose'>;
+
+export const Confirm = ({
+    title,
+    message = '',
+    content,
+    confirmButtonText,
+    cancelButtonText,
+    onConfirm,
+    onCancel,
+    confirmButtonProps,
+    cancelButtonProps,
+    onClose,
+    ...dialogProps
+}: ConfirmProps) => {
+    return (
+        <Dialog {...dialogProps} onClose={onClose ?? onCancel}>
+            <Dialog.Header caption={title} />
+            <Dialog.Body>
+                {content}
+                {message && !content && <p className={b('message')}>{message}</p>}
+            </Dialog.Body>
+            <Dialog.Footer
+                preset="default"
+                showError={false}
+                listenKeyEnter
+                textButtonApply={confirmButtonText}
+                textButtonCancel={cancelButtonText}
+                onClickButtonApply={onConfirm}
+                onClickButtonCancel={onCancel}
+                propsButtonCancel={cancelButtonProps}
+                propsButtonApply={confirmButtonProps}
+            />
+        </Dialog>
+    );
+};

src/components/Confirm/README.md

@@ -0,0 +1,54 @@
+<!--GITHUB_BLOCK-->
+
+# Confirm
+
+<!--/GITHUB_BLOCK-->
+
+```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 (
+  <React.Fragment>
+    <Button view="normal" onClick={() => setOpen(true)}>
+      Show confirm
+    </Button>
+    <Confirm
+      {...args}
+      title="Do you want to confirm?"
+      onConfirm={() => {
+        alert('Confirmed');
+        setOpen(false);
+      }}
+      onCancel={() => setOpen(false)}
+      cancelButtonText="No"
+      confirmButtonText="Yes"
+      open={open}
+      aria-labelledby="app-confirmation-dialog-title"
+    />
+  </React.Fragment>
+);
+```

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<ConfirmProps>;
+
+const DefaultTemplate: StoryFn<ConfirmProps> = (args) => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <React.Fragment>
+            <Button view="normal" onClick={() => setOpen(true)}>
+                Show confirm
+            </Button>
+            <Confirm
+                {...args}
+                title="Do you want to confirm?"
+                onConfirm={() => {
+                    alert('Confirmed');
+                    setOpen(false);
+                }}
+                onCancel={() => setOpen(false)}
+                cancelButtonText="No"
+                confirmButtonText="Yes"
+                open={open}
+                aria-labelledby="app-confirmation-dialog-title"
+            />
+        </React.Fragment>
+    );
+};
+export const Default = DefaultTemplate.bind({});

src/components/Confirm/index.ts

@@ -0,0 +1 @@
+export * from './Confirm';

src/components/index.ts

@@ -19,3 +19,4 @@ export * from './SharePopover';
 export * from './StoreBadge';
 export * from './Stories';
 export * from './StoriesGroup';
+export * from './Confirm';