@luscii-healthtech/web-ui 0.11.0 → 0.11.1

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/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.cjs.development.js

@@ -4060,6 +4060,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 +5276,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 +5320,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;