fix(Footer)!: removing spacing prop in favor of Tailwind classes (#822)

packages/ui-footer/package.json

@@ -14,9 +14,7 @@
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"scripts": {
 		"build:check": "tsc",
 		"build:js": "vite build",
@@ -39,11 +37,8 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }

packages/ui-footer/src/components/Footer/Footer.tsx

@@ -1,4 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
 import clsx from "clsx";
 
 import { FOOTER_CLASSNAME } from "../../common/constants";
@@ -10,19 +9,23 @@ export const Footer = ({
 	row1,
 	row2,
 	noMargins = false,
-	spacing,
+
 	raw = false,
 }: FooterProps) => {
-	const footerClass = clsx(FOOTER_CLASSNAME, className, getSpacing(spacing), {
-		"text-copy-dark": !raw && mode === "dark",
-		"text-copy-lighter": !raw && mode === "light",
-		"text-copy-dark dark:text-copy-lighter": !raw && mode === "system",
-		"text-copy-lighter dark:text-copy-dark": !raw && mode === "alt-system",
+	const footerClass = clsx(
+		FOOTER_CLASSNAME,
+		{
+			"text-copy-dark": !raw && mode === "dark",
+			"text-copy-lighter": !raw && mode === "light",
+			"text-copy-dark dark:text-copy-lighter": !raw && mode === "system",
+			"text-copy-lighter dark:text-copy-dark": !raw && mode === "alt-system",
 
-		"mb-[100px]": !noMargins && !raw,
-		"mt-0 flex w-full flex-col p-2 text-center text-xs sm:mt-3 md:mx-auto md:max-w-4xl":
-			!raw,
-	});
+			"mb-[100px]": !noMargins && !raw,
+			"mt-0 flex w-full flex-col p-2 text-center text-xs sm:mt-3 md:mx-auto md:max-w-4xl":
+				!raw,
+		},
+		className,
+	);
 
 	return (
 		<footer className={footerClass}>

packages/ui-footer/src/components/Footer/FooterTypes.d.ts

@@ -1,5 +1,3 @@
-import type { SpacingTypes } from "@versini/ui-types";
-
 export type FooterProps = {
 	/**
 	 * CSS class(es) to add to the main component wrapper.
@@ -27,4 +25,4 @@ export type FooterProps = {
 	 * The content to render in the second row.
 	 */
 	row2?: React.ReactNode;
-} & SpacingTypes.Props;
+};

packages/ui-footer/src/components/Footer/__tests__/Footer.test.tsx

@@ -10,6 +10,16 @@ describe("Footer (exceptions)", () => {
 	});
 });
 
+describe("Footer spacing", () => {
+	it("should render a footer with a right margin spacing", async () => {
+		render(<Footer className="mr-2" />);
+		const footer = await screen.findByRole("contentinfo");
+		// not only it should be there, but it should be the last entry
+		expect(footer.className).toContain("mr-2");
+		expect(footer.className.slice(-4)).toBe("mr-2");
+	});
+});
+
 describe("Footer modifiers", () => {
 	it("should render a default footer", async () => {
 		render(<Footer />);

packages/ui-footer/tailwind.config.js

@@ -1,2 +1,2 @@
 import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
-export default commonTailwindConfigForComponent();
+export default commonTailwindConfigForComponent("ui-footer");

packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts

@@ -86,6 +86,7 @@ const componentsWithNoSpacingProp = [
 	"ui-truncate",
 	"ui-bubble",
 	"ui-card",
+	"ui-footer",
 ];
 
 /**