@luscii-healthtech/web-ui 0.2.2 → 0.4.1

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

@@ -546,6 +546,64 @@
   .cweb-list-item.cweb-list-item-clickable:hover {
     background-color: #f2fafd; }
 
+.cweb-section .cweb-button:last-of-type {
+  margin-right: 24px; }
+
+.cweb-section .cweb-button:not(:last-of-type) {
+  margin-right: 8px; }
+
+.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
+  margin-left: auto;
+  width: 32px;
+  height: 32px; }
+
+.cweb-section .cweb-button.add-button {
+  background: url("../../assets/add.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
+    background: url("../../assets/add_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section .cweb-button.edit-button {
+  background: url("../../assets/edit.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
+    background: url("../../assets/edit_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section .cweb-button.delete-button {
+  background: url("../../assets/delete.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
+    background: url("../../assets/delete_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section > .cweb-section-header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+  width: 100%;
+  padding: 18px 24px; }
+
+.cweb-section > .cweb-section-footer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-top: 1px solid #eeeeee;
+  width: 100%;
+  padding: 1rem 24px 1rem 24px; }
+  .cweb-section > .cweb-section-footer img {
+    width: 32px;
+    height: 32px; }
+
+.cweb-section-text-item .cweb-section-text-item-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px; }
+
 .cweb-loading {
   display: flex;
   justify-content: center;
@@ -745,59 +803,6 @@
   .cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {
     border: 1px solid #ff6266 !important; }
 
-.cweb-section .cweb-button:last-of-type {
-  margin-right: 24px; }
-
-.cweb-section .cweb-button:not(:last-of-type) {
-  margin-right: 8px; }
-
-.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
-  margin-left: auto;
-  width: 32px;
-  height: 32px; }
-
-.cweb-section .cweb-button.add-button {
-  background: url("../../assets/add.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
-    background: url("../../assets/add_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section .cweb-button.edit-button {
-  background: url("../../assets/edit.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
-    background: url("../../assets/edit_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section .cweb-button.delete-button {
-  background: url("../../assets/delete.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
-    background: url("../../assets/delete_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section > .cweb-section-header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  border-bottom: 1px solid #eeeeee;
-  width: 100%;
-  padding: 18px 24px; }
-
-.cweb-section > .cweb-section-footer {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  border-top: 1px solid #eeeeee;
-  width: 100%;
-  padding: 1rem 24px 1rem 24px; }
-  .cweb-section > .cweb-section-footer img {
-    width: 32px;
-    height: 32px; }
-
 .cweb-textarea {
   border: 1px solid #cccccc;
   border-radius: 4px;
@@ -917,11 +922,6 @@
     .editor .rdw-editor .rdw-editor-main .DraftEditor-root {
       margin: 0 12px; }
 
-.cweb-text-list-item .cweb-text-list-item-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 16px; }
-
 @font-face {
   font-family: "AvenirNextLTPro-Regular";
   src: url("../../styles/fonts/avenir/3A0AF8_1_0.eot");

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

@@ -27,6 +27,33 @@ var htmlToDraft = _interopDefault(require('html-to-draftjs'));
 require('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
@@ -45,17 +72,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)
@@ -956,13 +973,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"
   }))));
 };
@@ -1437,7 +1454,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);
@@ -1706,7 +1723,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
     }, {
@@ -1881,7 +1898,7 @@ Line.propTypes = {
 };
 
 var _excluded$7 = ["children", "className", "onClick"];
-var ListItem = function ListItem(props) {
+var SectionItem = function SectionItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
@@ -1912,7 +1929,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",
@@ -2120,7 +2137,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,
@@ -2224,7 +2241,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, {
@@ -2358,7 +2375,8 @@ 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
@@ -2691,11 +2709,7 @@ var NavMenuItem = function NavMenuItem(props) {
       currentImg = _useState[0],
       setCurrentImg = _useState[1];
 
-  var _useState2 = React.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
   });
@@ -2703,14 +2717,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");
     }
   };
 
@@ -2727,7 +2739,9 @@ var NavMenuItem = function NavMenuItem(props) {
   }), /*#__PURE__*/React.createElement(Text, {
     type: "strong",
     text: props.title,
-    color: textColor
+    hoverInGroup: true,
+    color: "slate-200",
+    hoverColor: "white"
   }));
 
   function handleMenuClick(event) {
@@ -2820,18 +2834,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,
@@ -2998,7 +3020,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"
@@ -3523,7 +3545,7 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
 SwitcherItem.propTypes = {
   name: PropTypes.string,
   icon: /*#__PURE__*/PropTypes.shape({
-    "default": /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    default: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     active: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     showBadge: PropTypes.bool
   }),
@@ -3552,7 +3574,7 @@ function SwitcherItem(_ref) {
   });
   var calculatedIcon;
 
-  if (icon && typeof icon["default"] === "string") {
+  if (icon && typeof icon.default === "string") {
     calculatedIcon = isSelected ? /*#__PURE__*/React__default.createElement("img", {
       alt: "",
       className: "",
@@ -3560,10 +3582,10 @@ function SwitcherItem(_ref) {
     }) : /*#__PURE__*/React__default.createElement("img", {
       alt: "",
       className: "",
-      src: icon["default"]
+      src: icon.default
     });
   } else if (icon) {
-    calculatedIcon = isSelected ? icon.active : icon["default"];
+    calculatedIcon = isSelected ? icon.active : icon.default;
   }
 
   return /*#__PURE__*/React__default.createElement("li", {
@@ -3619,7 +3641,7 @@ Switcher.propTypes = {
   items: /*#__PURE__*/PropTypes.arrayOf( /*#__PURE__*/PropTypes.shape({
     name: PropTypes.string,
     icon: /*#__PURE__*/PropTypes.shape({
-      "default": /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+      default: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
       active: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
       showBadge: PropTypes.bool
     }),
@@ -3763,22 +3785,6 @@ var TagSize;
   TagSize["base"] = "base";
 })(TagSize || (TagSize = {}));
 
-var TagGroup = function TagGroup(_ref) {
-  var tags = _ref.tags,
-      _ref$tagSize = _ref.tagSize,
-      tagSize = _ref$tagSize === void 0 ? TagSize.base : _ref$tagSize,
-      className = _ref.className;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("flex flex-row flex-wrap", className)
-  }, tags.map(function (tag) {
-    return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
-      size: tagSize
-    }, tag, {
-      className: classNames("mr-2 last:mr-0 mb-2")
-    }));
-  }));
-};
-
 var TagColorTheme;
 
 (function (TagColorTheme) {
@@ -3790,29 +3796,47 @@ 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"
   }));
 };
 
+var TagGroup = function TagGroup(_ref) {
+  var tags = _ref.tags,
+      _ref$tagSize = _ref.tagSize,
+      tagSize = _ref$tagSize === void 0 ? TagSize.base : _ref$tagSize,
+      className = _ref.className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-row flex-wrap", className)
+  }, tags.map(function (tag) {
+    return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
+      size: tagSize
+    }, tag, {
+      className: classNames("mr-2 last:mr-0 mb-2")
+    }));
+  }));
+};
+
 var _excluded$e = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
 var RESIZE_TYPES = {
   NONE: "none",
@@ -4001,7 +4025,7 @@ var TextEditorV2 = function TextEditorV2(_ref) {
 
 var _excluded$f = ["text", "icon", "className", "iconClass", "onClick"];
 
-function TextListItem(props) {
+function SectionItemWithContent(props) {
   var text = props.text,
       icon = props.icon,
       className = props.className,
@@ -4009,9 +4033,9 @@ function TextListItem(props) {
       onClick = props.onClick,
       rest = _objectWithoutPropertiesLoose(props, _excluded$f);
 
-  var mergedClasses = classNames("cweb-text-list-item", className);
-  var iconClasses = classNames("cweb-text-list-item-icon", iconClass);
-  return /*#__PURE__*/React__default.createElement(ListItem, _extends({
+  var mergedClasses = classNames("cweb-section-text-item", className);
+  var iconClasses = classNames("cweb-section-text-item-icon", iconClass);
+  return /*#__PURE__*/React__default.createElement(SectionItem, _extends({
     className: mergedClasses,
     onClick: onClick
   }, rest), icon && /*#__PURE__*/React__default.createElement("img", {
@@ -4023,7 +4047,7 @@ function TextListItem(props) {
   }));
 }
 
-TextListItem.propTypes = {
+SectionItemWithContent.propTypes = {
   text: PropTypes.string.isRequired,
   icon: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   className: PropTypes.string,
@@ -4059,7 +4083,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
@@ -4938,7 +4962,6 @@ exports.Input = Input;
 exports.LeftArrowIcon = LeftArrowIcon;
 exports.LightBulbIcon = LightBulbIcon;
 exports.Line = Line;
-exports.ListItem = ListItem;
 exports.ListTable = ListTable;
 exports.LoadingIndicator = LoadingIndicator;
 exports.LockIcon = LockIcon;
@@ -4962,6 +4985,8 @@ exports.SearchCancelIcon = SearchCancelIcon$1;
 exports.SearchIcon = SearchIcon$1;
 exports.SecondaryButton = SecondaryButton;
 exports.Section = Section;
+exports.SectionItem = SectionItem;
+exports.SectionItemWithContent = SectionItemWithContent;
 exports.SettingsMenuButton = SettingsMenuButton;
 exports.SmallCircleIcon = SmallCircleIcon;
 exports.SmallDiamondIcon = SmallDiamondIcon;
@@ -4981,7 +5006,6 @@ exports.TextArea = Textarea;
 exports.TextEditor = TextEditor;
 exports.TextEditorV2 = TextEditorV2;
 exports.TextLink = TextLink;
-exports.TextListItem = TextListItem;
 exports.Title = Title;
 exports.ViewItem = ViewItem;
 //# sourceMappingURL=web-ui.cjs.development.js.map