@luscii-healthtech/web-ui 2.60.1 → 2.61.0

package/dist/components/ButtonV2/ButtonProps.type.d.ts

@@ -38,3 +38,12 @@ export interface ButtonDefinition<Props extends BaseButtonProps = BaseButtonProp
     buttonType: React.FunctionComponent<Props>;
     buttonProps: React.Attributes & Props;
 }
+/**
+ * Interface for defining a button with mandatory key
+ */
+export interface ButtonDefinitionWithKey<Props extends BaseButtonProps = BaseButtonProps> {
+    buttonType: React.FunctionComponent<Props>;
+    buttonProps: {
+        key: string | number;
+    } & Props;
+}

package/dist/components/Timeline/Timeline.d.ts

@@ -1,8 +1,11 @@
 import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
 import { TimelineStepProps } from "./TimelineStep";
+import { TimelineHeaderProps } from "./TimelineHeader";
 export interface TimelineProps {
+    headerProps?: TimelineHeaderProps;
     steps: TimelineStepProps[];
     loadMoreButtonProps?: BaseButtonProps;
+    dataTestId?: string;
 }
-export declare const Timeline: (props: TimelineProps) => JSX.Element;
+export declare const Timeline: ({ headerProps, steps, loadMoreButtonProps, dataTestId, }: TimelineProps) => JSX.Element;
 export default Timeline;

package/dist/components/Timeline/TimelineHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ButtonDefinitionWithKey, ButtonProps } from "../ButtonV2/ButtonProps.type";
+import { TitleProps } from "../Title/Title";
+export declare type TimelineHeaderProps = {
+    title?: string | TitleProps;
+    buttons?: ButtonDefinitionWithKey<ButtonProps>[];
+    withBorder?: boolean;
+};
+export declare const TimelineHeader: React.FC<TimelineHeaderProps>;
+export default TimelineHeader;

package/dist/components/Timeline/TimelineStep.d.ts

@@ -1,8 +1,10 @@
 import React, { RefAttributes } from "react";
+import { TextProps } from "../Text/Text";
 export interface TimelineStepProps extends RefAttributes<HTMLDivElement> {
     key: string | number;
     type?: "wide" | "base" | "withoutDot" | "emptyDot";
+    title?: string | TextProps;
     content: React.ReactNode;
     dataTestId?: string | number;
 }
-export declare const TimelineStep: React.ForwardRefExoticComponent<Pick<TimelineStepProps, "content" | "type" | "dataTestId" | "key"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimelineStep: React.ForwardRefExoticComponent<Pick<TimelineStepProps, "content" | "type" | "dataTestId" | "title" | "key"> & React.RefAttributes<HTMLDivElement>>;

package/dist/web-ui-tailwind.css

@@ -1318,6 +1318,10 @@ video {
   height: 3rem;
 }
 
+.h-13 {
+  height: 3.25rem;
+}
+
 .h-19 {
   height: 4.75rem;
 }
@@ -1532,10 +1536,6 @@ video {
   margin-left: 1.25rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1572,10 +1572,6 @@ video {
   margin-bottom: 0.625rem;
 }
 
-.-mt-px {
-  margin-top: -1px;
-}
-
 .-ml-px {
   margin-left: -1px;
 }
@@ -1799,6 +1795,10 @@ video {
   padding-top: 1rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1922,10 +1922,6 @@ video {
   left: 1rem;
 }
 
-.top-6 {
-  top: 1.5rem;
-}
-
 .-top-1 {
   top: -0.25rem;
 }

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

@@ -4123,12 +4123,9 @@ var NotificationBanner = function NotificationBanner(props) {
   var color = props.color ? textColor[props.color] : "base";
   return /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "notification-banner",
-    className: classNames({
-      "w-full": stretch,
-      "inline-block": !stretch
+    className: classNames(classes, {
+      "inline-flex": !stretch
     })
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classes
   }, props.icon && (typeof props.icon === "function" ? /*#__PURE__*/React__default.createElement(props.icon, {
     className: "w-6 h-6 mr-3"
   }) : /*#__PURE__*/React__default.createElement("img", {
@@ -4152,7 +4149,7 @@ var NotificationBanner = function NotificationBanner(props) {
     rel: "noopener",
     target: "_blank",
     onClick: props.linkProps.handleClick
-  })))));
+  }))));
 };
 NotificationBanner.defaultProps = {
   color: "base",
@@ -7934,7 +7931,8 @@ var TimelineStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var content = _ref.content,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "base" : _ref$type,
-      dataTestId = _ref.dataTestId;
+      dataTestId = _ref.dataTestId,
+      title = _ref.title;
   var isWideStep = type === "wide";
   var borderClassNames = "ml-4 pl-6 border-blue-800 border-l-2";
   var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
@@ -7946,21 +7944,69 @@ var TimelineStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col"
-  }, content), /*#__PURE__*/React__default.createElement("span", {
-    className: classNames("rounded-lg h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px", {
+  }, title && /*#__PURE__*/React__default.createElement(Text, _extends({
+    type: "lg-strong",
+    className: "border-b flex flex-row items-center h-13"
+  }, typeof title === "object" ? title : {
+    text: title
+  })), content), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 -left-2 -ml-px flex flex-row items-center h-13"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: classNames("rounded-lg h-4 w-4 inline-block", {
       hidden: ["wide", "withoutDot"].includes(type),
       "bg-blue-800": "base" === type,
       "bg-white border-blue-800 border-4": "emptyDot" === type
     })
-  })));
+  }))));
 });
 
-var Timeline = function Timeline(props) {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, props.steps.map(function (step) {
+var TimelineHeader = function TimelineHeader(_ref) {
+  var title = _ref.title,
+      buttons = _ref.buttons,
+      withBorder = _ref.withBorder;
+  var hasButtons = buttons && buttons.length > 0;
+  var className = classNames("flex flex-row items-center space-x-4 rounded-t px-4", {
+    "py-4": !hasButtons,
+    "py-2": hasButtons,
+    "justify-between": title && hasButtons,
+    "justify-start": title && !hasButtons,
+    "justify-end": !title && hasButtons,
+    "border-b": withBorder
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "timeline-header",
+    className: className
+  }, title && /*#__PURE__*/React__default.createElement(Title, _extends({
+    type: "sm"
+  }, typeof title === "object" ? title : {
+    text: title
+  })), hasButtons && /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row space-x-4"
+  }, buttons.map(function (_ref2) {
+    var ButtonComponent = _ref2.buttonType,
+        buttonProps = _ref2.buttonProps;
+    return /*#__PURE__*/React__default.createElement(ButtonComponent, _extends({}, buttonProps));
+  })));
+};
+
+var Timeline = function Timeline(_ref) {
+  var headerProps = _ref.headerProps,
+      steps = _ref.steps,
+      loadMoreButtonProps = _ref.loadMoreButtonProps,
+      _ref$dataTestId = _ref.dataTestId,
+      dataTestId = _ref$dataTestId === void 0 ? "timeline" : _ref$dataTestId;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "bg-white rounded-xl",
+    "data-test-id": dataTestId
+  }, headerProps && /*#__PURE__*/React__default.createElement(TimelineHeader, _extends({}, headerProps)), /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("px-4 pb-4", {
+      "pt-4": !headerProps
+    })
+  }, steps.map(function (step) {
     return /*#__PURE__*/React__default.createElement(TimelineStep, _extends({}, step));
-  })), props.loadMoreButtonProps && /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 flex flex-row justify-center items-center"
-  }, /*#__PURE__*/React__default.createElement(SecondaryButton, _extends({}, props.loadMoreButtonProps))));
+  })), loadMoreButtonProps && /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center border-t py-6"
+  }, /*#__PURE__*/React__default.createElement(SecondaryButton, _extends({}, loadMoreButtonProps))));
 };
 
 var _excluded$t = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];