Fix components based on failed tests

app/components/Checkbox/Checkbox.container.tsx

@@ -97,7 +97,6 @@ const CheckboxContainer = memo<CheckboxProps>(
 
     return (
       <CheckboxView
-        checkboxId={checkboxId}
         labelId={labelId}
         checked={checked}
         mode={mode}
@@ -106,7 +105,6 @@ const CheckboxContainer = memo<CheckboxProps>(
         label={label}
         name={name}
         value={value}
-        ariaLabel={ariaLabel}
         className={className}
         combinedBoxStyles={combinedBoxStyles}
         defaultOutlineClass={defaultOutlineClass}

app/components/Checkbox/Checkbox.types.ts

@@ -17,7 +17,6 @@ export interface CheckboxProps {
 }
 
 export interface CheckboxViewProps {
-  checkboxId: string;
   labelId: string;
   checked: boolean;
   mode: "standard" | "inverse";
@@ -26,7 +25,6 @@ export interface CheckboxViewProps {
   label?: string;
   name?: string;
   value?: string;
-  ariaLabel?: string;
   className: string;
   combinedBoxStyles: string;
   defaultOutlineClass: string;

app/components/Checkbox/Checkbox.view.tsx

@@ -1,14 +1,12 @@
 import type { CheckboxViewProps } from "./Checkbox.types";
 
 export function CheckboxView({
-  checkboxId,
   labelId,
   checked,
   disabled,
   label,
   name,
   value,
-  ariaLabel,
   className,
   combinedBoxStyles,
   defaultOutlineClass,

app/components/Header/Header.container.tsx

@@ -138,12 +138,8 @@ const HeaderContainer = memo<HeaderProps>(() => {
   return (
     <HeaderView
       schemaData={schemaData}
-      navigationItems={navigationItems}
-      avatarImages={avatarImages}
       logoConfig={logoConfig}
-      pathname={pathname}
       renderNavigationItems={renderNavigationItems}
-      renderAvatarGroup={renderAvatarGroup}
       renderLoginButton={renderLoginButton}
       renderCreateRuleButton={renderCreateRuleButton}
       renderLogo={renderLogo}

app/components/Header/Header.types.ts

@@ -14,15 +14,6 @@ export interface HeaderViewProps {
       "query-input": string;
     };
   };
-  navigationItems: Array<{
-    href: string;
-    text: string;
-    extraPadding?: boolean;
-  }>;
-  avatarImages: Array<{
-    src: string;
-    alt: string;
-  }>;
   logoConfig: Array<{
     breakpoint: string;
     size:
@@ -40,12 +31,7 @@ export interface HeaderViewProps {
       | "footerLg";
     showText: boolean;
   }>;
-  pathname: string;
   renderNavigationItems: (size: NavSize) => React.ReactNode;
-  renderAvatarGroup: (
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => React.ReactNode;
   renderLoginButton: (size: NavSize) => React.ReactNode;
   renderCreateRuleButton: (
     buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",

app/components/Header/Header.view.tsx

@@ -1,19 +1,10 @@
-import Logo from "../Logo";
 import MenuBar from "../MenuBar";
-import MenuBarItem from "../MenuBarItem";
-import Button from "../Button";
-import AvatarContainer from "../AvatarContainer";
-import Avatar from "../Avatar";
 import type { HeaderViewProps } from "./Header.types";
 
 export function HeaderView({
   schemaData,
-  navigationItems,
-  avatarImages,
   logoConfig,
-  pathname,
   renderNavigationItems,
-  renderAvatarGroup,
   renderLoginButton,
   renderCreateRuleButton,
   renderLogo,

app/components/HomeHeader/HomeHeader.container.tsx

@@ -178,13 +178,9 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
 
   return (
     <HomeHeaderView
-      pathname={pathname}
       schemaData={schemaData}
-      navigationItems={navigationItems}
-      avatarImages={avatarImages}
       logoConfig={logoConfig}
       renderNavigationItems={renderNavigationItems}
-      renderAvatarGroup={renderAvatarGroup}
       renderLoginButton={renderLoginButton}
       renderCreateRuleButton={renderCreateRuleButton}
       renderLogo={renderLogo}

app/components/HomeHeader/HomeHeader.types.ts

@@ -17,17 +17,7 @@ export type NavSize =
   | "xlarge";
 
 export interface HomeHeaderViewProps {
-  pathname: string;
   schemaData: object;
-  navigationItems: Array<{
-    href: string;
-    text: string;
-    extraPadding?: boolean;
-  }>;
-  avatarImages: Array<{
-    src: string;
-    alt: string;
-  }>;
   logoConfig: Array<{
     breakpoint: string;
     size:
@@ -46,10 +36,6 @@ export interface HomeHeaderViewProps {
     showText: boolean;
   }>;
   renderNavigationItems: (size: NavSize) => React.ReactNode;
-  renderAvatarGroup: (
-    containerSize: "small" | "medium" | "large" | "xlarge",
-    avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => React.ReactNode;
   renderLoginButton: (size: NavSize) => React.ReactNode;
   renderCreateRuleButton: (
     buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",

app/components/HomeHeader/HomeHeader.view.tsx

@@ -2,23 +2,14 @@
 
 import { memo } from "react";
 import Script from "next/script";
-import Logo from "../Logo";
 import HeaderTab from "../HeaderTab";
 import MenuBar from "../MenuBar";
-import MenuBarItem from "../MenuBarItem";
-import Button from "../Button";
-import AvatarContainer from "../AvatarContainer";
-import Avatar from "../Avatar";
 import type { HomeHeaderViewProps } from "./HomeHeader.types";
 
 function HomeHeaderView({
-  pathname,
   schemaData,
-  navigationItems,
-  avatarImages,
   logoConfig,
   renderNavigationItems,
-  renderAvatarGroup,
   renderLoginButton,
   renderCreateRuleButton,
   renderLogo,

app/components/Input/Input.view.tsx

@@ -12,7 +12,11 @@ export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
       name,
       type,
       disabled,
-      className,
+      size: _size,
+      labelVariant: _labelVariant,
+      state: _state,
+      error: _error,
+      className: _className,
       containerClasses,
       labelClasses,
       inputClasses,
@@ -20,7 +24,6 @@ export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
       handleChange,
       handleFocus,
       handleBlur,
-      ...props
     },
     ref,
   ) => {
@@ -49,7 +52,6 @@ export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
             disabled={disabled}
             className={inputClasses}
             style={{ borderRadius }}
-            {...props}
           />
         </div>
       </div>

app/components/LogoWall/LogoWall.container.tsx

@@ -43,33 +43,31 @@ const defaultLogos = [
   },
 ];
 
-const LogoWallContainer = memo<LogoWallProps>(
+const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
-  ({ logos, className = "" }) => {
+  const [isVisible, setIsVisible] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
 
-    const displayLogos = useMemo(
+  const displayLogos = useMemo(
-      () => (logos && logos.length > 0 ? logos : defaultLogos),
+    () => (logos && logos.length > 0 ? logos : defaultLogos),
-      [logos],
+    [logos],
-    );
+  );
 
-    useEffect(() => {
+  useEffect(() => {
-      // Trigger fade-in animation after component mounts
+    // Trigger fade-in animation after component mounts
-      const timer = setTimeout(() => {
+    const timer = setTimeout(() => {
-        setIsVisible(true);
+      setIsVisible(true);
-      }, 100);
+    }, 100);
 
-      return () => clearTimeout(timer);
+    return () => clearTimeout(timer);
-    }, []);
+  }, []);
 
-    return (
+  return (
-      <LogoWallView
+    <LogoWallView
-        isVisible={isVisible}
+      isVisible={isVisible}
-        displayLogos={displayLogos}
+      displayLogos={displayLogos}
-        className={className}
+      className={className}
-      />
+    />
-    );
+  );
-  },
+});
-);
 
 LogoWallContainer.displayName = "LogoWall";
 

app/components/MiniCard/MiniCard.types.ts

@@ -21,7 +21,8 @@ export interface MiniCardViewProps {
   labelLine2?: string;
   computedAriaLabel: string;
   wrapperElement: "a" | "button" | "div";
-  wrapperProps: React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  wrapperProps:
-    React.ButtonHTMLAttributes<HTMLButtonElement> &
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    React.HTMLAttributes<HTMLDivElement>;
+    | React.ButtonHTMLAttributes<HTMLButtonElement>
+    | React.HTMLAttributes<HTMLDivElement>;
 }

app/components/Select/Select.view.tsx

@@ -1,4 +1,4 @@
-import React, { Children, type ReactElement, type ReactNode } from "react";
+import React, { Children, type ReactNode } from "react";
 import SelectDropdown from "../SelectDropdown";
 import SelectOption from "../SelectOption";
 import type { SelectOptionData } from "./Select.types";

app/components/ToggleGroup/ToggleGroup.container.tsx

@@ -5,7 +5,7 @@ import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
 
 const ToggleGroupContainer = memo(
-  forwardRef<HTMLButtonElement, ToggleGroupProps>((props, ref) => {
+  forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
     const {
       children,
       className = "",