@dmsi/wedgekit-react 0.0.140 → 0.0.141

package/src/components/Label.tsx

@@ -6,6 +6,7 @@ export type Tags = "span" | "label" | "p" | "a";
 type LabelProps = {
   as?: Tags;
   id?: string;
+  testid?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -17,12 +18,14 @@ export const Label = ({
   color,
   align,
   id,
+  testid,
   ...props
 }: LabelProps) => {
   const Element = as;
   return (
     <Element
       id={id}
+      data-testid={testid}
       className={clsx(
         typography.label,
         align === "left" && "text-left",

package/src/components/Link.tsx

@@ -14,6 +14,7 @@ export type LinkProps = AsProps &
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     underline?: boolean;
     id?: string;
+    testid?: string;
   };
 
 export const Link = ({
@@ -26,6 +27,7 @@ export const Link = ({
   paddedY,
   align,
   underline = false,
+  testid,
   ...props
 }: LinkProps) => {
   const Component = as;
@@ -100,6 +102,7 @@ export const Link = ({
       }}
       aria-disabled={disabled}
       tabIndex={disabled ? -1 : undefined}
+      data-testid={testid}
     />
   );
 };

package/src/components/List.tsx

@@ -2,14 +2,16 @@ export function List({
   children,
   ordered,
   id,
+  testid,
 }: {
   children: React.ReactNode;
   ordered?: boolean;
   id?: string;
+  testid?: string;
 }) {
   const Element = ordered ? "ol" : "ul";
   return (
-    <Element id={id} className="list-disc list-inside">
+    <Element id={id} data-testid={testid} className="list-disc list-inside">
       {children}
     </Element>
   );

package/src/components/LoadingScrim.tsx

@@ -11,7 +11,7 @@ import { Spinner } from "./Spinner";
  * @example
  * <LoadingScrim />
  */
-export function LoadingScrim({ className }: { className?: string }) {
+export function LoadingScrim({ className, testid }: { className?: string, testid?: string }) {
   return (
     <div
       className={clsx(
@@ -21,6 +21,7 @@ export function LoadingScrim({ className }: { className?: string }) {
       aria-modal="true"
       role="dialog"
       tabIndex={-1}
+      data-testid={testid}
     >
       <div className="flex items-center justify-center">
         <Spinner size="large" />

package/src/components/MainBar.tsx

@@ -10,6 +10,7 @@ import {
 
 type MainBarProps = {
   id?: string;
+  testid?: string;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
   mobileLeftContent?: ReactNode;
@@ -21,6 +22,7 @@ type MainBarProps = {
 
 export const MainBar = ({
   id,
+  testid,
   leftContent: left,
   rightContent: right,
   mobileLeftContent: mobileLeft,
@@ -35,6 +37,7 @@ export const MainBar = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "min-h-mobile-container-padding",
         "bg-background-brand-normal items-center justify-between",

package/src/components/Menu.tsx

@@ -18,6 +18,7 @@ export type MenuPosition = "right" | "bottom" | "bottom-right";
 
 type MenuProps = {
   id?: string;
+  testid?: string;
   positionTo?: RefObject<HTMLElement | null>;
   mobilePositionTo?: RefObject<HTMLElement | null>;
   show?: boolean;
@@ -34,6 +35,7 @@ type MenuProps = {
 
 export const Menu = ({
   id,
+  testid,
   children,
   className,
   ref,
@@ -128,6 +130,7 @@ export const Menu = ({
     createPortal(
       <div
         id={id}
+        data-testid={testid}
         ref={setRefs}
         className={clsx(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",

package/src/components/MenuOption.tsx

@@ -12,6 +12,7 @@ import { useMatchesMobile } from "../hooks";
 
 type BaseProps = PropsWithChildren<{
   id?: string;
+  testid?: string;
   disabled?: boolean;
   value?: string;
   before?: ReactNode;
@@ -75,6 +76,7 @@ type MenuOptionProps = ActionProps | NormalProps;
 
 export const MenuOption = ({
   id,
+  testid,
   children,
   disabled = false,
   variant = "normal",
@@ -184,6 +186,7 @@ export const MenuOption = ({
     <>
       <div
         id={id}
+        data-testid={testid}
         ref={actualRef}
         className={clsx(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -257,6 +260,7 @@ export const MenuOption = ({
     return (
       <MenuOption
         id={id ? `${id}-back` : undefined}
+        testid={testid ? `${testid}-back` : undefined}
         onClick={() => {
           closeSubMenuLevel?.(currentSubMenuLevel ?? 0);
         }}

package/src/components/MobileDataGrid.tsx

@@ -25,6 +25,7 @@ export function MobileDataGrid<T extends RowData>({
   renderLink,
   renderChevron,
   id,
+  testid,
 }: {
   columns: MobileColumnDef<T>[];
   data: T[];
@@ -33,10 +34,12 @@ export function MobileDataGrid<T extends RowData>({
   renderLink?: (data: T) => React.ReactNode;
   renderChevron?: (data: T) => React.ReactNode;
   id?: string;
+  testid?: string;
 } & ComponentProps<"div">) {
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "rounded",
         "overflow-hidden",
@@ -47,11 +50,13 @@ export function MobileDataGrid<T extends RowData>({
     >
       <MobileDataGridHeader
         id={id ? `${id}-header` : undefined}
+        testid={testid ? `${testid}-header` : undefined}
         header={header}
       />
       {data.map((item) => (
         <MobileDataGridCard
           id={id ? `${id}-card-${getId(item)}` : undefined}
+          testid={testid ? `${testid}-card-${getId(item)}` : undefined}
           data={item}
           key={getId(item)}
           columns={columns}
@@ -63,9 +68,9 @@ export function MobileDataGrid<T extends RowData>({
   );
 }
 
-function MobileDataGridHeader({ header, id }: { header: string; id?: string }) {
+function MobileDataGridHeader({ header, id, testid }: { header: string; id?: string; testid?: string }) {
   return (
-    <div id={id} className="sticky top-0">
+    <div id={id} data-testid={testid} className="sticky top-0">
       <Theme theme="brand">
         <Stack
           horizontal
@@ -90,21 +95,24 @@ function MobileDataGridCard<T extends RowData>({
   renderLink,
   renderChevron,
   id,
+  testid
 }: {
   data: T;
   columns: MobileColumnDef<T>[];
   renderLink?: (data: T) => React.ReactNode;
   renderChevron?: (data: T) => React.ReactNode;
   id?: string;
+  testid?: string;
 }) {
   return (
-    <div id={id}>
+    <div id={id} data-testid={testid}>
       <Stack sizing="component" padding>
         <Stack horizontal horizontalMobile items="center" justify="between">
           {renderLink && renderLink(data)}
           <Stack horizontal horizontalMobile items="center" justify="end">
             <Button
               id={id ? `${id}-docs-button` : undefined}
+              testid={testid ? `${testid}-docs-button` : undefined}
               iconOnly
               variant="tertiary"
               onClick={() => console.log("Edit", data.id)}
@@ -112,6 +120,7 @@ function MobileDataGridCard<T extends RowData>({
             ></Button>
             <Button
               id={id ? `${id}-swap-button` : undefined}
+              testid={testid ? `${testid}-swap-button` : undefined}
               iconOnly
               variant="tertiary"
               onClick={() => console.log("Edit", data.id)}

package/src/components/Modal.tsx

@@ -14,6 +14,7 @@ import { useMounted } from "./useMounted";
 
 type ModalProps = PropsWithChildren<{
   id?: string;
+  testid?: string;
   title?: string;
   open?: boolean;
   size?: "small" | "medium" | "large" | "x-large";
@@ -104,6 +105,7 @@ const sizes = {
 
 export const Modal = ({
   id,
+  testid,
   title,
   open = false,
   size = "small",
@@ -231,6 +233,7 @@ export const Modal = ({
   return createPortal(
     <ModalScrim
       id={id ? `${id}-scrim` : undefined}
+      testid={testid ? `${testid}-scrim` : undefined}
       size={size}
       ref={bgRef}
       show={open}
@@ -238,6 +241,7 @@ export const Modal = ({
     >
       <div
         id={id}
+        data-testid={testid}
         ref={modalRef}
         className={clsx(
           "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -250,6 +254,7 @@ export const Modal = ({
       >
         <ModalHeader
           id={id ? `${id}-header` : undefined}
+          testid={testid ? `${testid}-header` : undefined}
           title={title}
           onClose={handleClose}
           hideCloseIcon={hideCloseIcon}
@@ -258,6 +263,7 @@ export const Modal = ({
         {children && (
           <ModalContent
             id={id ? `${id}-content` : undefined}
+            testid={testid ? `${testid}-content` : undefined}
             fixedHeightScrolling={computedFixedHeightScrolling}
           >
             {children}
@@ -266,6 +272,7 @@ export const Modal = ({
         {showButtons && (
           <ModalButtons
             id={id ? `${id}-buttons` : undefined}
+            testid={testid ? `${testid}-buttons` : undefined}
             onClose={handleClose}
             onContinue={onContinue}
             customActions={customActions}

package/src/components/ModalButtons.tsx

@@ -10,6 +10,7 @@ type ModalButtonsProps = {
   sampleWidth?: boolean;
   customActions?: React.ReactNode;
   id?: string;
+  testid?: string;
 };
 
 export const ModalButtons = ({
@@ -17,10 +18,12 @@ export const ModalButtons = ({
   onContinue,
   customActions,
   id,
+  testid
 }: ModalButtonsProps) => {
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "border-t border-neutral-300 flex justify-end",
         layoutPaddding,
@@ -31,6 +34,7 @@ export const ModalButtons = ({
         <>
           <Button
             id={id ? `${id}-close-button` : undefined}
+            testid={testid ? `${testid}-close-button` : undefined}
             variant="secondary"
             leftIcon={<Icon name="close" size={24} />}
             onClick={onClose}
@@ -41,6 +45,7 @@ export const ModalButtons = ({
 
           <Button
             id={id ? `${id}-continue-button` : undefined}
+            testid={testid ? `${testid}-continue-button` : undefined}
             variant="primary"
             leftIcon={<Icon name="check" size={24} />}
             className="max-sm:w-full"

package/src/components/ModalContent.tsx

@@ -4,16 +4,19 @@ import { layoutPaddding } from "../classNames";
 export interface ModalContentProps {
   fixedHeightScrolling?: boolean;
   id?: string;
+  testid?: string;
 }
 
 export function ModalContent({
   fixedHeightScrolling,
   children,
   id,
+  testid
 }: React.PropsWithChildren<ModalContentProps>) {
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,

package/src/components/ModalHeader.tsx

@@ -11,6 +11,7 @@ type ModalHeaderProps = {
   headerIcon?: React.ReactNode;
   onClose?: () => void;
   id?: string;
+  testid?: string;
 };
 
 export const ModalHeader = ({
@@ -19,10 +20,12 @@ export const ModalHeader = ({
   headerIcon,
   onClose,
   id,
+  testid,
 }: ModalHeaderProps) => {
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "flex justify-between items-center",
         layoutPaddding,
@@ -32,7 +35,7 @@ export const ModalHeader = ({
       <div className={clsx("flex items-center", layoutGroupGap)}>
         {headerIcon}
         {title && (
-          <Heading2 id={id ? `${id}-title` : undefined} as="p">
+          <Heading2 id={id ? `${id}-title` : undefined} testid={testid ? `${testid}-title` : undefined} as="p">
             {title}
           </Heading2>
         )}
@@ -41,6 +44,7 @@ export const ModalHeader = ({
       {!hideCloseIcon && (
         <Button
           id={id ? `${id}-close-button` : undefined}
+          testid={testid ? `${testid}-close-button` : undefined}
           iconOnly
           variant="tertiary"
           onClick={onClose}

package/src/components/ModalScrim.tsx

@@ -8,6 +8,7 @@ type ModalScrimProps = PropsWithChildren<{
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   ref?: React.Ref<HTMLDivElement>;
   id?: string;
+  testid?: string;
 }>;
 
 export const ModalScrim = ({
@@ -17,10 +18,12 @@ export const ModalScrim = ({
   onClick,
   ref,
   id,
+  testid,
 }: ModalScrimProps) => {
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",

package/src/components/NavigationTab.tsx

@@ -5,6 +5,7 @@ import { CSSProperties } from "react";
 
 export type NavigationTabProps = {
   id?: string;
+  testid?: string;
   label?: string;
   onClick?: () => void;
   selected?: boolean;
@@ -16,6 +17,7 @@ export type NavigationTabProps = {
 
 export const NavigationTab = ({
   id,
+  testid,
   label,
   onClick,
   selected = false,
@@ -65,6 +67,7 @@ export const NavigationTab = ({
   return (
     <Button
       id={id}
+      testid={testid}
       variant="tertiary-critical"
       colorClassName={textClassName}
       className={clsx(

package/src/components/NavigationTabs.tsx

@@ -6,6 +6,7 @@ import { componentGap } from "../classNames";
 
 type Tab = {
   id?: string;
+  testid?: string;
   label: string;
   href?: string;
   content?: ReactNode;
@@ -13,6 +14,7 @@ type Tab = {
 
 export type NavigationTabsProps = {
   id?: string;
+  testid?: string;
   tabs: Tab[];
   onTabChange?: (tabId: string) => void;
   colorPrimitives?: "dmsi" | "agility";
@@ -20,11 +22,12 @@ export type NavigationTabsProps = {
 
 export const NavigationTabs = ({
   id,
+  testid,
   tabs,
   onTabChange,
   colorPrimitives = "dmsi",
 }: NavigationTabsProps) => {
-  const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id);
+  const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id!);
 
   const handleTabClick = (id: string) => {
     setSelectedTab(id);
@@ -35,7 +38,7 @@ export const NavigationTabs = ({
   const selectedTabHasHref = tabs.find((tab) => tab.id === selectedTab)?.href;
 
   return (
-    <div id={id}>
+    <div id={id} data-testid={testid}>
       <div>
         <div
           className={clsx(
@@ -47,9 +50,10 @@ export const NavigationTabs = ({
             <NavigationTab
               key={tab.id}
               id={id ? `${id}-tab-${tab.id}` : undefined}
+              testid={testid ? `${testid}-tab-${tab.id}` : undefined}
               label={tab.label}
               selected={selectedTab === tab.id}
-              onClick={() => handleTabClick(tab.id)}
+              onClick={() => handleTabClick(tab.id!)}
               colorPrimitives={colorPrimitives}
               href={tab.href}
             />

package/src/components/NestedMenu.tsx

@@ -19,10 +19,11 @@ export type NestedMenuEntry = {
 export type NestedMenuProps = {
   currentMenu: NestedMenuEntry; // Current menu entry, if any
   onMenuClick: (entry: NestedMenuEntry | null) => void; // Callback when a menu item is clicked. tailing
+  testid?: string;
 };
 
 export function NestedMenu(props: NestedMenuProps) {
-  const { onMenuClick, currentMenu } = props;
+  const { onMenuClick, currentMenu, testid } = props;
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
   useKeydown(
@@ -68,6 +69,7 @@ export function NestedMenu(props: NestedMenuProps) {
   return (
     <div className="flex flex-col w-full">
       <MenuOption
+        testid={testid ? `${testid}-back` : undefined}
         variant="action"
         before={<Icon name="chevron_left" className="icon" size={24} />}
         onClick={() => handleMenuClick(currentMenu.previousMenu ?? null, true)}
@@ -77,11 +79,12 @@ export function NestedMenu(props: NestedMenuProps) {
           ? currentMenu.previousMenu.label
           : "Main Menu"}
       </MenuOption>
-      <MenuOption variant="action">
+      <MenuOption variant="action" testid={testid ? `${testid}-title` : undefined}>
         {currentMenu.title ?? currentMenu.label}
       </MenuOption>
       {(currentMenu.subEntries || []).map((item, idx) => (
         <MenuOption
+          testid={testid ? `${testid}-${item.label}` : undefined}
           key={item.id}
           variant="normal"
           onClick={() => handleMenuClick(item)}

package/src/components/Notification.tsx

@@ -12,6 +12,7 @@ import { Stack } from "./Stack";
 
 export interface NotificationProps {
   id?: string;
+  testid?: string;
   variant?: "success" | "warning" | "error" | "info";
   title?: string;
   message?: string;
@@ -61,6 +62,7 @@ const variants = {
 
 export const Notification = ({
   id,
+  testid,
   variant = "success",
   title,
   message,
@@ -82,6 +84,7 @@ export const Notification = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
@@ -112,6 +115,7 @@ export const Notification = ({
 
       <Button
         id={id ? `${id}-close-button` : undefined}
+        testid={testid ? `${testid}-close-button` : undefined}
         iconOnly
         variant="tertiary"
         onClick={() => setVisible(false)}

package/src/components/OptionPill.tsx

@@ -13,6 +13,7 @@ import { Icon } from "./Icon";
 
 type OptionPillProps = {
   id?: string;
+  testid?: string;
   selected?: boolean;
   onClick?: () => void;
   onRemove?: () => void;
@@ -22,6 +23,7 @@ type OptionPillProps = {
 
 export const OptionPill = ({
   id,
+  testid,
   selected = false,
   onClick,
   onRemove,
@@ -63,6 +65,7 @@ export const OptionPill = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       onClick={handleOnClick}
       {...props}
       {...additionalAttributes}
@@ -79,6 +82,7 @@ export const OptionPill = ({
     >
       <Label
         id={id ? `${id}-label` : undefined}
+        testid={testid ? `${testid}-label` : undefined}
         padded
         className={componentPaddingYUsingComponentGap}
       >
@@ -88,6 +92,7 @@ export const OptionPill = ({
       {removable && (
         <Button
           id={id ? `${id}-remove-button` : undefined}
+          testid={testid ? `${testid}-remove-button` : undefined}
           onClick={handleOnRemove}
           disabled={disabled}
           className={clsx(

package/src/components/PDFViewer.tsx

@@ -13,10 +13,11 @@ type PDFViewerProps = {
   onClose: () => void;
   encodedPdfs: { fileName: string; base64: string }[];
   customActions?: React.ReactNode;
+  testid?: string;
 };
 
 export function PDFViewer(props: PDFViewerProps) {
-  const { isOpen, onClose, encodedPdfs, customActions } = props;
+  const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isDownloading, setIsDownloading] = useState(false);
 
@@ -39,19 +40,21 @@ export function PDFViewer(props: PDFViewerProps) {
 
   return (
     <Modal
+      testid={testid}
       open={isOpen}
       onClose={onClose}
       showButtons={!!customActions}
       customActions={customActions}
       headerIcon={
-        <DownloadIcon onClick={handleDownload} isDownloading={isDownloading} />
+        <DownloadIcon testid={testid ? `${testid}-download-icon` : undefined} onClick={handleDownload} isDownloading={isDownloading} />
       }
     >
       <Stack sizing="layout">
-        <PDFElement b64={encodedPdfs[currentIndex].base64} />
+        <PDFElement testid={testid} b64={encodedPdfs[currentIndex].base64} />
         <Stack horizontal overflowX="auto" sizing="layout-group">
           {encodedPdfs.map((pdf, index) => (
             <Button
+              testid={testid ? `${testid}-${pdf.fileName}-button` : undefined}
               variant={index === currentIndex ? "primary" : "secondary"}
               key={`${pdf.fileName}-${index}`}
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
@@ -81,12 +84,15 @@ export function PDFViewer(props: PDFViewerProps) {
 function DownloadIcon({
   onClick,
   isDownloading,
+  testid
 }: {
   onClick: () => void;
   isDownloading?: boolean;
+  testid?: string;
 }) {
   return (
     <Button
+      testid={testid}
       iconOnly
       variant="tertiary"
       leftIcon={<Icon name={isDownloading ? "cached" : "download"} />}
@@ -95,7 +101,7 @@ function DownloadIcon({
   );
 }
 
-function PDFElement({ b64 }: { b64: string }) {
+function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
   const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
 
@@ -109,11 +115,12 @@ function PDFElement({ b64 }: { b64: string }) {
 
   return (
     <div className="flex flex-col space-y-4">
-      {pdfDocument ? <canvas ref={canvasRef} /> : <div>Loading PDF...</div>}
+      {pdfDocument ? <canvas data-testid={testid ? `${testid}-pdf-content` : undefined} ref={canvasRef} /> : <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>Loading PDF...</div>}
       {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
-        <ul className="flex flex-row justify-between items-center">
+        <ul className="flex flex-row justify-between items-center" data-testid={testid ? `${testid}-pdf-pagination` : undefined}>
           <li className="previous">
             <button
+              data-testid={testid ? `${testid}-pdf-pagination-previous-button` : undefined}
               disabled={page === 1}
               onClick={() => setPage(page - 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "
@@ -121,11 +128,12 @@ function PDFElement({ b64 }: { b64: string }) {
               <Caption>Previous</Caption>
             </button>
           </li>
-          <li className="text-label-desktop text-text-on-action-primary-normal">
-            Page {page} of {pdfDocument!.numPages}
+          <li data-testid={testid ? `${testid}-pdf-pagination-text` : undefined} className="text-label-desktop text-text-on-action-primary-normal">
+            Page <span data-testid={testid ? `${testid}-pdf-pagination-page-${page}` : undefined}>{page}</span> of <span data-testid={testid ? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}` : undefined}>{pdfDocument!.numPages}</span>
           </li>
           <li className="next">
             <button
+              data-testid={testid ? `${testid}-pdf-pagination-next-button` : undefined}
               disabled={page === pdfDocument!.numPages}
               onClick={() => setPage(page + 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "