feat(StaticNotification): add actionButton props (#15804)

Signed-off-by: Edward Fink <finken@us.ibm.com>
carbon-design-system · Feb 26, 2024 · 345732e · 345732e
1 parent b6710e7
commit 345732e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7207,6 +7207,9 @@ Map {
   },
   "StaticNotification" => Object {
     "propTypes": Object {
+      "actionButtonLabel": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },
@@ -7229,6 +7232,9 @@ Map {
       "lowContrast": Object {
         "type": "bool",
       },
+      "onActionButtonClick": Object {
+        "type": "func",
+      },
       "statusIconDescription": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
@@ -1182,6 +1182,11 @@ ActionableNotification.propTypes = {
 
 export interface StaticNotificationProps
   extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Pass in the action button label that will be rendered within the ActionableNotification.
+   */
+  actionButtonLabel?: string;
+
   /**
    * Specify the content
    */
@@ -1208,6 +1213,11 @@ export interface StaticNotificationProps
    */
   lowContrast?: boolean;
 
+  /**
+   * Provide a function that is called when the action is clicked
+   */
+  onActionButtonClick?(): void;
+
   /**
    * Provide a description for "status" icon that can be read by screen readers
    */
@@ -1230,7 +1240,9 @@ export interface StaticNotificationProps
 }
 
 export function StaticNotification({
+  actionButtonLabel,
   children,
+  onActionButtonClick,
   title,
   titleId,
   subtitle,
@@ -1242,10 +1254,10 @@ export function StaticNotification({
 }: StaticNotificationProps) {
   const prefix = usePrefix();
   const containerClassName = cx(className, {
-    [`${prefix}--inline-notification`]: true,
-    [`${prefix}--inline-notification--low-contrast`]: lowContrast,
-    [`${prefix}--inline-notification--${kind}`]: kind,
-    [`${prefix}--inline-notification--hide-close-button`]: true,
+    [`${prefix}--actionable-notification`]: true,
+    [`${prefix}--actionable-notification--low-contrast`]: lowContrast,
+    [`${prefix}--actionable-notification--${kind}`]: kind,
+    [`${prefix}--actionable-notification--hide-close-button`]: true,
   });
 
   const ref = useRef(null);
@@ -1256,36 +1268,48 @@ export function StaticNotification({
 
   return (
     <div ref={ref} {...rest} className={containerClassName}>
-      <div className={`${prefix}--inline-notification__details`}>
+      <div className={`${prefix}--actionable-notification__details`}>
         <NotificationIcon
           notificationType="inline"
           kind={kind}
           iconDescription={statusIconDescription || `${kind} icon`}
         />
-        <div className={`${prefix}--inline-notification__text-wrapper`}>
+        <div className={`${prefix}--actionable-notification__text-wrapper`}>
           {title && (
             <Text
               as="div"
               id={titleId}
-              className={`${prefix}--inline-notification__title`}>
+              className={`${prefix}--actionable-notification__title`}>
               {title}
             </Text>
           )}
           {subtitle && (
             <Text
               as="div"
-              className={`${prefix}--inline-notification__subtitle`}>
+              className={`${prefix}--actionable-notification__subtitle`}>
               {subtitle}
             </Text>
           )}
           {children}
         </div>
       </div>
+      <div className={`${prefix}--actionable-notification__button-wrapper`}>
+        {actionButtonLabel && (
+          <NotificationActionButton onClick={onActionButtonClick} inline>
+            {actionButtonLabel}
+          </NotificationActionButton>
+        )}
+      </div>
     </div>
   );
 }
 
 StaticNotification.propTypes = {
+  /**
+   * Pass in the action button label that will be rendered within the ActionableNotification.
+   */
+  actionButtonLabel: PropTypes.string,
+
   /**
    * Specify the content
    */
@@ -1313,6 +1337,11 @@ StaticNotification.propTypes = {
    */
   lowContrast: PropTypes.bool,
 
+  /**
+   * Provide a function that is called when the action is clicked
+   */
+  onActionButtonClick: PropTypes.func,
+
   /**
    * Provide a description for "status" icon that can be read by screen readers
    */

diff --git a/packages/react/src/components/Notification/stories/StaticNotification.stories.js b/packages/react/src/components/Notification/stories/StaticNotification.stories.js
@@ -48,6 +48,27 @@ export const WithInteractiveElements = () => (
   </StaticNotification>
 );
 
+export const WithActionButton = () => (
+  <StaticNotification
+    title="Notification title"
+    titleId="notif-1"
+    kind="info"
+    lowContrast
+    actionButtonLabel="Learn More">
+    <div className="cds--inline-notification__subtitle">
+      <Link inline href="#" aria-describedby="notif-1">
+        Create
+      </Link>{' '}
+      or{' '}
+      <Link inline href="#" aria-describedby="notif-1">
+        register
+      </Link>{' '}
+      a cluster before creating a Configuration. Some additional info could go
+      here to show that this notification subtitle goes below the title.
+    </div>
+  </StaticNotification>
+);
+
 export const Playground = (args) => <StaticNotification {...args} />;
 
 Playground.argTypes = {