feat(ProductCard): strongly-typed enums for layout, image type, vector kinds/shadows, and button variant; export via main, component, and SSR barrels; docs updated

Author: Fergus Bisset

dist/src/ssr.js

@@ -132,6 +132,24 @@ describe("ProductCard - Client Tests", () => {
         container.firstChild.className.includes("nhs-product-card--horizontal")).toBe(true);
     });
 
+    it("accepts 'landscape' alias for horizontal", () => {
+      const { container } = render(
+        <ProductCard title="Test" description="Test" layout="landscape" />
+      );
+
+      expect(container.firstChild instanceof Element &&
+        container.firstChild.className.includes("nhs-product-card--horizontal")).toBe(true);
+    });
+
+    it("accepts 'portrait' alias for vertical", () => {
+      const { container } = render(
+        <ProductCard title="Test" description="Test" layout="portrait" />
+      );
+
+      expect(container.firstChild instanceof Element &&
+        container.firstChild.className.includes("nhs-product-card--vertical")).toBe(true);
+    });
+
     it("applies theme class", () => {
       const { container } = render(
         <ProductCard title="Test" description="Test" theme="aqua-green" />

dist/src/ssr.js.map

@@ -5,7 +5,7 @@ import type {
 	VectorGraphicShape,
 	ProductCardTheme,
 } from "./ProductCard.types";
-import { ProductCardThemeEnum } from "./ProductCard.types";
+import { ProductCardThemeEnum, VectorGraphicKindEnum, VectorGraphicShadowEnum } from "./ProductCard.types";
 import "./ProductCard.scss";
 
 // Re-export for convenience
@@ -49,7 +49,7 @@ function generateVectorShapes(
 ): VectorGraphicShape[] {
 	const rng = mulberry32(seed);
 	const shapes: VectorGraphicShape[] = [];
-	const kinds: VectorGraphicShape["kind"][] = ["rect", "hex", "circle"];
+	const kinds: VectorGraphicShape["kind"][] = [VectorGraphicKindEnum.Rect, VectorGraphicKindEnum.Hex, VectorGraphicKindEnum.Circle];
 
 	// Get complementary gradients based on theme
 	const themeIndex = DEFAULT_GRADIENTS.indexOf(theme);
@@ -124,7 +124,7 @@ function generateVectorShapes(
 		const y = clamp(20 + rng() * 60, 10, 90);
 
 		const gradient = gradients[Math.floor(rng() * gradients.length)];
-		const shadow = shapes.length < 2 ? "soft" : "none";
+		const shadow = shapes.length < 2 ? VectorGraphicShadowEnum.Soft : VectorGraphicShadowEnum.None;
 
 		if (kind === "rect") {
 			const width = 40 + rng() * 80; // 40-120px (same as PatternBanner)

src/components/ProductCard/ProductCard.client.test.tsx

@@ -132,6 +132,22 @@ describe("ProductCard - SSR Tests", () => {
     expect(html).toContain('nhs-product-card--horizontal');
   });
 
+  it("accepts 'landscape' alias for horizontal in SSR", () => {
+    const html = renderToString(
+      <ProductCard title="Test" description="Test" layout="landscape" />
+    );
+
+    expect(html).toContain('nhs-product-card--horizontal');
+  });
+
+  it("accepts 'portrait' alias for vertical in SSR", () => {
+    const html = renderToString(
+      <ProductCard title="Test" description="Test" layout="portrait" />
+    );
+
+    expect(html).toContain('nhs-product-card--vertical');
+  });
+
   it("applies theme class in SSR", () => {
     const html = renderToString(
       <ProductCard title="Test" description="Test" theme="aqua-green" />

src/components/ProductCard/ProductCard.server.tsx

@@ -525,6 +525,13 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 	elevated = true,
 	imageAspectRatio = 1.5,
 }) => {
+		// Support semantic aliases: 'portrait' => 'vertical', 'landscape' => 'horizontal'
+		const normalizedLayout = React.useMemo(() => {
+			if (layout === "landscape") return "horizontal" as const;
+			if (layout === "portrait") return "vertical" as const;
+			return layout;
+		}, [layout]);
+
 	// Generate or use provided shapes
 	// Note: For SSR compatibility, always provide a seed if using graphic images
 	// to avoid hydration mismatches from Date.now()
@@ -540,7 +547,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
 	const cardClasses = [
 		"nhs-product-card",
-		`nhs-product-card--${layout}`,
+		`nhs-product-card--${normalizedLayout}`,
 		`nhs-product-card--theme-${theme}`,
 		elevated && "nhs-product-card--elevated",
 		(onClick || href) && "nhs-product-card--clickable",