@luscii-healthtech/web-ui 2.2.0 → 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/List/List.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
-export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, emptyStateMessage, }: ListProps) => JSX.Element;
+export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, emptyStateMessage, isLoading, }: ListProps) => JSX.Element;
 export default List;

package/dist/components/List/List.types.d.ts

@@ -30,6 +30,7 @@ export declare type ListProps = {
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
     onDragEnd?: (itemId: string | number, newIndex: number) => void;
     emptyStateMessage?: string;
+    isLoading?: boolean;
 };
 export interface Dragula {
     destroy?: () => void;

package/dist/components/List/ListItemSkeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ListItemSkeleton: () => JSX.Element;

package/dist/components/List/ListSkeleton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "./ListSkeleton.scss";
+declare type ListSkeletonProps = {
+    items: number;
+};
+export declare const ListSkeleton: ({ items }: ListSkeletonProps) => JSX.Element;
+export {};

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

@@ -651,6 +651,18 @@ video {
   margin-left: calc(1.5rem * calc(1 - var(--space-x-reverse)));
 }
 
+.divide-y > :not(template) ~ :not(template) {
+  --divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--divide-y-reverse));
+}
+
+.divide-slate-200 > :not(template) ~ :not(template) {
+  --divide-opacity: 1;
+  border-color: #e2e8f0;
+  border-color: rgba(226, 232, 240, var(--divide-opacity));
+}
+
 .appearance-none {
   appearance: none;
 }
@@ -957,6 +969,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -989,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;
@@ -1437,6 +1458,10 @@ video {
   margin-right: 0;
 }
 
+.max-h-19 {
+  max-height: 4.75rem;
+}
+
 .max-h-78 {
   max-height: 19.5rem;
 }
@@ -1449,6 +1474,10 @@ video {
   max-width: 48rem;
 }
 
+.min-h-13 {
+  min-height: 3.25rem;
+}
+
 .min-w-24 {
   min-width: 1.5rem;
 }
@@ -1681,6 +1710,10 @@ video {
   right: 0;
 }
 
+.bottom-0 {
+  bottom: 0;
+}
+
 .left-0 {
   left: 0;
 }
@@ -1733,6 +1766,10 @@ video {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
+.shadow {
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+}
+
 .shadow-md {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
@@ -2025,6 +2062,10 @@ video {
   width: 20rem;
 }
 
+.w-104 {
+  width: 26rem;
+}
+
 .w-200 {
   width: 50rem;
 }
@@ -2092,6 +2133,10 @@ video {
   transition-property: opacity;
 }
 
+.transition-transform {
+  transition-property: transform;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }