@dmsi/wedgekit-react 0.0.140 → 0.0.142

package/src/components/Toast.tsx

@@ -11,6 +11,7 @@ import { componentGap, componentPadding, layoutGroupGap } from "../classNames";
 
 export interface ToastProps {
   id?: string;
+  testid?: string;
   variant?: "success" | "warning" | "error" | "info";
   title?: string;
   message?: string;
@@ -116,6 +117,7 @@ function getToastRoot(): HTMLElement {
 
 export const Toast = ({
   id,
+  testid,
   variant = "success",
   title,
   message,
@@ -195,6 +197,7 @@ export const Toast = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       ref={toastElementRef}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -211,10 +214,10 @@ export const Toast = ({
       <div className={clsx("flex items-center", layoutGroupGap)}>
         <div className={clsx("flex flex-col w-68", componentGap)}>
           {title && (
-            <Heading3 id={id ? `${id}-title` : undefined}>{title}</Heading3>
+            <Heading3 testid={testid ? `${testid}-title` : undefined} id={id ? `${id}-title` : undefined}>{title}</Heading3>
           )}
           {message && (
-            <Paragraph id={id ? `${id}-message` : undefined}>
+            <Paragraph testid={testid ? `${testid}-message` : undefined} id={id ? `${id}-message` : undefined}>
               {message}
             </Paragraph>
           )}
@@ -223,6 +226,7 @@ export const Toast = ({
         {showViewButton && (
           <Button
             id={id ? `${id}-view-button` : undefined}
+            testid={testid ? `${testid}-view-button` : undefined}
             variant="tertiary"
             href={viewButtonLink}
           >
@@ -236,7 +240,7 @@ export const Toast = ({
 
 Toast.displayName = "Toast";
 
-export function createToast(config: Omit<ToastProps, "id"> & { id?: string }) {
+export function createToast(config: Omit<ToastProps, "id"> & { id?: string, testid?: string }) {
   const toastRoot = getToastRoot();
   const toastContainer = document.createElement("div");
   toastRoot.appendChild(toastContainer);
@@ -251,6 +255,7 @@ export function createToast(config: Omit<ToastProps, "id"> & { id?: string }) {
   root.render(
     <Toast
       id={config.id}
+      testid={config.testid}
       show={true}
       onClose={handleClose}
       variant={config.variant}

package/src/components/Tooltip.tsx

@@ -13,6 +13,7 @@ import { componentPadding, typography } from "../classNames";
 
 export type TooltipProps = PropsWithChildren<{
   id?: string;
+  testid?: string;
   message: string;
   position?: "top" | "bottom" | "left" | "right";
   children?: ReactNode;
@@ -22,6 +23,7 @@ export type TooltipProps = PropsWithChildren<{
 
 export const Tooltip = ({
   id,
+  testid,
   message,
   position = "top",
   children,
@@ -99,6 +101,7 @@ export const Tooltip = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       ref={ref}
       className="relative inline-grid grid-cols-[auto_1fr] items-center"
       onMouseEnter={handleMouseEnter}
@@ -111,6 +114,7 @@ export const Tooltip = ({
         createPortal(
           <div
             id={id ? `${id}-message` : undefined}
+            data-testid={testid ? `${testid}-message` : undefined}
             ref={tooltipRef}
             style={{
               position: "fixed",

package/src/components/TopBar.tsx

@@ -26,13 +26,15 @@ export const TopBarBase = ({
   mobileRight,
   brandLogo = <LogoDMSiTopBar />,
   id,
+  testid,
   ...props
-}: TopBarProps & { id?: string }) => {
+}: TopBarProps & { id?: string; testid?: string }) => {
   const defaultStyles = clsx("bg-background-primary-normal");
 
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "flex items-center justify-between",
         containerPaddingX,
@@ -101,17 +103,20 @@ export const TopBar = ({
   left,
   brandLogo = <LogoDMSiTopBar />,
   id,
+  testid,
   ...props
-}: TopBarProps & { brandLogo?: ReactNode; id?: string }) => {
+}: TopBarProps & { brandLogo?: ReactNode; id?: string; testid?: string }) => {
   return (
     <TopBarBase
       {...props}
       id={id}
+      testid={testid}
       brandLogo={brandLogo}
       left={
         <>
           <a
             id={id ? `${id}-brand-logo-link` : undefined}
+            data-testid={testid ? `${testid}-brand-logo-link` : undefined}
             href="/"
             className="grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]"
           >

package/src/components/Upload.tsx

@@ -10,6 +10,7 @@ export type UploadProps = {
     text?: string;
     errorText?: string;
     onRemove?: () => void;
+    testid?: string;
 } & ComponentProps<"input">;
 
 export function Upload(props: UploadProps) {
@@ -20,6 +21,7 @@ export function Upload(props: UploadProps) {
         text = 'Upload your file',
         value,
         onRemove,
+        testid,
         ...rest
     } = props;
 
@@ -37,30 +39,33 @@ export function Upload(props: UploadProps) {
                 "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
                 componentGap,
             )}
+            data-testid={testid}
         >
             <input
                 {...rest}
                 type="file"
                 className="sr-only"
+                data-testid={testid ? `${testid}-file-input` : undefined}
             />
 
             {isLoading && (
                 <>
-                    <Icon name="cached" className="text-icon-primary-normal animate-spin" />
-                    <Paragraph color="text-secondary-normal">Loading...</Paragraph>
+                    <Icon testid={testid ? `${testid}-loading-icon` : undefined} name="cached" className="text-icon-primary-normal animate-spin" />
+                    <Paragraph testid={testid ? `${testid}-loading-text` : undefined} color="text-secondary-normal">Loading...</Paragraph>
                 </>
             )}
             
             {!value && !isLoading && (
                 <>
-                    <Icon name="cloud_upload" className="text-icon-primary-normal" />
-                    <Paragraph color={errorText ? 'text-primary-error' : 'text-secondary-normal'}>{errorText ? errorText : text}</Paragraph>
+                    <Icon testid={testid ? `${testid}-icon` : undefined} name="cloud_upload" className="text-icon-primary-normal" />
+                    <Paragraph testid={testid ? `${testid}-text` : undefined} color={errorText ? 'text-primary-error' : 'text-secondary-normal'}>{errorText ? errorText : text}</Paragraph>
                 </>
             )}
 
             {value && (
                 <>
                     <img
+                        data-testid={testid ? `${testid}-uploaded-image` : undefined}
                         src={value as string}
                         alt=""
                         className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
@@ -68,6 +73,7 @@ export function Upload(props: UploadProps) {
 
                     <div className="absolute right-2 top-2">
                         <Button
+                            testid={testid ? `${testid}-remove-image-button` : undefined}
                             onClick={(e: MouseEvent) => {
                                 e.preventDefault();
                                 e.stopPropagation();