Skip to content

Commit 028ff98

Browse files
KocalKocal
committed
feature #3144 [Toolkit][Shadcn] Add Item component (bernard-ng, Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Toolkit][Shadcn] Add Item component | Q | A | -------------- | --- | Bug fix? | no | New feature? | yes | Deprecations? | no | Documentation? | no | License | MIT Add support for Item component, A versatile component that you can use to display any content. ref : https://ui.shadcn.com/docs/components/item Commits ------- ec90133 [Toolkit][Shadcn][Item] Minor fixes (html_cva, missing dependencies, more examples) bde6354 [Toolkit][Shadcn] docs for Item component 4206923 [Toolkit][Shadcn] Add Item component
2 parents 9bc8da7 + ec90133 commit 028ff98

23 files changed

+749
-7
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: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
# Examples
2+
3+
## Default
4+
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">
39+
<twig:Item>
40+
<twig:Item:Content>
41+
<twig:Item:Title>Default Variant</twig:Item:Title>
42+
<twig:Item:Description>
43+
Standard styling with subtle background and borders.
44+
</twig:Item:Description>
45+
</twig:Item:Content>
46+
<twig:Item:Actions>
47+
<twig:Button variant="outline" size="sm">
48+
Open
49+
</twig:Button>
50+
</twig:Item:Actions>
51+
</twig:Item>
52+
<twig:Item variant="outline">
53+
<twig:Item:Content>
54+
<twig:Item:Title>Outline Variant</twig:Item:Title>
55+
<twig:Item:Description>
56+
Outlined style with clear borders and transparent background.
57+
</twig:Item:Description>
58+
</twig:Item:Content>
59+
<twig:Item:Actions>
60+
<twig:Button variant="outline" size="sm">
61+
Open
62+
</twig:Button>
63+
</twig:Item:Actions>
64+
</twig:Item>
65+
<twig:Item variant="muted">
66+
<twig:Item:Content>
67+
<twig:Item:Title>Muted Variant</twig:Item:Title>
68+
<twig:Item:Description>
69+
Subdued appearance with muted colors for secondary content.
70+
</twig:Item:Description>
71+
</twig:Item:Content>
72+
<twig:Item:Actions>
73+
<twig:Button variant="outline" size="sm">
74+
Open
75+
</twig:Button>
76+
</twig:Item:Actions>
77+
</twig:Item>
78+
</div>
79+
```
80+
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
114+
115+
```twig {"preview":true}
116+
<div class="flex w-full max-w-lg flex-col gap-6"">
117+
<twig:Item variant="outline">
118+
<twig:Item:Media variant="icon">
119+
<twig:ux:icon name="lucide:shield-alert" class="size-4" />
120+
</twig:Item:Media>
121+
<twig:Item:Content>
122+
<twig:Item:Title>Security Alert</twig:Item:Title>
123+
<twig:Item:Description>
124+
New login detected from unknown device.
125+
</twig:Item:Description>
126+
</twig:Item:Content>
127+
<twig:Item:Actions>
128+
<twig:Button size="sm" variant="outline">
129+
Review
130+
</twig:Button>
131+
</twig:Item:Actions>
132+
</twig:Item>
133+
</div>
134+
```
135+
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+
188+
## Link
189+
190+
```twig {"preview":true,"height":"400px"}
191+
<div class="grid w-full max-w-sm items-center gap-1.5">
192+
<twig:Item as="a" href="#">
193+
<twig:Item:Content>
194+
<twig:Item:Title>Visit our documentation</twig:Item:Title>
195+
<twig:Item:Description>
196+
Learn how to get started with our components.
197+
</twig:Item:Description>
198+
</twig:Item:Content>
199+
<twig:Item:Actions>
200+
<twig:ux:icon name="lucide:chevron-right" class="size-4" />
201+
</twig:Item:Actions>
202+
</twig:Item>
203+
<twig:Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
204+
<twig:Item:Content>
205+
<twig:Item:Title>External resource</twig:Item:Title>
206+
<twig:Item:Description>
207+
Opens in a new tab with security attributes.
208+
</twig:Item:Description>
209+
</twig:Item:Content>
210+
<twig:Item:Actions>
211+
<twig:ux:icon name="lucide:external-link" class="size-4" />
212+
</twig:Item:Actions>
213+
</twig:Item>
214+
</div>
215+
```

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "Item",
5+
"description": "A versatile component that you can use to display any content.",
6+
"copy-files": {
7+
"templates/": "templates/"
8+
},
9+
"dependencies": {
10+
"composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"],
11+
"recipe": ["separator"]
12+
}
13+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{# @prop variant 'default'|'outline'|'muted' The variant, default to `default` #}
2+
{# @prop size 'default'|'sm' The size, default to `default` #}
3+
{# @prop as 'div' The HTML tag to use, default to `div` #}
4+
{# @block content The default block #}
5+
{%- props variant = 'default', size = 'default', as = 'div' -%}
6+
{%- set style = html_cva(
7+
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]',
8+
variants: {
9+
variant: {
10+
default: 'bg-transparent',
11+
outline: 'border-border',
12+
muted: 'bg-muted/50',
13+
},
14+
size: {
15+
default: 'p-4 gap-4',
16+
sm: 'py-3 px-4 gap-2.5',
17+
},
18+
},
19+
default_variant: {
20+
variant: 'default',
21+
size: 'default',
22+
},
23+
) -%}
24+
25+
<{{ as }}
26+
data-slot="item"
27+
data-variant="{{ variant }}"
28+
data-size="{{ size }}"
29+
class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
30+
{{ attributes }}
31+
>
32+
{%- block content %}{% endblock -%}
33+
</{{ as }}>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{# @block content The default block #}
2+
<div
3+
data-slot="item-actions"
4+
class="{{ 'flex items-center gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{# @block content The default block #}
2+
<div
3+
data-slot="item-content"
4+
class="{{ 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{# @block content The default block #}
2+
<p
3+
data-slot="item-description"
4+
class="{{ 'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</p>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{# @block content The default block #}
2+
<div
3+
data-slot="item-footer"
4+
class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</div>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{# @block content The default block #}
2+
<div
3+
role="list"
4+
data-slot="item-group"
5+
class="{{ 'group/item-group flex flex-col ' ~ attributes.render('class')|tailwind_merge }}"
6+
{{ attributes }}
7+
>
8+
{%- block content %}{% endblock -%}
9+
</div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{# @block content The default block #}
2+
<div
3+
data-slot="item-header"
4+
class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</div>

0 commit comments

Comments
 (0)