Add Homepage Category Highlight Component Guidelines setup
parent
ca4cdc0436
commit
5e4e598d82
|
|
@ -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.
|
||||||
Loading…
Reference in New Issue