feat(notice): add description

codegouvfr · Oct 31, 2024 · d30bfe3 · d30bfe3
1 parent e8ee87c
commit d30bfe3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/src/Notice.tsx b/src/Notice.tsx
@@ -21,8 +21,9 @@ import { useAnalyticsId } from "./tools/useAnalyticsId";
 export type NoticeProps = {
     id?: string;
     className?: string;
-    classes?: Partial<Record<"root" | "title" | "close", string>>;
+    classes?: Partial<Record<"root" | "title" | "description" | "close", string>>;
     title: NonNullable<ReactNode>;
+    description?: ReactNode;
     style?: CSSProperties;
     /** Default: "info" */
     severity?: NoticeProps.Severity;
@@ -55,7 +56,7 @@ export namespace NoticeProps {
         ? Severity
         : never;
 
-    export type Severity = ExtractSeverity<FrClassName>;
+    export type Severity = Exclude<ExtractSeverity<FrClassName>, "no-icon">;
 }
 
 /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-notice> */
@@ -66,6 +67,7 @@ export const Notice = memo(
             className,
             classes = {},
             title,
+            description,
             isClosable = false,
             isClosed: props_isClosed,
             onClose,
@@ -148,7 +150,16 @@ export const Notice = memo(
             >
                 <div className="fr-container">
                     <div className="fr-notice__body">
-                        <p className={cx(fr.cx(`fr-notice__title`), classes.title)}>{title}</p>
+                        <p>
+                            <span className={cx(fr.cx(`fr-notice__title`), classes.title)}>
+                                {title}
+                            </span>
+                            {description && (
+                                <span className={cx(fr.cx("fr-notice__desc"), classes.description)}>
+                                    {description}
+                                </span>
+                            )}
+                        </p>
                         {/* TODO: Use our button once we have one */}
                         {isClosable && (
                             <button

diff --git a/stories/Notice.stories.tsx b/stories/Notice.stories.tsx
@@ -15,6 +15,9 @@ const { meta, getStory } = getStoryFactory<NoticeProps>({
             "description":
                 'Required message to display, it should not relay a "classic" information, but an important and temporary information.'
         },
+        "description": {
+            "description": "Optional message to complete title"
+        },
         "severity": {
             "description": 'Default : "info"',
             "options": (() => {
@@ -59,73 +62,81 @@ const { meta, getStory } = getStoryFactory<NoticeProps>({
 export default meta;
 
 export const Default = getStory({
-    "title": "Service maintenance is scheduled today from 12:00 to 14:00",
+    "title": "Service maintenance is scheduled today from 12:00 to 14:00.",
+    "description": "All will be ok after 14:00.",
     "isClosable": true,
     "isClosed": undefined,
     "severity": "info",
     ...logCallbacks(["onClose"])
 });
 
 export const NonClosableNotice = getStory({
-    "title": "This is the title"
+    "title": "This is the title",
+    "description": "This is the description."
 });
 
 export const ClosableNotice = getStory({
-    "title": "This is the title",
+    "title": "This is the title.",
+    "description": "This is the description.",
     "isClosable": true
 });
 
-export const NoIconNotice = getStory({
-    "title": "This is a No Icon notice",
-    "severity": "no-icon"
-});
-
 export const InfoNotice = getStory({
-    "title": "This is a Info notice",
+    "title": "This is a Info notice.",
+    "description": "This is the description.",
     "severity": "info"
 });
 
 export const WarningNotice = getStory({
-    "title": "This is a Warning notice",
+    "title": "This is a Warning notice.",
+    "description": "This is the description.",
     "severity": "warning"
 });
 
 export const AlertNotice = getStory({
-    "title": "This is an Alert notice",
+    "title": "This is an Alert notice.",
+    "description": "This is the description.",
     "severity": "alert"
 });
 
 export const WeatherOrangeNotice = getStory({
-    "title": "This is a WeatherOrange notice",
+    "title": "This is a WeatherOrange notice.",
+    "description": "This is the description.",
     "severity": "weather-orange"
 });
 
 export const WeatherRedNotice = getStory({
-    "title": "This is a WeatherRed notice",
+    "title": "This is a WeatherRed notice.",
+    "description": "This is the description.",
     "severity": "weather-red"
 });
 
 export const WeatherPurpleNotice = getStory({
-    "title": "This is a WeatherPurple notice",
+    "title": "This is a WeatherPurple notice.",
+    "description": "This is the description.",
     "severity": "weather-purple"
 });
 
 export const WitnessNotice = getStory({
-    "title": "This is a Witness notice",
+    "title": "This is a Witness notice.",
+    "description": "This is the description.",
     "severity": "witness"
 });
 
 export const KidnappingNotice = getStory({
-    "title": "This is a Kidnapping notice",
+    "title": "This is a Kidnapping notice.",
+    "description": "This is the description.",
     "severity": "kidnapping"
 });
 
 export const AttackNotice = getStory({
-    "title": "This is an Attack notice",
+    "title": "This is an Attack notice.",
+    "description": "This is the description.",
     "severity": "attack"
 });
 
 export const CyberattackNotice = getStory({
-    "title": "This is a Cyberattack notice",
+    "title": "This is a Cyberattack notice.",
+    "description": "This is the description.",
     "severity": "cyberattack"
 });