@dmsi/wedgekit-react 0.0.139 → 0.0.141

package/src/components/Paragraph.tsx

@@ -7,6 +7,7 @@ type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 type ParagraphProps = {
   as?: Tags;
   id?: string;
+  testid?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -21,6 +22,7 @@ export const Paragraph = ({
   children,
   as = "p",
   id,
+  testid,
   ...props
 }: ParagraphProps) => {
   const Element = as;
@@ -28,6 +30,7 @@ export const Paragraph = ({
   return (
     <Element
       id={id}
+      data-testid={testid}
       {...props}
       className={clsx(
         typography.paragraph,

package/src/components/Password.tsx

@@ -6,6 +6,7 @@ import { Icon } from "./Icon";
 
 export const Password = ({
   id,
+  testid,
   ...props
 }: Omit<ComponentProps<"input">, "type" | "children" | "id"> &
   InputBaseProps) => {
@@ -14,24 +15,27 @@ export const Password = ({
   return (
     <InputBase
       id={id}
+      testid={testid}
       {...props}
       type={show ? "text" : "password"}
-      after={<WhichIcon id={id} show={show} setShow={setShow} />}
+      after={<WhichIcon id={id} testid={testid} show={show} setShow={setShow} />}
     />
   );
 };
 
 type WhichIconProps = {
   id?: string;
+  testid?: string;
   show: boolean;
   setShow: (value: boolean) => void;
 };
 
-const WhichIcon = ({ id, show, setShow }: WhichIconProps) => {
+const WhichIcon = ({ id, testid, show, setShow }: WhichIconProps) => {
   if (show) {
     return (
       <Icon
         id={id ? `${id}-toggle-visibility` : undefined}
+        testid={testid ? `${testid}-toggle-visibility` : undefined}
         name="visibility_off"
         className="cursor-pointer"
         onClick={() => setShow(false)}
@@ -42,6 +46,7 @@ const WhichIcon = ({ id, show, setShow }: WhichIconProps) => {
   return (
     <Icon
       id={id ? `${id}-toggle-visibility` : undefined}
+      testid={testid ? `${testid}-toggle-visibility` : undefined}
       name="visibility"
       className="cursor-pointer"
       onClick={() => setShow(true)}

package/src/components/PaymentOnAccountModal.tsx

@@ -18,6 +18,7 @@ type PaymentOnAccountModalProps = {
   cardPaymentUrl: string | null;
   setCardPaymentUrl: (url: string | null) => void;
   isLoadingCCiframe?: boolean;
+  testid?: string;
 };
 export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
   const {
@@ -28,6 +29,7 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
     cardPaymentUrl,
     setCardPaymentUrl,
     isLoadingCCiframe,
+    testid
   } = props;
   const [amount, setAmount] = useState<number>(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } =
@@ -68,12 +70,12 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
   }, [creditCardSettings, amount, selectedMethod]);
 
   return (
-    <Modal open={isOpen} onClose={onClose} title="Payment on Account">
+    <Modal testid={testid} open={isOpen} onClose={onClose} title="Payment on Account">
       <Stack sizing="layout-group" width="full">
         {selectedMethod === "CCPayment" && (
           <Stack horizontal justify="between" items="center">
             <Paragraph>Surcharge</Paragraph>
-            <Paragraph>
+            <Paragraph testid={testid ? `${testid}-surcharge` : undefined}>
               ${formatCurrencyDisplay(creditCardSurcharge.toFixed(2))}
             </Paragraph>
           </Stack>
@@ -83,6 +85,7 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
             <Paragraph className="w-full">Amount to Pay</Paragraph>
             <div>
               <Input
+                testid={testid ? `${testid}-amount-to-pay` : undefined}
                 type="number"
                 placeholder="$0.00"
                 align="right"
@@ -95,6 +98,7 @@ export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
         </Card>
         <SelectPaymentMethod
           {...paymentProps}
+          testid={testid ? `${testid}-select-payment-method` : undefined}
           amountToPay={amount + creditCardSurcharge}
           cardPaymentUrl={cardPaymentUrl}
           setCardPaymentUrl={setCardPaymentUrl}

package/src/components/ProjectBar.tsx

@@ -14,6 +14,7 @@ type ProjectBarProps = {
   mobileLeft: ReactNode;
   mobileRight: ReactNode;
   id?: string;
+  testid?: string;
 };
 
 export const ProjectBar = ({
@@ -22,6 +23,7 @@ export const ProjectBar = ({
   mobileLeft,
   mobileRight,
   id,
+  testid,
 }: ComponentProps<"div"> & ProjectBarProps) => {
   const isMobile = useMatchesMobile();
 
@@ -50,6 +52,7 @@ export const ProjectBar = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       style={{ ...tokenOverrides } as React.CSSProperties}
       className={clsx(
         "flex items-center justify-between",

package/src/components/Radio.tsx

@@ -14,6 +14,7 @@ interface RadioProps
   label?: string;
   error?: boolean;
   readOnly?: boolean;
+  testid?: string;
 }
 
 export const Radio = ({
@@ -24,6 +25,7 @@ export const Radio = ({
   checked,
   readOnly,
   id,
+  testid,
   ...props
 }: RadioProps) => {
   const radioId = id;
@@ -69,6 +71,7 @@ export const Radio = ({
       <div className="relative">
         <input
           id={radioId}
+          data-testid={testid}
           type="radio"
           className="sr-only peer"
           disabled={disabled}
@@ -105,7 +108,7 @@ export const Radio = ({
       </div>
 
       {label && (
-        <Paragraph id={`${radioId}-label`} padded color={paragraphColor}>
+        <Paragraph id={radioId ? `${radioId}-label` : undefined} testid={testid ? `${testid}-label` : undefined} padded color={paragraphColor}>
           {label}
         </Paragraph>
       )}

package/src/components/Search.tsx

@@ -11,8 +11,10 @@ import { Input, InputBaseProps } from "./Input";
 
 export interface SearchProps {
   id?: string;
+  testid?: string;
   renderMenu?: (props: {
     id?: string;
+    testid?: string;
     positionTo: RefObject<HTMLElement | null> | undefined;
     show: boolean;
     setShow: (value: boolean) => void;
@@ -25,6 +27,7 @@ export interface SearchProps {
 
 export const Search = ({
   id,
+  testid,
   label,
   error,
   children,
@@ -56,6 +59,7 @@ export const Search = ({
     <>
       <Input
         id={id}
+        testid={testid}
         variant="search"
         inputContainerRef={inputContainerRef}
         ref={inputRef}
@@ -129,6 +133,7 @@ export const Search = ({
       {renderMenu
         ? renderMenu({
             id: id ? `${id}-menu` : undefined,
+            testid: testid ? `${testid}-menu` : undefined,
             positionTo: inputContainerRef,
             show,
             setShow,

package/src/components/Select.tsx

@@ -6,8 +6,10 @@ import clsx from "clsx";
 
 export interface SelectProps {
   id?: string;
+  testid?: string;
   renderMenu?: (props: {
     id?: string;
+    testid?: string;
     positionTo: RefObject<HTMLElement | null> | undefined;
     show: boolean;
     setShow: (value: boolean) => void;
@@ -18,6 +20,7 @@ export interface SelectProps {
 
 export const Select = ({
   id,
+  testid,
   label,
   error,
   children,
@@ -49,6 +52,7 @@ export const Select = ({
     <>
       <InputBase
         id={id}
+        testid={testid}
         inputContainerRef={inputContainerRef}
         ref={inputRef}
         label={label}

package/src/components/SelectPaymentMethod.tsx

@@ -34,6 +34,7 @@ export type SelectPaymentMethodProps = {
   withCredits?: boolean;
   cardPaymentUrl?: string | null;
   isLoadingCCiframe?: boolean;
+  testid?: string;
 
   setCardPaymentUrl?: (url: string | null) => void;
   onSelectMethod: (method: PaymentMethodType | null) => void;
@@ -58,6 +59,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
     withCredits = false,
     isLoadingCCiframe,
     cardPaymentUrl,
+    testid
   } = props;
 
   const payAllWithCredits = withCredits && amountToPay <= 0;
@@ -77,6 +79,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
     <Stack sizing="layout-group" width="full" minWidth={400}>
       {!!allCredits?.length && withCredits && (
         <CreditsSelector
+          testid={testid ? `${testid}-credit-selector` : undefined}
           selectedCredits={selectedCredits || []}
           allCredits={allCredits || []}
           setSelectedCredits={props.setSelectedCredits || (() => {})}
@@ -84,6 +87,7 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
       )}
       {allowedMethods?.includes("ACHPayment") && !!customerBanks?.length && (
         <ACHSelector
+          testid={testid ? `${testid}-ach-selector` : undefined}
           selectedMethod={selectedMethod}
           handleToggle={handleToggle}
           selectedBankGuid={selectedACHBankGuid || null}
@@ -96,9 +100,11 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
       )}
       {allowedMethods?.includes("CCPayment") && (
         <Accordion
+          testid={testid ? `${testid}-cc-payment` : undefined}
           isOpen={!payAllWithCredits && selectedMethod === "CCPayment"}
           title={
             <Radio
+              testid={testid ? `${testid}-cc-payment-radio` : undefined}
               label="Pay by Credit/Debit Card"
               checked={!payAllWithCredits && selectedMethod === "CCPayment"}
               onChange={(e) => e.stopPropagation()}
@@ -138,12 +144,13 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
           block
           onClick={onPay}
           disabled={isPayLoading || amountToPay <= 0}
+          testid={testid ? `${testid}-submit-payment-button` : undefined}
         >
           {isPayLoading ? "Processing..." : "Submit Payment"}
         </Button>
       )}
       {payAllWithCredits && (
-        <Button block onClick={onPay} disabled={isPayLoading}>
+        <Button testid={testid ? `${testid}-submit-payment-button` : undefined} block onClick={onPay} disabled={isPayLoading}>
           {isPayLoading ? "Processing..." : "Submit Payment"}
         </Button>
       )}
@@ -160,6 +167,7 @@ type ACHSelectorProps = {
   onPay?: () => void;
   isPayLoading?: boolean;
   disabled?: boolean;
+  testid?: string;
 };
 function ACHSelector(props: ACHSelectorProps) {
   const {
@@ -169,6 +177,7 @@ function ACHSelector(props: ACHSelectorProps) {
     setSelectedBankGuid,
     customerBanks,
     disabled,
+    testid
   } = props;
 
   function handleBankSelect(
@@ -185,6 +194,7 @@ function ACHSelector(props: ACHSelectorProps) {
     <>
       {customerBanks.map((bank) => (
         <Card
+          testid={testid ? `${testid}-bank-${bank.CustBankGUID}` : undefined}
           key={bank.CustBankGUID}
           onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
           selected={
@@ -212,9 +222,10 @@ type CreditsSelectorProps = {
   selectedCredits: unknown[];
   allCredits: unknown[];
   setSelectedCredits: React.Dispatch<React.SetStateAction<unknown[]>>;
+  testid?: string
 };
 function CreditsSelector(props: CreditsSelectorProps) {
-  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
   const [isOpen, setIsOpen] = useState<boolean>(true);
 
   const handleCreditSelect = (credit: unknown) => {
@@ -232,6 +243,7 @@ function CreditsSelector(props: CreditsSelectorProps) {
       isOpen={isOpen}
       title="Available Credits"
       onClick={() => setIsOpen((prev) => !prev)}
+      testid={testid}
     >
       <HorizontalDivider />
       <Stack sizing="layout-group" width="full">
@@ -260,15 +272,17 @@ function CreditsSelector(props: CreditsSelectorProps) {
                 onClick={() => handleCreditSelect(credits)}
                 paddingY
                 flexGrow={1}
+                testid={testid ? `${testid}-credit-${credits.InvoiceNumber}` : undefined}
               >
                 <Checkbox
+                  testid={testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : undefined}
                   label={credits.InvoiceNumber}
                   checked={selectedCredits?.includes(credits)}
                   onChange={() => handleCreditSelect(credits)}
                 />
               </Stack>
 
-              <Subheader className=" pr-desktop-component-padding">
+              <Subheader testid={testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : undefined} className=" pr-desktop-component-padding">
                 $
                 {formatCurrencyDisplay(
                   `${Math.abs(credits.InvoiceBalanceDue)}`,

package/src/components/SideMenu.tsx

@@ -4,16 +4,19 @@ import clsx from "clsx";
 type SideMenuProps = PropsWithChildren<{
   cardStyle?: boolean;
   id?: string;
+  testid?: string;
 }>;
 
 export const SideMenu = ({
   children,
   cardStyle = false,
   id,
+  testid,
 }: SideMenuProps) => {
   return (
     <div
       id={id}
+      data-testid={testid}
       className={clsx(
         "flex flex-col",
         cardStyle &&

package/src/components/SideMenuGroup.tsx

@@ -9,6 +9,7 @@ import { Icon } from "./Icon";
 
 export type SideMenuGroupProps = PropsWithChildren<{
   id?: string;
+  testid?: string;
   label?: string;
   groupIndentLevel?: 1 | 2 | 3 | 4;
   collapsed?: boolean;
@@ -17,6 +18,7 @@ export type SideMenuGroupProps = PropsWithChildren<{
 
 export const SideMenuGroup = ({
   id,
+  testid,
   label,
   groupIndentLevel = 1,
   collapsed = false,
@@ -45,6 +47,7 @@ export const SideMenuGroup = ({
     <>
       <div
         id={id}
+        data-testid={testid}
         className={clsx(
           "group/sm-group flex rounded cursor-pointer",
           "bg-transparent",
@@ -79,7 +82,7 @@ export const SideMenuGroup = ({
             size={24}
           />
 
-          <Label id={id ? `${id}-label` : undefined} padded>
+          <Label id={id ? `${id}-label` : undefined} testid={testid ? `${testid}-label` : undefined} padded>
             {label}
           </Label>
         </Stack>

package/src/components/SideMenuItem.tsx

@@ -5,6 +5,7 @@ import { Paragraph } from "./Paragraph";
 
 export type SideMenuItemProps = {
   id?: string;
+  testid?: string;
   label?: string;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
@@ -17,6 +18,7 @@ export type SideMenuItemProps = {
 
 export const SideMenuItem = ({
   id,
+  testid,
   label,
   leftIcon,
   rightIcon,
@@ -55,6 +57,7 @@ export const SideMenuItem = ({
   return (
     <a
       id={id}
+      data-testid={testid}
       href={href}
       className={clsx(
         "group flex w-full rounded border-2 cursor-pointer",
@@ -87,6 +90,7 @@ export const SideMenuItem = ({
 
         <Paragraph
           id={id ? `${id}-label` : undefined}
+          testid={testid ? `${testid}-label` : undefined}
           as="span"
           padded
           className="mr-auto !leading-6"

package/src/components/Spinner.tsx

@@ -2,12 +2,14 @@ import React from "react";
 
 type SpinnerProps = {
   size?: "small" | "large";
+  testid?: string;
 };
 
-export const Spinner: React.FC<SpinnerProps> = ({ size = "small" }) => {
+export const Spinner: React.FC<SpinnerProps> = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
   return (
     <svg
+      data-testid={testid}
       width={dimension}
       height={dimension}
       viewBox="0 0 24 24"

package/src/components/Stack.tsx

@@ -41,6 +41,7 @@ type StackProps = {
   top?: number;
   left?: number;
   id?: string;
+  testid?: string;
   noGap?: boolean;
   marginTop?: boolean;
   marginBottom?: boolean;
@@ -121,6 +122,7 @@ export const Stack = ({
   noGap,
   marginTop,
   marginBottom,
+  testid,
   ...props
 }: StackProps) => {
   const flexClassNames = getFlexClassNames({ items, justify, grow });
@@ -129,6 +131,7 @@ export const Stack = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       {...props}
       style={{
         height:

package/src/components/StatusPill.tsx

@@ -5,6 +5,7 @@ import { componentPaddingYUsingComponentGap, paddingXUsingLayoutGroupGap } from
 
 type StatusPillProps = PropsWithChildren<{
   id?: string;
+  testid?: string;
   intent?: "neutral" | "warning" | "success" | "critical";
   state?: "in-progress" | "completed";
 }>;
@@ -14,6 +15,7 @@ export const StatusPill = ({
   state = "in-progress",
   intent = "neutral",
   id,
+  testid,
   ...props
 }: StatusPillProps) => {
   const textColor = clsx(
@@ -39,6 +41,7 @@ export const StatusPill = ({
   return (
     <div
       id={id}
+      data-testid={testid}
       {...props}
       className={clsx(
         "rounded flex items-center",
@@ -48,7 +51,7 @@ export const StatusPill = ({
         componentPaddingYUsingComponentGap
       )}
     >
-      <Label id={id ? `${id}-label` : undefined}>{children}</Label>
+      <Label id={id ? `${id}-label` : undefined} testid={testid ? `${testid}-label` : undefined}>{children}</Label>
     </div>
   );
 };

package/src/components/Stepper.tsx

@@ -9,6 +9,7 @@ type StepperProps = {
   error?: boolean;
   disabled?: boolean;
   id?: string;
+  testid?: string;
   value: number;
   setValue: React.Dispatch<React.SetStateAction<number>>;
   onIncrease?: () => void;
@@ -23,6 +24,7 @@ export const Stepper = ({
   onDecrease,
   onIncrease,
   id,
+  testid,
   ...props
 }: StepperProps) => {
   function handleIncrease() {
@@ -36,9 +38,10 @@ export const Stepper = ({
   }
 
   return (
-    <div id={id} className={clsx("flex items-center", componentGap)}>
+    <div id={id} data-testid={testid} className={clsx("flex items-center", componentGap)}>
       <Button
         id={id ? `${id}-decrease-button` : undefined}
+        testid={testid ? `${testid}-decrease-button` : undefined}
         iconOnly
         variant="tertiary"
         leftIcon={
@@ -60,6 +63,7 @@ export const Stepper = ({
         <InputBase
           {...props}
           id={id ? `${id}-input` : undefined}
+          testid={testid ? `${testid}-input` : undefined}
           type="number"
           align="center"
           value={value}
@@ -72,6 +76,7 @@ export const Stepper = ({
 
       <Button
         id={id ? `${id}-increase-button` : undefined}
+        testid={testid ? `${testid}-increase-button` : undefined}
         iconOnly
         variant="tertiary"
         leftIcon={

package/src/components/Subheader.tsx

@@ -7,6 +7,7 @@ type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 type SubheaderProps = {
   as?: Tags;
   id?: string;
+  testid?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -19,12 +20,14 @@ export const Subheader = ({
   color,
   tall,
   id,
+  testid,
   ...props
 }: SubheaderProps) => {
   const Element = as;
   return (
     <Element
       id={id}
+      data-testid={testid}
       className={clsx(
         typography.subheader,
         className,

package/src/components/Textarea.tsx

@@ -9,6 +9,7 @@ interface TextareaProps
     "children" | "dangerouslySetInnerHTML" | "id"
   > {
   id?: string;
+  testid?: string;
   label?: string;
   error?: boolean;
   caption?: ReactNode;
@@ -40,6 +41,7 @@ const textareaReadOnlyClass = clsx(
 
 export const Textarea = ({
   id,
+  testid,
   label,
   error,
   caption,
@@ -80,6 +82,7 @@ export const Textarea = ({
         {...props}
         {...attributes}
         id={id}
+        data-testid={testid}
         className={clsx(
           "disabled:text-text-primary-disabled",
           typography.paragraph,
@@ -91,7 +94,7 @@ export const Textarea = ({
         )}
       ></textarea>
 
-      {caption && <div id={id ? `${id}-caption` : undefined}>{caption}</div>}
+      {caption && <div id={id ? `${id}-caption` : undefined} data-testid={testid ? `${testid}-caption` : undefined}>{caption}</div>}
     </label>
   );
 };

package/src/components/Theme.tsx

@@ -2,16 +2,19 @@ export function Theme({
   theme,
   children,
   id,
+  testid,
   ref,
 }: {
   theme: "auto" | "brand";
   children: React.ReactNode;
   id?: string;
+  testid?: string;
   ref?: React.RefObject<HTMLDivElement | null>;
 }) {
   return (
     <div
       id={id}
+      data-testid={testid}
       className="contents"
       data-theme={theme}
       ref={(e) => {

package/src/components/Time.tsx

@@ -14,6 +14,7 @@ type TimeProps = {
   caption?: ReactNode;
   format?: "12h" | "24h";
   id?: string;
+  testid?: string;
 } & Omit<
   ComponentProps<"input">,
   "type" | "children" | "dangerouslySetInnerHTML" | "id"
@@ -21,7 +22,7 @@ type TimeProps = {
 
 const timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
 
-export const Time = ({ onChange, format = "12h", id, ...props }: TimeProps) => {
+export const Time = ({ onChange, format = "12h", id, testid, ...props }: TimeProps) => {
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -306,6 +307,7 @@ export const Time = ({ onChange, format = "12h", id, ...props }: TimeProps) => {
         <TimeCell
           key={val}
           id={id ? `${id}-${type}-${val}` : undefined}
+          testid={testid ? `${testid}-${type}-${val}` : undefined}
           selected={isSelected}
           ref={
             isSelected
@@ -327,6 +329,7 @@ export const Time = ({ onChange, format = "12h", id, ...props }: TimeProps) => {
       <InputBase
         {...props}
         id={id}
+        testid={testid}
         ref={inputRef}
         inputContainerRef={inputContainerRef}
         value={inputValue}
@@ -391,6 +394,7 @@ export const Time = ({ onChange, format = "12h", id, ...props }: TimeProps) => {
 
 type TimeCellProps = {
   id?: string;
+  testid?: string;
   selected?: boolean;
   children?: React.ReactNode;
   start?: boolean;
@@ -407,6 +411,7 @@ type TimeCellProps = {
 
 function TimeCell({
   id,
+  testid,
   selected = false,
   start = false,
   intermediate = false,
@@ -426,6 +431,7 @@ function TimeCell({
   return (
     <button
       id={id}
+      data-testid={testid}
       onPointerOver={onHover}
       onClick={onClick}
       onKeyDown={onKeyDown}