@luscii-healthtech/web-ui 0.8.2 → 0.9.0

package/README.md

@@ -25,6 +25,12 @@ Run the script below in your terminal, _in the parent folder of the repositories
 cp -a web-ui/dist/. cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist
 ```
 
+Or use the shortcut:
+
+```
+yarn test-copy-build
+```
+
 When you run cVitals again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before merging a pull request.
 
 ## Contributing

package/dist/components/Icons/EmptyIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+export declare const EmptyIcon: (props: IconProps) => JSX.Element;

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

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

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

@@ -1,17 +1,32 @@
-/// <reference types="react" />
+import React from "react";
+import { ButtonProps } from "../ButtonV2/ButtonProps.type";
 import { IconProps } from "../Icons/types/IconProps.type";
 export interface ListItemProps {
     itemId: string | number;
     title: string;
     subtitle?: string;
-    icon?: React.FunctionComponent<IconProps> | null | string;
+    icon?: React.FunctionComponent<IconProps> | string;
     accessories?: JSX.Element[];
     handleItemClick?: () => void;
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
     tooltipId?: string;
+    /**
+     *
+     * If the parent list component can have a header,
+     * the list items don't need to add a border radius on top of the first item.
+     *
+     * The header is an optional <li> on top that contains the title and accessories (buttons)
+     */
+    roundTop?: boolean;
 }
 export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
-export interface ListProps {
+export declare type ListProps = {
+    title?: string;
+    headerButton?: {
+        buttonType: React.FunctionComponent<ButtonProps>;
+        buttonProps: ButtonProps;
+    };
+    headerTransparent?: boolean;
     items: ListItemProps[];
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
-}
+};

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ListItemProps } from "./List.types";
-export declare const ListItem: ({ icon, subtitle, title, accessories, tooltipId, onAssetLoadError, ...restProps }: ListItemProps) => JSX.Element;
+export declare const ListItem: ({ icon, subtitle, title, accessories, tooltipId, onAssetLoadError, roundTop, ...restProps }: ListItemProps) => JSX.Element;
 export default ListItem;

package/dist/web-ui-tailwind.css

@@ -947,6 +947,11 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
 .rounded-r {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
@@ -962,6 +967,26 @@ video {
   border-bottom-left-radius: 0.5rem;
 }
 
+.first\:rounded-t:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.first\:rounded-l-xl:first-child {
+  border-top-left-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+
+.last\:rounded-b:last-child {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.last\:rounded-r-xl:last-child {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
 .border-solid {
   border-style: solid;
 }

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

@@ -2578,7 +2578,28 @@ Menu.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError"];
+var EmptyIcon = function EmptyIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "28",
+    height: "28",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 22C18.4183 22 22 18.4183 22 14C22 9.58172 18.4183 6 14 6C9.58172 6 6 9.58172 6 14C6 18.4183 9.58172 22 14 22ZM14 25C20.0751 25 25 20.0751 25 14C25 7.92487 20.0751 3 14 3C7.92487 3 3 7.92487 3 14C3 20.0751 7.92487 25 14 25Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.4144 24.4144C2.63335 23.6334 2.63335 22.367 3.4144 21.586L21.1485 3.8519C21.9295 3.07085 23.1959 3.07085 23.9769 3.8519C24.7579 4.63295 24.7579 5.89928 23.9769 6.68033L6.24283 24.4144C5.46178 25.1954 4.19545 25.1954 3.4144 24.4144Z",
+    fill: "currentColor"
+  }));
+};
+
+var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError", "roundTop"];
 var ListItem = function ListItem(_ref) {
   var icon = _ref.icon,
       subtitle = _ref.subtitle,
@@ -2586,8 +2607,13 @@ var ListItem = function ListItem(_ref) {
       accessories = _ref.accessories,
       tooltipId = _ref.tooltipId,
       onAssetLoadError = _ref.onAssetLoadError,
+      roundTop = _ref.roundTop,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
+  var _useState = React.useState(false),
+      loadIconError = _useState[0],
+      setLoadIconError = _useState[1];
+
   function onListItemIconLoadError() {
     console.error({
       message: "Url from icon failed to load, please check the props passed to `ListItem`.",
@@ -2595,6 +2621,7 @@ var ListItem = function ListItem(_ref) {
       title: title,
       subtitle: subtitle
     });
+    setLoadIconError(true);
     onAssetLoadError == null ? void 0 : onAssetLoadError({
       title: title,
       subtitle: subtitle,
@@ -2603,8 +2630,13 @@ var ListItem = function ListItem(_ref) {
     });
   }
 
+  function onListItemIconLoad() {
+    setLoadIconError(false);
+  }
+
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classNames("flex flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-200", {
+    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", {
+      "first:rounded-t": roundTop,
       "cursor-pointer": restProps.handleItemClick,
       "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
     }),
@@ -2613,16 +2645,15 @@ var ListItem = function ListItem(_ref) {
     "data-for": tooltipId
   }, icon && typeof icon === "function" && /*#__PURE__*/React__default.createElement(icon, {
     className: "w-6 h-6"
-  }), icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
+  }), !loadIconError && icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
     src: icon,
     alt: "list-item-icon",
     className: "w-6 h-6 text-sm",
+    onLoad: onListItemIconLoad,
     onError: onListItemIconLoadError
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames({
-      "pl-10": icon === null
-    })
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }), loadIconError && /*#__PURE__*/React__default.createElement(EmptyIcon, {
+    className: "text-slate-300"
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Text, {
     text: title
   }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
     text: subtitle,
@@ -2633,16 +2664,36 @@ var ListItem = function ListItem(_ref) {
 };
 
 var List = function List(_ref) {
-  var items = _ref.items,
+  var title = _ref.title,
+      headerButton = _ref.headerButton,
+      headerTransparent = _ref.headerTransparent,
+      items = _ref.items,
       onAssetLoadError = _ref.onAssetLoadError;
-  return /*#__PURE__*/React__default.createElement("ul", {
-    className: classNames("list-none bg-white")
+  var hasHeader = !!(title || headerButton);
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "list-component"
+  }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "list-header",
+    className: classNames("flex rounded-t flex-row items-center p-4 space-x-4", {
+      "bg-white border-b border-slate-100": !headerTransparent,
+      "justify-between": title && headerButton,
+      "justify-start": title && !headerButton,
+      "justify-end": !title && headerButton
+    })
+  }, title && /*#__PURE__*/React__default.createElement(Title, {
+    type: "sm",
+    text: title
+  }), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
+    className: "space-x-3"
+  }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
+    className: classNames("list-none")
   }, items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
+      roundTop: !hasHeader || hasHeader && headerTransparent,
       key: item.itemId,
       onAssetLoadError: onAssetLoadError
     }));
-  }));
+  })));
 };
 
 var TEXT_TYPE_OPTIONS = {