@luscii-healthtech/web-ui 0.2.2 → 0.3.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Checkbox/Checkbox.tsx

@@ -53,7 +53,7 @@ export const Checkbox = ({
     setChecked(isChecked);
   }, [isChecked]);
 
-  const handleChange = (event) => {
+  const handleChange = event => {
     setChecked(!checked);
     if (onChange) {
       onChange(event);
@@ -66,7 +66,11 @@ export const Checkbox = ({
 
   return (
     <div className={containerClassName} data-test-id="checkbox">
-      <label className="cweb-checkbox-label" data-test-id="checkbox-label" onClick={(e) => e.stopPropagation()}>
+      <label
+        className="cweb-checkbox-label"
+        data-test-id="checkbox-label"
+        onClick={e => e.stopPropagation()}
+      >
         <input
           id={id}
           data-test-id={`checkbox-${name}`}
@@ -82,26 +86,36 @@ export const Checkbox = ({
         />
 
         <span
-          className={classNames("cweb-checkbox-icon-container", "transition-colors duration-300", {
-            "bg-primary": checked,
-            "bg-white": !checked,
-            "hover:bg-primary-dark": checked,
-            "outline-primary": isFocused,
-            "cursor-not-allowed": isDisabled,
-            "cursor-pointer": !isDisabled,
-          })}
+          className={classNames(
+            "cweb-checkbox-icon-container",
+            "transition-colors duration-300",
+            {
+              "bg-primary": checked,
+              "bg-white": !checked,
+              "hover:bg-primary-dark": checked,
+              "outline-primary": isFocused,
+              "cursor-not-allowed": isDisabled,
+              "cursor-pointer": !isDisabled,
+            }
+          )}
           data-test-id="checkbox-span"
         >
           <span className="cweb-checkbox-icon" />
         </span>
 
         <div className="flex flex-col">
-          {text && <Text className="ml-2 select-none text-left" text={text} data-test-id="checkbox-text" />}
+          {text && (
+            <Text
+              className="ml-2 text-left select-none"
+              text={text}
+              data-test-id="checkbox-text"
+            />
+          )}
           {explanation && (
             <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"
             />
           )}

package/src/components/Dropdown/Dropdown.js

@@ -23,10 +23,10 @@ const keyCodes = {
 };
 
 class Dropdown extends PureComponent {
-  static addHighlightIndexToItems = (items) => {
+  static addHighlightIndexToItems = items => {
     let index = 0;
 
-    return items.map((item) => {
+    return items.map(item => {
       if (!item.subItems) {
         const currentIndex = index;
         index = index + 1;
@@ -38,7 +38,7 @@ class Dropdown extends PureComponent {
       } else {
         return {
           ...item,
-          subItems: item.subItems.map((subItem) => {
+          subItems: item.subItems.map(subItem => {
             const currentIndex = index;
             index = index + 1;
 
@@ -52,7 +52,7 @@ class Dropdown extends PureComponent {
     });
   };
 
-  static getTotalItemCount = (items) => {
+  static getTotalItemCount = items => {
     return items.reduce((acc, item) => {
       if (!item.subItems) {
         return acc + 1;
@@ -67,7 +67,11 @@ class Dropdown extends PureComponent {
 
     const items = Dropdown.addHighlightIndexToItems(props.items);
     const selectedItem = props.initialSelectedItemId
-      ? this.findItem(items, ITEM_QUERY_FIELD_NAMES.ID, props.initialSelectedItemId)
+      ? this.findItem(
+          items,
+          ITEM_QUERY_FIELD_NAMES.ID,
+          props.initialSelectedItemId
+        )
       : null;
 
     this.state = {
@@ -97,13 +101,13 @@ class Dropdown extends PureComponent {
     document.removeEventListener("mousedown", this.handleClickOutside);
   }
 
-  handleClickOutside = (event) => {
+  handleClickOutside = event => {
     if (this.rootRef && !this.rootRef.contains(event.target)) {
       this.closeDropdown();
     }
   };
 
-  handleKeyDown = (event) => {
+  handleKeyDown = event => {
     const { items, isDropdownOpen, highlightIndex } = this.state;
 
     if (event.keyCode === keyCodes.ENTER) {
@@ -111,7 +115,13 @@ class Dropdown extends PureComponent {
 
       if (isDropdownOpen) {
         this.closeDropdown();
-        this.setSelectedItem(this.findItem(items, ITEM_QUERY_FIELD_NAMES.HIGHLIGHT_INDEX, highlightIndex));
+        this.setSelectedItem(
+          this.findItem(
+            items,
+            ITEM_QUERY_FIELD_NAMES.HIGHLIGHT_INDEX,
+            highlightIndex
+          )
+        );
         this.rootRef.blur();
       } else {
         this.openDropdown();
@@ -153,7 +163,8 @@ class Dropdown extends PureComponent {
           const subItem = item.subItems[j];
 
           if (
-            (fieldName === ITEM_QUERY_FIELD_NAMES.ID && subItem.key === fieldValue) ||
+            (fieldName === ITEM_QUERY_FIELD_NAMES.ID &&
+              subItem.key === fieldValue) ||
             subItem[fieldName] === fieldValue
           ) {
             selectedItem = subItem;
@@ -171,10 +182,12 @@ class Dropdown extends PureComponent {
   };
 
   openDropdown = () => {
-    this.setState((prevState) => {
+    this.setState(prevState => {
       return {
         isDropdownOpen: true,
-        highlightIndex: prevState.selectedItem ? prevState.selectedItem.highlightIndex : 0,
+        highlightIndex: prevState.selectedItem
+          ? prevState.selectedItem.highlightIndex
+          : 0,
       };
     });
   };
@@ -186,17 +199,17 @@ class Dropdown extends PureComponent {
     });
   };
 
-  setSelectedItem = (item) => {
+  setSelectedItem = item => {
     this.setState({
       selectedItem: item,
     });
   };
 
-  findSelectedItem = (selectedIndex) => {
+  findSelectedItem = selectedIndex => {
     return this.rootRef.querySelectorAll(".dropdown-list-item")[selectedIndex];
   };
 
-  scrollToHighlightedItem = (selectedIndex) => {
+  scrollToHighlightedItem = selectedIndex => {
     const selectedItem = this.findSelectedItem(selectedIndex);
     if (this.dropdownListRef.scrollTo) {
       this.dropdownListRef.scrollTo(0, selectedItem.offsetTop);
@@ -204,7 +217,7 @@ class Dropdown extends PureComponent {
   };
 
   increaseHighlightIndexIfPossible = () => {
-    this.setState((prevState) => {
+    this.setState(prevState => {
       const newHighlightIndex =
         prevState.highlightIndex < prevState.totalItemCount - 1
           ? prevState.highlightIndex + 1
@@ -221,8 +234,11 @@ class Dropdown extends PureComponent {
   };
 
   decreaseHighlightIndexIfPossible = () => {
-    this.setState((prevState) => {
-      const newHighlightIndex = prevState.highlightIndex > 0 ? prevState.highlightIndex - 1 : prevState.highlightIndex;
+    this.setState(prevState => {
+      const newHighlightIndex =
+        prevState.highlightIndex > 0
+          ? prevState.highlightIndex - 1
+          : prevState.highlightIndex;
 
       if (newHighlightIndex !== prevState.highlightIndex) {
         this.scrollToHighlightedItem(newHighlightIndex);
@@ -234,7 +250,7 @@ class Dropdown extends PureComponent {
     });
   };
 
-  selectItem = (item) => {
+  selectItem = item => {
     const { onItemSelect } = this.props;
 
     this.closeDropdown();
@@ -243,7 +259,7 @@ class Dropdown extends PureComponent {
     onItemSelect(item);
   };
 
-  renderIndividualItem = (item) => {
+  renderIndividualItem = item => {
     const { highlightIndex } = this.state;
     const isItemSelected = item.highlightIndex === highlightIndex;
 
@@ -254,14 +270,28 @@ class Dropdown extends PureComponent {
     const textType = isItemSelected ? "strong" : "base";
 
     return (
-      <div className={itemClassName} key={item.id} tabIndex="0" onClick={() => this.selectItem(item)}>
-        <Text data-test-id={item.text} text={item.text} type={textType} truncate />
-        <img className={classNames({ hidden: !isItemSelected })} src={checkmark} alt="checked" />
+      <div
+        className={itemClassName}
+        key={item.id}
+        tabIndex="0"
+        onClick={() => this.selectItem(item)}
+      >
+        <Text
+          data-test-id={item.text}
+          text={item.text}
+          type={textType}
+          truncate
+        />
+        <img
+          className={classNames({ hidden: !isItemSelected })}
+          src={checkmark}
+          alt="checked"
+        />
       </div>
     );
   };
 
-  renderGroupedItems = (item) => {
+  renderGroupedItems = item => {
     return (
       <div className="dropdown-list-item-group" key={item.groupKey}>
         {item.title && (
@@ -271,12 +301,12 @@ class Dropdown extends PureComponent {
               data-test-id={item.text}
               text={item.title}
               type="sm"
-              color="gray-500"
+              color="slate-500"
               truncate
             />
           </div>
         )}
-        {item.subItems.map((subItem) => this.renderIndividualItem(subItem))}
+        {item.subItems.map(subItem => this.renderIndividualItem(subItem))}
       </div>
     );
   };
@@ -287,9 +317,13 @@ class Dropdown extends PureComponent {
     return (
       <div
         className={classNames("dropdown-list", { wider: this.props.wider })}
-        ref={(element) => (this.dropdownListRef = element)}
+        ref={element => (this.dropdownListRef = element)}
       >
-        {items.map((item) => (item.subItems ? this.renderGroupedItems(item) : this.renderIndividualItem(item)))}
+        {items.map(item =>
+          item.subItems
+            ? this.renderGroupedItems(item)
+            : this.renderIndividualItem(item)
+        )}
       </div>
     );
   };
@@ -306,26 +340,41 @@ class Dropdown extends PureComponent {
       ...otherProps
     } = this.props;
     const { selectedItem, isDropdownOpen } = this.state;
-    const containerClassName = classNames("cweb-dropdown", className, { "is-open": isDropdownOpen });
-    const onDropdownClick = isDropdownOpen ? this.closeDropdown : this.openDropdown;
+    const containerClassName = classNames("cweb-dropdown", className, {
+      "is-open": isDropdownOpen,
+    });
+    const onDropdownClick = isDropdownOpen
+      ? this.closeDropdown
+      : this.openDropdown;
 
     return (
       <div
         className={classNames(containerClassName)}
         tabIndex="0"
-        ref={(element) => (this.rootRef = element)}
+        ref={element => (this.rootRef = element)}
         onKeyDown={this.handleKeyDown}
       >
         <div
           {...otherProps}
-          className={classNames("dropdown-header space-x-2 border border-solid p-3 cursor-pointer", {
-            "border-primary-dark": isDropdownOpen,
-            "border-input-border hover:border-input-border-dark": !isDropdownOpen,
-          })}
+          className={classNames(
+            "dropdown-header space-x-2 border border-solid p-3 cursor-pointer",
+            {
+              "border-primary-dark": isDropdownOpen,
+              "border-input-border hover:border-input-border-dark": !isDropdownOpen,
+            }
+          )}
           onClick={onDropdownClick}
         >
-          <Text className="dropdown-header-title" text={selectedItem ? selectedItem.text : placeholder} truncate />
-          <img className="dropdown-header-icon" src={chevronDouble} alt="browse icon" />
+          <Text
+            className="dropdown-header-title"
+            text={selectedItem ? selectedItem.text : placeholder}
+            truncate
+          />
+          <img
+            className="dropdown-header-icon"
+            src={chevronDouble}
+            alt="browse icon"
+          />
         </div>
         {this.renderItems()}
       </div>
@@ -354,7 +403,10 @@ Dropdown.propTypes = {
       }),
     ])
   ).isRequired,
-  initialSelectedItemId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  initialSelectedItemId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   placeholder: PropTypes.string,
   className: PropTypes.string,
   onItemSelect: PropTypes.func.isRequired,

package/src/components/InfoField/InfoField.tsx

@@ -19,7 +19,7 @@ interface InfoFieldProps {
 export const InfoField = (props: InfoFieldProps): JSX.Element => {
   const clipboard = new ClipboardJS("button");
 
-  clipboard.on("success", function (e) {
+  clipboard.on("success", function(e) {
     props.onCopyToClipboard && props.onCopyToClipboard();
     e.clearSelection();
   });
@@ -56,13 +56,21 @@ export const InfoField = (props: InfoFieldProps): JSX.Element => {
   }
 
   return (
-    <div className={classNames("flex flex-row align-center items-center", props.className)}>
+    <div
+      className={classNames(
+        "flex flex-row align-center items-center",
+        props.className
+      )}
+    >
       {props.icon}
-      <ContainerElement className={"flex flex-col overflow-hidden ml-3 first:ml-0"} {...containerProps}>
+      <ContainerElement
+        className={"flex flex-col overflow-hidden ml-3 first:ml-0"}
+        {...containerProps}
+      >
         <Text
           text={props.label}
           type={"sm"}
-          color={"gray-500"}
+          color={"slate-500"}
           className={classNames(
             { "break-words": props.supportsMultiline },
             { "whitespace-no-wrap": !props.supportsMultiline }

package/src/components/ListTable/ListTable.tsx

@@ -145,8 +145,9 @@ export function ListTable<ItemType extends ListTableItem, CellType>({
                   <Text
                     className={classNames(
                       "no-item-found-text",
-                      "w-56 text-base text-gray-600 text-center whitespace-pre-wrap"
+                      "w-56 text-base text-center whitespace-pre-wrap"
                     )}
+                    color="slate-500"
                     text={configuration.emptyListText}
                   />
                 </div>

package/src/components/ListTable/ListTableCell.tsx

@@ -6,7 +6,9 @@ import { Text } from "../Text/Text";
 import { ListTablePropsConfigurationField } from "./ListTable";
 
 function isEmpty(str: string) {
-  return str === null || str === undefined || (isString(str) && str.trim() === "");
+  return (
+    str === null || str === undefined || (isString(str) && str.trim() === "")
+  );
 }
 
 function isString(obj?: string | any): obj is string {
@@ -29,15 +31,24 @@ export function ListTableCell<ItemType, CellType>({
   const { name, className, textProps } = configuration;
 
   const textClassName = classNames("text-left", textProps?.className);
-  const cellClassName = classNames("cweb-list-table-content-cell", "py-0 px-3", className);
+  const cellClassName = classNames(
+    "cweb-list-table-content-cell",
+    "py-0 px-3",
+    className
+  );
 
-  const hasValue = (isString(value) && isEmpty(value) || value !== undefined);
+  const hasValue = (isString(value) && isEmpty(value)) || value !== undefined;
 
   const returnChildren = () => {
     return (
       <>
         {!hasValue && isString(emptyValue) && (
-          <Text text={emptyValue} {...textProps} className={textClassName} color={"gray-500"} />
+          <Text
+            text={emptyValue}
+            {...textProps}
+            className={textClassName}
+            color={"slate-500"}
+          />
         )}
         {hasValue && isString(value) && (
           <Text

package/src/components/NavMenu/NavMenuItem.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { navigate } from "@reach/router";
 import classNames from "classnames";
 
-import { TextColor, Text } from "../Text/Text";
+import { Text } from "../Text/Text";
 
 export interface NavMenuItemProps {
   href?: string;
@@ -20,8 +20,9 @@ export interface NavMenuItemProps {
 }
 
 export const NavMenuItem = (props: NavMenuItemProps): JSX.Element => {
-  const [currentImg, setCurrentImg] = useState(props.isSelected ? props.imgOnHover : props.img);
-  const [textColor, setTextColor] = useState<TextColor>(props.isSelected ? "white" : "gray-200");
+  const [currentImg, setCurrentImg] = useState(
+    props.isSelected ? props.imgOnHover : props.img
+  );
 
   const classes = classNames(
     [
@@ -40,6 +41,7 @@ export const NavMenuItem = (props: NavMenuItemProps): JSX.Element => {
       "duration-150",
       "lg:last:pb-2",
       "focus:outline-primary",
+      "group",
     ],
     {
       "bg-nav-menu": !props.isSelected,
@@ -50,14 +52,12 @@ export const NavMenuItem = (props: NavMenuItemProps): JSX.Element => {
   const handleOnMouseOver = () => {
     if (!props.isSelected) {
       setCurrentImg(props.imgOnHover);
-      setTextColor("white");
     }
   };
 
   const handleOnMouseOut = () => {
     if (!props.isSelected) {
       setCurrentImg(props.img);
-      setTextColor("gray-200");
     }
   };
 
@@ -71,7 +71,13 @@ export const NavMenuItem = (props: NavMenuItemProps): JSX.Element => {
       onClick={handleMenuClick}
     >
       <img src={currentImg} className={"mr-4 ml-0"} />
-      <Text type={"strong"} text={props.title} color={textColor} />
+      <Text
+        type={"strong"}
+        text={props.title}
+        hoverInGroup
+        color="slate-200"
+        hoverColor="white"
+      />
     </a>
   );
 

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import classNames from "classnames";
 
-import { Text } from "../Text/Text";
+import { Text, TextColor } from "../Text/Text";
 import { TextLink } from "../TextLink/TextLink";
 
-export type NotificationBannerColor = "base" | "blue" | "red" | "green" | "amber";
+export type NotificationBannerColor =
+  | "base"
+  | "blue"
+  | "red"
+  | "green"
+  | "amber";
 
 export interface NotificationBannerLinkProps {
   text: string;
@@ -20,23 +25,38 @@ interface NotificationBannerProps {
   className?: string;
 }
 
-export const NotificationBanner = (props: NotificationBannerProps): JSX.Element => {
+export const NotificationBanner = (
+  props: NotificationBannerProps
+): JSX.Element => {
   const 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",
     }
   );
 
+  const textColor: Record<NotificationBannerColor, TextColor> = {
+    red: "red",
+    amber: "amber",
+    green: "green",
+    base: "base",
+    // Blue must be 800 here to pass the contrast test
+    blue: "blue-800",
+  };
+
   return (
     <div className={classes}>
       {props.icon}
-      <Text className="first:ml-0 ml-4" text={props.text} color={props.color} />
+      <Text
+        className="ml-4 first:ml-0"
+        text={props.text}
+        color={props.color ? textColor[props.color] : "base"}
+      />
       {props.linkProps && (
         <TextLink
           className="ml-4"

package/src/components/PaginationMenu/PaginationMenuLarge.tsx

@@ -72,7 +72,7 @@ export const PaginationMenuLarge = (
             props.pageSize,
             props.resultCount
           )}
-          color="gray-500"
+          color="slate-500"
         />
         <SecondaryButton
           data-test-id="prev-button"

package/src/components/PaginationMenu/PaginationMenuSmall.tsx

@@ -28,7 +28,7 @@ export const PaginationMenuSmall = (
         className="ml-4"
         text={`${props.currentPageNumber} / ${props.pageCount}`}
         type="sm"
-        color="gray-500"
+        color="slate-500"
       />
       <TertiaryButton
         className="ml-4"

package/src/components/Steps/Step.tsx

@@ -6,16 +6,25 @@ export interface StepProps {
   title: string;
   stepNumber: number;
   active: boolean;
-  localization: {step: string};
+  localization: { step: string };
 }
 
-export const Step = ({ title, stepNumber, active, localization }: StepProps): JSX.Element => {
+export const Step = ({
+  title,
+  stepNumber,
+  active,
+  localization,
+}: StepProps): JSX.Element => {
   const barColor = active ? "bg-blue-800" : "bg-slate-200";
 
   return (
     <div className={"w-full"}>
       <div className={`w-full h-1 mb-2 rounded ${barColor}`}></div>
-      <Text text={`${localization.step} ${stepNumber}`} type={"strong"} color={active ? "blue" : "gray-500"} />
+      <Text
+        text={`${localization.step} ${stepNumber}`}
+        type={"strong"}
+        color={active ? "blue-800" : "slate-500"}
+      />
       <Text text={title} type={"strong"} />
     </div>
   );

package/src/components/Tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 
-import { Text } from "../Text/Text";
+import { Text, TextColor } from "../Text/Text";
 
 import { TagSize } from "./TagGroup";
 
@@ -20,18 +20,37 @@ export interface TagProps {
   className?: string;
 }
 
-const Tag = ({ text, colorTheme = TagColorTheme.Gray, className, size = TagSize.base }: TagProps): JSX.Element => {
-  const 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,
-  });
+const Tag = ({
+  text,
+  colorTheme = TagColorTheme.Gray,
+  className,
+  size = TagSize.base,
+}: TagProps): JSX.Element => {
+  const textColor: Record<TagColorTheme, TextColor> = {
+    [TagColorTheme.Red]: "red",
+    [TagColorTheme.Amber]: "amber",
+    [TagColorTheme.Green]: "green",
+    [TagColorTheme.Gray]: "base",
+    // Blue must be 800 here to pass the contrast test
+    [TagColorTheme.Blue]: "blue-800",
+  };
 
   return (
-    <div className={containerClassName}>
-      <Text inline color={"inherit"} text={text} type={size === TagSize.small ? "sm" : "base"} />
+    <div
+      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,
+      })}
+    >
+      <Text
+        inline
+        color={textColor[colorTheme]}
+        text={text}
+        type={size === TagSize.small ? "sm" : "base"}
+      />
     </div>
   );
 };