@luscii-healthtech/web-ui 0.6.0 → 0.7.0

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

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import { IconProps } from "../Icons/types/IconProps.type";
+import { TextColor, TextHoverColor } from "../Text/Text";
 export interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     text?: string;
+    textColor?: TextColor;
+    textHoverColor?: TextHoverColor;
     icon?: React.FunctionComponent<IconProps>;
     isDisabled?: boolean;
     className?: string;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ButtonProps } from "./ButtonProps.type";
-export declare const ButtonV2: ({ onClick, text, icon, isDisabled, isPending, className, ...otherAttributes }: ButtonProps) => JSX.Element;
+export declare const ButtonV2: ({ onClick, text, textColor, textHoverColor, icon, isDisabled, isPending, className, ...otherAttributes }: ButtonProps) => JSX.Element;

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

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-import { ListItemProps } from "./ListItem";
-export interface ListProps {
-    items: ListItemProps[];
-}
-export declare const List: ({ items }: ListProps) => JSX.Element;
+import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
+export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
+export declare const List: ({ items, onAssetLoadError }: ListProps) => JSX.Element;
 export default List;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IconProps } from "../Icons/types/IconProps.type";
+export interface ListItemProps {
+    itemId: string | number;
+    title: string;
+    subtitle?: string;
+    icon?: React.FunctionComponent<IconProps> | null | string;
+    accessories?: JSX.Element[];
+    handleItemClick?: () => void;
+    onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+    tooltipId?: string;
+}
+export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
+export interface ListProps {
+    items: ListItemProps[];
+    onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+}

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

@@ -1,13 +1,4 @@
-import React from "react";
-import { IconProps } from "../Icons/types/IconProps.type";
-export interface ListItemProps {
-    itemId: string | number;
-    title: string;
-    subTitle?: string;
-    icon?: React.FunctionComponent<IconProps> | null;
-    accessories?: JSX.Element[];
-    handleItemClick?: () => void;
-    tooltipId?: string;
-}
-export declare const ListItem: ({ icon, subTitle, title, accessories, tooltipId, ...restProps }: ListItemProps) => JSX.Element;
+/// <reference types="react" />
+import { ListItemProps } from "./List.types";
+export declare const ListItem: ({ icon, subtitle, title, accessories, tooltipId, onAssetLoadError, ...restProps }: ListItemProps) => JSX.Element;
 export default ListItem;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { Table, TableProps } from "./components/Table/Table";
 export { TableFieldConfig, TableFieldContent, TableFieldText, TableFieldAction, } from "./components/Table/Table.types";
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
-export { List } from "./components/List/List";
+export { List, ListProps, ListItemProps, OnAssetLoadErrorPayload, } from "./components/List/List";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";

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

@@ -358,10 +358,12 @@ var Spinner = function Spinner(props) {
   }));
 };
 
-var _excluded = ["onClick", "text", "icon", "isDisabled", "isPending", "className"];
+var _excluded = ["onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className"];
 var ButtonV2 = function ButtonV2(_ref) {
   var onClick = _ref.onClick,
       text = _ref.text,
+      textColor = _ref.textColor,
+      textHoverColor = _ref.textHoverColor,
       icon = _ref.icon,
       isDisabled = _ref.isDisabled,
       isPending = _ref.isPending,
@@ -373,7 +375,7 @@ var ButtonV2 = function ButtonV2(_ref) {
     return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
   }
 
-  var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "border", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-primary"], {
+  var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "border", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-primary", "group"], {
     "w-11": !text && icon,
     "pl-4 pr-6": text && icon,
     "px-4": text && !icon
@@ -400,29 +402,38 @@ var ButtonV2 = function ButtonV2(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     className: "text-white"
-  })), text && /*#__PURE__*/React__default.createElement("span", {
-    className: classNames("text-sm font-medium", {
+  })), text && /*#__PURE__*/React__default.createElement(Text, {
+    className: classNames({
       invisible: isPending,
       "ml-1": icon
-    })
-  }, text));
+    }),
+    text: text,
+    color: textColor,
+    hoverColor: textHoverColor,
+    hoverInGroup: true
+  }));
 };
 
 var PrimaryButton = function PrimaryButton(props) {
   return /*#__PURE__*/React__default.createElement(ButtonV2, Object.assign({}, props, {
-    className: classNames(["text-white", "bg-blue-800", "border-primary-transparent", "hover:bg-blue-900"], props.className)
+    className: classNames(["text-white", "bg-blue-800", "border-primary-transparent", "hover:bg-blue-900"], props.className),
+    textColor: "white"
   }));
 };
 
 var SecondaryButton = function SecondaryButton(props) {
   return /*#__PURE__*/React__default.createElement(ButtonV2, Object.assign({}, props, {
-    className: classNames(["text-blue-800", "bg-white", "border-slate-300", "hover:text-blue-900", "hover:border-slate-400", "focus:border-blue-800"], props.className)
+    className: classNames(["text-blue-800", "bg-white", "border-slate-300", "hover:text-blue-900", "hover:border-slate-400", "focus:border-blue-800"], props.className),
+    textColor: "blue-800",
+    textHoverColor: "blue-900"
   }));
 };
 
 var TertiaryButton = function TertiaryButton(props) {
   return /*#__PURE__*/React__default.createElement(ButtonV2, Object.assign({}, props, {
-    className: classNames(["text-blue-800", "bg-transparent", "border-transparent", "hover:text-blue-900", "focus:border-blue-800", "shadow-none"], props.className)
+    className: classNames(["text-blue-800", "bg-transparent", "border-transparent", "hover:text-blue-900", "focus:border-blue-800", "shadow-none"], props.className),
+    textColor: "blue-800",
+    textHoverColor: "blue-900"
   }));
 };
 
@@ -2457,12 +2468,12 @@ function Table(_ref) {
   var showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
   return /*#__PURE__*/React__default.createElement("table", Object.assign({
     className: classNames("w-full rounded-lg bg-white border-collapse table-auto", className)
-  }, otherAttributes), showHeader && /*#__PURE__*/React__default.createElement(TableHeader, {
+  }, otherAttributes), showHeader ? /*#__PURE__*/React__default.createElement(TableHeader, {
     className: "border-b border-slate-100",
     fieldConfigurations: fieldConfigurations
-  }), /*#__PURE__*/React__default.createElement(TableBody, {
+  }) : null, /*#__PURE__*/React__default.createElement(TableBody, {
     className: classNames({
-      "border-b border-slate-100": !showEmptyView && paginationMenuProps && paginationMenuProps.pageCount > 1
+      "border-b border-slate-100": !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0
     }),
     items: items,
     fieldConfigurations: fieldConfigurations,
@@ -2471,10 +2482,10 @@ function Table(_ref) {
     isLoading: isLoading,
     showEmptyView: showEmptyView,
     onRowClick: onRowClick
-  }), !showEmptyView && paginationMenuProps && paginationMenuProps.pageCount > 1 && /*#__PURE__*/React__default.createElement(TableFooter, {
+  }), !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0 ? /*#__PURE__*/React__default.createElement(TableFooter, {
     colSpan: fieldConfigurations.length,
     paginationMenuProps: paginationMenuProps
-  }));
+  }) : null);
 }
 
 var css_248z$d = ".cweb-menu > .cweb-menu-content {\n  min-width: 300px;\n  border-radius: 4px;\n  background-color: #ffffff;\n}\n\n.cweb-menu > .cweb-menu-button {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n  width: 44px;\n  height: 44px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23E5F5FC%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  transition: 0.2s ease;\n  background-size: contain;\n}\n\n.cweb-menu > .cweb-menu-button:hover {\n  width: 44px;\n  height: 44px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23B3E3F7%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  transition: 0.2s ease;\n}\n";
@@ -2560,32 +2571,54 @@ Menu.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-var _excluded$9 = ["icon", "subTitle", "title", "accessories", "tooltipId"];
+var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError"];
 var ListItem = function ListItem(_ref) {
   var icon = _ref.icon,
-      subTitle = _ref.subTitle,
+      subtitle = _ref.subtitle,
       title = _ref.title,
       accessories = _ref.accessories,
       tooltipId = _ref.tooltipId,
+      onAssetLoadError = _ref.onAssetLoadError,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
+  function onListItemIconLoadError() {
+    console.error({
+      message: "Url from icon failed to load, please check the props passed to `ListItem`.",
+      icon: icon,
+      title: title,
+      subtitle: subtitle
+    });
+    onAssetLoadError == null ? void 0 : onAssetLoadError({
+      title: title,
+      subtitle: subtitle,
+      itemId: restProps.itemId,
+      icon: icon
+    });
+  }
+
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classNames("flex flex-row items-center space-x-4", "p-4 border-b last:border-b-0 border-slate-200", {
-      "cursor-pointer": restProps.handleItemClick
+    className: classNames("flex flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-200", {
+      "cursor-pointer": restProps.handleItemClick,
+      "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
     }),
     onClick: restProps.handleItemClick,
     "data-tip": restProps.itemId,
     "data-for": tooltipId
-  }, icon && /*#__PURE__*/React__default.createElement(icon, {
+  }, icon && typeof icon === "function" && /*#__PURE__*/React__default.createElement(icon, {
     className: "w-6 h-6"
+  }), icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
+    src: icon,
+    alt: "list-item-icon",
+    className: "w-6 h-6 text-sm",
+    onError: onListItemIconLoadError
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classNames({
       "pl-10": icon === null
     })
   }, /*#__PURE__*/React__default.createElement(Text, {
     text: title
-  }), subTitle && /*#__PURE__*/React__default.createElement(Text, {
-    text: subTitle,
+  }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    text: subtitle,
     type: "sm"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex-grow"
@@ -2593,12 +2626,14 @@ var ListItem = function ListItem(_ref) {
 };
 
 var List = function List(_ref) {
-  var items = _ref.items;
+  var items = _ref.items,
+      onAssetLoadError = _ref.onAssetLoadError;
   return /*#__PURE__*/React__default.createElement("ul", {
-    className: classNames("list-none")
+    className: classNames("list-none bg-white")
   }, items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
-      key: item.itemId
+      key: item.itemId,
+      onAssetLoadError: onAssetLoadError
     }));
   }));
 };