@luscii-healthtech/web-ui 2.3.1 → 2.4.0

package/package.json

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

package/src/components/Icons/CheckIcon.tsx

@@ -8,6 +8,7 @@ export const CheckIcon = (props: IconProps): JSX.Element => {
       className={props.className}
       onClick={props.onClick}
       role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
       width="24"
       height="24"
       viewBox="0 0 24 24"

package/src/components/Icons/CrossIcon.tsx

@@ -8,6 +8,7 @@ export const CrossIcon = (props: IconProps): JSX.Element => {
       className={props.className}
       onClick={props.onClick}
       role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
       width="24"
       height="24"
       viewBox="0 0 24 24"

package/src/components/Icons/WarningIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const WarningIcon: React.VoidFunctionComponent<IconProps> = (props) => {
+  return (
+    <svg
+      className={props.className}
+      onClick={props.onClick}
+      role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/types/IconProps.type.ts

@@ -1,4 +1,5 @@
 export interface IconProps {
   className?: string;
   onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
+  "data-test-id"?: string;
 }

package/src/components/Toaster/Toaster.scss

@@ -0,0 +1,53 @@
+#application-toaster {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 150%);
+  bottom: 15px;
+
+  // https://easings.net/#easeInOutBack
+  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+  &.shelved {
+    transform: translate(-50%, 150%);
+  }
+
+  &.expanded {
+    transform: translate(-50%, 0);
+  }
+
+  &.type-success {
+    [data-test-id="toaster-title"] {
+      @apply text-green-700;
+    }
+
+    .failure-icon {
+      @apply hidden;
+    }
+
+    [data-test-id="toaster-progress-bar-container"] {
+      @apply bg-green-50;
+
+      [data-test-id="toaster-progress-bar"] {
+        @apply bg-green-400;
+      }
+    }
+  }
+
+  &.type-failure {
+    [data-test-id="toaster-title"] {
+      @apply text-red-700;
+    }
+
+    .success-icon {
+      @apply hidden;
+    }
+
+    [data-test-id="toaster-progress-bar-container"] {
+      @apply bg-red-50;
+
+      [data-test-id="toaster-progress-bar"] {
+        @apply bg-red-400;
+      }
+    }
+  }
+}

package/src/components/Toaster/Toaster.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+import { CheckIcon } from "../Icons/CheckIcon";
+import { CrossIcon } from "../Icons/CrossIcon";
+import { WarningIcon } from "../Icons/WarningIcon";
+
+import "./Toaster.scss";
+
+export interface ToasterProps {
+  type: "success" | "failure";
+  message: string;
+  title: string;
+  isVisible?: boolean;
+  /** if you need to reposition the toaster for whatever reason you can use these props */
+  styleOverwrite?: Pick<
+    React.CSSProperties,
+    "top" | "bottom" | "left" | "right"
+  >;
+}
+
+export const TOASTER_TYPE_OPTIONS = {
+  SUCCESS: "success",
+  FAILURE: "failure",
+} as const;
+export type ToasterType =
+  typeof TOASTER_TYPE_OPTIONS[keyof typeof TOASTER_TYPE_OPTIONS];
+
+const Toaster: React.VoidFunctionComponent<ToasterProps> = ({
+  message = "",
+  title = "",
+  type = TOASTER_TYPE_OPTIONS.SUCCESS,
+  isVisible,
+  styleOverwrite,
+}) => {
+  const isSuccess = type === TOASTER_TYPE_OPTIONS.SUCCESS;
+  const isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
+
+  return (
+    <div
+      style={styleOverwrite}
+      id="application-toaster"
+      data-test-id={`toaster-panel-${type}`}
+      className={classNames(
+        "bg-white cursor-pointer",
+        "rounded-md shadow-md",
+        "min-h-13 max-h-19 w-104 transition-transform",
+
+        {
+          shelved: !isVisible,
+          expanded: isVisible,
+          "type-success": isSuccess,
+          "type-failure": isFailure,
+        }
+      )}
+    >
+      <div className="relative p-4">
+        <div className="flex flex-row">
+          <div
+            data-test-id="success-toaster-icon"
+            className={classNames("success-icon text-green-700", {
+              hidden: isFailure,
+            })}
+          >
+            <CheckIcon />
+          </div>
+          <div
+            data-test-id="failure-toaster-icon"
+            className={classNames("failure-icon text-red-700", {
+              hidden: isSuccess,
+            })}
+          >
+            <WarningIcon />
+          </div>
+          <div className="ml-3">
+            <Text type="strong" data-test-id="toaster-title" text={title} />
+            <Text data-test-id="toaster-message" text={message} />
+          </div>
+          <CrossIcon
+            data-test-id="toaster-close-button"
+            className="ml-auto cursor-pointer text-slate-500"
+          />
+        </div>
+      </div>
+
+      <div
+        data-test-id="toaster-progress-bar-container"
+        className={classNames("h-1 absolute bottom-0 w-full rounded-b-md")}
+      >
+        <div
+          data-test-id="toaster-progress-bar"
+          className={classNames("h-full")}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Toaster;

package/src/components/Toaster/toast-elements-getter.ts

@@ -0,0 +1,72 @@
+interface GetToasterElementsParams {
+  timeoutId: NodeJS.Timeout;
+  progressBarAnimationFrameHandler: number;
+}
+
+interface GetToasterElementsReturn {
+  toasterElementMessage: HTMLElement;
+  toasterProgressBar: HTMLElement;
+  toasterElementTitle: HTMLElement;
+  toasterElementSuccessIcon: HTMLElement;
+  toasterElementFailureIcon: HTMLElement;
+  toasterElementContainer: HTMLElement;
+  toasterCloseButton: HTMLElement;
+}
+
+/**
+ *
+ * @param params.timeoutId - the timeoutId (that makes the toaster vanish), in case of a shortcut
+ * @param params.progressBarAnimationFrameHandler - animation frame id to be canceled in case of a shortcut
+ * @returns a collection of html elements to be manipulated by the animation
+ */
+export const getToasterElements = (
+  params: GetToasterElementsParams
+): GetToasterElementsReturn => {
+  const { timeoutId, progressBarAnimationFrameHandler } = params;
+  const toasterElementContainer = document.querySelector<HTMLElement>(
+    "#application-toaster"
+  );
+
+  if (!toasterElementContainer) {
+    clearTimeout(timeoutId);
+    clearTimeout(progressBarAnimationFrameHandler);
+
+    throw new Error(
+      "Make sure that the Toaster component element is rendered with an id [application-toaster]"
+    );
+  }
+
+  const toasterElementMessage = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-message"]'
+  ) as HTMLElement;
+
+  const toasterElementTitle = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-title"]'
+  ) as HTMLElement;
+
+  const toasterElementSuccessIcon = toasterElementContainer?.querySelector(
+    '[data-test-id="success-toaster-icon"]'
+  ) as HTMLElement;
+
+  const toasterElementFailureIcon = toasterElementContainer?.querySelector(
+    '[data-test-id="failure-toaster-icon"]'
+  ) as HTMLElement;
+
+  const toasterCloseButton = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-close-button"]'
+  ) as HTMLElement;
+
+  const toasterProgressBar = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-progress-bar"]'
+  ) as HTMLElement;
+
+  return {
+    toasterElementContainer,
+    toasterElementMessage,
+    toasterElementTitle,
+    toasterProgressBar,
+    toasterElementSuccessIcon,
+    toasterElementFailureIcon,
+    toasterCloseButton,
+  };
+};

package/src/components/Toaster/toast-progress-animator.ts

@@ -0,0 +1,53 @@
+interface AnimateProgressParams {
+  animationDuration: number;
+  progressBarElement: HTMLElement;
+}
+
+/**
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+ * @param params.animationDuration - the amount of seconds the duration will take
+ * @param params.progressBarElement - the html element for the progress bar
+ * @returns the animation frame id
+ */
+export const animateProgress = (params: AnimateProgressParams): number => {
+  const { animationDuration, progressBarElement } = params;
+
+  let progressBarAnimationFrameHandler: number;
+
+  let startingTimestamp = 0;
+  let previousTimestamp = 0;
+  let done = false;
+  const animationTick = 100 / animationDuration;
+
+  const animate = (animationTimestamp: number) => {
+    if (!startingTimestamp) {
+      startingTimestamp = animationTimestamp;
+    }
+
+    const elapsed = animationTimestamp - startingTimestamp;
+
+    if (previousTimestamp !== animationTimestamp) {
+      const count = 100 - animationTick * elapsed;
+      progressBarElement.style.width = `${count}%`;
+      if (count === 0) {
+        done = true;
+      }
+    }
+
+    if (elapsed < animationDuration) {
+      // Stop the animation after duration is finished
+      previousTimestamp = animationTimestamp;
+
+      if (!done) {
+        progressBarAnimationFrameHandler =
+          window.requestAnimationFrame(animate);
+      }
+    }
+  };
+
+  progressBarElement.style.width = "100%";
+
+  progressBarAnimationFrameHandler = requestAnimationFrame(animate);
+
+  return progressBarAnimationFrameHandler;
+};

package/src/components/Toaster/toast.ts

@@ -0,0 +1,112 @@
+import { getToasterElements } from "./toast-elements-getter";
+import { animateProgress } from "./toast-progress-animator";
+
+let timeoutId: NodeJS.Timeout;
+let progressBarAnimationFrameHandler: number;
+
+const defaultDurationInSeconds = 5;
+
+type ToastParams =
+  | {
+      message: string;
+      title?: string;
+      showIcon?: boolean;
+      type: "success" | "failure";
+    }
+  | string;
+
+const showToaster = (params: ToastParams) => {
+  clearTimeout(timeoutId);
+  clearTimeout(progressBarAnimationFrameHandler);
+
+  const {
+    toasterElementContainer,
+    toasterElementMessage,
+    toasterElementTitle,
+    toasterProgressBar,
+    toasterElementSuccessIcon,
+    toasterElementFailureIcon,
+    toasterCloseButton,
+  } = getToasterElements({
+    timeoutId,
+    progressBarAnimationFrameHandler,
+  });
+
+  const animationDuration = defaultDurationInSeconds * 1000;
+
+  progressBarAnimationFrameHandler = animateProgress({
+    animationDuration,
+    progressBarElement: toasterProgressBar,
+  });
+
+  timeoutId = setTimeout(() => {
+    toasterElementContainer.classList.remove("expanded");
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }, animationDuration);
+
+  function shortcutAndClose() {
+    toasterElementContainer.classList.remove("expanded");
+    toasterElementContainer.classList.add("shelved");
+
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }
+
+  toasterCloseButton.removeEventListener("click", shortcutAndClose, true);
+  toasterCloseButton.addEventListener("click", shortcutAndClose);
+
+  toasterElementContainer.removeEventListener("click", shortcutAndClose, true);
+  toasterElementContainer.addEventListener("click", shortcutAndClose);
+
+  // Basic usage, no need to manipulate any other element;
+  if (typeof params === "string") {
+    toasterElementMessage.textContent = params;
+    toasterElementTitle.classList.add("hidden");
+
+    toasterElementSuccessIcon.classList.remove("hidden");
+    toasterElementFailureIcon.classList.add("hidden");
+
+    toasterElementContainer.classList.remove("type-failure");
+    toasterElementContainer.classList.add("type-success");
+    toasterElementContainer.classList.add("expanded");
+
+    return;
+  }
+
+  const { title = "", showIcon = true, message, type } = params;
+
+  toasterElementTitle.classList.toggle("hidden", !title);
+  toasterElementTitle.textContent = title;
+
+  toasterElementSuccessIcon.classList.toggle("hidden", !showIcon);
+  toasterElementFailureIcon.classList.toggle("hidden", !showIcon);
+
+  toasterElementMessage.textContent = message;
+  toasterElementContainer.classList.remove("type-success");
+  toasterElementContainer.classList.remove("type-failure");
+  toasterElementContainer.classList.add("expanded");
+  toasterElementContainer.classList.add(`type-${type}`);
+};
+
+export const toast = (params: ToastParams): void => {
+  showToaster(params);
+};
+
+toast.error = (message: string): void => {
+  showToaster({
+    message: message,
+    type: "failure",
+    showIcon: true,
+    title: "",
+  });
+};
+
+toast.info = (message: string): void => {
+  showToaster({
+    message: message,
+    type: "success",
+    showIcon: true,
+    title: "",
+  });
+};

package/src/index.tsx

@@ -1,7 +1,9 @@
 export {
-  default as Acknowledgement,
-  ACKNOWLEDGEMENT_TYPE_OPTIONS,
-} from "./components/Acknowledgement/Acknowledgement";
+  default as Toaster,
+  TOASTER_TYPE_OPTIONS,
+} from "./components/Toaster/Toaster";
+export { toast } from "./components/Toaster/toast";
+
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
 export {
@@ -44,7 +46,7 @@ export {
 } from "./components/List/List";
 export {
   CheckboxList,
-    CheckboxListProps,
+  CheckboxListProps,
 } from "./components/CheckboxList/CheckboxList";
 
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";

package/dist/components/Acknowledgement/Acknowledgement.d.ts

@@ -1,22 +0,0 @@
-export namespace ACKNOWLEDGEMENT_TYPE_OPTIONS {
-    export const SUCCESS: string;
-    export const FAILURE: string;
-}
-export default Acknowledgement;
-declare function Acknowledgement({ message, type, isVisible, hasIcon, className, }: {
-    message?: string | undefined;
-    type?: string | undefined;
-    isVisible?: boolean | undefined;
-    hasIcon?: boolean | undefined;
-    className?: string | undefined;
-}): JSX.Element;
-declare namespace Acknowledgement {
-    export const propTypes: {
-        message: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        hasIcon: PropTypes.Requireable<boolean>;
-        isVisible: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/src/components/Acknowledgement/Acknowledgement.js

@@ -1,61 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-import successIcon from "../../assets/success-icon.svg";
-import failureIcon from "../../assets/error-icon.svg";
-
-import "./Acknowledgement.scss";
-
-export const ACKNOWLEDGEMENT_TYPE_OPTIONS = {
-  SUCCESS: "success",
-  FAILURE: "failure",
-};
-
-Acknowledgement.propTypes = {
-  message: PropTypes.string,
-  type: PropTypes.oneOf([ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS, ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE]),
-  hasIcon: PropTypes.bool,
-  isVisible: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-function Acknowledgement({
-  message = "",
-  type = ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-  isVisible = false,
-  hasIcon = false,
-  className = "",
-}) {
-  const containerClassName = classNames("cweb-acknowledgement", className, {
-    "type-success": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-    "type-failure": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
-    "is-visible": isVisible,
-  });
-
-  const iconContainerClasses = classNames("acknowledgement-icon-container", {
-    hidden: !hasIcon,
-  });
-
-  const successIconClasses = classNames("icon success-icon acknowledgement-icon", {
-    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-  });
-
-  const failureIconClasses = classNames("icon failure-icon acknowledgement-icon", {
-    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
-  });
-
-  return (
-    <div id="application-acknowledgement" data-test-id={`acknowledgement-panel-${type}`} className={containerClassName}>
-      <div className={iconContainerClasses}>
-        <img src={successIcon} className={successIconClasses} alt="Success icon" />
-        <img src={failureIcon} className={failureIconClasses} alt="Failure icon" />
-      </div>
-
-      <Text data-test-id="acknowledgement-message" text={message} />
-    </div>
-  );
-}
-
-export default Acknowledgement;

package/src/components/Acknowledgement/Acknowledgement.scss

@@ -1,49 +0,0 @@
-@import "../../styles/layout";
-@import "../../styles/colors";
-
-.cweb-acknowledgement {
-  @include horizontal-static-position(fixed, 10000);
-  @include flexbox-vertical(center, center);
-
-  $horizontal-margin: 6px;
-  $max-width: 360px - $horizontal-margin;
-
-  top: 0;
-  margin: 0 auto;
-  opacity: 0;
-  width: $max-width;
-  max-width: calc(100% - #{$horizontal-margin});
-  box-shadow: 0 0 20px 0 rgba(106, 191, 165, 0.2);
-  padding: 16px;
-  border-radius: 8px;
-
-  transform: translateY(-100%);
-  transition: transform ease-out 400ms, opacity 1ms linear 500ms;
-
-  > .acknowledgement-icon-container {
-    width: 48px;
-    height: 48px;
-
-    margin-bottom: 12px;
-
-     > .acknowledgement-icon {
-       width: 100%;
-       height: 100%;
-     }
-  }
-
-  &.type-success {
-    background: $color-positive-support;
-  }
-
-  &.type-failure {
-    background: $color-negative-support;
-  }
-
-  &.is-visible {
-    opacity: 1;
-    transform: translateY(32px);
-    transition: transform ease-in 150ms;
-  }
-}
-