@luscii-healthtech/web-ui 0.2.2 → 0.3.0

package/dist/components/Steps/Step.d.ts

@@ -7,4 +7,4 @@ export interface StepProps {
         step: string;
     };
 }
-export declare const Step: ({ title, stepNumber, active, localization }: StepProps) => JSX.Element;
+export declare const Step: ({ title, stepNumber, active, localization, }: StepProps) => JSX.Element;

package/dist/components/Tag/Tag.d.ts

@@ -13,5 +13,5 @@ export interface TagProps {
     size?: TagSize;
     className?: string;
 }
-declare const Tag: ({ text, colorTheme, className, size }: TagProps) => JSX.Element;
+declare const Tag: ({ text, colorTheme, className, size, }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Text/Text.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 import { RestPropped } from "../../types/general.types";
 import "./Text.scss";
-export declare type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong" | string;
-export declare type TextColor = "base" | "gray-500" | "gray-200" | "white" | "blue" | "red" | "green" | "amber" | "inherit";
+export declare type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong";
+export declare type TextColor = "base" | "slate-500" | "slate-200" | "white" | "blue-800" | "red" | "green" | "amber";
+export declare type TextHoverColor = "blue-900" | "white";
 export interface TextProps extends RestPropped {
     text: string;
     type?: TextStyle;
     inline?: boolean;
     color?: TextColor;
-    hoverColor?: TextColor;
+    hoverColor?: TextHoverColor;
+    hoverInGroup?: boolean;
     className?: string;
     containsDangerousHtml?: boolean;
     truncate?: boolean;

package/dist/web-ui.cjs.development.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.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
     }, {
@@ -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"
@@ -3790,24 +3812,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"
   }));
@@ -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