@luscii-healthtech/web-ui 0.2.2 → 0.3.0

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)}