Some html title'}} />,
@@ -35,13 +35,20 @@ const stories: AlertProps[] = [
view: 'outlined',
onClose: () => alert('Close button pressed'),
},
+ {
+ title,
+ message,
+ view: 'outlined',
+ onClose: () => alert('Close button pressed'),
+ actions: [{text: left}, {text: center}, {text: left}],
+ },
{
message,
theme: 'info',
view: 'filled',
actions: (
-
+ {center}
),
},
@@ -81,8 +88,8 @@ const stories: AlertProps[] = [
corners: 'square',
onClose: () => {},
actions: (
-
-
+
+ {left}
),
},
@@ -92,7 +99,7 @@ const stories: AlertProps[] = [
theme: 'warning',
view: 'outlined',
layout: 'horizontal',
- actions: ,
+ actions: {right},
},
{
message,
diff --git a/src/components/Alert/index.ts b/src/components/Alert/index.ts
index f289b9633..7f2aee89e 100644
--- a/src/components/Alert/index.ts
+++ b/src/components/Alert/index.ts
@@ -1,2 +1,8 @@
export {Alert} from './Alert';
-export type {AlertProps} from './types';
+export type {
+ AlertProps,
+ AlertTitleProps,
+ AlertActionProps,
+ AlertActionsProps,
+ AlertIconProps,
+} from './types';
diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts
index f4bdc3a4e..3dfc2c9f2 100644
--- a/src/components/Alert/types.ts
+++ b/src/components/Alert/types.ts
@@ -1,5 +1,6 @@
import type React from 'react';
+import type {ButtonProps} from '../Button';
import type {QAProps} from '../types';
export type AlertTheme =
@@ -11,9 +12,24 @@ export type AlertTheme =
| 'danger'
| 'utility';
export type AlertView = 'filled' | 'outlined';
+export type AlertLayout = 'vertical' | 'horizontal';
export type AlertCorners = 'rounded' | 'square';
-export interface AlertProps extends QAProps {
+export type AlertContextType = {
+ /**
+ * Override actions position
+ *
+ * variants:
+ * - `vertical` - bottom (default);
+ * - `horizontal` - right;
+ */
+ layout: AlertLayout;
+ view: AlertView;
+};
+
+export type AlertContextProviderProps = React.PropsWithChildren;
+
+export interface AlertProps extends QAProps, Partial {
title?: React.ReactNode;
message?: React.ReactNode;
theme?: AlertTheme;
@@ -25,15 +41,6 @@ export interface AlertProps extends QAProps {
* @default - normal
*/
corners?: AlertCorners;
- /**
- * Override actions position
- *
- * variants:
- * - `vertical` - bottom (default);
- * - `horizontal` - right;
- */
- layout?: 'vertical' | 'horizontal';
- view?: AlertView;
onClose?: () => void;
/**
* Add you Actions to alert component:
@@ -45,7 +52,7 @@ export interface AlertProps extends QAProps {
* ```tsx
* actions: (
*
- *
+ * ...
*
* )
* ```
@@ -88,8 +95,8 @@ export interface AlertActionsProps {
className?: string;
items?: AlertAction[];
children?: React.ReactNode | React.ReactNode[];
- parentLayout?: 'vertical' | 'horizontal';
}
+export interface AlertActionProps extends ButtonProps {}
export interface AlertTitleProps {
className?: string;
text: string;
diff --git a/src/components/Alert/useAlertContext.tsx b/src/components/Alert/useAlertContext.tsx
new file mode 100644
index 000000000..e63fd26b8
--- /dev/null
+++ b/src/components/Alert/useAlertContext.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {AlertContext} from './AlertContext';
+
+export const useAlertContext = () => {
+ const context = React.useContext(AlertContext);
+
+ if (!context) throw new Error('Alert: `useAlertContext` hook is used out of "AlertContext"');
+
+ return context;
+};