@luscii-healthtech/web-ui 2.40.0 → 2.40.2

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

@@ -2,6 +2,7 @@ import React from "react";
 import { ButtonDefinition } from "../ButtonV2/ButtonProps.type";
 import { IconProps } from "../Icons/types/IconProps.type";
 import { PrimaryButtonProps } from "../../index";
+import { TitleProps } from "../Title/Title";
 export interface ListItemProps {
     itemId: string | number;
     title: string;
@@ -24,7 +25,7 @@ export interface ListItemProps {
 }
 export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
 export declare type ListProps = {
-    title?: string;
+    title?: string | TitleProps;
     headerButton?: ButtonDefinition<PrimaryButtonProps>;
     headerTransparent?: boolean;
     items: ListItemProps[];

package/dist/components/Text/Text.d.ts

@@ -1,8 +1,38 @@
 import { RestPropped } from "../../types/general.types";
 import "./Text.css";
-export declare type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong";
-export declare type TextColor = "base" | "slate-500" | "slate-200" | "white" | "blue-800" | "red" | "green" | "amber";
-export declare type TextHoverColor = "blue-900" | "white";
+/**
+ * One might argue that we're duplicating strings in this file.
+ * That's how tailwind expects to detect used classes, so please do not make
+ * anything dynamic or try to string concat class names.
+ * https://v1.tailwindcss.com/docs/controlling-file-size
+ */
+declare const allowedTextStyles: {
+    sm: string;
+    "sm-strong": string;
+    base: string;
+    strong: string;
+    lg: string;
+    "lg-strong": string;
+    xl: string;
+    "xl-strong": string;
+};
+export declare const allowedColors: {
+    readonly base: "text-slate-800";
+    readonly "slate-500": "text-slate-500";
+    readonly "slate-200": "text-slate-200";
+    readonly red: "text-red-700";
+    readonly green: "text-green-700";
+    readonly amber: "text-yellow-700";
+    readonly white: "text-white";
+    readonly "blue-800": "text-blue-800";
+};
+declare const allowedHoverColors: {
+    readonly "blue-900": "hover:text-blue-900";
+    readonly white: "hover:text-white";
+};
+export declare type TextColor = keyof typeof allowedColors;
+export declare type TextHoverColor = keyof typeof allowedHoverColors;
+export declare type TextStyle = keyof typeof allowedTextStyles;
 export interface TextProps extends RestPropped {
     text: string;
     type?: TextStyle;

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

@@ -1,12 +1,14 @@
 import "./Title.scss";
+import { TextColor } from "../Text/Text";
 export declare type TitleStyle = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
-export interface TextProps {
+export interface TitleProps {
     text: string;
     type?: TitleStyle;
+    color?: TextColor;
     className?: string;
 }
 export declare const Title: {
-    (props: TextProps): JSX.Element;
+    (props: TitleProps): JSX.Element;
     defaultProps: {
         type: string;
     };

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

@@ -571,32 +571,46 @@ function styleInject(css, ref) {
 var css_248z = "/* https://stackoverflow.com/a/13924997 */\n\n.text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
 styleInject(css_248z);
 
+/**
+ * One might argue that we're duplicating strings in this file.
+ * That's how tailwind expects to detect used classes, so please do not make
+ * anything dynamic or try to string concat class names.
+ * https://v1.tailwindcss.com/docs/controlling-file-size
+ */
+
+var allowedTextStyles = {
+  sm: "text-xs font-medium",
+  "sm-strong": "text-xs font-semibold",
+  base: "text-sm",
+  strong: "text-sm font-semibold",
+  lg: "",
+  "lg-strong": "font-semibold",
+  xl: "text-lg",
+  "xl-strong": "font-semibold text-lg"
+}; //Extend with other colors that we want to enable for text
+
+var allowedColors = {
+  base: "text-slate-800",
+  "slate-500": "text-slate-500",
+  "slate-200": "text-slate-200",
+  red: "text-red-700",
+  green: "text-green-700",
+  amber: "text-yellow-700",
+  white: "text-white",
+  "blue-800": "text-blue-800"
+};
+var allowedHoverColors = {
+  "blue-900": "hover:text-blue-900",
+  white: "hover:text-white"
+}; // What is a group hover? https://v1.tailwindcss.com/docs/pseudo-class-variants#group-hover
+
+var allowedGroupHoverColors = {
+  "blue-900": "group-hover:text-blue-900",
+  white: "group-hover:text-white"
+};
 var Text = function Text(props) {
-  /**
-   * One might argue that we're duplicating strings in this file.
-   * That's how tailwind expects to detect used classes, so please do not make
-   * anything dynamic or try to string concat class names.
-   * https://v1.tailwindcss.com/docs/controlling-file-size
-   */
-  var allowedColors = {
-    base: "text-slate-800",
-    "slate-500": "text-slate-500",
-    "slate-200": "text-slate-200",
-    red: "text-red-700",
-    green: "text-green-700",
-    amber: "text-yellow-700",
-    white: "text-white",
-    "blue-800": "text-blue-800"
-  };
-  var allowedHoverColors = {
-    "blue-900": "hover:text-blue-900",
-    white: "hover:text-white"
-  }; // What is a group hover? https://v1.tailwindcss.com/docs/pseudo-class-variants#group-hover
-
-  var allowedGroupHoverColors = {
-    "blue-900": "group-hover:text-blue-900",
-    white: "group-hover:text-white"
-  };
+  var _props$type, _props$color;
+
   var selectedHoverColor = props.hoverColor && !props.hoverInGroup && allowedHoverColors[props.hoverColor];
   var selectedGroupHoverColor = props.hoverColor && props.hoverInGroup && allowedGroupHoverColors[props.hoverColor];
   var containerProps = {
@@ -605,21 +619,11 @@ var Text = function Text(props) {
     className: classNames( // apply different style classes
     // for now we stick with font-size 16px on the body
     // so I am adjusting our styles accordingly (one step down)
-    {
-      "text-xs font-medium": props.type === "sm",
-      "text-xs font-semibold": props.type === "sm-strong",
-      "text-sm": props.type === "base",
-      "text-sm font-semibold": props.type === "strong",
-      "": props.type === "lg",
-      "font-semibold": props.type === "lg-strong",
-      "text-lg": props.type === "xl",
-      "font-semibold text-lg": props.type === "xl-strong"
-    }, {
+    allowedTextStyles[(_props$type = props.type) != null ? _props$type : "base"], allowedColors[(_props$color = props.color) != null ? _props$color : "base"], selectedHoverColor, selectedGroupHoverColor, {
       inline: props.inline,
       // FIXME: this class doesn't do anything without a max-width
       truncate: props.truncate,
-      "text-two-lines-max": props.clampLines
-    }, allowedColors[props.color || "base"], selectedHoverColor, selectedGroupHoverColor, {
+      "text-two-lines-max": props.clampLines,
       "in-html-link": props.containsDangerousHtml
     }, //can be used to overwrite other classes like the color
     props.className)
@@ -964,11 +968,10 @@ var css_248z$2 = ".title {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\",
 styleInject(css_248z$2);
 
 var Title = function Title(props) {
-  var _props$className;
+  var _props$color;
 
   var containerClassName = classNames("title", //this is used to load the correct font from the css
-  "font-bold", {
-    "text-slate-800": !((_props$className = props.className) != null && _props$className.match(/\s(text-)/)),
+  "font-bold", allowedColors[(_props$color = props.color) != null ? _props$color : "base"], {
     "text-base": props.type === "xs",
     "text-xl": props.type === "sm",
     "text-2xl": props.type === "base",
@@ -1136,7 +1139,7 @@ var ListItem = function ListItem(_ref) {
   }
 
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classNames("flex last:rounded-b flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-100", {
+    className: classNames("flex last:rounded-b flex-row items-center space-x-4 bg-white", "px-4 border-b last:border-b-0 border-slate-100", {
       "first:rounded-t": roundTop,
       "cursor-pointer": restProps.handleItemClick,
       "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
@@ -1158,7 +1161,9 @@ var ListItem = function ListItem(_ref) {
     onError: onListItemIconLoadError
   }), loadIconError && /*#__PURE__*/React__default.createElement(ImageIcon, {
     className: "w-6 h-6 text-slate-300"
-  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Text, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "py-4"
+  }, /*#__PURE__*/React__default.createElement(Text, {
     type: isSelected ? "strong" : "base",
     text: title
   }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
@@ -1305,6 +1310,11 @@ var List = function List(_ref) {
     });
   }
 
+  var titleProps = title ? _extends({
+    type: "xs"
+  }, typeof title === "object" ? title : {
+    text: title
+  }) : null;
   return /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": dataTestId != null ? dataTestId : "list-component"
   }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
@@ -1318,10 +1328,7 @@ var List = function List(_ref) {
       "justify-start": title && !headerButton,
       "justify-end": !title && headerButton
     })
-  }, title && /*#__PURE__*/React__default.createElement(Title, {
-    type: "xs",
-    text: title
-  }), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
+  }, titleProps && /*#__PURE__*/React__default.createElement(Title, _extends({}, titleProps)), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
     className: "space-x-3"
   }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
     ref: listRef
@@ -6449,7 +6456,9 @@ var TimelineStep = function TimelineStep(_ref) {
     className: classNames(borderClassNames, "h-4 first:h-0")
   }), /*#__PURE__*/React__default.createElement("div", {
     className: containerClassNames
-  }, content, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__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", {
       hidden: ["wide", "withoutDot"].includes(type),
       "bg-blue-800": "base" === type,