Aspect ratio component

src/components/ui/AspectRatio/AspectRatio.tsx

@@ -13,7 +13,9 @@ export type AspectRatioProps = {
 }
 
 const AspectRatio = ({ children, customRootClass, className, ratio="1", ...props }: AspectRatioProps) => {
-
+
+    if (isNaN(Number(ratio)) && !ratio.match(/^(\d+)\/(\d+)$/)) ratio = "1"
+
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     return <div style={{aspectRatio:ratio}} className={clsx(rootClass, className)} {...props}>{children} </div>
 }

src/components/ui/AspectRatio/stories/AspectRatio.stories.js

@@ -8,10 +8,9 @@ export default {
     render: (args) => <SandboxEditor>
         <AspectRatio {...args} >
             <img
-
 				className="Image"
 				src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
-				alt="Landscape photograph by Tobias Tullius"
+				alt="Landscape photograph"
 			/>
             </AspectRatio>
     </SandboxEditor>
@@ -20,6 +19,7 @@ export default {
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default = {
     args: {
+        className:"",
         ratio: "16/9"
     }
 };

src/components/ui/AspectRatio/tests/AspectRatio.test.js

@@ -2,3 +2,21 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AspectRatio from '../AspectRatio';
 
+describe('AspectRatio', () => {
+    test('renders AspectRatio component', () => {
+        render(<AspectRatio>Content</AspectRatio>);
+        expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    test('applies custom classes correctly', () => {
+        render(<AspectRatio  className="additional-class">Content</AspectRatio>);
+        const divElement = screen.getByText('Content');
+        expect(divElement).toHaveClass('additional-class');
+    });
+
+    test('applies correct aspect ratio', () => {
+        render(<AspectRatio ratio="16/9">Content</AspectRatio>);
+        expect(screen.getByText('Content')).toHaveStyle( "aspect-ratio: 16/9");
+    });
+
+});

styles/themes/default.scss

@@ -1,6 +1,5 @@
 @import "./components/accordion.scss";
 @import "./components/alert-dialog.scss";
-@import "./components/aspectratio.scss";
 @import "./components/avatar.scss";
 @import "./components/avatar-group.scss";
 @import "./components/badge.scss";