@luscii-healthtech/web-ui 2.41.2 → 2.42.0

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -6,7 +6,8 @@ export interface NotificationBannerLinkProps {
     handleClick?: () => void;
 }
 export interface NotificationBannerProps {
-    text: string;
+    title?: string;
+    text?: string;
     color?: NotificationBannerColor;
     /**
      * The icon can either be one of our icon components or an image url

package/dist/web-ui-tailwind.css

@@ -615,12 +615,6 @@ video {
   margin-bottom: calc(0.25rem * var(--space-y-reverse));
 }
 
-.space-x-1 > :not(template) ~ :not(template) {
-  --space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--space-x-reverse)));
-}
-
 .space-y-2 > :not(template) ~ :not(template) {
   --space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--space-y-reverse)));
@@ -1422,6 +1416,10 @@ video {
   margin-top: 0.25rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }

package/dist/web-ui.cjs.development.js

@@ -1569,6 +1569,7 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     "opacity-50": isDisabled,
     "pointer-events-none": isDisabled || isPending
   }, className);
+  var textColorClass = allowedColors[textColor != null ? textColor : "base"];
   return /*#__PURE__*/React__default.createElement("button", _extends({
     ref: innerRef
   }, otherAttributes, {
@@ -1577,8 +1578,8 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
     onClick: handleClick,
     disabled: isDisabled,
     "aria-disabled": isDisabled
-  }), icon && /*#__PURE__*/React__default.createElement(icon, {
-    className: "w-6 h-6"
+  }), icon && !isPending && /*#__PURE__*/React__default.createElement(icon, {
+    className: "w-6 h-6 " + textColorClass
   }), isPending && /*#__PURE__*/React__default.createElement("span", {
     className: "opacity-100",
     // IE11 center translate fix
@@ -1589,7 +1590,7 @@ var ButtonV2 = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef)
       transform: "translate(-50%, -50%)"
     }
   }, /*#__PURE__*/React__default.createElement(Spinner, {
-    className: "text-white"
+    className: textColorClass
   })), text && /*#__PURE__*/React__default.createElement(Text, {
     className: classNames({
       invisible: isPending,
@@ -2626,20 +2627,33 @@ var NotificationBanner = function NotificationBanner(props) {
     className: "w-6 h-6",
     icon: props.icon
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row items-center space-x-1"
-  }, /*#__PURE__*/React__default.createElement(Text, {
+    className: "flex flex-col"
+  }, props.title && /*#__PURE__*/React__default.createElement(Text, {
     className: classNames({
       "ml-3": props.icon
     }),
+    text: props.title,
+    "data-test-id": "notification-title",
+    type: "strong",
+    color: color
+  }), (props.text || props.linkProps) && /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center"
+  }, props.text && /*#__PURE__*/React__default.createElement(Text, {
+    className: classNames({
+      "ml-3": props.icon,
+      "mr-1": props.linkProps
+    }),
     text: props.text,
+    "data-test-id": "notification-text",
     color: color
   }), props.linkProps && /*#__PURE__*/React__default.createElement(TextLink, {
     text: props.linkProps.text,
+    "data-test-id": "notification-text-link",
     enabled: props.linkProps.enabled,
     rel: "noopener",
     target: "_blank",
     onClick: props.linkProps.handleClick
-  }))));
+  })))));
 };
 NotificationBanner.defaultProps = {
   color: "base",