@redocly/theme 0.57.0-next.0 → 0.57.0-next.2

package/src/icons/GenericIcon/GenericIcon.tsx

@@ -6,7 +6,7 @@ import { resolveIcon } from '@redocly/theme/core/utils';
 import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 import { Image } from '@redocly/theme/components/Image/Image';
 
-export interface GenericIconProps {
+export type GenericIconProps = {
   icon: string | React.ReactNode;
   srcSet?: string;
   rawContent?: string;
@@ -14,7 +14,9 @@ export interface GenericIconProps {
   color?: string;
   alt?: string;
   className?: string;
-}
+};
+
+const INVALID_ICON_NAME = 'image-slash';
 
 export function GenericIcon({
   icon,
@@ -26,7 +28,7 @@ export function GenericIcon({
   className,
 }: GenericIconProps) {
   if (srcSet) {
-    return <Image srcSet={srcSet} alt={alt} className={className} />;
+    return <IconSrcSetImg srcSet={srcSet} alt={alt} className={className} />;
   }
 
   const resolvedIcon = icon && typeof icon === 'string' ? resolveIcon(icon) : null;
@@ -42,6 +44,8 @@ export function GenericIcon({
       color={color}
       className={className}
     />
+  ) : resolvedIcon?.type === 'invalid' ? (
+    <CDNIcon name={INVALID_ICON_NAME} size={size} color={color} className={className} />
   ) : (
     icon
   );
@@ -53,7 +57,12 @@ const IconImg = styled.img`
   width: var(--icon-width, 16px);
   height: var(--icon-height, 16px);
   display: inline-block;
-  object-fit: cover;
+  vertical-align: middle;
+`;
+
+const IconSrcSetImg = styled(Image)`
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
 `;
 
 const IconSvg = styled(InlineSvg)`

package/src/icons/__tests__/IconTestUtils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
+import { expect } from 'vitest';
 
 export function testIconComponent(IconComponent: React.ComponentType<any>, componentName: string) {
   const dataName = `icons/${componentName}/${componentName}`;
@@ -9,7 +9,7 @@ export function testIconComponent(IconComponent: React.ComponentType<any>, compo
     rendersCorrectlyWithDefaultProps: () => {
       const { container } = render(<IconComponent />);
       const svgElement = container.querySelector('svg');
-      expect(svgElement).toBeInTheDocument();
+      expect(svgElement).toBeTruthy();
 
       // Check if styles are applied either via style attribute or CSS class
       const element = container.firstChild as HTMLElement | SVGElement;
@@ -24,7 +24,7 @@ export function testIconComponent(IconComponent: React.ComponentType<any>, compo
       const { container } = render(<IconComponent size="24px" color="--color-primary" />);
 
       const svgElement = container.querySelector('svg');
-      expect(svgElement).toBeInTheDocument();
+      expect(svgElement).toBeTruthy();
 
       const element = container.firstChild as HTMLElement | SVGElement;
       const pathElement = container.querySelector('path') as SVGPathElement;
@@ -47,7 +47,8 @@ export function testIconComponent(IconComponent: React.ComponentType<any>, compo
 
     hasCorrectDataComponentName: () => {
       const { container } = render(<IconComponent />);
-      expect(container.firstChild).toHaveAttribute('data-component-name', dataName);
+      expect(container.firstChild).toHaveProperty('getAttribute');
+      expect((container.firstChild as Element).getAttribute('data-component-name')).toBe(dataName);
     },
   };
 }