@luscii-healthtech/web-ui 20.7.0 → 20.8.1

package/dist/components/Divider/Divider.d.ts

@@ -2,5 +2,16 @@ import React from "react";
 type DividerProps = React.ComponentPropsWithoutRef<"div"> & {
     dark?: boolean;
 };
-export declare const Divider: React.FC<DividerProps>;
+type HrProps = React.ComponentPropsWithoutRef<"hr"> & {
+    /**
+     * Request the v2 version of the divider, which has the following benefits:
+     * - Uses an `<hr>` tag instead of a `<div>`.
+     * - Uses the border color from the design system, and doesn't have a prop
+     *   to change it.
+     * - Doesn't contain any logic about when it should be hidden.
+     */
+    version: "v2";
+};
+type Props = DividerProps | HrProps;
+export declare const Divider: React.FC<Props>;
 export {};

package/dist/components/Page/CRUDPage.types.d.ts

@@ -5,6 +5,10 @@ import type { StepsProps } from "../Steps/Steps";
 type CRUDPageButtonProps = Pick<BaseButtonProps, "onClick" | "text" | "isDisabled">;
 type CRUDPageTitle = {
     text: string;
+    /**
+     * @deprecated
+     * We don't want to show icons in the page title anymore.
+     */
     icon?: string;
 };
 type CRUDPageHeader = Omit<PageHeaderProps, "navigation" | "isPolling" | "accessories">;

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

@@ -15,11 +15,15 @@ type WithPageHeaderBanner = {
     };
 };
 export type PageHeaderProps = {
+    /**
+     * These are props passed to the `Tabbar` component. The name
+     * `navigation` does not convey this well.
+     */
     navigation?: Omit<TabbarProps, "withoutPadding">;
     breadcrumbs?: BreadcrumbProps["crumbs"];
     truncateBreadcrumbsAfter?: number;
     dataTestId?: string;
-    title: string;
+    title: string | React.ReactNode;
     isPolling?: boolean;
     className?: string;
     contained?: boolean;

package/dist/components/Tabbar/Tabbar.d.ts

@@ -9,10 +9,13 @@ export interface TabbarProps<T extends object = Record<string, unknown>> {
     }) => void;
     className?: string;
     /**
+     * @deprecated
+     * If this component needs padding, it should be added from the code consuming this component.
+     *
      * If this component is being used on a container that will handle spacing, this option disables the padding, allowing the container to take over spacing.
      */
     withoutPadding?: boolean;
 }
 export { TabItemDetails };
-export declare const Tabbar: <T extends object = Record<string, unknown>>({ tabs, selectedIndex, onSelect, className, withoutPadding, }: TabbarProps<T>) => JSX.Element;
+export declare const Tabbar: <T extends object = Record<string, unknown>>({ tabs, selectedIndex, onSelect, className, }: TabbarProps<T>) => JSX.Element;
 export default Tabbar;

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

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = React.ComponentPropsWithoutRef<"h1"> & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+export declare const PageTitle: React.FC<Props>;
+export {};

package/dist/index.development.js

@@ -3877,7 +3877,7 @@ const NavLayout = (props) => {
       ]) },
       pageHeader && React__namespace.default.createElement("div", { "data-test-id": "nav-layout-page-header" }, pageHeader),
       React__namespace.default.createElement("div", { "data-test-id": "page-body", className: classNames__default.default({
-        "ui-px-4": !!pageHeader,
+        "ui-px-xl": !!pageHeader,
         "ui-h-full": inViewer
         // this allows extra spacing in the small viewport of hix specially when dealing with dropdowns
       }) }, children)
@@ -3886,6 +3886,9 @@ const NavLayout = (props) => {
 };
 
 const Divider = (props) => {
+  if ("version" in props) {
+    return React__namespace.default.createElement(HrDivider, Object.assign({}, props));
+  }
   const { className, dark } = props, rest = __rest(props, ["className", "dark"]);
   const darkTheme = Boolean(dark);
   return React__namespace.default.createElement("div", Object.assign({ className: classNames__default.default("ui-border-color ui-block ui-w-full ui-border-b ui-border-solid last:ui-border-b-0", className, {
@@ -3893,6 +3896,10 @@ const Divider = (props) => {
     "ui-border-slate-600": darkTheme
   }) }, rest));
 };
+function HrDivider(props) {
+  const { className } = props;
+  return React__namespace.default.createElement("hr", { className: classNames__default.default("ui-border-color-border", className) });
+}
 
 const NavMenuFooter = ({ text, subtext, visible = true }) => {
   if (!visible) {
@@ -4193,22 +4200,21 @@ const Breadcrumbs = ({ crumbs, truncateAfter = Infinity }) => {
 };
 
 const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount = 0, isLoading = false, dataTestId = "" }) => {
-  const handleTabClick = () => onSelect && onSelect(index);
-  const itemClassName = classNames__default.default("ui-flex first:ui-ml-0 ui-ml-2 ui-flex-row ui-cursor-pointer ui-py-2 ui-px-3 ui-rounded-lg focus:ui-outline-primary ui-transition ui-ease-in ui-duration-150", className, {
-    "ui-bg-slate-100 ui-text-slate-800 hover:ui-text-slate-800 focus:ui-text-slate-800": isSelected,
-    "ui-bg-slate-50 ui-text-slate-500 hover:ui-bg-slate-100 hover:ui-text-slate-500 focus:ui-text-slate-500 ui-opacity-75": !isSelected
+  const handleTabClick = () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index);
+  const itemClassName = classNames__default.default("ui-flex ui-items-center ui-py-m", "ui-border-b-2 hover:ui-text-primary", "ui-transition ui-ease-in ui-duration-150", className, {
+    "ui-border-b-transparent ui-text-on-surface": !isSelected,
+    "ui-border-b-primary ui-text-primary": isSelected
   });
   return React__namespace.default.createElement(
-    "div",
+    "button",
     { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId },
-    typeof title === "string" && React__namespace.default.createElement(Text, { text: title, type: isSelected ? "strong" : "base", inline: true, className: "ui-leading-inherit" }),
-    typeof title !== "string" && title,
+    typeof title === "string" ? React__namespace.default.createElement(Text, { variant: "strong", color: "current", inline: true, className: "ui-leading-inherit" }, title) : title,
     badgeCount > 0 && React__namespace.default.createElement(Badge, { className: "ui-ml-1", badgeCount }),
     isLoading && React__namespace.default.createElement(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui-w-6" })
   );
 };
 
-const Tabbar = ({ tabs = [], selectedIndex, onSelect, className = "", withoutPadding = false }) => {
+const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
   const [innerSelectedIndex, setInnerSelectedIndex] = React.useState(selectedIndex);
   React.useEffect(() => {
     setInnerSelectedIndex(selectedIndex);
@@ -4217,51 +4223,79 @@ const Tabbar = ({ tabs = [], selectedIndex, onSelect, className = "", withoutPad
     setInnerSelectedIndex(index);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect({ index, selectedTab: tabs[index] });
   };
-  return React__namespace.default.createElement("div", { className: classNames__default.default(`ui-flex ui-w-full ui-flex-row ui-rounded-xl ui-bg-white ${className}`, {
-    "ui-p-2": !withoutPadding
-  }) }, tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
+  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-w-full ui-gap-xl", className) }, tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
     var _a;
     const itemProps = Object.assign({ index, onSelect: handleOnTabSelect, isSelected: innerSelectedIndex === index }, tabItemProps);
     return React__namespace.default.createElement(TabbarItem, Object.assign({ key: (_a = tabItemProps.dataTestId) !== null && _a !== void 0 ? _a : index }, itemProps));
   }));
 };
 
+const PageTitle = (props) => {
+  const { as: Component = "h2", className } = props, rest = __rest(props, ["as", "className"]);
+  return React__namespace.default.createElement(Component, Object.assign({}, rest, { className: classNames__default.default(
+    "title-avenir ui-text-3xl ui-font-bold ui-antialiased",
+    /**
+     * Design calls for a specific line height. Let's see later
+     * if we should include this in the titles sizing system.
+     */
+    "ui-leading-[1.2]",
+    "ui-bg-gradient-to-br ui-from-blue-800 ui-to-blue-700 ui-bg-clip-text ui-text-transparent",
+    className
+  ) }));
+};
+
 const PageHeader = ({ navigation, breadcrumbs, dataTestId, accessories, isPolling, title, contained, className, truncateBreadcrumbsAfter, banner }) => {
+  var _a;
   const withContained = { "ui-max-w-3xl ui-m-auto": contained };
+  const hasTabBar = Boolean((_a = navigation === null || navigation === void 0 ? void 0 : navigation.tabs) === null || _a === void 0 ? void 0 : _a.length);
   return React__namespace.default.createElement(
-    "div",
-    { "data-test-id": "page-header", className: classNames__default.default("ui-space-y-4 ui-bg-white", className, {
-      "ui-p-4": !contained,
-      "ui-w-full ui-py-4": contained
-    }) },
-    !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && React__namespace.default.createElement(
-      "div",
-      { className: classNames__default.default("ui-mb-4 ui-space-y-4", withContained) },
-      React__namespace.default.createElement(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter }),
-      React__namespace.default.createElement("div", { className: "ui-mb-4 ui-border-b ui-border-slate-100" })
-    ),
-    banner && React__namespace.default.createElement(
-      NotificationBanner,
-      { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}` },
-      React__namespace.default.createElement(
-        "div",
-        { className: "ui-flex ui-flex-col" },
-        banner.title && React__namespace.default.createElement(Text, { color: "current", type: "strong", text: banner.title }),
-        React__namespace.default.createElement(Text, { color: "current", text: banner.text.content, containsDangerousHtml: banner.text.isHTML })
-      )
-    ),
+    React__namespace.default.Fragment,
+    null,
     React__namespace.default.createElement(
       "div",
-      { className: classNames__default.default("ui-flex ui-flex-row ui-items-center ui-justify-between", withContained) },
+      { "data-test-id": "page-header", className: classNames__default.default("ui-pt-xl", className, {
+        /**
+         * The tab bar should sit snugly against the bottom of the page header, but
+         * this is the only exception. Other than that the page header should have
+         * a bottom padding.
+         */
+        "ui-pb-l": !hasTabBar,
+        "ui-px-xl": !contained,
+        "ui-w-full": contained
+      }) },
+      banner && React__namespace.default.createElement(
+        NotificationBanner,
+        { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui-mb-m" },
+        React__namespace.default.createElement(
+          "div",
+          { className: "ui-flex ui-flex-col" },
+          banner.title && React__namespace.default.createElement(Text, { color: "current", variant: "strong" }, banner.title),
+          React__namespace.default.createElement(Text, { color: "current", containsDangerousHtml: banner.text.isHTML }, banner.text.content)
+        )
+      ),
       React__namespace.default.createElement(
         "div",
-        { className: "ui-flex ui-flex-row ui-items-center ui-space-x-3" },
-        React__namespace.default.createElement(Title, { "data-test-id": `${dataTestId}-title`, text: title }),
-        isPolling && React__namespace.default.createElement(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })
+        { className: classNames__default.default({ "ui-flex ui-flex-col": !contained }) },
+        !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && React__namespace.default.createElement(
+          "div",
+          { className: classNames__default.default("ui-mb-m", withContained) },
+          React__namespace.default.createElement(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter })
+        ),
+        React__namespace.default.createElement(
+          "div",
+          { className: classNames__default.default("ui-flex ui-flex-row ui-items-center ui-justify-between", withContained) },
+          React__namespace.default.createElement(
+            "div",
+            { className: "ui-flex ui-flex-row ui-items-center ui-gap-xxs" },
+            React__namespace.default.createElement(PageTitle, { "data-test-id": `${dataTestId}-title` }, title),
+            isPolling && React__namespace.default.createElement(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })
+          ),
+          accessories && React__namespace.default.createElement("div", { "data-test-id": "page-header-accessories" }, accessories)
+        )
       ),
-      accessories && React__namespace.default.createElement("div", { "data-test-id": "page-header-accessories" }, accessories)
+      navigation && React__namespace.default.createElement(Tabbar, Object.assign({}, navigation, { className: classNames__default.default(navigation.className, withContained) }))
     ),
-    navigation && React__namespace.default.createElement(Tabbar, Object.assign({}, navigation, { withoutPadding: true, className: classNames__default.default(navigation.className, withContained) }))
+    React__namespace.default.createElement(Divider, { version: "v2" })
   );
 };
 
@@ -4271,14 +4305,14 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
   const cancelButton = cancelButtonProps && React__namespace.default.createElement(TertiaryButton, Object.assign({ "data-test-id": "cancel-button", key: "cancel-button", role: BUTTON_ROLES.SECONDARY }, cancelButtonProps));
   let pageHeader;
   if (title) {
-    pageHeader = React__namespace.default.createElement(
+    pageHeader = React__namespace.default.createElement(PageHeader, { banner: null, title: React__namespace.default.createElement(
       "div",
-      { className: "ui-align-center ui-mx-auto ui-mt-8 ui-flex ui-w-full ui-max-w-3xl ui-flex-row ui-justify-start" },
-      title.icon && React__namespace.default.createElement("img", { id: "title-icon", src: title.icon, className: "ui-mr-4 ui-h-11 ui-w-11", alt: "title icon" }),
-      React__namespace.default.createElement(Title, { text: title.text, type: "lg" })
-    );
+      { className: "ui-flex ui-flex-nowrap ui-items-center ui-gap-m" },
+      title.icon && React__namespace.default.createElement("img", { id: "title-icon", src: title.icon, className: "ui-h-9 ui-w-9", alt: "title icon" }),
+      React__namespace.default.createElement(PageTitle, null, title.text)
+    ) });
   } else {
-    pageHeader = React__namespace.default.createElement(PageHeader, Object.assign({ contained: true }, header));
+    pageHeader = React__namespace.default.createElement(PageHeader, Object.assign({}, header));
   }
   return React__namespace.default.createElement(
     "div",
@@ -4287,18 +4321,24 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
       "div",
       { className: classNames__default.default(mergedClasses, "ui-relative ui-overflow-y-hidden", "cweb-crud-page-loading-container"), style: { height: "90vh" } },
       React__namespace.default.createElement("div", { className: "ui-align-center ui-flex ui-flex-row ui-justify-start" }, pageHeader),
+      React__namespace.default.createElement(Divider, { version: "v2" }),
       React__namespace.default.createElement(LoadingIndicator, { className: classNames__default.default("crud-page-loader", "ui-absolute ui-bottom-0 ui-left-0 ui-right-0 ui-top-0 ui-m-auto ui-h-12 ui-w-12"), asModal: false })
     ),
     !isLoading && React__namespace.default.createElement(
       "div",
       { className: mergedClasses, "data-test-id": dataTestId },
       React__namespace.default.createElement("div", { className: "ui-align-center ui-flex ui-flex-row ui-justify-start" }, pageHeader),
+      React__namespace.default.createElement(Divider, { version: "v2" }),
       React__namespace.default.createElement(
         "div",
-        { className: classNames__default.default("cweb-crud-page-form-container", "lg ui-mx-auto ui-mt-4 ui-max-w-3xl ui-rounded ui-bg-white ui-p-6") },
-        steps && React__namespace.default.createElement(Steps, { className: "ui-mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }),
-        children,
-        React__namespace.default.createElement(Line, { left: [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui-mt-4 ui-border-t ui-border-solid ui-border-color-divider ui-pt-4") })
+        { className: "ui-flex ui-justify-center" },
+        React__namespace.default.createElement(
+          "div",
+          { className: classNames__default.default("cweb-crud-page-form-container", "ui-mt-xl ui-w-full ui-max-w-3xl ui-rounded ui-bg-white ui-p-6") },
+          steps && React__namespace.default.createElement(Steps, { className: "ui-mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }),
+          children,
+          React__namespace.default.createElement(Line, { left: [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui-mt-4 ui-border-t ui-border-solid ui-border-color-divider ui-pt-4") })
+        )
       )
     )
   );
@@ -5431,7 +5471,7 @@ const FullPageModalHeader = ({ primaryButtonProps, actions, title }) => {
   return React__namespace.default.createElement(
     "div",
     { className: "ui-flex ui-h-19 ui-flex-row ui-items-center ui-justify-between ui-bg-white ui-px-6" },
-    React__namespace.default.createElement(Title, { text: title }),
+    React__namespace.default.createElement(PageTitle, null, title),
     primaryButtonProps && !actions && React__namespace.default.createElement(PrimaryButton, Object.assign({ "data-test-id": "modal-primary-button" }, primaryButtonProps)),
     actions && React__namespace.default.createElement("div", null, actions)
   );