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",