@luscii-healthtech/web-ui 2.41.3 → 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

@@ -2627,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",