@veracity/vui 2.25.0-beta.0 → 2.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.25.0-beta.0",
+  "version": "2.25.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/notification/consts.ts

@@ -1,6 +1,8 @@
 import { iconDictionary } from '../message/consts'
 import { NotificationStatusMapping } from './notification.types'
 
+export const bannerNotificationElevation = 2
+
 export const notificationStatusMapping: NotificationStatusMapping = {
   error: {
     iconProps: {
@@ -34,4 +36,36 @@ export const notificationStatusMapping: NotificationStatusMapping = {
     },
     variant: 'subtleYellow',
   },
+  bannerError: {
+    iconProps: {
+      name: iconDictionary.error,
+    },
+    variant: 'bannerRed',
+  },
+  bannerInfo: {
+    iconProps: {
+      name: iconDictionary.info,
+    },
+    variant: 'bannerBlue',
+  },
+  bannerLoading: {
+    iconProps: {
+      animation: 'vui-spin 0.6s linear infinite',
+      name: 'fadSpinnerThird',
+      pathFill: ['blue.40', 'blue.60'],
+    },
+    variant: 'bannerBlue',
+  },
+  bannerSuccess: {
+    iconProps: {
+      name: iconDictionary.success,
+    },
+    variant: 'bannerGreen',
+  },
+  bannerWarning: {
+    iconProps: {
+      name: iconDictionary.warning,
+    },
+    variant: 'bannerYellow',
+  },
 }

package/src/notification/notification.tsx

@@ -1,7 +1,7 @@
 import Box from '../box'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isReactText, isString } from '../utils'
-import { notificationStatusMapping } from './consts'
+import { bannerNotificationElevation, notificationStatusMapping } from './consts'
 import { NotificationProvider } from './context'
 import { NotificationProps } from './notification.types'
 import NotificationButton from './notificationButton'
@@ -47,6 +47,7 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
         borderRadius="md"
         borderWidth={1}
         className={cs('vui-notification', className)}
+        elevation={variant.includes('banner') ? bannerNotificationElevation : undefined}
         ref={ref}
         role="mark"
         w="fit-content"

package/src/notification/notification.types.ts

@@ -24,7 +24,27 @@ export type NotificationProps = Omit<BoxProps, 'size' | 'variant'> &
     title?: ReactNode
   }
 
-export type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning'
+export type NotificationStatus =
+  | 'error'
+  | 'info'
+  | 'loading'
+  | 'success'
+  | 'warning'
+  | 'bannerError'
+  | 'bannerInfo'
+  | 'bannerLoading'
+  | 'bannerSuccess'
+  | 'bannerWarning'
+
+export type NotificationVariant =
+  | 'subtleBlue'
+  | 'subtleRed'
+  | 'subtleYellow'
+  | 'subtleGreen'
+  | 'bannerBlue'
+  | 'bannerRed'
+  | 'bannerYellow'
+  | 'bannerGreen'
 
 export type NotificationStatusMapping = Record<
   string,

package/src/notification/theme.ts

@@ -40,6 +40,37 @@ const variants = {
       color: 'landGreen.30',
     },
   },
+  bannerBlue: {
+    container: {
+      bg: 'skyBlue.95',
+      borderColor: 'skyBlue.95',
+      color: 'seaBlue.main',
+    },
+    button: {
+      borderColor: 'transparent',
+    },
+  },
+  bannerRed: {
+    container: {
+      bg: 'energyRed.95',
+      borderColor: 'energyRed.95',
+      color: 'energyRed.45',
+    },
+  },
+  bannerYellow: {
+    container: {
+      bg: 'sunflower.85',
+      borderColor: 'sunflower.85',
+      color: 'sunflower.15',
+    },
+  },
+  bannerGreen: {
+    container: {
+      bg: 'landGreen.95',
+      borderColor: 'landGreen.95',
+      color: 'landGreen.30',
+    },
+  },
 }
 
 export default {