From 4a14e811b73f9a221a192f5c511a72410f593483 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Sat, 6 Apr 2024 14:00:34 -0400
Subject: [PATCH] feat(ui-system): adding prop "className" to ThemeProvider

---
 packages/ui-system/src/common/constants.ts           |  1 +
 .../src/components/ThemeProvider/ThemeProvider.tsx   |  6 +++++-
 .../components/ThemeProvider/ThemeProviderTypes.d.ts |  4 ++++
 .../ThemeProvider/__tests__/ThemeProvider.test.tsx   | 12 ++++++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/ui-system/src/common/constants.ts b/packages/ui-system/src/common/constants.ts
index 20d4264b..73e365e5 100644
--- a/packages/ui-system/src/common/constants.ts
+++ b/packages/ui-system/src/common/constants.ts
@@ -1,4 +1,5 @@
 export const FLEXGRID_CLASSNAME = "av-flexgrid";
 export const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
+export const THEMEPROVIDER_CLASSNAME = "av-theme-provider";
 
 export const FLEXGRID_GAP_RATIO = 0.25;
diff --git a/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx b/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx
index 3b01fda2..9879ca7e 100644
--- a/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx
@@ -1,13 +1,17 @@
+import clsx from "clsx";
 import { useEffect, useRef } from "react";
 
+import { THEMEPROVIDER_CLASSNAME } from "../../common/constants";
 import { ThemeProviderProps } from "./ThemeProviderTypes";
 
 export const ThemeProvider = ({
 	customTheme,
 	children,
 	global,
+	className,
 }: ThemeProviderProps) => {
 	const wrapperRef = useRef<HTMLDivElement>(null);
+	const wrapperClass = clsx(THEMEPROVIDER_CLASSNAME, "contents", className);
 
 	useEffect(() => {
 		const wrapper = global
@@ -22,7 +26,7 @@ export const ThemeProvider = ({
 	}, [customTheme, global]);
 
 	return customTheme || !global ? (
-		<div ref={wrapperRef} className="contents">
+		<div ref={wrapperRef} className={wrapperClass}>
 			{children}
 		</div>
 	) : (
diff --git a/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts b/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts
index 67fd5444..e1d16142 100644
--- a/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts
+++ b/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts
@@ -3,6 +3,10 @@ export type ThemeProviderProps = {
 	 * The children to render.
 	 */
 	children: React.ReactNode;
+	/**
+	 * CSS class(es) to add to the main component wrapper.
+	 */
+	className?: string;
 	/**
 	 * An object specifying custom properties impacting the base theme.
 	 * Not all custom properties need to be specified.
diff --git a/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx b/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
index f18ca576..dec30cb2 100644
--- a/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
+++ b/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
@@ -1,5 +1,7 @@
 import { act, render, screen } from "@testing-library/react";
 
+import { expectToHaveClasses } from "../../../../../../configuration/tests-helpers";
+import { THEMEPROVIDER_CLASSNAME } from "../../../common/constants";
 import { ThemeProvider } from "../..";
 
 const customTheme = {
@@ -13,6 +15,16 @@ describe("ThemeProvider (exceptions)", () => {
 	});
 });
 
+describe("ThemeProvider props tests", () => {
+	it("should have default and custom classes", async () => {
+		await act(async () => {
+			render(<ThemeProvider className="toto">Hello World</ThemeProvider>);
+		});
+		const node = await screen.findByText("Hello World");
+		expectToHaveClasses(node, [THEMEPROVIDER_CLASSNAME, "contents", "toto"]);
+	});
+});
+
 describe("ThemeProvider injection tests", () => {
 	it("should NOT inject a custom theme locally [no custom theme]", async () => {
 		await act(async () => {