Add Homepage Category Highlight Component Guidelines setup

2025-12-26 08:37:52 +00:00 · 2025-12-26 08:37:52 +00:00 · 5e4e598d82
parent ca4cdc0436
commit 5e4e598d82
1 changed files with 120 additions and 0 deletions
--- a/Homepage-Category-Highlight-Component-Guidelines-setup.md
+++ b/Homepage-Category-Highlight-Component-Guidelines-setup.md
@ -0,0 +1,120 @@
+# Using `VtCategoryHighlight`
+
+- Renders a grid of category tiles with optional images or text CTA content.
+- Displays an optional section title above the grid via `config.title`.
+- Each tile can link to a route using `items[].href` (wrapped with a localized client link).
+- Styling is fully configurable via JSON: container, title, grid, label, and per‑item classes.
+
+**JSON Config**
+
+- Place `VtCategoryHighlight` under a page key in your design JSON. Examples:
+
+```json
+{
+  "pages": {
+    "Home": [
+      {
+        "VtCategoryHighlight": {
+          "config": {
+            "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
+            "className": "content-container py-12 small:py-20",
+            "gridClassName": "grid grid-cols-2 gap-6 w-full",
+            "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
+            "items": [
+              {
+                "imageSrc": "/overnight-oat.webp",
+                "href": "/categories/overnight-oats",
+                "label": "Overnight Oats",
+                "className": "bg-[#CFECD9] h-[250px]",
+                "imageClassName": "object-contain"
+              },
+              {
+                "headingLabel": "The Squatch Difference",
+                "descriptionLabel": "Learn why men everywhere are loving Dr. Squatch.",
+                "buttonLabel": "Learn more",
+                "className": "flex-col bg-[#F9E0B0] p-6 justify-center",
+                "headingClassName": "text-[#003F31] text-[28px] font-semibold",
+                "descriptionClassName": "text-[#003f31b3]",
+                "buttonClassName": "mt-4 text-[#003F31] text-[18px] font-semibold bg-orange-500 py-2 px-16 rounded text-white"
+              }
+            ]
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+- Alternate grid sizing example (4 columns):
+
+```json
+{
+  "pages": {
+    "Home": [
+      {
+        "VtCategoryHighlight": {
+          "config": {
+            "gridClassName": "grid grid-cols-4 gap-6 w-full",
+            "items": [
+              { "imageSrc": "/overnight-oat.webp", "href": "/categories/overnight-oats", "label": "Overnight Oats", "className": "bg-[#CFECD9] col-start-1 col-end-3 row-start-1 row-end-3", "imageClassName": "object-contain" },
+              { "imageSrc": "/overnight-oat.webp", "href": "/categories/porridge", "label": "Porridge", "className": "bg-[#F9E0B0]", "imageClassName": "object-contain" },
+              { "imageSrc": "/overnight-oat.webp", "href": "/categories/cereals", "label": "Cereals", "className": "bg-[#F59E0B]", "imageClassName": "object-contain" },
+              { "imageSrc": "/overnight-oat.webp", "href": "/categories/granola", "label": "Granola", "className": "bg-[#A7D8F0]", "imageClassName": "object-contain" },
+              { "imageSrc": "/overnight-oat.webp", "href": "/categories/oat-bars", "label": "Oat Bars", "className": "bg-[#EED7F2]", "imageClassName": "object-contain" }
+            ]
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+**Fields**
+
+- `config.title`
+  - Optional section heading shown above the grid.
+- `config.className`
+  - Wrapper classes for the section container.
+  - Default: `content-container py-12`.
+- `config.titleClassName`
+  - Classes for the title text element.
+  - Default: `text-[#003F31] text-[28px] font-semibold mb-6`.
+- `config.gridClassName`
+  - Classes applied to the grid container.
+  - Default: `grid grid-cols-3 gap-6 w-full`.
+- `config.labelClassName`
+  - Classes for the label overlay rendered inside each tile when `items[].label` is provided.
+  - Default: `text-[#003F31] text-[18px] font-semibold`.
+- `config.imageClassName`
+  - Classes forwarded to each tile image element.
+  - Default: `w-full h-full object-contain`.
+- `config.tileClassName`
+  - Note: currently defined but not applied in rendering; style tiles via `items[].className` instead.
+- `config.items`
+  - Array of tile objects. Each tile supports two variants:
+  - Image tile
+    - `imageSrc`: path/URL to the image.
+    - `imageClassName`: image element classes.
+    - `label`: optional text displayed over the image using `config.labelClassName`.
+    - `href`: optional; when set, the tile becomes a link.
+    - `className`: classes for the tile wrapper.
+  - Text CTA tile (no `imageSrc`)
+    - `headingLabel`, `descriptionLabel`, `buttonLabel`: content shown centered in the tile.
+    - `headingClassName`, `descriptionClassName`, `buttonClassName`: styling for each content piece.
+    - `className`: classes for the tile wrapper, e.g., flex direction, padding, background.
+
+**Placement**
+
+- Add under the relevant page key in your design JSON to control visibility per route.
+ - Additions appear under your chosen page key (e.g., `Home`).
+ - The component is registered in the app’s component map as `VtCategoryHighlight`.
+- For the route-aware config model, see `docs/page-layout-config.md`.
+
+**Notes**
+
+- If `config.items` is empty, nothing renders (returns `null`).
+- Use `items[].href` to wrap tiles with the localized link.
+- Use `items[].className` to size and position tiles in the grid. `config.tileClassName` is not used by the renderer.
+- Images are rendered with a plain `<img>`; set `imageClassName` for fit/size control.