diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 8e66b3c0a..c8a4a0ac0 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -8,7 +8,9 @@ import {Icon} from '../Icon'; import {colorText} from '../Text'; import {Flex, spacing} from '../layout'; +import {AlertAction} from './AlertAction'; import {AlertActions} from './AlertActions'; +import {AlertContextProvider} from './AlertContextProvider'; import {AlertIcon} from './AlertIcon'; import {AlertTitle} from './AlertTitle'; import {DEFAULT_ICON_SIZE, bAlert} from './constants'; @@ -28,48 +30,50 @@ export const Alert = (props: AlertProps) => { qa, } = props; - const icon = props.icon || ; - const title = - typeof props.title === 'string' ? : props.title; - const actions = Array.isArray(props.actions) ? ( - - ) : ( - props.actions - ); - return ( - - - {icon} - - - - {title} - {message} + + + + {props.icon || } + + + + {typeof props.title === 'string' ? ( + + ) : ( + props.title + )} + {message} + + {Array.isArray(props.actions) ? ( + + ) : ( + props.actions + )} - {actions} + {onClose && ( + + )} - {onClose && ( - - )} - - + + ); }; Alert.Icon = AlertIcon; Alert.Title = AlertTitle; Alert.Actions = AlertActions; +Alert.Action = AlertAction; diff --git a/src/components/Alert/AlertAction.tsx b/src/components/Alert/AlertAction.tsx new file mode 100644 index 000000000..ac42f7577 --- /dev/null +++ b/src/components/Alert/AlertAction.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import {Button} from '../Button'; + +import type {AlertActionProps} from './types'; +import {useAlertContext} from './useAlertContext'; + +export const AlertAction = (props: AlertActionProps) => { + const {view} = useAlertContext(); + + return + )) || children} ); diff --git a/src/components/Alert/AlertContext.tsx b/src/components/Alert/AlertContext.tsx new file mode 100644 index 000000000..231f3e585 --- /dev/null +++ b/src/components/Alert/AlertContext.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +import type {AlertContextType} from './types'; + +export const AlertContext = React.createContext(null); diff --git a/src/components/Alert/AlertContextProvider.tsx b/src/components/Alert/AlertContextProvider.tsx new file mode 100644 index 000000000..50b83ac1e --- /dev/null +++ b/src/components/Alert/AlertContextProvider.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +import {AlertContext} from './AlertContext'; +import type {AlertContextProviderProps} from './types'; + +export const AlertContextProvider = ({layout, view, children}: AlertContextProviderProps) => { + return {children}; +}; diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md index c6f83df6c..af1d08b88 100644 --- a/src/components/Alert/README.md +++ b/src/components/Alert/README.md @@ -93,19 +93,19 @@ of text. ```tsx -button}/> -button}/> +button}/> +button}/> ``` @@ -202,19 +202,19 @@ or if the icon must be in the middle of the card. ```tsx -button}/> -button}/> +button}/> +button}/> ``` diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap index 3070108ca..2377d3aeb 100644 --- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap +++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap @@ -60,7 +60,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = ` style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;" > , + actions: {right}, }, { title:
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; +};