feat(notice): add link

codegouvfr · Nov 13, 2024 · c2abccc · c2abccc
1 parent bd96252
commit c2abccc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git 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<Record<"root" | "title" | "description" | "close", string>>;
+        classes?: Partial<Record<"root" | "title" | "description" | "close" | "link", string>>;
         title: NonNullable<ReactNode>;
         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}
                                 </span>
                             )}
+                            {link && (
+                                <Link
+                                    target="_blank"
+                                    rel="noopener external"
+                                    {...link.linkProps}
+                                    className={cx(
+                                        fr.cx("fr-notice__link"),
+                                        classes.link,
+                                        link.linkProps.className
+                                    )}
+                                >
+                                    {link.text}
+                                </Link>
+                            )}
                         </p>
                         {/* TODO: Use our button once we have one */}
                         {isClosable && (

diff --git a/stories/Notice.stories.tsx b/stories/Notice.stories.tsx
@@ -18,6 +18,9 @@ const { meta, getStory } = getStoryFactory<NoticeProps>({
         "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",