From c7153b0729c83c2e7b8df87245411dbc162653d6 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 10 Aug 2026 21:19:30 +0200
Subject: [PATCH] ADd cta to icon-grid

---
 .../icon-tiles-grid/icon-tiles-grid.css       | 27 ++++++++++++++++++-
 .../icon-tiles-grid/icon-tiles-grid.jdd.tsx   | 17 +++++++++---
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
index c362804..bd82528 100644
--- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
+++ b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
@@ -27,7 +27,7 @@
 			background-color: var(--tile-bg-color);
 			display: grid;
 			grid-template-rows: subgrid;
-			grid-row: span 3;
+			grid-row: span 2;
 			flex-flow: column;
 			gap: 32px;
 			min-height: 320px;
@@ -39,6 +39,15 @@
 				color: var(--tile-fg-color);
 			}
 
+			&:has(.icon),
+			&:has(.icon-tiles__tile__cta) {
+				grid-row: span 3;
+			}
+
+			&:has(.icon):has(.icon-tiles__tile__cta) {
+				grid-row: span 4;
+			}
+
 			svg {
 				width: 48px;
 				height: 48px;
@@ -55,11 +64,27 @@
 			.description {
 				font-size: 18px;
 			}
+
+			.icon-tiles__tile__cta {
+				display: none;
+			}
 		}
 
 		a[href].icon-tiles-grid__tile {
+			.icon-tiles__tile__cta {
+				text-align: right;
+				display: block;
+				font-weight: bold;
+				opacity: 0;
+			}
+
 			&:hover {
 				transform: scale(1.05);
+
+				.icon-tiles__tile__cta {
+					text-align: right;
+					opacity: 1;
+				}
 			}
 		}
 	}
diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
index a0272f3..d8356f7 100644
--- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
+++ b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
@@ -10,7 +10,10 @@ const component_arguments = {
 	bleed: new Args.Boolean(),
 	tiles: new Args.List(
 		new Args.Structured({
-			icon: new Args.Enum(async () => ["none", ...(await getAllIconNames())]),
+			icon: new Args.Enum(async () => [
+				"none",
+				...(await getAllIconNames()),
+			]).setExampleValues(["none"]),
 			color: new Args.Enum(async () =>
 				getColorVariables().filter(
 					(e) => !e.includes("text") && !e.includes("link")
@@ -18,7 +21,8 @@ const component_arguments = {
 			),
 			name: new Args.ShortText(),
 			description: new Args.ShortText(),
-			url: new Args.ShortText(),
+			url: new Args.ShortText().setExampleValues([""]),
+			cta: new Args.ShortText().setExampleValues([""]),
 		})
 	),
 } as const;
@@ -56,7 +60,14 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
 								""
 							)}
 							<div class="name">{insert_nbsp(tile.name)}</div>
-							<div class="description">{insert_nbsp(tile.name)}</div>
+							<div class="description">{insert_nbsp(tile.description)}</div>
+							{tile.cta ? (
+								<div class="icon-tiles__tile__cta">
+									{insert_nbsp(tile.cta)}
+								</div>
+							) : (
+								""
+							)}
 						</a>
 					))}
 				</section>