@luscii-healthtech/web-ui 0.8.2 → 0.9.2

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/ButtonV2/ButtonProps.type.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconProps } from "../Icons/types/IconProps.type";
 import { TextColor, TextHoverColor } from "../Text/Text";
 /**
@@ -29,3 +29,10 @@ export interface ButtonProps extends BaseButtonProps, ButtonWithPendingStateProp
     textColor?: TextColor;
     textHoverColor?: TextHoverColor;
 }
+/**
+ * Interface for defining a button
+ */
+export interface ButtonDefinition<Props extends BaseButtonProps = BaseButtonProps> {
+    buttonType: React.FunctionComponent<Props>;
+    buttonProps: React.Attributes & Props;
+}

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,30 @@
-/// <reference types="react" />
+import React from "react";
+import { ButtonDefinition } from "../ButtonV2/ButtonProps.type";
 import { IconProps } from "../Icons/types/IconProps.type";
+import { PrimaryButtonProps } from "../../index";
 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?: ButtonDefinition<PrimaryButtonProps>;
+    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/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Acknowledgement, ACKNOWLEDGEMENT_TYPE_OPTIONS, } from "./components/Acknowledgement/Acknowledgement";
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
-export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, } from "./components/ButtonV2/ButtonProps.type";
+export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition } from "./components/ButtonV2/ButtonProps.type";
 export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
 export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
 export { TertiaryButton } from "./components/ButtonV2/TertiaryButton";

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;
 }
@@ -1324,6 +1349,10 @@ video {
   margin-left: auto;
 }
 
+.mb-px {
+  margin-bottom: 1px;
+}
+
 .mb-2\.5 {
   margin-bottom: 0.625rem;
 }
@@ -1332,6 +1361,10 @@ video {
   margin-left: 0.625rem;
 }
 
+.-mt-px {
+  margin-top: -1px;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -1496,10 +1529,6 @@ video {
   padding-left: 0.25rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1596,16 +1625,16 @@ video {
   left: 0;
 }
 
-.top-3 {
-  top: 0.75rem;
+.top-6 {
+  top: 1.5rem;
 }
 
 .-top-1 {
   top: -0.25rem;
 }
 
-.-left-3 {
-  left: -0.75rem;
+.-left-2 {
+  left: -0.5rem;
 }
 
 .-right-54 {

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,37 @@ 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 py-4 space-x-4", {
+      "bg-white border-b border-slate-100 px-4": !headerTransparent,
+      "mb-px": 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 = {
@@ -4188,30 +4240,6 @@ 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;
 
@@ -4219,11 +4247,11 @@ var TimelineStep = function TimelineStep(_ref) {
       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));
+  var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !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"
+  }, content, !isWideStep && /*#__PURE__*/React__default.createElement("span", {
+    className: "rounded-lg bg-blue-800 h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: classNames(borderClassNames, "h-6 last:h-0")
   }));
@@ -4949,6 +4977,30 @@ 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,