@luscii-healthtech/web-ui 0.7.0 → 0.8.0

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

@@ -10,6 +10,7 @@ export interface TableFieldConfig<Item> {
 export declare type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
 export interface TableFieldText {
     text: string;
+    breakAllWord?: boolean;
     tag?: {
         text: string;
         color: TagColorTheme;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+import { TimelineStepProps } from "./TimelineStep";
+export interface TimelineProps {
+    steps: TimelineStepProps[];
+    loadMoreButtonProps?: BaseButtonProps;
+}
+export declare const Timeline: (props: TimelineProps) => JSX.Element;
+export default Timeline;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface TimelineStepProps {
+    key: string | number;
+    type?: "wide" | "base";
+    content: React.ReactNode;
+}
+export declare const TimelineStep: {
+    ({ content, type, }: TimelineStepProps): JSX.Element;
+    defaultProps: {
+        type: "wide" | "base" | undefined;
+    };
+};

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
 export { Title, TitleStyle } from "./components/Title/Title";
+export { Timeline } from "./components/Timeline/Timeline";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 export { default as Text } from "./components/Text/Text";
 export { IconProps } from "./components/Icons/types/IconProps.type";

package/dist/web-ui-tailwind.css

@@ -819,6 +819,12 @@ video {
   border-color: rgba(8, 128, 236, var(--border-opacity));
 }
 
+.border-blue-800 {
+  --border-opacity: 1;
+  border-color: #0074DD;
+  border-color: rgba(0, 116, 221, var(--border-opacity));
+}
+
 .border-slate-50 {
   --border-opacity: 1;
   border-color: #f8fafc;
@@ -972,6 +978,10 @@ video {
   border-width: 1px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1148,6 +1158,10 @@ video {
   height: 100vh;
 }
 
+.last\:h-0:last-child {
+  height: 0;
+}
+
 .text-xs {
   font-size: 0.75rem;
 }
@@ -1225,6 +1239,11 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .ml-0 {
   margin-left: 0;
 }
@@ -1277,6 +1296,10 @@ video {
   margin-left: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1309,6 +1332,10 @@ video {
   margin-left: 0.625rem;
 }
 
+.-ml-px {
+  margin-left: -1px;
+}
+
 .first\:ml-0:first-child {
   margin-left: 0;
 }
@@ -1469,6 +1496,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1481,6 +1512,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -1561,10 +1596,18 @@ video {
   left: 0;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .-top-1 {
   top: -0.25rem;
 }
 
+.-left-3 {
+  left: -0.75rem;
+}
+
 .-right-54 {
   right: -13.5rem;
 }

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

@@ -370,6 +370,11 @@ var ButtonV2 = function ButtonV2(_ref) {
       className = _ref.className,
       otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  function handleClick(event) {
+    event.stopPropagation();
+    onClick == null ? void 0 : onClick(event);
+  }
+
   if (!text && !icon) {
     console.error("A text or an icon is required to use this component, please make sure to pass at least one of them as a prop.");
     return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
@@ -386,7 +391,7 @@ var ButtonV2 = function ButtonV2(_ref) {
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherAttributes, {
     className: buttonClassName,
     type: "button",
-    onClick: onClick,
+    onClick: handleClick,
     disabled: isDisabled,
     "aria-disabled": isDisabled
   }), icon && /*#__PURE__*/React__default.createElement(icon, {
@@ -2093,7 +2098,10 @@ function TableBodyRowDataCell(props) {
     text: content.tag.text,
     colorTheme: content.tag.color
   })), /*#__PURE__*/React__default.createElement(Text, {
-    className: "py-4 text-left leading-5 break-all",
+    className: classNames("py-4 text-left leading-5", {
+      "break-all": content.breakAllWord,
+      "break-words": !content.breakAllWord
+    }),
     text: content.text === "" ? emptyFieldContentText : content.text,
     type: "base"
   })), isTableFieldAction(content) && /*#__PURE__*/React__default.createElement("div", {
@@ -2106,8 +2114,7 @@ function TableBodyRowDataCell(props) {
       className: "ml-2 first:ml-0",
       key: action.key,
       icon: action.icon,
-      onClick: function onClick(event) {
-        event.stopPropagation();
+      onClick: function onClick() {
         action.handleClick(props.item);
       }
     });
@@ -4178,6 +4185,58 @@ var TextEditorV2 = function TextEditorV2(_ref) {
   }));
 };
 
+var SmallCircleIcon = function SmallCircleIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "6",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "14.5",
+    cy: "9.5",
+    r: "1.5",
+    fill: "white",
+    fillOpacity: "0.1"
+  }));
+};
+
+var TimelineStep = function TimelineStep(_ref) {
+  var _classNames;
+
+  var content = _ref.content,
+      type = _ref.type;
+  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["pt-3"] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: containerClassNames
+  }, content, !isWideStep && /*#__PURE__*/React__default.createElement(SmallCircleIcon, {
+    className: "text-blue-800 absolute top-3 -left-3 -ml-px"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: classNames(borderClassNames, "h-6 last:h-0")
+  }));
+};
+TimelineStep.defaultProps = {
+  type: "base"
+};
+
+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) {
+    return /*#__PURE__*/React__default.createElement(TimelineStep, Object.assign({}, step));
+  })), props.loadMoreButtonProps && /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({
+    className: "mt-6 mx-auto"
+  }, props.loadMoreButtonProps)));
+};
+
 var _excluded$g = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];
 function ViewItem(_ref) {
   var titleProps = _ref.titleProps,
@@ -4887,30 +4946,6 @@ var PinIcon = function PinIcon(props) {
   }));
 };
 
-var SmallCircleIcon = function SmallCircleIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "6",
-    fill: "currentColor"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "14.5",
-    cy: "9.5",
-    r: "1.5",
-    fill: "white",
-    fillOpacity: "0.1"
-  }));
-};
-
 var SmallDiamondIcon = function SmallDiamondIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
@@ -5130,6 +5165,7 @@ exports.TextArea = Textarea;
 exports.TextEditor = TextEditor;
 exports.TextEditorV2 = TextEditorV2;
 exports.TextLink = TextLink;
+exports.Timeline = Timeline;
 exports.Title = Title;
 exports.ViewItem = ViewItem;
 //# sourceMappingURL=web-ui.cjs.development.js.map