fix(Header)!: removing spacing prop in favor of Tailwind classes (#823)

packages/ui-header/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,12 +37,9 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }

packages/ui-header/src/components/Header/Header.tsx

@@ -1,4 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
 import clsx from "clsx";
 
 import { HEADER_CLASSNAME } from "../../common/constants";
@@ -8,25 +7,29 @@ export const Header = ({
 	children,
 	className,
 	raw = false,
-	spacing,
+
 	mode = "system",
 	noColors = false,
 	sticky = false,
 }: HeaderProps) => {
-	const headerClass = clsx(HEADER_CLASSNAME, getSpacing(spacing), {
-		"border-border-accent bg-surface-dark":
-			mode === "dark" && !raw && !noColors,
-		"border-border-medium bg-surface-light":
-			mode === "light" && !raw && !noColors,
-		"border-border-accent bg-surface-dark dark:border-border-medium dark:bg-surface-light":
-			mode === "alt-system" && !raw && !noColors,
-		"border-border-medium bg-surface-light dark:border-border-accent dark:bg-surface-dark":
-			mode === "system" && !raw && !noColors,
-		"border-b-4": !raw,
-		"border-transparent": !raw && noColors,
-		"sticky top-0 z-50": sticky,
-	});
-	const headerInnerClass = clsx(className, {
+	const headerClass = clsx(
+		HEADER_CLASSNAME,
+		{
+			"border-border-accent bg-surface-dark":
+				mode === "dark" && !raw && !noColors,
+			"border-border-medium bg-surface-light":
+				mode === "light" && !raw && !noColors,
+			"border-border-accent bg-surface-dark dark:border-border-medium dark:bg-surface-light":
+				mode === "alt-system" && !raw && !noColors,
+			"border-border-medium bg-surface-light dark:border-border-accent dark:bg-surface-dark":
+				mode === "system" && !raw && !noColors,
+			"border-b-4": !raw,
+			"border-transparent": !raw && noColors,
+			"sticky top-0 z-50": sticky,
+		},
+		className,
+	);
+	const headerInnerClass = clsx({
 		"mt-0 flex w-full flex-col p-2 md:mx-auto md:max-w-4xl": !raw,
 	});
 

packages/ui-header/src/components/Header/HeaderTypes.d.ts

@@ -1,5 +1,3 @@
-import type { SpacingTypes } from "@versini/ui-types";
-
 export type HeaderProps = {
 	/**
 	 * The children to render.
@@ -26,4 +24,4 @@ export type HeaderProps = {
 	 * Whether or not to render the Header component with sticky behavior.
 	 */
 	sticky?: boolean;
-} & SpacingTypes.Props;
+};

packages/ui-header/src/components/Header/__tests__/Header.test.tsx

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

packages/ui-header/tailwind.config.js

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

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

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