@veracity/vui 2.25.3 → 2.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.25.3",
+  "version": "2.25.4",
   "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

@@ -69,3 +69,14 @@ export const notificationStatusMapping: NotificationStatusMapping = {
     variant: 'bannerYellow',
   },
 }
+
+export const closeButtonVariantMapping = {
+  subtleRed: 'subtleRed',
+  subtleBlue: 'subtleBlue',
+  subtleGreen: 'subtleGreen',
+  subtleYellow: 'subtleYellow',
+  bannerRed: 'subtleRed',
+  bannerBlue: 'subtleBlue',
+  bannerGreen: 'subtleGreen',
+  bannerYellow: 'subtleYellow',
+}

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 { bannerNotificationElevation, notificationStatusMapping } from './consts'
+import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from './consts'
 import { NotificationProvider } from './context'
 import { NotificationProps } from './notification.types'
 import NotificationButton from './notificationButton'
@@ -70,7 +70,7 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
             aria-label="close"
             icon="falTimes"
             onClick={onClose}
-            variant={variant}
+            variant={closeButtonVariantMapping?.[variant] ?? variant}
             w="32px"
           />
         )}

package/src/notification/notification.types.ts

@@ -12,7 +12,7 @@ export type NotificationProps = Omit<BoxProps, 'size' | 'variant'> &
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow'
     /** Socket displaying an icon on the left. */
     icon?: IconProp | JSX.Element
-    /** If provided, displays a close button with this function as onClick. */
+    /** When provided, displays a close button with this function as the callback. */
     onClose?: () => void
     /** Modifies Notification style and content based on the given status. */
     status?: NotificationStatus