Cleanup code and tests

tests/unit/ContextMenu.test.jsx

@@ -38,7 +38,7 @@ describe("ContextMenu Component", () => {
         "border",
         "rounded-[var(--measures-radius-medium)]",
         "shadow-lg",
-        "p-[4px]"
+        "p-[4px]",
       );
     });
 
@@ -55,7 +55,7 @@ describe("ContextMenu Component", () => {
       const { container } = render(
         <ContextMenu {...defaultProps}>
           <ContextMenuItem onClick={vi.fn()}>Menu Item</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -93,7 +93,7 @@ describe("ContextMenuItem Component", () => {
       const item = screen.getByRole("menuitem");
       expect(item).toHaveClass(
         "bg-[var(--color-surface-default-secondary)]",
-        "rounded-[var(--measures-radius-small)]"
+        "rounded-[var(--measures-radius-small)]",
       );
     });
 
@@ -163,7 +163,7 @@ describe("ContextMenuItem Component", () => {
 
       const item = screen.getByRole("menuitem");
       expect(item).toHaveClass(
-        "hover:!bg-[var(--color-surface-default-secondary)]"
+        "hover:!bg-[var(--color-surface-default-secondary)]",
       );
     });
   });
@@ -173,7 +173,7 @@ describe("ContextMenuItem Component", () => {
       const { container } = render(
         <ContextMenu>
           <ContextMenuItem {...defaultProps} />
-        </ContextMenu>
+        </ContextMenu>,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -193,7 +193,7 @@ describe("ContextMenuItem Component", () => {
 
       const item = screen.getByRole("menuitem");
       expect(item).toHaveClass(
-        "text-[var(--color-content-default-brand-primary)]"
+        "text-[var(--color-content-default-brand-primary)]",
       );
     });
 
@@ -240,7 +240,7 @@ describe("ContextMenuSection Component", () => {
       const title = screen.getByText("Section Title");
       expect(title).toHaveClass(
         "text-[var(--color-content-default-primary)]",
-        "font-medium"
+        "font-medium",
       );
     });
   });
@@ -270,7 +270,7 @@ describe("ContextMenuDivider Component", () => {
       expect(divider).toHaveClass(
         "border-t",
         "border-[var(--color-border-default-tertiary)]",
-        "my-1"
+        "my-1",
       );
     });
   });

tests/unit/Input.test.jsx

@@ -229,7 +229,7 @@ describe("Input Component", () => {
     expect(label).toHaveClass("text-[12px]");
     expect(label).toHaveClass("leading-[14px]");
     expect(label).toHaveClass("font-medium");
-    expect(label).toHaveStyle("color: var(--color-content-default-secondary)");
+    expect(label).toHaveClass("text-[var(--color-content-default-secondary)]");
   });
 
   test("applies correct input text styling for different sizes", () => {

tests/unit/RadioButton.test.jsx

@@ -31,7 +31,11 @@ describe("RadioButton", () => {
     const handleChange = vi.fn();
 
     render(
-      <RadioButton checked={false} onChange={handleChange} label="Test Radio" />
+      <RadioButton
+        checked={false}
+        onChange={handleChange}
+        label="Test Radio"
+      />,
     );
 
     const radioButton = screen.getByRole("radio");
@@ -53,7 +57,7 @@ describe("RadioButton", () => {
         value="test-value"
         onChange={handleChange}
         label="Test Radio"
-      />
+      />,
     );
 
     const radioButton = screen.getByRole("radio");
@@ -70,7 +74,7 @@ describe("RadioButton", () => {
     const handleChange = vi.fn();
 
     render(
-      <RadioButton checked={true} onChange={handleChange} label="Test Radio" />
+      <RadioButton checked={true} onChange={handleChange} label="Test Radio" />,
     );
 
     const radioButton = screen.getByRole("radio");
@@ -85,7 +89,11 @@ describe("RadioButton", () => {
     const handleChange = vi.fn();
 
     render(
-      <RadioButton checked={false} onChange={handleChange} label="Test Radio" />
+      <RadioButton
+        checked={false}
+        onChange={handleChange}
+        label="Test Radio"
+      />,
     );
 
     const radioButton = screen.getByRole("radio");
@@ -103,7 +111,11 @@ describe("RadioButton", () => {
     const handleChange = vi.fn();
 
     render(
-      <RadioButton checked={false} onChange={handleChange} label="Test Radio" />
+      <RadioButton
+        checked={false}
+        onChange={handleChange}
+        label="Test Radio"
+      />,
     );
 
     const radioButton = screen.getByRole("radio");
@@ -121,7 +133,7 @@ describe("RadioButton", () => {
 
     const radioButton = screen.getByRole("radio");
     expect(radioButton).toHaveClass(
-      "outline-[var(--color-border-default-tertiary)]"
+      "outline-[var(--color-border-default-tertiary)]",
     );
   });
 
@@ -130,7 +142,7 @@ describe("RadioButton", () => {
 
     const radioButton = screen.getByRole("radio");
     expect(radioButton).toHaveClass(
-      "outline-[var(--color-border-inverse-primary)]"
+      "outline-[var(--color-border-inverse-primary)]",
     );
   });
 
@@ -155,7 +167,7 @@ describe("RadioButton", () => {
         value="test-value"
         checked={true}
         label="Test Radio"
-      />
+      />,
     );
 
     const hiddenInput = screen.getByDisplayValue("test-value");
@@ -209,7 +221,7 @@ describe("RadioButton", () => {
 
   it("shows dot indicator when checked", () => {
     render(
-      <RadioButton checked={true} mode="standard" label="Checked Radio" />
+      <RadioButton checked={true} mode="standard" label="Checked Radio" />,
     );
 
     const dot = screen.getByRole("radio").querySelector("div");
@@ -218,7 +230,7 @@ describe("RadioButton", () => {
 
   it("hides dot indicator when unchecked", () => {
     render(
-      <RadioButton checked={false} mode="standard" label="Unchecked Radio" />
+      <RadioButton checked={false} mode="standard" label="Unchecked Radio" />,
     );
 
     const dot = screen.getByRole("radio").querySelector("div");
@@ -230,7 +242,7 @@ describe("RadioButton", () => {
     expect(
       backgroundColor === "transparent" ||
         backgroundColor === "rgba(0, 0, 0, 0)" ||
-        backgroundColor === ""
+        backgroundColor === "",
     ).toBe(true);
   });
 });

tests/unit/RadioGroup.test.jsx

@@ -47,7 +47,7 @@ describe("RadioGroup", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const option2 = screen.getByText("Option 2").closest("label");
@@ -65,7 +65,7 @@ describe("RadioGroup", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     // Click option 3
@@ -84,7 +84,7 @@ describe("RadioGroup", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -103,7 +103,7 @@ describe("RadioGroup", () => {
         options={defaultOptions}
         value="option1"
         onChange={handleChange}
-      />
+      />,
     );
 
     const radioButtons = screen.getAllByRole("radio");
@@ -119,7 +119,7 @@ describe("RadioGroup", () => {
     const radioButtons = screen.getAllByRole("radio");
     radioButtons.forEach((button) => {
       expect(button).toHaveClass(
-        "outline-[var(--color-border-default-tertiary)]"
+        "outline-[var(--color-border-default-tertiary)]",
       );
     });
   });
@@ -130,7 +130,7 @@ describe("RadioGroup", () => {
     const radioButtons = screen.getAllByRole("radio");
     radioButtons.forEach((button) => {
       expect(button).toHaveClass(
-        "outline-[var(--color-border-inverse-primary)]"
+        "outline-[var(--color-border-inverse-primary)]",
       );
     });
   });
@@ -174,7 +174,7 @@ describe("RadioGroup", () => {
 
   it("passes aria-label to radiogroup", () => {
     render(
-      <RadioGroup options={defaultOptions} aria-label="Test Radio Group" />
+      <RadioGroup options={defaultOptions} aria-label="Test Radio Group" />,
     );
 
     const radioGroup = screen.getByRole("radiogroup");
@@ -206,7 +206,7 @@ describe("RadioGroup", () => {
 
   it("maintains selection state correctly", () => {
     const { rerender } = render(
-      <RadioGroup options={defaultOptions} value="option1" />
+      <RadioGroup options={defaultOptions} value="option1" />,
     );
 
     let radioButtons = screen.getAllByRole("radio");
@@ -228,7 +228,7 @@ describe("RadioGroup", () => {
         options={defaultOptions}
         value="option2"
         onChange={handleChange}
-      />
+      />,
     );
 
     const option2 = screen.getByText("Option 2").closest("label");

tests/unit/Select.test.jsx

@@ -28,7 +28,10 @@ describe("Select Component", () => {
 
     it("renders without label when not provided", () => {
       render(
-        <Select placeholder="Select an option" options={defaultProps.options} />
+        <Select
+          placeholder="Select an option"
+          options={defaultProps.options}
+        />,
       );
 
       expect(screen.queryByText("Test Select")).not.toBeInTheDocument();
@@ -74,7 +77,7 @@ describe("Select Component", () => {
 
     it("applies correct height for small horizontal label", () => {
       render(
-        <Select {...defaultProps} size="small" labelVariant="horizontal" />
+        <Select {...defaultProps} size="small" labelVariant="horizontal" />,
       );
 
       const selectButton = screen.getByRole("button");
@@ -95,7 +98,7 @@ describe("Select Component", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "border-[var(--color-border-default-tertiary)]"
+        "border-[var(--color-border-default-tertiary)]",
       );
     });
 
@@ -104,7 +107,7 @@ describe("Select Component", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+        "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
       );
     });
 
@@ -113,7 +116,7 @@ describe("Select Component", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "border-[var(--color-border-default-utility-info)]"
+        "border-[var(--color-border-default-utility-info)]",
       );
       expect(selectButton).toHaveClass("shadow-[0_0_5px_3px_#3281F8]");
     });
@@ -123,7 +126,7 @@ describe("Select Component", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "border-[var(--color-border-default-utility-negative)]"
+        "border-[var(--color-border-default-utility-negative)]",
       );
     });
 
@@ -285,7 +288,7 @@ describe("Select Component", () => {
         <div>
           <Select {...defaultProps} />
           <div data-testid="outside">Outside element</div>
-        </div>
+        </div>,
       );
 
       const selectButton = screen.getByRole("button");
@@ -381,7 +384,7 @@ describe("Select Component", () => {
 
       expect(selectButton).toHaveFocus();
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
     });
 

tests/unit/Switch.test.jsx

@@ -19,7 +19,7 @@ describe("Switch Component", () => {
         onChange={handleChange}
         label="Test Switch"
         state="focus"
-      />
+      />,
     );
 
     const switchButton = screen.getByRole("switch");
@@ -140,7 +140,7 @@ describe("Switch Component", () => {
       "transition-all",
       "duration-200",
       "focus:outline-none",
-      "focus-visible:shadow-[0_0_5px_3px_#3281F8]"
+      "focus-visible:shadow-[0_0_5px_3px_#3281F8]",
     );
   });
 
@@ -178,7 +178,7 @@ describe("Switch Component", () => {
       "font-normal",
       "text-[14px]",
       "leading-[20px]",
-      "text-[var(--color-content-default-primary)]"
+      "text-[var(--color-content-default-primary)]",
     );
   });
 });

tests/unit/TextArea.test.jsx

@@ -63,7 +63,7 @@ describe("TextArea", () => {
     render(<TextArea error />);
     const textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
   });
 
@@ -71,20 +71,20 @@ describe("TextArea", () => {
     const { rerender } = render(<TextArea state="active" />);
     let textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "border-[var(--color-border-default-tertiary)]"
+      "border-[var(--color-border-default-tertiary)]",
     );
 
     rerender(<TextArea state="hover" />);
     textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
 
     rerender(<TextArea state="focus" />);
     textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
       "border-[var(--color-border-default-utility-info)]",
-      "shadow-[0_0_5px_3px_#3281F8]"
+      "shadow-[0_0_5px_3px_#3281F8]",
     );
   });
 
@@ -151,7 +151,7 @@ describe("TextArea", () => {
         size="small"
         labelVariant="horizontal"
         label="Small Horizontal"
-      />
+      />,
     );
     const textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass("h-[60px]");
@@ -163,7 +163,7 @@ describe("TextArea", () => {
         size="medium"
         labelVariant="horizontal"
         label="Medium Horizontal"
-      />
+      />,
     );
     const textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass("h-[110px]");

tests/unit/Toggle.test.jsx

@@ -21,7 +21,7 @@ describe("Toggle Component", () => {
         checked={true}
         disabled={true}
         className="custom-class"
-      />
+      />,
     );
 
     const toggle = screen.getByRole("switch");
@@ -82,7 +82,7 @@ describe("Toggle Component", () => {
         showText={true}
         icon="I"
         text="Toggle"
-      />
+      />,
     );
 
     const toggle = screen.getByRole("switch");
@@ -103,7 +103,7 @@ describe("Toggle Component", () => {
   test("does not call onChange when disabled", () => {
     const handleChange = vi.fn();
     render(
-      <Toggle label="Test Toggle" disabled={true} onChange={handleChange} />
+      <Toggle label="Test Toggle" disabled={true} onChange={handleChange} />,
     );
 
     const toggle = screen.getByRole("switch");
@@ -132,7 +132,7 @@ describe("Toggle Component", () => {
 
     const toggle = screen.getByRole("switch");
     expect(toggle).toHaveClass(
-      "hover:!bg-[var(--color-surface-default-secondary)]"
+      "hover:!bg-[var(--color-surface-default-secondary)]",
     );
   });
 
@@ -141,7 +141,7 @@ describe("Toggle Component", () => {
 
     const toggle = screen.getByRole("switch");
     expect(toggle).not.toHaveClass(
-      "hover:!bg-[var(--color-surface-default-secondary)]"
+      "hover:!bg-[var(--color-surface-default-secondary)]",
     );
   });
 

tests/unit/ToggleGroup.test.jsx

@@ -15,7 +15,7 @@ describe("ToggleGroup Component", () => {
     render(
       <ToggleGroup position="middle" state="selected" showText={true}>
         Custom Content
-      </ToggleGroup>
+      </ToggleGroup>,
     );
     const toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toBeInTheDocument();
@@ -24,12 +24,12 @@ describe("ToggleGroup Component", () => {
 
   it("handles position prop correctly", () => {
     const { rerender } = render(
-      <ToggleGroup position="left">Left</ToggleGroup>
+      <ToggleGroup position="left">Left</ToggleGroup>,
     );
     let toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "rounded-l-[var(--measures-radius-medium)]",
-      "rounded-r-none"
+      "rounded-r-none",
     );
 
     rerender(<ToggleGroup position="middle">Middle</ToggleGroup>);
@@ -40,17 +40,17 @@ describe("ToggleGroup Component", () => {
     toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "rounded-r-[var(--measures-radius-medium)]",
-      "rounded-l-none"
+      "rounded-l-none",
     );
   });
 
   it("handles state prop correctly", () => {
     const { rerender } = render(
-      <ToggleGroup state="default">Default</ToggleGroup>
+      <ToggleGroup state="default">Default</ToggleGroup>,
     );
     let toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
-      "bg-[var(--color-surface-default-primary)]"
+      "bg-[var(--color-surface-default-primary)]",
     );
 
     rerender(<ToggleGroup state="hover">Hover</ToggleGroup>);
@@ -61,20 +61,20 @@ describe("ToggleGroup Component", () => {
     toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "bg-[var(--color-surface-default-primary)]",
-      "shadow-[0_0_5px_1px_#3281F8]"
+      "shadow-[0_0_5px_1px_#3281F8]",
     );
 
     rerender(<ToggleGroup state="selected">Selected</ToggleGroup>);
     toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "bg-[var(--color-magenta-magenta100)]",
-      "shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]"
+      "shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]",
     );
   });
 
   it("handles showText prop correctly", () => {
     const { rerender } = render(
-      <ToggleGroup showText={true}>Visible Text</ToggleGroup>
+      <ToggleGroup showText={true}>Visible Text</ToggleGroup>,
     );
     let toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveTextContent("Visible Text");
@@ -131,11 +131,11 @@ describe("ToggleGroup Component", () => {
 
   it("applies correct classes for different states", () => {
     const { rerender } = render(
-      <ToggleGroup state="default">Default</ToggleGroup>
+      <ToggleGroup state="default">Default</ToggleGroup>,
     );
     let toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
-      "bg-[var(--color-surface-default-primary)]"
+      "bg-[var(--color-surface-default-primary)]",
     );
 
     rerender(<ToggleGroup state="hover">Hover</ToggleGroup>);
@@ -150,18 +150,18 @@ describe("ToggleGroup Component", () => {
     toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "bg-[var(--color-magenta-magenta100)]",
-      "shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]"
+      "shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]",
     );
   });
 
   it("applies correct position classes", () => {
     const { rerender } = render(
-      <ToggleGroup position="left">Left</ToggleGroup>
+      <ToggleGroup position="left">Left</ToggleGroup>,
     );
     let toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "rounded-l-[var(--measures-radius-medium)]",
-      "rounded-r-none"
+      "rounded-r-none",
     );
 
     rerender(<ToggleGroup position="middle">Middle</ToggleGroup>);
@@ -172,7 +172,7 @@ describe("ToggleGroup Component", () => {
     toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "rounded-r-[var(--measures-radius-medium)]",
-      "rounded-l-none"
+      "rounded-l-none",
     );
   });
 
@@ -195,7 +195,7 @@ describe("ToggleGroup Component", () => {
       "hover:bg-[var(--color-magenta-magenta100)]",
       "flex",
       "items-center",
-      "justify-center"
+      "justify-center",
     );
   });