@luscii-healthtech/web-ui 0.6.2 → 0.7.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.7.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ButtonV2/ButtonV2.tsx

@@ -17,6 +17,11 @@ export const ButtonV2 = ({
   className,
   ...otherAttributes
 }: ButtonProps): JSX.Element => {
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    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."
@@ -54,7 +59,7 @@ export const ButtonV2 = ({
       {...otherAttributes}
       className={buttonClassName}
       type={"button"}
-      onClick={onClick}
+      onClick={handleClick}
       disabled={isDisabled}
       aria-disabled={isDisabled}
     >

package/src/components/List/List.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import classNames from "classnames";
 
-import { ListItem, ListItemProps } from "./ListItem";
+import { ListItem } from "./ListItem";
+import {
+  ListProps,
+  ListItemProps,
+  OnAssetLoadErrorPayload,
+} from "./List.types";
 
-export interface ListProps {
-  items: ListItemProps[];
-}
+export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
 
-export const List = ({ items }: ListProps): JSX.Element => {
+export const List = ({ items, onAssetLoadError }: ListProps): JSX.Element => {
   return (
-    <ul className={classNames("list-none")}>
+    <ul className={classNames("list-none bg-white")}>
       {items.map(item => (
-        <ListItem {...item} key={item.itemId} />
+        <ListItem
+          {...item}
+          key={item.itemId}
+          onAssetLoadError={onAssetLoadError}
+        />
       ))}
     </ul>
   );

package/src/components/List/List.types.ts

@@ -0,0 +1,22 @@
+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 type OnAssetLoadErrorPayload = Pick<
+  ListItemProps,
+  "itemId" | "subtitle" | "title" | "icon"
+>;
+
+export interface ListProps {
+  items: ListItemProps[];
+  onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+}

package/src/components/List/ListItem.tsx

@@ -1,45 +1,71 @@
 import React from "react";
 import classNames from "classnames";
 
-import { IconProps } from "../Icons/types/IconProps.type";
 import Text from "../Text/Text";
 
-export interface ListItemProps {
-  itemId: string | number;
-  title: string;
-  subTitle?: string;
-  icon?: React.FunctionComponent<IconProps> | null;
-  accessories?: JSX.Element[];
-  handleItemClick?: () => void;
-  tooltipId?: string;
-}
+import { ListItemProps } from "./List.types";
 
 export const ListItem = ({
   icon,
-  subTitle,
+  subtitle,
   title,
   accessories,
   tooltipId,
+  onAssetLoadError,
   ...restProps
-}: ListItemProps): JSX.Element => (
-  <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 }
-    )}
-    onClick={restProps.handleItemClick}
-    data-tip={restProps.itemId}
-    data-for={tooltipId}
-  >
-    {icon && React.createElement(icon, { className: "w-6 h-6" })}
-    <div className={classNames({ "pl-10": icon === null })}>
-      <Text text={title} />
-      {subTitle && <Text text={subTitle} type={"sm"} />}
-    </div>
-    <div className={"flex-grow"} />
-    {accessories}
-  </li>
-);
+}: ListItemProps): JSX.Element => {
+  function onListItemIconLoadError() {
+    console.error({
+      message:
+        "Url from icon failed to load, please check the props passed to `ListItem`.",
+      icon,
+      title,
+      subtitle,
+    });
+
+    onAssetLoadError?.({
+      title,
+      subtitle: subtitle,
+      itemId: restProps.itemId,
+      icon,
+    });
+  }
+  return (
+    <li
+      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}
+    >
+      {/* If the icon is a react component, render it as so */}
+      {icon &&
+        typeof icon === "function" &&
+        React.createElement(icon, { className: "w-6 h-6" })}
+      {/* If the icon is a string url, load it in a vanilla img element */}
+      {icon && typeof icon === "string" && (
+        <img
+          src={icon}
+          alt="list-item-icon"
+          className="w-6 h-6 text-sm"
+          onError={onListItemIconLoadError}
+        />
+      )}
+      <div className={classNames({ "pl-10": icon === null })}>
+        <Text text={title} />
+        {subtitle && <Text text={subtitle} type={"sm"} />}
+      </div>
+      <div className={"flex-grow"} />
+      {accessories}
+    </li>
+  );
+};
 
 export default ListItem;

package/src/components/Table/Table.types.ts

@@ -14,6 +14,7 @@ export type TableFieldContent<Item> =
 
 export interface TableFieldText {
   text: string;
+  breakAllWord?: boolean;
   tag?: {
     text: string;
     color: TagColorTheme;

package/src/components/Table/TableBodyRowDataCell.tsx

@@ -34,7 +34,10 @@ export function TableBodyRowDataCell<Item>(
             </div>
           )}
           <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"
           />
@@ -60,8 +63,7 @@ export function TableBodyRowDataCell<Item>(
                   className="ml-2 first:ml-0"
                   key={action.key}
                   icon={action.icon}
-                  onClick={event => {
-                    event.stopPropagation();
+                  onClick={() => {
                     action.handleClick(props.item);
                   }}
                 />

package/src/index.tsx

@@ -35,7 +35,12 @@ export {
   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";