@luscii-healthtech/web-ui 0.2.2 → 0.4.1

package/src/components/{TextListItem/TextListItem.js → Section/SectionItemWithContent.js}

@@ -3,24 +3,25 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 
 import LegacyText from "../Text/LegacyText";
-import "./TextListItem.scss";
-import ListItem from "../ListItem/ListItem";
 
-function TextListItem(props) {
+import "./SectionItemWithContent.scss";
+import SectionItem from "./SectionItem";
+
+function SectionItemWithContent(props) {
   const { text, icon, className, iconClass, onClick, ...rest } = props;
 
-  const mergedClasses = classNames("cweb-text-list-item", className);
-  const iconClasses = classNames("cweb-text-list-item-icon", iconClass);
+  const mergedClasses = classNames("cweb-section-text-item", className);
+  const iconClasses = classNames("cweb-section-text-item-icon", iconClass);
 
   return (
-    <ListItem className={mergedClasses} onClick={onClick} {...rest}>
+    <SectionItem className={mergedClasses} onClick={onClick} {...rest}>
       {icon && <img className={iconClasses} src={icon} alt="" />}
       <LegacyText text={text} />
-    </ListItem>
+    </SectionItem>
   );
 }
 
-TextListItem.propTypes = {
+SectionItemWithContent.propTypes = {
   text: PropTypes.string.isRequired,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   className: PropTypes.string,
@@ -28,4 +29,4 @@ TextListItem.propTypes = {
   onClick: PropTypes.func,
 };
 
-export default TextListItem;
+export default SectionItemWithContent;

package/src/components/{TextListItem/TextListItem.scss → Section/SectionItemWithContent.scss}

@@ -1,8 +1,8 @@
 @import "../../styles/colors";
 @import "../../styles/layout";
 
-.cweb-text-list-item {
-  .cweb-text-list-item-icon {
+.cweb-section-text-item {
+  .cweb-section-text-item-icon {
     width: 24px;
     height: 24px;
     margin-right: 16px;

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,9 +1,9 @@
 import React from "react";
 import classNames from "classnames";
 
-import { Text } from "../Text/Text";
+import { Text, TextColor } from "../Text/Text";
 
-import { TagSize } from "./TagGroup";
+import { TagSize } from "./Tag.utils";
 
 export enum TagColorTheme {
   Red = "red",
@@ -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>
   );
 };

package/src/components/Tag/Tag.utils.ts

@@ -0,0 +1,4 @@
+export enum TagSize {
+  "small" = "small",
+  "base" = "base",
+}

package/src/components/Tag/TagGroup.tsx

@@ -2,11 +2,7 @@ import React from "react";
 import classNames from "classnames";
 
 import Tag, { TagProps } from "./Tag";
-
-export enum TagSize {
-  "small" = "small",
-  "base" = "base",
-}
+import { TagSize } from "./Tag.utils";
 
 interface TagGroupProps {
   tags: TagProps[];
@@ -14,10 +10,18 @@ interface TagGroupProps {
   className?: string;
 }
 
-const TagGroup = ({ tags, tagSize = TagSize.base, className }: TagGroupProps): JSX.Element => (
+const TagGroup = ({
+  tags,
+  tagSize = TagSize.base,
+  className,
+}: TagGroupProps): JSX.Element => (
   <div className={classNames("flex flex-row flex-wrap", className)}>
-    {tags.map((tag) => (
-      <Tag size={tagSize} {...tag} className={classNames("mr-2 last:mr-0 mb-2")} />
+    {tags.map(tag => (
+      <Tag
+        size={tagSize}
+        {...tag}
+        className={classNames("mr-2 last:mr-0 mb-2")}
+      />
     ))}
   </div>
 );

package/src/components/Text/Text.tsx

@@ -5,17 +5,36 @@ import { RestPropped } from "../../types/general.types";
 
 import "./Text.scss";
 
-export type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong" | string;
+export type TextStyle =
+  | "sm"
+  | "sm-strong"
+  | "base"
+  | "strong"
+  | "lg"
+  | "lg-strong"
+  | "xl"
+  | "xl-strong";
 
 //Extend with other colors that we want to enable for text
-export type TextColor = "base" | "gray-500" | "gray-200" | "white" | "blue" | "red" | "green" | "amber" | "inherit";
+export type TextColor =
+  | "base"
+  | "slate-500"
+  | "slate-200"
+  | "white"
+  | "blue-800"
+  | "red"
+  | "green"
+  | "amber";
+
+export type TextHoverColor = "blue-900" | "white";
 
 export interface TextProps extends RestPropped {
   text: string;
   type?: TextStyle; //defaults to "base"
   inline?: boolean; //defaults to false
   color?: TextColor; //defaults to "base"
-  hoverColor?: TextColor; //defaults to "base"
+  hoverColor?: TextHoverColor; //defaults to "base"
+  hoverInGroup?: boolean;
   className?: string;
   containsDangerousHtml?: boolean; //defaults to false
   truncate?: boolean; //defaults to false
@@ -23,43 +42,74 @@ export interface TextProps extends RestPropped {
 }
 
 export const Text = (props: TextProps): JSX.Element => {
+  /**
+   * 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
+   */
+
+  const allowedColors: Record<TextColor, string> = {
+    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",
+  };
+
+  const allowedHoverColors: Record<TextHoverColor, string> = {
+    "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
+  const allowedGroupHoverColors: Record<TextHoverColor, string> = {
+    "blue-900": "group-hover:text-blue-900",
+    white: "group-hover:text-white",
+  };
+
+  const selectedHoverColor =
+    props.hoverColor &&
+    !props.hoverInGroup &&
+    allowedHoverColors[props.hoverColor];
+
+  const selectedGroupHoverColor =
+    props.hoverColor &&
+    props.hoverInGroup &&
+    allowedGroupHoverColors[props.hoverColor];
+
   const containerProps = {
     "data-test-id": props["data-test-id"],
     className: classNames(
-        // apply different style classes
-        // for now we stick with font-size 16px on the body
-        // so I am adjusting our styles accordingly (one step down)
-        {
-          "text-xs font-medium": props.type === "sm",
-          "text-xs font-semibold": props.type === "sm-strong",
-          "text-sm": props.type === "base",
-          "text-sm font-semibold": props.type === "strong",
-          "": props.type === "lg",
-          "font-semibold": props.type === "lg-strong",
-          "text-lg": props.type === "xl",
-          "font-semibold text-lg": props.type === "xl-strong",
-        },
-        {
-          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",
-        },
-        {
-          "in-html-link": props.containsDangerousHtml,
-        },
-        //can be used to overwrite other classes like the color
-        props.className
+      // apply different style classes
+      // for now we stick with font-size 16px on the body
+      // so I am adjusting our styles accordingly (one step down)
+      {
+        "text-xs font-medium": props.type === "sm",
+        "text-xs font-semibold": props.type === "sm-strong",
+        "text-sm": props.type === "base",
+        "text-sm font-semibold": props.type === "strong",
+        "": props.type === "lg",
+        "font-semibold": props.type === "lg-strong",
+        "text-lg": props.type === "xl",
+        "font-semibold text-lg": props.type === "xl-strong",
+      },
+      {
+        inline: props.inline,
+        // FIXME: this class doesn't do anything without a max-width
+        truncate: props.truncate,
+      },
+      allowedColors[props.color || "base"],
+      selectedHoverColor,
+      selectedGroupHoverColor,
+      {
+        "in-html-link": props.containsDangerousHtml,
+      },
+      //can be used to overwrite other classes like the color
+      props.className
     ),
   };
 

package/src/components/ViewItem/ViewItem.tsx

@@ -6,7 +6,8 @@ import Button from "../Button/Button";
 import { RestPropped } from "../../types/general.types";
 import { ButtonProps } from "../Button/Button.types";
 
-export interface ViewItemProps<AccessoryType extends JSX.Element> extends RestPropped {
+export interface ViewItemProps<AccessoryType extends JSX.Element>
+  extends RestPropped {
   titleProps?: TextProps;
   // deprecated: use titleProps instead
   title?: string;
@@ -22,7 +23,7 @@ export interface ViewItemProps<AccessoryType extends JSX.Element> extends RestPr
   buttons?: ButtonProps[];
 }
 
-export function ViewItem<AccessoryType extends JSX.Element> ({
+export function ViewItem<AccessoryType extends JSX.Element>({
   titleProps,
   title,
   titleAccessory,
@@ -36,29 +37,40 @@ export function ViewItem<AccessoryType extends JSX.Element> ({
   const titlePropsMerged = titleProps ?? { text: title ?? defaultContent };
   const contentPropsMerged =
     contentProps ??
-    content?.map((line) => {
+    content?.map(line => {
       return { text: line, className: "cweb-view-content-text" } as TextProps;
     });
 
   return (
     <div className={classNames("vitals-view-item", className)} {...restProps}>
-      <div className={"vitals-view-item-title-line flex justify-start flex-row items-start"}>
+      <div
+        className={
+          "vitals-view-item-title-line flex justify-start flex-row items-start"
+        }
+      >
         {titlePropsMerged && (
           <Text
-            className={classNames(titlePropsMerged.className, "vitals-view-item-title mb-1 mr-2")}
-            color="gray-500"
+            className={classNames(
+              titlePropsMerged.className,
+              "vitals-view-item-title mb-1 mr-2"
+            )}
+            color="slate-500"
             {...titlePropsMerged}
           />
         )}
         {titleAccessory}
       </div>
       {contentPropsMerged &&
-        contentPropsMerged?.map((textProps) => <Text {...textProps} key={textProps.key || textProps.text} />)}
-      {(!contentPropsMerged || contentPropsMerged?.length === 0) && <Text text={defaultContent} key="empty-text" />}
+        contentPropsMerged?.map(textProps => (
+          <Text {...textProps} key={textProps.key || textProps.text} />
+        ))}
+      {(!contentPropsMerged || contentPropsMerged?.length === 0) && (
+        <Text text={defaultContent} key="empty-text" />
+      )}
 
       <div className="flex flex-row cweb-view-buttons" key="cweb-view-buttons">
         {buttons &&
-          buttons.map((button) => (
+          buttons.map(button => (
             <Button
               {...button}
               className={classNames("cweb-view-button ml-3", button.className)}

package/src/index.tsx

@@ -24,9 +24,9 @@ export { InfoField } from "./components/InfoField/InfoField";
 export { INPUT_TYPES, default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
 export {
-  default as ListItem,
-  ListItemProps,
-} from "./components/ListItem/ListItem";
+  default as SectionItem,
+  SectionItemProps,
+} from "./components/Section/SectionItem";
 export {
   ListTable,
   ListTableProps,
@@ -75,7 +75,7 @@ export { default as TextArea } from "./components/Textarea/Textarea";
 export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
-export { default as TextListItem } from "./components/TextListItem/TextListItem";
+export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { Title, TitleStyle } from "./components/Title/Title";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 

package/dist/components/ListItem/ListItem.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import "./ListItem.scss";
-export interface ListItemProps {
-    className?: string;
-    onClick?: any;
-    children?: any;
-}
-export declare const ListItem: React.FC<ListItemProps>;
-export default ListItem;