@luscii-healthtech/web-ui 2.3.1 → 2.4.0

package/dist/components/Icons/WarningIcon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IconProps } from "./types/IconProps.type";
+export declare const WarningIcon: React.VoidFunctionComponent<IconProps>;

package/dist/components/Icons/types/IconProps.type.d.ts

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

package/dist/components/Toaster/Toaster.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+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 declare const TOASTER_TYPE_OPTIONS: {
+    readonly SUCCESS: "success";
+    readonly FAILURE: "failure";
+};
+export declare type ToasterType = typeof TOASTER_TYPE_OPTIONS[keyof typeof TOASTER_TYPE_OPTIONS];
+declare const Toaster: React.VoidFunctionComponent<ToasterProps>;
+export default Toaster;

package/dist/components/Toaster/toast-elements-getter.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="node" />
+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 declare const getToasterElements: (params: GetToasterElementsParams) => GetToasterElementsReturn;
+export {};

package/dist/components/Toaster/toast-progress-animator.d.ts

@@ -0,0 +1,12 @@
+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 declare const animateProgress: (params: AnimateProgressParams) => number;
+export {};

package/dist/components/Toaster/toast.d.ts

@@ -0,0 +1,12 @@
+declare type ToastParams = {
+    message: string;
+    title?: string;
+    showIcon?: boolean;
+    type: "success" | "failure";
+} | string;
+export declare const toast: {
+    (params: ToastParams): void;
+    error(message: string): void;
+    info(message: string): void;
+};
+export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { default as Acknowledgement, ACKNOWLEDGEMENT_TYPE_OPTIONS, } from "./components/Acknowledgement/Acknowledgement";
+export { 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 { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition, } from "./components/ButtonV2/ButtonProps.type";

package/dist/web-ui-tailwind.css

@@ -969,6 +969,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1001,6 +1005,11 @@ video {
   border-bottom-left-radius: 0.25rem;
 }
 
+.rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1449,6 +1458,10 @@ video {
   margin-right: 0;
 }
 
+.max-h-19 {
+  max-height: 4.75rem;
+}
+
 .max-h-78 {
   max-height: 19.5rem;
 }
@@ -1461,6 +1474,10 @@ video {
   max-width: 48rem;
 }
 
+.min-h-13 {
+  min-height: 3.25rem;
+}
+
 .min-w-24 {
   min-width: 1.5rem;
 }
@@ -1693,6 +1710,10 @@ video {
   right: 0;
 }
 
+.bottom-0 {
+  bottom: 0;
+}
+
 .left-0 {
   left: 0;
 }
@@ -2041,6 +2062,10 @@ video {
   width: 20rem;
 }
 
+.w-104 {
+  width: 26rem;
+}
+
 .w-200 {
   width: 50rem;
 }
@@ -2108,6 +2133,10 @@ video {
   transition-property: opacity;
 }
 
+.transition-transform {
+  transition-property: transform;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }