@luscii-healthtech/web-ui 0.11.0 → 0.13.0

package/dist/components/Icons/DynamicIcon.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IconProps } from "./types/IconProps.type";
+/**
+ * When used in components that can support both an icon or an image url, we can use this type.
+ * TODO: Use this in the ListComponentItem, to extract the custom logic there rendering images/components
+ */
+export declare type DynamicIconProps = {
+    icon: React.VoidFunctionComponent<IconProps> | string;
+    className?: string;
+};
+export declare const DynamicIcon: React.VoidFunctionComponent<DynamicIconProps>;

package/dist/components/List/List.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
-export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, }: ListProps) => JSX.Element;
+export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, emptyStateMessage, }: ListProps) => JSX.Element;
 export default List;

package/dist/components/List/List.types.d.ts

@@ -29,6 +29,7 @@ export declare type ListProps = {
     items: ListItemProps[];
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
     onDragEnd?: (itemId: string | number, newIndex: number) => void;
+    emptyStateMessage?: string;
 };
 export interface Dragula {
     destroy?: () => void;

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

@@ -1,14 +1,18 @@
 /// <reference types="react" />
+import { DynamicIconProps } from "../Icons/DynamicIcon";
 export declare type NotificationBannerColor = "base" | "blue" | "red" | "green" | "amber";
 export interface NotificationBannerLinkProps {
     text: string;
     enabled: boolean;
     handleClick?: () => void;
 }
-interface NotificationBannerProps {
+export interface NotificationBannerProps {
     text: string;
     color?: NotificationBannerColor;
-    icon?: JSX.Element;
+    /**
+     * The icon can either be one of our icon components or an image url
+     */
+    icon?: DynamicIconProps["icon"];
     linkProps?: NotificationBannerLinkProps;
     className?: string;
 }
@@ -19,4 +23,3 @@ export declare const NotificationBanner: {
         onButtonClick: undefined;
     };
 };
-export {};

package/dist/components/PageHeader/PageHeader.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { BreadcrumbProps } from "../Breadcrumbs/Breadcrumbs";
 import { TabbarProps } from "../Tabbar/Tabbar";
 export interface PageHeaderProps {
-    navigation?: TabbarProps;
+    navigation?: Omit<TabbarProps, "withoutPadding">;
     breadcrumbs?: BreadcrumbProps["crumbs"];
     dataTestId?: string;
     title: string;

package/dist/components/Title/Title.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./Title.scss";
-export declare type TitleStyle = "sm" | "base" | "lg" | "xl" | "2xl";
+export declare type TitleStyle = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
 export interface TextProps {
     text: string;
     type?: TitleStyle;

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export { Spinner } from "./components/Spinner/Spinner";
 export { Steps } from "./components/Steps/Steps";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Tabbar, TabbarProps, TabItemDetails, } from "./components/Tabbar/Tabbar";
+export { Breadcrumbs, BreadcrumbProps, } from "./components/Breadcrumbs/Breadcrumbs";
+export { PageHeader, PageHeaderProps, } from "./components/PageHeader/PageHeader";
 export { default as TabLinks } from "./components/TabLinks/TabLinks";
 export { default as Tag } from "./components/Tag/Tag";
 export { default as TagGroup } from "./components/Tag/TagGroup";

package/dist/web-ui-tailwind.css

@@ -609,6 +609,12 @@ video {
   }
 }
 
+.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-x-2 > :not(template) ~ :not(template) {
   --space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--space-x-reverse));
@@ -715,6 +721,12 @@ video {
   background-color: rgba(51, 65, 85, var(--bg-opacity));
 }
 
+.bg-amber-50 {
+  --bg-opacity: 1;
+  background-color: #FEF8E3;
+  background-color: rgba(254, 248, 227, var(--bg-opacity));
+}
+
 .bg-primary {
   --bg-opacity: 1;
   background-color: #0074DD;
@@ -807,12 +819,6 @@ video {
   border-color: rgba(197, 48, 48, var(--border-opacity));
 }
 
-.border-yellow-700 {
-  --border-opacity: 1;
-  border-color: #b7791f;
-  border-color: rgba(183, 121, 31, var(--border-opacity));
-}
-
 .border-green-700 {
   --border-opacity: 1;
   border-color: #2f855a;
@@ -861,10 +867,10 @@ video {
   border-color: rgba(71, 85, 105, var(--border-opacity));
 }
 
-.border-slate-700 {
+.border-amber-700 {
   --border-opacity: 1;
-  border-color: #334155;
-  border-color: rgba(51, 65, 85, var(--border-opacity));
+  border-color: #b45309;
+  border-color: rgba(180, 83, 9, var(--border-opacity));
 }
 
 .border-primary-dark {
@@ -963,6 +969,11 @@ video {
   border-bottom-right-radius: 0.25rem;
 }
 
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-l {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -1173,6 +1184,10 @@ video {
   height: 3rem;
 }
 
+.h-13 {
+  height: 3.25rem;
+}
+
 .h-56 {
   height: 14rem;
 }
@@ -1201,6 +1216,10 @@ video {
   font-size: 0.875rem;
 }
 
+.text-base {
+  font-size: 1rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
 }
@@ -1773,6 +1792,12 @@ video {
   color: rgba(30, 41, 59, var(--text-opacity));
 }
 
+.text-amber-700 {
+  --text-opacity: 1;
+  color: #b45309;
+  color: rgba(180, 83, 9, var(--text-opacity));
+}
+
 .text-primary {
   --text-opacity: 1;
   color: #0074DD;

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

@@ -859,6 +859,7 @@ var Title = function Title(props) {
   var containerClassName = classNames("title", //this is used to load the correct font from the css
   "font-bold", {
     "text-slate-700": !((_props$className = props.className) != null && _props$className.match(/\s(text-)/)),
+    "text-base": props.type === "xs",
     "text-xl": props.type === "sm",
     "text-2xl": props.type === "base",
     "text-3xl": props.type === "lg",
@@ -2691,7 +2692,8 @@ var List = function List(_ref) {
       headerTransparent = _ref.headerTransparent,
       items = _ref.items,
       onAssetLoadError = _ref.onAssetLoadError,
-      onDragEnd = _ref.onDragEnd;
+      onDragEnd = _ref.onDragEnd,
+      emptyStateMessage = _ref.emptyStateMessage;
   var listRef = React.useRef(null);
   var dragulaRef = React.useRef(null);
   var hasHeader = !!(title || headerButton);
@@ -2740,11 +2742,14 @@ var List = function List(_ref) {
     return dragulaInstance;
   };
 
+  var roundTop = !hasHeader || hasHeader && headerTransparent;
   return /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "list-component"
   }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "list-header",
-    className: classNames("flex rounded-t flex-row items-center py-4 space-x-4", {
+    className: classNames("flex rounded-t flex-row items-center space-x-4", {
+      "py-4": !headerButton,
+      "py-2": headerButton,
       "bg-white border-b border-slate-100 px-4": !headerTransparent,
       "mb-px": headerTransparent,
       "justify-between": title && headerButton,
@@ -2752,20 +2757,25 @@ var List = function List(_ref) {
       "justify-end": !title && headerButton
     })
   }, title && /*#__PURE__*/React__default.createElement(Title, {
-    type: "sm",
+    type: "xs",
     text: title
   }), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
     className: "space-x-3"
   }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
-    className: classNames("list-none"),
     ref: listRef
   }, items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
-      roundTop: !hasHeader || hasHeader && headerTransparent,
+      roundTop: roundTop,
       key: item.itemId,
       onAssetLoadError: onAssetLoadError,
       isDraggable: !!onDragEnd
     }));
+  })), items.length === 0 && emptyStateMessage && /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("p-4 bg-white rounded-b", {
+      "first:rounded-t": roundTop
+    })
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    text: emptyStateMessage
   })));
 };
 
@@ -3091,13 +3101,29 @@ var TextLink = function TextLink(props) {
   }, props.text);
 };
 
+var DynamicIcon = function DynamicIcon(props) {
+  var icon = props.icon,
+      className = props.className;
+
+  if (typeof icon === "string") {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: icon,
+      className: className
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement(icon, {
+    className: className
+  });
+};
+
 var NotificationBanner = function NotificationBanner(props) {
-  var classes = classNames("w-full px-6 py-2 flex flex-row items-center border border-solid rounded", props.className, {
-    "bg-slate-50 border-slate-700": props.color === "base",
-    "bg-blue-50 border-blue-700": props.color === "blue",
-    "bg-red-50 border-red-700": props.color === "red",
-    "bg-green-50 border-green-700": props.color === "green",
-    "bg-yellow-50 border-yellow-700": props.color === "amber"
+  var classes = classNames("w-full px-6 py-4 h-13 flex flex-row items-center border border-solid rounded", props.className, {
+    "bg-slate-100 border-slate-300 text-slate-700": props.color === "base",
+    "bg-blue-50 border-blue-700 text-blue-800": props.color === "blue",
+    "bg-red-50 border-red-700 text-red-700": props.color === "red",
+    "bg-green-50 border-green-700 text-green-700": props.color === "green",
+    "bg-amber-50 border-amber-700 text-amber-700": props.color === "amber"
   });
   var textColor = {
     red: "red",
@@ -3107,20 +3133,27 @@ var NotificationBanner = function NotificationBanner(props) {
     // Blue must be 800 here to pass the contrast test
     blue: "blue-800"
   };
+  var color = props.color ? textColor[props.color] : "base";
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes
-  }, props.icon, /*#__PURE__*/React__default.createElement(Text, {
-    className: "ml-4 first:ml-0",
+  }, props.icon && /*#__PURE__*/React__default.createElement(DynamicIcon, {
+    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: classNames({
+      "ml-3": props.icon
+    }),
     text: props.text,
-    color: props.color ? textColor[props.color] : "base"
+    color: color
   }), props.linkProps && /*#__PURE__*/React__default.createElement(TextLink, {
-    className: "ml-4",
     text: props.linkProps.text,
     enabled: props.linkProps.enabled,
     rel: "noopener",
     target: "_blank",
     onClick: props.linkProps.handleClick
-  }));
+  })));
 };
 NotificationBanner.defaultProps = {
   color: "base",
@@ -4060,6 +4093,63 @@ var Tabbar = function Tabbar(_ref) {
   }));
 };
 
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var crumbs = _ref.crumbs;
+  var breadcrumbItems = crumbs.map(function (_ref2) {
+    var name = _ref2.name,
+        link = _ref2.link;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: name,
+      className: "flex flex-row items-center slash-split "
+    }, link ? /*#__PURE__*/React__default.createElement(router.Link, {
+      to: link
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      text: name,
+      color: "blue-800"
+    })) : /*#__PURE__*/React__default.createElement(Text, {
+      text: name
+    }));
+  });
+  return /*#__PURE__*/React__default.createElement("ul", {
+    "data-test-id": "breadcrumbs",
+    className: "flex flex-row items-center space-x-2 "
+  }, breadcrumbItems);
+};
+
+var PageHeader = function PageHeader(_ref) {
+  var navigation = _ref.navigation,
+      breadcrumbs = _ref.breadcrumbs,
+      dataTestId = _ref.dataTestId,
+      accessories = _ref.accessories,
+      isPolling = _ref.isPolling,
+      title = _ref.title;
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "page-header",
+    className: "p-4 space-y-4 bg-white"
+  }, !!(breadcrumbs != null && breadcrumbs.length) && /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4 space-y-4"
+  }, /*#__PURE__*/React__default.createElement(Breadcrumbs, {
+    crumbs: breadcrumbs
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4 border-b border-slate-100"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center justify-between"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center space-x-3"
+  }, /*#__PURE__*/React__default.createElement(Title, {
+    "data-test-id": dataTestId + "-title",
+    text: title
+  }), isPolling && /*#__PURE__*/React__default.createElement(LoadingIndicator, {
+    asSpinner: true,
+    className: "page-spinner",
+    spinnerColor: "gray"
+  })), accessories && /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "page-header-accessories"
+  }, accessories)), navigation && /*#__PURE__*/React__default.createElement(Tabbar, Object.assign({}, navigation, {
+    withoutPadding: true
+  })));
+};
+
 var TabLinksSelect = function TabLinksSelect(_ref) {
   var items = _ref.items,
       navigate = _ref.navigate,
@@ -5219,6 +5309,7 @@ exports.AlertsIcon = AlertsIcon;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BellIcon = BellIcon;
+exports.Breadcrumbs = Breadcrumbs;
 exports.CRUDPage = CRUDPage;
 exports.Carousel = Carousel;
 exports.CenteredHero = CenteredHero;
@@ -5262,6 +5353,7 @@ exports.NavMenu = NavMenu;
 exports.NotesIcon = NotesIcon;
 exports.NotificationBanner = NotificationBanner;
 exports.Page = Page;
+exports.PageHeader = PageHeader;
 exports.PaginationMenu = PaginationMenu;
 exports.PinIcon = PinIcon;
 exports.PreviewPhone = PreviewPhone;