diff --git a/src/Notice.tsx b/src/Notice.tsx
index e90b13ecc..f4150221d 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -17,6 +17,7 @@ import type { Equals } from "tsafe";
import { useConstCallback } from "./tools/powerhooks/useConstCallback";
import { createComponentI18nApi } from "./i18n";
import { useAnalyticsId } from "./tools/useAnalyticsId";
+import { getLink, type RegisteredLinkProps } from "./link";
export type NoticeProps = (NoticeProps.NonClosable | NoticeProps.Closable) &
(NoticeProps.OptionalIcon | NoticeProps.MandatoryIcon);
@@ -25,10 +26,14 @@ export namespace NoticeProps {
type Common = {
id?: string;
className?: string;
- classes?: Partial>;
+ classes?: Partial>;
title: NonNullable;
description?: ReactNode;
style?: CSSProperties;
+ link?: {
+ linkProps: RegisteredLinkProps;
+ text: ReactNode;
+ };
/** Default: "info" */
severity?: NoticeProps.Severity;
};
@@ -91,6 +96,7 @@ export const Notice = memo(
classes = {},
title,
description,
+ link,
isClosable = false,
isClosed: props_isClosed,
onClose,
@@ -113,6 +119,7 @@ export const Notice = memo(
const refShouldButtonGetFocus = useRef(false);
const refShouldSetRole = useRef(false);
+ const { Link } = getLink();
useEffect(() => {
if (props_isClosed === undefined) {
@@ -191,6 +198,20 @@ export const Notice = memo(
{description}
)}
+ {link && (
+
+ {link.text}
+
+ )}
{/* TODO: Use our button once we have one */}
{isClosable && (
diff --git a/stories/Notice.stories.tsx b/stories/Notice.stories.tsx
index 337804247..992bfc356 100644
--- a/stories/Notice.stories.tsx
+++ b/stories/Notice.stories.tsx
@@ -18,6 +18,9 @@ const { meta, getStory } = getStoryFactory({
"description": {
"description": "Optional message to complete title"
},
+ "link": {
+ "description": "Optional link to display"
+ },
"severity": {
"description": 'Default : "info"',
"options": (() => {
@@ -67,6 +70,12 @@ export default meta;
export const Default = getStory({
"title": "Service maintenance is scheduled today from 12:00 to 14:00.",
"description": "All will be ok after 14:00.",
+ "link": {
+ "linkProps": {
+ "href": "#"
+ },
+ "text": "More information"
+ },
"isClosable": true,
"isClosed": undefined,
"severity": "info",