@luscii-healthtech/web-ui 0.2.0 → 0.3.0

package/dist/web-ui.esm.css

@@ -190,18 +190,6 @@
     .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {
       left: 32px; }
 
-.vitals-confirmation-dialog {
-  margin-top: 4rem !important; }
-  .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
-    padding: 24px; }
-    .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      margin-top: 16px; }
-
 .cweb-box-shadow-default {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -444,6 +432,18 @@
     .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {
       color: #cccccc; }
 
+.vitals-confirmation-dialog {
+  margin-top: 4rem !important; }
+  .vitals-confirmation-dialog .vitals-confirmation-dialog-content {
+    padding: 24px; }
+    .vitals-confirmation-dialog .vitals-confirmation-dialog-content .vitals-confirmation-dialog-action-container {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      margin-top: 16px; }
+
 .cweb-box-shadow-default {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

package/dist/web-ui.esm.js

@@ -19,6 +19,33 @@ import htmlToDraft from 'html-to-draftjs';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 
 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-700",
+    "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 selectedHoverColor = props.hoverColor && !props.hoverInGroup && allowedHoverColors[props.hoverColor];
+  var selectedGroupHoverColor = props.hoverColor && props.hoverInGroup && allowedGroupHoverColors[props.hoverColor];
   var containerProps = {
     "data-test-id": props["data-test-id"],
     className: classNames( // apply different style classes
@@ -37,17 +64,7 @@ var Text = function Text(props) {
       inline: props.inline,
       // FIXME: this class doesn't do anything without a max-width
       truncate: props.truncate
-    }, {
-      "text-slate-700": props.color === "base",
-      "text-slate-500": props.color === "gray-500",
-      "text-slate-200": props.color === "gray-200",
-      "text-red-700": props.color === "red",
-      "text-green-700": props.color === "green",
-      "text-yellow-700": props.color === "amber",
-      "text-blue-700": props.color === "blue",
-      "text-white": props.color === "white",
-      "text-primary-dark": props.color === "blue"
-    }, {
+    }, allowedColors[props.color || "base"], selectedHoverColor, selectedGroupHoverColor, {
       "in-html-link": props.containsDangerousHtml
     }, //can be used to overwrite other classes like the color
     props.className)
@@ -314,9 +331,8 @@ var ButtonV2 = function ButtonV2(_ref) {
 
   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"], {
     "w-11": !text && icon,
-    "px-4": text,
-    "py-2.5": text && icon,
-    "py-3": text && !icon
+    "pl-4 pr-6": text && icon,
+    "px-4": text && !icon
   }, {
     "opacity-50": isDisabled,
     "pointer-events-none": isDisabled || isPending
@@ -949,13 +965,13 @@ var Checkbox = function Checkbox(_ref) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col"
   }, text && /*#__PURE__*/React__default.createElement(Text, {
-    className: "ml-2 select-none text-left",
+    className: "ml-2 text-left select-none",
     text: text,
     "data-test-id": "checkbox-text"
   }), explanation && /*#__PURE__*/React__default.createElement(Text, {
-    className: "ml-2 select-none text-left",
+    className: "ml-2 text-left select-none",
     text: explanation,
-    color: "gray-500",
+    color: "slate-500",
     "data-test-id": "checkbox-explanation"
   }))));
 };
@@ -1430,7 +1446,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         "data-test-id": item.text,
         text: item.title,
         type: "sm",
-        color: "gray-500",
+        color: "slate-500",
         truncate: true
       })), item.subItems.map(function (subItem) {
         return _this.renderIndividualItem(subItem);
@@ -1699,7 +1715,7 @@ var InfoField = function InfoField(props) {
   }, containerProps), /*#__PURE__*/React__default.createElement(Text, {
     text: props.label,
     type: "sm",
-    color: "gray-500",
+    color: "slate-500",
     className: classNames({
       "break-words": props.supportsMultiline
     }, {
@@ -1905,7 +1921,7 @@ var PaginationMenuSmall = function PaginationMenuSmall(props) {
     className: "ml-4",
     text: props.currentPageNumber + " / " + props.pageCount,
     type: "sm",
-    color: "gray-500"
+    color: "slate-500"
   }), /*#__PURE__*/React__default.createElement(TertiaryButton, {
     className: "ml-4",
     "data-test-id": "next-button",
@@ -2113,7 +2129,7 @@ var PaginationMenuLarge = function PaginationMenuLarge(props) {
     className: "ml-4 flex flex-row items-center"
   }, /*#__PURE__*/React__default.createElement(Text, {
     text: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount),
-    color: "gray-500"
+    color: "slate-500"
   }), /*#__PURE__*/React__default.createElement(SecondaryButton, {
     "data-test-id": "prev-button",
     text: props.localization.previous,
@@ -2217,7 +2233,7 @@ function ListTableCell(_ref) {
       text: emptyValue
     }, textProps, {
       className: textClassName,
-      color: "gray-500"
+      color: "slate-500"
     })), hasValue && isString(value) && /*#__PURE__*/React__default.createElement(Text, Object.assign({
       text: value
     }, textProps, {
@@ -2294,7 +2310,7 @@ function ListTableHeader(_ref) {
   })));
 }
 
-var _excluded$9 = ["items", "configuration", "pageCount", "currentPage", "onPaginationChange", "onRowClick", "isLoading", "showHeader", "className", "localization"];
+var _excluded$9 = ["items", "configuration", "pageCount", "currentPage", "onPaginationChange", "pageSize", "localization", "resultCount", "onRowClick", "isLoading", "showHeader", "className"];
 function ListTable(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -2304,13 +2320,15 @@ function ListTable(_ref) {
       _ref$currentPage = _ref.currentPage,
       currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
       onPaginationChange = _ref.onPaginationChange,
+      pageSize = _ref.pageSize,
+      localization = _ref.localization,
+      resultCount = _ref.resultCount,
       onRowClick = _ref.onRowClick,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       _ref$showHeader = _ref.showHeader,
       showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
       className = _ref.className,
-      localization = _ref.localization,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   // For not displaying empty view at creation
@@ -2349,17 +2367,20 @@ function ListTable(_ref) {
     src: SearchNotFoundImage,
     alt: "no-image-found"
   }), /*#__PURE__*/React__default.createElement(Text, {
-    className: classNames("no-item-found-text", "w-56 text-base text-gray-600 text-center whitespace-pre-wrap"),
+    className: classNames("no-item-found-text", "w-56 text-base text-center whitespace-pre-wrap"),
+    color: "slate-500",
     text: configuration.emptyListText
   }))))), !showEmptyView && pageCount > 0 && onPaginationChange && /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: configuration.fields.length
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classNames("cweb-list-table-footer", "flex justify-center flex-row items-center", "h-20 py-4 px-4")
   }, /*#__PURE__*/React__default.createElement(PaginationMenu, {
-    onChange: onPaginationChange,
     pageCount: pageCount,
     currentPageNumber: currentPage,
-    localization: localization
+    onChange: onPaginationChange,
+    pageSize: pageSize,
+    localization: localization,
+    resultCount: resultCount
   })))))));
 }
 
@@ -2680,11 +2701,7 @@ var NavMenuItem = function NavMenuItem(props) {
       currentImg = _useState[0],
       setCurrentImg = _useState[1];
 
-  var _useState2 = useState(props.isSelected ? "white" : "gray-200"),
-      textColor = _useState2[0],
-      setTextColor = _useState2[1];
-
-  var classes = classNames(["flex", "flex-row", "items-center", "w-auto", "rounded", "px-2", "py-1", "my-2", "mx-2", "hover:bg-gray-600", "transition", "ease-in", "duration-150", "lg:last:pb-2", "focus:outline-primary"], {
+  var classes = classNames(["flex", "flex-row", "items-center", "w-auto", "rounded", "px-2", "py-1", "my-2", "mx-2", "hover:bg-gray-600", "transition", "ease-in", "duration-150", "lg:last:pb-2", "focus:outline-primary", "group"], {
     "bg-nav-menu": !props.isSelected,
     "bg-gray-600": props.isSelected
   });
@@ -2692,14 +2709,12 @@ var NavMenuItem = function NavMenuItem(props) {
   var handleOnMouseOver = function handleOnMouseOver() {
     if (!props.isSelected) {
       setCurrentImg(props.imgOnHover);
-      setTextColor("white");
     }
   };
 
   var handleOnMouseOut = function handleOnMouseOut() {
     if (!props.isSelected) {
       setCurrentImg(props.img);
-      setTextColor("gray-200");
     }
   };
 
@@ -2716,7 +2731,9 @@ var NavMenuItem = function NavMenuItem(props) {
   }), /*#__PURE__*/createElement(Text, {
     type: "strong",
     text: props.title,
-    color: textColor
+    hoverInGroup: true,
+    color: "slate-200",
+    hoverColor: "white"
   }));
 
   function handleMenuClick(event) {
@@ -2809,18 +2826,26 @@ var TextLink = function TextLink(props) {
 
 var NotificationBanner = function NotificationBanner(props) {
   var classes = classNames("w-full px-6 py-2 flex flex-row items-center border border-solid rounded", props.className, {
-    "bg-slate-100 border-slate-700": props.color === "base",
-    "bg-blue-100 border-blue-700": props.color === "blue",
-    "bg-red-100 border-red-700": props.color === "red",
-    "bg-green-100 border-green-700": props.color === "green",
-    "bg-yellow-100 border-yellow-700": props.color === "amber"
+    "bg-slate-50 border-slate-700": props.color === "base",
+    "bg-blue-50 border-blue-700": props.color === "blue",
+    "bg-red-50 border-red-700": props.color === "red",
+    "bg-green-50 border-green-700": props.color === "green",
+    "bg-yellow-50 border-yellow-700": props.color === "amber"
   });
+  var textColor = {
+    red: "red",
+    amber: "amber",
+    green: "green",
+    base: "base",
+    // Blue must be 800 here to pass the contrast test
+    blue: "blue-800"
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes
   }, props.icon, /*#__PURE__*/React__default.createElement(Text, {
-    className: "first:ml-0 ml-4",
+    className: "ml-4 first:ml-0",
     text: props.text,
-    color: props.color
+    color: props.color ? textColor[props.color] : "base"
   }), props.linkProps && /*#__PURE__*/React__default.createElement(TextLink, {
     className: "ml-4",
     text: props.linkProps.text,
@@ -2987,7 +3012,7 @@ var Step = function Step(_ref) {
   }), /*#__PURE__*/React__default.createElement(Text, {
     text: localization.step + " " + stepNumber,
     type: "strong",
-    color: active ? "blue" : "gray-500"
+    color: active ? "blue-800" : "slate-500"
   }), /*#__PURE__*/React__default.createElement(Text, {
     text: title,
     type: "strong"
@@ -3779,24 +3804,26 @@ var TagColorTheme;
 })(TagColorTheme || (TagColorTheme = {}));
 
 var Tag = function Tag(_ref) {
+  var _textColor;
+
   var text = _ref.text,
       _ref$colorTheme = _ref.colorTheme,
       colorTheme = _ref$colorTheme === void 0 ? TagColorTheme.Gray : _ref$colorTheme,
       className = _ref.className,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? TagSize.base : _ref$size;
-  var containerClassName = classNames("inline py-1 px-2 rounded-lg", className, {
-    "bg-red-100 text-red-700": colorTheme === TagColorTheme.Red,
-    "bg-orange-100 text-amber-700": colorTheme === TagColorTheme.Amber,
-    "bg-green-100 text-green-800": colorTheme === TagColorTheme.Green,
-    "bg-slate-100 text-slate-600": colorTheme === TagColorTheme.Gray,
-    "bg-blue-50 text-blue-800": colorTheme === TagColorTheme.Blue
-  });
+  var textColor = (_textColor = {}, _textColor[TagColorTheme.Red] = "red", _textColor[TagColorTheme.Amber] = "amber", _textColor[TagColorTheme.Green] = "green", _textColor[TagColorTheme.Gray] = "base", _textColor[TagColorTheme.Blue] = "blue-800", _textColor);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: containerClassName
+    className: classNames("inline py-1 px-2 rounded-lg", className, {
+      "bg-red-50": colorTheme === TagColorTheme.Red,
+      "bg-orange-50": colorTheme === TagColorTheme.Amber,
+      "bg-green-50": colorTheme === TagColorTheme.Green,
+      "bg-slate-50": colorTheme === TagColorTheme.Gray,
+      "bg-blue-50": colorTheme === TagColorTheme.Blue
+    })
   }, /*#__PURE__*/React__default.createElement(Text, {
     inline: true,
-    color: "inherit",
+    color: textColor[colorTheme],
     text: text,
     type: size === TagSize.small ? "sm" : "base"
   }));
@@ -4048,7 +4075,7 @@ function ViewItem(_ref) {
     className: "vitals-view-item-title-line flex justify-start flex-row items-start"
   }, titlePropsMerged && /*#__PURE__*/React__default.createElement(Text, Object.assign({
     className: classNames(titlePropsMerged.className, "vitals-view-item-title mb-1 mr-2"),
-    color: "gray-500"
+    color: "slate-500"
   }, titlePropsMerged)), titleAccessory), contentPropsMerged && (contentPropsMerged == null ? void 0 : contentPropsMerged.map(function (textProps) {
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, textProps, {
       key: textProps.key || textProps.text