= {
export type AlertType = 'error' | 'info' | 'loading' | 'success' | 'warning';
+const hasOnlyTextChildren = (children: ReactNode): boolean =>
+ Children.toArray(children).every(
+ (child) => typeof child === 'string' || typeof child === 'number',
+ );
+
interface AlertProperties {
status?: AlertFieldLevelType | AlertType;
message?: ReactNode;
@@ -70,6 +75,13 @@ export const Alert = ({
className,
);
+ const explanationClassName = message
+ ? 'm-notification__explanation'
+ : undefined;
+ const explanationTag: 'div' | 'p' =
+ children && hasOnlyTextChildren(children) ? 'p' : 'div';
+ const ExplanationTag = explanationTag;
+
return (
{showIcon ? (
@@ -82,12 +94,12 @@ export const Alert = ({
) : null}
{children ? (
-
{children}
-
+
) : null}
{links && links.length > 0 ? (