fix(@kadena/react-ui): Update the Notification Component

.changeset/cool-buttons-happen.md

@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Updated the Notification component API

packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx

@@ -49,16 +49,16 @@ export const Subscribe: FC = () => {
             </form>
 
             {Boolean(message) && (
-              <Notification.Root color="warning" expanded variant="outlined">
+              <Notification color="warning" role="status">
                 {message}
-              </Notification.Root>
+              </Notification>
             )}
           </>
         ) : (
           Boolean(message) && (
-            <Notification.Root color="positive" expanded variant="outlined">
+            <Notification color="positive" role="status">
               {message}
-            </Notification.Root>
+            </Notification>
           )
         )}
       </Stack>

packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx

@@ -1,8 +1,15 @@
 import { updateConsent } from '@/utils/analytics';
-import { Notification, Text } from '@kadena/react-ui';
+import {
+  Notification,
+  NotificationButton,
+  NotificationFooter,
+  NotificationHeading,
+  SystemIcon,
+  Text,
+} from '@kadena/react-ui';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
-import { notificationClass } from './styles.css';
+import { containerClass, notificationWrapperClass } from './styles.css';
 
 export const CookieConsent: FC = () => {
   const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
@@ -31,36 +38,34 @@ export const CookieConsent: FC = () => {
   if (cookieConsent !== null || !mounted) return null;
 
   return (
-    <div className={notificationClass}>
-      <Notification.Root
-        title="Cookie Consent"
-        color="info"
-        expanded
-        variant="standard"
-        icon="Cookie"
-      >
-        <Text>
-          This notification concerns the cookie policy requirement to ask users
-          for their consent to use <strong>Google Analytics</strong> or other
-          tracking tools for better optimizations/performances.
-        </Text>
-        <Notification.Actions>
-          <Notification.Button
-            icon="Check"
-            color={'positive'}
-            onClick={handleAccept}
-          >
-            Accept
-          </Notification.Button>
-          <Notification.Button
-            icon="Close"
-            color={'negative'}
-            onClick={handleReject}
-          >
-            Reject
-          </Notification.Button>
-        </Notification.Actions>
-      </Notification.Root>
-    </div>
+    <section aria-labelledby="cookie-heading" className={containerClass}>
+      <div className={notificationWrapperClass}>
+        <Notification
+          color="info"
+          styleVariant="borderless"
+          icon={<SystemIcon.Cookie />}
+          role="none"
+        >
+          <NotificationHeading id="cookie-heading">
+            Cookie Consent
+          </NotificationHeading>
+          <Text>
+            This notification concerns the cookie policy requirement to ask
+            users for their consent to use <strong>Google Analytics</strong> or
+            other tracking tools for better optimizations/performances.
+          </Text>
+          <NotificationFooter>
+            <NotificationButton color={'positive'} onClick={handleAccept}>
+              Accept
+              <SystemIcon.Check />
+            </NotificationButton>
+            <NotificationButton color={'negative'} onClick={handleReject}>
+              Reject
+              <SystemIcon.Close />
+            </NotificationButton>
+          </NotificationFooter>
+        </Notification>
+      </div>
+    </section>
   );
 };

packages/apps/docs/src/components/CookieConsent/styles.css.ts

@@ -1,12 +1,20 @@
 import { sprinkles } from '@kadena/react-ui/theme';
 import { style } from '@vanilla-extract/css';
+import { $$pageWidth, globalClass } from '../Layout/global.css';
 
-export const notificationClass = style([
+export const containerClass = style([
   sprinkles({
     position: 'sticky',
     top: '$17',
+    bg: '$primarySurfaceInverted',
   }),
   {
     zIndex: 1000,
   },
 ]);
+
+export const notificationWrapperClass = style([
+  globalClass,
+  sprinkles({ marginX: 'auto' }),
+  { maxWidth: $$pageWidth },
+]);

packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx

@@ -1,4 +1,4 @@
-import { Notification } from '@kadena/react-ui';
+import { Notification, NotificationHeading } from '@kadena/react-ui';
 import classNames from 'classnames';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
@@ -16,15 +16,15 @@ interface IProps {
 export const MDNotification: FC<IProps> = ({ children, title = '', label }) => {
   return (
     <div className={classNames(wrapperClass, notificationWrapperClass)}>
-      <Notification.Root
+      <Notification
         color={getColor(label)}
-        title={title}
-        expanded
         icon={getIcon(label)}
-        variant="outlined"
+        styleVariant="borderless"
+        role="none"
       >
+        <NotificationHeading>{title}</NotificationHeading>
         {children}
-      </Notification.Root>
+      </Notification>
     </div>
   );
 };

packages/apps/docs/src/components/Markdown/MDNotification/utils.ts → packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx

@@ -1,4 +1,6 @@
 import type { INotificationProps } from '@kadena/react-ui';
+import { SystemIcon } from '@kadena/react-ui';
+import React from 'react';
 
 export type LabelType =
   | 'info'
@@ -7,38 +9,34 @@ export type LabelType =
   | 'caution'
   | 'danger'
   | 'warning';
-type IconType = 'Information' | 'Bell' | undefined;
 
 export const getColor = (label?: LabelType): INotificationProps['color'] => {
   if (!label) return;
   switch (label) {
-    case 'note':
-    case 'info':
-      return 'primary';
     case 'tip':
       return 'positive';
     case 'danger':
     case 'warning':
       return 'negative';
     case 'caution':
       return 'warning';
+    case 'note':
+    case 'info':
     default:
-      return 'primary';
+      return 'info';
   }
 };
 
-export const getIcon = (label?: LabelType): IconType => {
+export const getIcon = (label?: LabelType): INotificationProps['icon'] => {
   if (!label) return undefined;
   switch (label) {
-    case 'note':
-    case 'info':
-    case 'tip':
-      return 'Information';
     case 'caution':
     case 'warning':
     case 'danger':
-      return 'Bell';
-
+      return <SystemIcon.Bell />;
+    case 'note':
+    case 'info':
+    case 'tip':
     default:
       return undefined;
   }

packages/apps/docs/src/components/Search/components/SearchResults.tsx

@@ -7,7 +7,9 @@ import {
   Button,
   Heading,
   Notification,
+  NotificationHeading,
   Stack,
+  SystemIcon,
   Tabs,
   useModal,
 } from '@kadena/react-ui';
@@ -98,14 +100,13 @@ export const SearchResults: FC<IProps> = ({
               </div>
             )}
             {semanticError ? (
-              <Notification.Root
+              <Notification
                 color={'negative'}
-                expanded={true}
-                icon="AlertBox"
-                variant="outlined"
+                icon={<SystemIcon.AlertBox />}
+                role="status"
               >
                 {semanticError}
-              </Notification.Root>
+              </Notification>
             ) : (
               <>
                 <ResultCount count={semanticResults?.length} />
@@ -136,11 +137,8 @@ export const SearchResults: FC<IProps> = ({
 
         <Tabs.Content id="qa">
           <Box marginBottom="$8">
-            <Notification.Root
-              expanded={true}
-              icon="AlertBox"
-              title="QA search is in beta"
-            >
+            <Notification icon={<SystemIcon.AlertBox />} role="none">
+              <NotificationHeading>QA search is in beta</NotificationHeading>
               QA search our latest AI vector-based search, designed to provide
               instant answers to your queries.
               <br />
@@ -155,7 +153,7 @@ export const SearchResults: FC<IProps> = ({
                 collect valuable data that will aid us in refining and enhancing
                 the accuracy of our model’s responses in the future.
               </p>
-            </Notification.Root>
+            </Notification>
           </Box>
           <div className={scrollBoxClasses}>
             {isLoading && (
@@ -164,13 +162,13 @@ export const SearchResults: FC<IProps> = ({
               </div>
             )}
             {error && (
-              <Notification.Root
+              <Notification
                 color={'negative'}
-                expanded={true}
-                icon="AlertBox"
+                icon={<SystemIcon.AlertBox />}
+                role="status"
               >
                 {error}
-              </Notification.Root>
+              </Notification>
             )}
 
             {conversation.history?.map((interaction, idx) => {

packages/apps/graph-client/src/components/error-box/error-box.tsx

@@ -1,5 +1,5 @@
 import type { ApolloError } from '@apollo/client';
-import { Box, Notification } from '@kadena/react-ui';
+import { Box, Notification, SystemIcon } from '@kadena/react-ui';
 import React from 'react';
 
 interface IErrorBoxProps {
@@ -28,7 +28,7 @@ export const ErrorBox = (props: IErrorBoxProps): JSX.Element => {
   }
 
   return (
-    <Notification.Root color="negative" icon="Close">
+    <Notification color="negative" icon={<SystemIcon.Close />} role="status">
       {errorTitle}
       <Box marginBottom="$4" />
       {errorMessage}
@@ -38,6 +38,6 @@ export const ErrorBox = (props: IErrorBoxProps): JSX.Element => {
           <code>{errorExtra}</code>
         </>
       )}
-    </Notification.Root>
+    </Notification>
   );
 };

packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx

@@ -41,10 +41,10 @@ const Account: React.FC = () => {
         data?.account?.totalBalance === 0 &&
         data?.account?.chainAccounts.length === 0 && (
           <>
-            <Notification.Root color="info">
+            <Notification color="info" role="status">
               We could not find any data on this account. Please check the
               module and account name.
-            </Notification.Root>
+            </Notification>
             <Box margin={'$4'} />
           </>
         )}

packages/apps/graph-client/src/pages/transactions/[key].tsx

@@ -2,7 +2,14 @@ import { useGetTransactionByRequestKeySubscription } from '@/__generated__/sdk';
 import LoaderAndError from '@/components/LoaderAndError/loader-and-error';
 import routes from '@/constants/routes';
 import { formatCode, formatLisp } from '@/utils/formatter';
-import { Box, Breadcrumbs, Link, Notification, Table } from '@kadena/react-ui';
+import {
+  Box,
+  Breadcrumbs,
+  Link,
+  Notification,
+  SystemIcon,
+  Table,
+} from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -47,10 +54,10 @@ const RequestKey: React.FC = () => {
                 </Table.Td>
                 <Table.Td>
                   {data?.transaction?.badResult && (
-                    <Notification.Root
+                    <Notification
                       color="negative"
-                      icon="Close"
-                      variant="outlined"
+                      icon={<SystemIcon.Close />}
+                      role="status"
                     >
                       Transaction failed with status:{' '}
                       <pre>
@@ -60,24 +67,24 @@ const RequestKey: React.FC = () => {
                           4,
                         )}
                       </pre>
-                    </Notification.Root>
+                    </Notification>
                   )}
                   {data?.transaction?.goodResult && (
-                    <Notification.Root
+                    <Notification
                       color="positive"
-                      icon="Check"
-                      variant="outlined"
+                      icon={<SystemIcon.Check />}
+                      role="status"
                     >
                       Transaction succeeded with status:
                       <br />
                       <pre>{formatCode(data?.transaction?.goodResult)}</pre>
-                    </Notification.Root>
+                    </Notification>
                   )}
                   {!data?.transaction?.goodResult &&
                     !data?.transaction?.badResult && (
-                      <Notification.Root color="warning" variant="outlined">
+                      <Notification color="warning" role="status">
                         Unknown transaction status
-                      </Notification.Root>
+                      </Notification>
                     )}
                 </Table.Td>
               </Table.Tr>