Skip to content

Commit ec90133

Browse files
KocalKocal
committed
[Toolkit][Shadcn][Item] Minor fixes (html_cva, missing dependencies, more examples)
1 parent bde6354 commit ec90133

16 files changed

+443
-120
lines changed

‎src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<span
22
class="{{ 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ' ~ attributes.render('class')|tailwind_merge }}"
3+
data-slot="avatar"
34
{{ attributes }}
45
>
56
{%- block content %}{% endblock -%}

‎src/Toolkit/kits/shadcn/item/EXAMPLES.md‎

Lines changed: 122 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,40 @@
22

33
## Default
44

5-
```twig {"preview":true}
6-
<div class="flex items-center space-x-2">
5+
```twig {"preview":true,"height":"400px"}
6+
<div class="flex w-full max-w-md flex-col gap-6">
7+
<twig:Item variant="outline">
8+
<twig:Item:Content>
9+
<twig:Item:Title>Basic Item</twig:Item:Title>
10+
<twig:Item:Description>
11+
A simple item with title and description.
12+
</twig:Item:Description>
13+
</twig:Item:Content>
14+
<twig:Item:Actions>
15+
<twig:Button variant="outline" size="sm">
16+
Action
17+
</twig:Button>
18+
</twig:Item:Actions>
19+
</twig:Item>
20+
21+
<twig:Item variant="outline" size="sm" as="a" href="#">
22+
<twig:Item:Media>
23+
<twig:ux:icon name="lucide:badge-check" class="size-5" />
24+
</twig:Item:Media>
25+
<twig:Item:Content>
26+
<twig:Item:Title>Your profile has been verified.</twig:Item:Title>
27+
</twig:Item:Content>
28+
<twig:Item:Actions>
29+
<twig:ux:icon name="lucide:chevron-right" class="size-4" />
30+
</twig:Item:Actions>
31+
</twig:Item>
32+
</div>
33+
```
34+
35+
## Variants
36+
37+
```twig {"preview":true,"height":"400px"}
38+
<div class="flex flex-col gap-6">
739
<twig:Item>
840
<twig:Item:Content>
941
<twig:Item:Title>Default Variant</twig:Item:Title>
@@ -46,13 +78,45 @@
4678
</div>
4779
```
4880

49-
## With Icon
81+
## Size
82+
83+
```twig {"preview":true,"height":"400px"}
84+
<div class="flex w-full max-w-md flex-col gap-6">
85+
<twig:Item variant="outline">
86+
<twig:Item:Content>
87+
<twig:Item:Title>Basic Item</twig:Item:Title>
88+
<twig:Item:Description>
89+
A simple item with title and description.
90+
</twig:Item:Description>
91+
</twig:Item:Content>
92+
<twig:Item:Actions>
93+
<twig:Button variant="outline" size="sm">
94+
Action
95+
</twig:Button>
96+
</twig:Item:Actions>
97+
</twig:Item>
98+
99+
<twig:Item variant="outline" size="sm" as="a" href="#">
100+
<twig:Item:Media>
101+
<twig:ux:icon name="lucide:badge-check" class="size-5" />
102+
</twig:Item:Media>
103+
<twig:Item:Content>
104+
<twig:Item:Title>Your profile has been verified.</twig:Item:Title>
105+
</twig:Item:Content>
106+
<twig:Item:Actions>
107+
<twig:ux:icon name="lucide:chevron-right" class="size-4" />
108+
</twig:Item:Actions>
109+
</twig:Item>
110+
</div>
111+
```
112+
113+
## Icon
50114

51115
```twig {"preview":true}
52-
<div class="grid w-full max-w-sm items-center gap-1.5">
116+
<div class="flex w-full max-w-lg flex-col gap-6"">
53117
<twig:Item variant="outline">
54118
<twig:Item:Media variant="icon">
55-
<twig:ux:icon name="lucide:shield-alert" />
119+
<twig:ux:icon name="lucide:shield-alert" class="size-4" />
56120
</twig:Item:Media>
57121
<twig:Item:Content>
58122
<twig:Item:Title>Security Alert</twig:Item:Title>
@@ -69,9 +133,61 @@
69133
</div>
70134
```
71135

136+
## Avatar
137+
138+
```twig {"preview":true,"height":"400px"}
139+
<div class="flex w-full max-w-lg flex-col gap-6"">
140+
<twig:Item variant="outline">
141+
<twig:Item:Media variant="icon">
142+
<twig:Avatar>
143+
<twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="ER" />
144+
</twig:Avatar>
145+
</twig:Item:Media>
146+
<twig:Item:Content>
147+
<twig:Item:Title>Evil Rabbit</twig:Item:Title>
148+
<twig:Item:Description>
149+
Last seen 5 months ago
150+
</twig:Item:Description>
151+
</twig:Item:Content>
152+
<twig:Item:Actions>
153+
<twig:Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
154+
<twig:ux:icon name="lucide:plus" class="size-4" />
155+
</twig:Button>
156+
</twig:Item:Actions>
157+
</twig:Item>
158+
159+
<twig:Item variant="outline">
160+
<twig:Item:Media>
161+
<div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
162+
<twig:Avatar class="hidden sm:flex">
163+
<twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
164+
</twig:Avatar>
165+
<twig:Avatar class="hidden sm:flex">
166+
<twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
167+
</twig:Avatar>
168+
<twig:Avatar>
169+
<twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
170+
</twig:Avatar>
171+
</div>
172+
</twig:Item:Media>
173+
<twig:Item:Content>
174+
<twig:Item:Title>No Team Members</twig:Item:Title>
175+
<twig:Item:Description>
176+
Invite your team to collaborate on this project.
177+
</twig:Item:Description>
178+
</twig:Item:Content>
179+
<twig:Item:Actions>
180+
<twig:Button size="sm" variant="outline">
181+
Invite
182+
</twig:Button>
183+
</twig:Item:Actions>
184+
</twig:Item>
185+
</div>
186+
```
187+
72188
## Link
73189

74-
```twig {"preview":true}
190+
```twig {"preview":true,"height":"400px"}
75191
<div class="grid w-full max-w-sm items-center gap-1.5">
76192
<twig:Item as="a" href="#">
77193
<twig:Item:Content>

‎src/Toolkit/kits/shadcn/item/manifest.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"templates/": "templates/"
88
},
99
"dependencies": {
10-
"composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"]
10+
"composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"],
11+
"recipe": ["separator"]
1112
}
1213
}

‎src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{# @prop as 'div' The HTML tag to use, default to `div` #}
44
{# @block content The default block #}
55
{%- props variant = 'default', size = 'default', as = 'div' -%}
6-
{%- set style = html_cva({
6+
{%- set style = html_cva(
77
base: 'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
88
variants: {
99
variant: {
@@ -16,11 +16,11 @@
1616
sm: 'py-3 px-4 gap-2.5',
1717
},
1818
},
19-
defaultVariants: {
19+
default_variant: {
2020
variant: 'default',
2121
size: 'default',
2222
},
23-
}) -%}
23+
) -%}
2424

2525
<{{ as }}
2626
data-slot="item"

‎src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{# @prop variant 'default'|'icon'|'image' The variant, default to `default` #}
22
{# @block content The default block #}
33
{%- props variant = 'default' -%}
4-
{%- set style = html_cva({
4+
{%- set style = html_cva(
55
base: 'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
66
variants: {
77
variant: {
@@ -10,10 +10,10 @@
1010
image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
1111
},
1212
},
13-
defaultVariants: {
13+
default_variant: {
1414
variant: 'default',
1515
},
16-
}) -%}
16+
) -%}
1717

1818
<div
1919
data-slot="item-media"

‎src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,9 @@
22
{# @prop decorative bool Whether the separator is decorative, default to `true` #}
33
{# @block content The default block #}
44
{%- props orientation = 'horizontal', decorative = true -%}
5-
6-
<div
7-
data-slot="item-separator"
8-
data-orientation="{{ orientation }}"
9-
class="{{ 'my-0 bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px ' ~ attributes.render('class')|tailwind_merge }}"
10-
{% if decorative %}
11-
role="none"
12-
aria-hidden="true"
13-
{% else %}
14-
role="separator"
15-
aria-orientation="{{ orientation }}"
16-
{% endif %}
17-
{{ attributes }}
18-
></div>
5+
<twig:Separator
6+
orientation="{{ orientation }}"
7+
decorative="{{ decorative }}"
8+
class="{{ ('my-0 ' ~ attributes.render('class'))|tailwind_merge }}"
9+
{{ ...attributes }}
10+
/>

‎src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 1__1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</twig:Avatar>
99
```
1010
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
11-
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
11+
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
1212

1313
</span>

‎src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 2__1.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
```
1515
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
1616
<div class="flex gap-1">
17-
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
17+
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
1818
</span>
19-
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
19+
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
2020
</span>
2121
</div>

‎src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 3__1.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
```
1818
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
1919
<div class="flex -space-x-2">
20-
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
20+
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
2121

2222
</span>
23-
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
23+
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
2424
</span>
25-
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
25+
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
2626
</span>
2727
</div>

0 commit comments

Comments
 (0)