diff --git a/packages/module/src/WidgetLayout/GridLayout.tsx b/packages/module/src/WidgetLayout/GridLayout.tsx
index 23c6c8f..d8991b4 100644
--- a/packages/module/src/WidgetLayout/GridLayout.tsx
+++ b/packages/module/src/WidgetLayout/GridLayout.tsx
@@ -20,7 +20,7 @@ import { columns, breakpoints, droppingElemId, getWidgetIdentifier, extendLayout
export const defaultBreakpoints = breakpoints;
const createSerializableConfig = (config?: WidgetConfiguration) => {
- if (!config) return undefined;
+ if (!config) {return undefined;}
return {
...(config.title && { title: config.title }),
...(config.headerLink && { headerLink: config.headerLink })
diff --git a/packages/module/src/WidgetLayout/GridTile.tsx b/packages/module/src/WidgetLayout/GridTile.tsx
index 3e2d3b2..54866c1 100644
--- a/packages/module/src/WidgetLayout/GridTile.tsx
+++ b/packages/module/src/WidgetLayout/GridTile.tsx
@@ -178,8 +178,9 @@ const GridTile = ({
return (
@@ -222,7 +223,7 @@ const GridTile = ({
- {children}
+ {children}
);
};
diff --git a/packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx b/packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx
new file mode 100644
index 0000000..0308b28
--- /dev/null
+++ b/packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import GridTile, { GridTileProps } from '../GridTile';
+
+const defaultProps: GridTileProps = {
+ widgetType: 'test-widget',
+ isDragging: false,
+ setIsDragging: jest.fn(),
+ setWidgetAttribute: jest.fn(),
+ widgetConfig: {
+ i: 'test-widget-1',
+ x: 0,
+ y: 0,
+ w: 2,
+ h: 3,
+ colWidth: 100,
+ },
+ removeWidget: jest.fn(),
+ children:
Widget Content
,
+ isLoaded: true,
+};
+
+describe('GridTile - wrapperProps and cardBodyProps', () => {
+ describe('wrapperProps', () => {
+ it('should pass wrapperProps to the Card wrapper component', () => {
+ const wrapperProps = {
+ 'data-testid': 'custom-card-wrapper',
+ 'aria-label': 'Custom card label',
+ };
+
+ render(
+
+ );
+
+ const cardWrapper = screen.getByTestId('custom-card-wrapper');
+ expect(cardWrapper).toBeInTheDocument();
+ expect(cardWrapper).toHaveAttribute('aria-label', 'Custom card label');
+ });
+
+ it('should merge custom className with default className in wrapperProps', () => {
+ const wrapperProps = {
+ className: 'custom-wrapper-class',
+ 'data-testid': 'card-with-custom-class',
+ };
+
+ render(
+
+ );
+
+ const cardWrapper = screen.getByTestId('card-with-custom-class');
+ expect(cardWrapper).toHaveClass('grid-tile');
+ expect(cardWrapper).toHaveClass('custom-wrapper-class');
+ });
+ });
+
+ describe('cardBodyProps', () => {
+ it('should pass cardBodyProps to the CardBody component', () => {
+ const cardBodyProps = {
+ 'data-testid': 'custom-card-body',
+ 'aria-label': 'Custom card body label',
+ };
+
+ render(
+
+ );
+
+ const cardBody = screen.getByTestId('custom-card-body');
+ expect(cardBody).toBeInTheDocument();
+ expect(cardBody).toHaveAttribute('aria-label', 'Custom card body label');
+ });
+
+ it('should merge custom className with default className in cardBodyProps', () => {
+ const cardBodyProps = {
+ className: 'custom-body-class',
+ 'data-testid': 'body-with-custom-class',
+ };
+
+ render(
+
+ );
+
+ const cardBody = screen.getByTestId('body-with-custom-class');
+ expect(cardBody).toHaveClass('pf-v6-u-p-0');
+ expect(cardBody).toHaveClass('custom-body-class');
+ });
+ });
+
+ describe('both props together', () => {
+ it('should correctly apply both wrapperProps and cardBodyProps simultaneously', () => {
+ const wrapperProps = {
+ className: 'custom-wrapper',
+ 'data-testid': 'combined-wrapper',
+ };
+
+ const cardBodyProps = {
+ className: 'custom-body',
+ 'data-testid': 'combined-body',
+ };
+
+ render(
+
+ );
+
+ const cardWrapper = screen.getByTestId('combined-wrapper');
+ expect(cardWrapper).toHaveClass('grid-tile');
+ expect(cardWrapper).toHaveClass('custom-wrapper');
+
+ const cardBody = screen.getByTestId('combined-body');
+ expect(cardBody).toHaveClass('pf-v6-u-p-0');
+ expect(cardBody).toHaveClass('custom-body');
+ });
+ });
+});
diff --git a/packages/module/src/WidgetLayout/types.ts b/packages/module/src/WidgetLayout/types.ts
index 741741b..0e01e84 100644
--- a/packages/module/src/WidgetLayout/types.ts
+++ b/packages/module/src/WidgetLayout/types.ts
@@ -1,4 +1,5 @@
import { Layout } from 'react-grid-layout';
+import { CardProps, CardBodyProps } from '@patternfly/react-core';
export const widgetIdSeparator = '#';
@@ -43,6 +44,8 @@ export interface WidgetConfiguration {
icon?: React.ReactNode;
headerLink?: WidgetHeaderLink;
title?: string;
+ wrapperProps?: Omit;
+ cardBodyProps?: Omit;
}
/**