kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADd cta to icon-grid

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-10 21:19:30 +02:00
parent 0489e22f14
commit c7153b0729
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
View File

@ -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;
}
}
}
}

17
src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
View File

@ -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>