@luscii-healthtech/web-ui 2.5.2 → 2.7.1

package/package.json

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

package/src/components/CenteredHero/CenteredHero.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import classNames from "classnames";
+
+import Button from "../Button/Button";
+import { ButtonProps } from "../Button/Button.types";
+import Text from "../Text/Text";
+import { Title } from "../Title/Title";
+
+export type BackgroundColor = "white" | "slate-50";
+
+export interface CenteredHeroProps {
+  title: string;
+  text: string;
+  image: string;
+  buttons: ButtonProps[];
+  background?: BackgroundColor;
+}
+
+const CenteredHero = ({
+  title,
+  text,
+  image,
+  buttons,
+  background = "slate-50",
+}: CenteredHeroProps): JSX.Element => {
+  return (
+    <div
+      className={classNames(
+        "p-6 flex flex-col items-center align-center w-full",
+        {
+          "bg-white": background === "white",
+          "bg-slate-50": background === "slate-50",
+        }
+      )}
+    >
+      {image && <img src={image} className="h-36 w-36 mb-4" />}
+      {title && <Title text={title} type={"base"} />}
+      {text && <Text text={text} />}
+
+      {buttons?.length > 0 && (
+        <div className="flex flex-row mt-4">
+          {buttons
+            .filter(
+              (button) => button.title && button.handleOnClick && button.type
+            )
+            .map((button) => (
+              <Button
+                className="mr-4 last:mr-0"
+                key={button.title}
+                role={button.role}
+                type={button.type}
+                title={button.title}
+                text={button.text}
+                onClick={button.handleOnClick}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CenteredHero;

package/src/components/List/ListItem.tsx

@@ -68,6 +68,7 @@ export const ListItem = ({
       {!loadIconError && icon && typeof icon === "string" && (
         <img
           src={icon}
+          data-chromatic="ignore"
           alt="list-item-icon"
           className="w-6 h-6 text-sm"
           onLoad={onListItemIconLoad}

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -33,6 +33,7 @@ export function LoadingIndicator({
     <div {...restProps} className={containerClassName}>
       <img
         src={asSpinner ? spinnerToRender : loadingImage}
+        data-chromatic="ignore"
         className={classNames("text-gray-600 fill-current stroke-current", {
           "h-4 w-4": asSpinner,
           "h-12 w-12": !asSpinner,

package/src/components/Radio/RadioV2.tsx

@@ -8,6 +8,7 @@ import "./RadioV2.css";
 export interface RadioProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   name: string;
+  // value field is used by react-hook-form as the value returned
   value: string | number;
   // text shown to the user to explain the option
   text?: string;
@@ -15,7 +16,6 @@ export interface RadioProps
   info?: string;
   isError?: boolean;
   innerRef?: React.Ref<HTMLInputElement>;
-  // value field is used by react-hook-form as the value returned
 }
 
 function RadioInner({

package/src/components/Toaster/Toaster.scss

@@ -1,14 +1,14 @@
 #application-toaster {
   position: fixed;
   left: 50%;
-  transform: translate(-50%, 150%);
+  transform: translate(-50%, 200%);
   bottom: 48px;
 
   // https://easings.net/#easeInOutBack
   transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 
   &.shelved {
-    transform: translate(-50%, 150%);
+    transform: translate(-50%, 200%);
   }
 
   &.expanded {
@@ -16,6 +16,8 @@
   }
 
   &.type-success {
+    @apply bg-green-50;
+
     [data-test-id="toaster-title"] {
       @apply text-green-700;
     }
@@ -34,6 +36,8 @@
   }
 
   &.type-failure {
+    @apply bg-red-50;
+
     [data-test-id="toaster-title"] {
       @apply text-red-700;
     }

package/src/components/Toaster/Toaster.tsx

@@ -44,7 +44,7 @@ const Toaster: React.VoidFunctionComponent<ToasterProps> = ({
       data-test-id={`toaster-panel-${type}`}
       className={classNames(
         "bg-white cursor-pointer",
-        "rounded-md shadow-md",
+        "rounded-md shadow-lg",
         "min-h-13 max-h-19 w-104 transition-transform",
 
         {

package/src/components/CenteredHero/CenteredHero.js

@@ -1,50 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import Button, { BUTTON_ROLES } from "../Button/Button";
-import Text from "../Text/Text";
-import { Title } from "../Title/Title";
-
-CenteredHero.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
-  image: PropTypes.string,
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      handleOnClick: PropTypes.func.isRequired,
-      type: PropTypes.oneOf([BUTTON_ROLES.PRIMARY, BUTTON_ROLES.SECONDARY]).isRequired,
-    })
-  ),
-  className: PropTypes.string,
-};
-
-function CenteredHero({ title, text, image, buttons, className }) {
-  return (
-    <div className={classNames(className, "p-6 my-6 flex flex-col items-center w-200 ml-auto mr-auto")}>
-      {image && <img src={image} />}
-      {title && <Title className="mt-8 mb-2" text={title} type={"base"} />}
-      {text && <Text text={text} />}
-
-      {buttons?.length > 0 && (
-        <div className="flex flex-row mt-8">
-          {buttons
-            .filter((button) => button.title && button.handleOnClick && button.type)
-            .map((button) => (
-              <Button
-                className="mr-4 last:mr-0"
-                key={button.title}
-                role={button.type}
-                title={button.title}
-                text={button.title}
-                onClick={button.handleOnClick}
-              />
-            ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default CenteredHero;