Skip to content

Commit 15db9e6

Browse files
KocalKocal
committed
feature #3145 [Toolkit][Shadcn] Add Spinner component (bernard-ng)
This PR was merged into the 2.x branch. Discussion ---------- [Toolkit][Shadcn] Add Spinner component | Q | A | -------------- | --- | Bug fix? | no | New feature? | yes | Deprecations? | no | Documentation? | no | License | MIT Add Spinner component, An indicator that can be used to show a loading state. refs: https://ui.shadcn.com/docs/components/spinner Commits ------- 333986d [Toolkit][Shadcn] Add Spinner component
2 parents cd4dbe3 + 333986d commit 15db9e6

6 files changed

+115
-0
lines changed

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<twig:Button disabled>
7+
<twig:Spinner /> Please wait
8+
</twig:Button>
9+
```
10+
11+
## Size
12+
13+
```twig {"preview":true}
14+
<div class="flex items-center gap-6">
15+
<twig:Spinner class="size-3" />
16+
<twig:Spinner class="size-4" />
17+
<twig:Spinner class="size-6" />
18+
<twig:Spinner class="size-8" />
19+
</div>
20+
```
21+
22+
## Color
23+
24+
```twig {"preview":true}
25+
<div class="flex items-center gap-6">
26+
<twig:Spinner class="size-6 text-red-500" />
27+
<twig:Spinner class="size-6 text-green-500" />
28+
<twig:Spinner class="size-6 text-blue-500" />
29+
<twig:Spinner class="size-6 text-yellow-500" />
30+
<twig:Spinner class="size-6 text-purple-500" />
31+
</div>
32+
```

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "Spinner",
5+
"description": "An indicator that can be used to show a loading state.",
6+
"copy-files": {
7+
"templates/": "templates/"
8+
},
9+
"dependencies": {
10+
"composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"]
11+
}
12+
}

‎src/Toolkit/kits/shadcn/spinner/templates/components/Spinner.html.twig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{%- props label = 'Loading' -%}
2+
3+
{{ ux_icon('lucide:loader-2', {
4+
'data-slot': 'spinner',
5+
'aria-label': label,
6+
role: 'status',
7+
class: 'size-4 animate-spin ' ~ attributes.render('class')|tailwind_merge,
8+
...attributes.without('class'),
9+
}) }}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!--
2+
- Kit: Shadcn UI
3+
- Component: Spinner
4+
- Code:
5+
```twig
6+
<twig:Button disabled>
7+
<twig:Spinner /> Please wait
8+
</twig:Button>
9+
```
10+
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
11+
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" disabled><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin "><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
12+
Please wait
13+
</button>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!--
2+
- Kit: Shadcn UI
3+
- Component: Spinner
4+
- Code:
5+
```twig
6+
<div class="flex items-center gap-6">
7+
<twig:Spinner class="size-3" />
8+
<twig:Spinner class="size-4" />
9+
<twig:Spinner class="size-6" />
10+
<twig:Spinner class="size-8" />
11+
</div>
12+
```
13+
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
14+
<div class="flex items-center gap-6">
15+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
16+
17+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
18+
19+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
20+
21+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-8"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
22+
23+
</div>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!--
2+
- Kit: Shadcn UI
3+
- Component: Spinner
4+
- Code:
5+
```twig
6+
<div class="flex items-center gap-6">
7+
<twig:Spinner class="size-6 text-red-500" />
8+
<twig:Spinner class="size-6 text-green-500" />
9+
<twig:Spinner class="size-6 text-blue-500" />
10+
<twig:Spinner class="size-6 text-yellow-500" />
11+
<twig:Spinner class="size-6 text-purple-500" />
12+
</div>
13+
```
14+
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
15+
<div class="flex items-center gap-6">
16+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-red-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
17+
18+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-green-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
19+
20+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-blue-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
21+
22+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-yellow-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
23+
24+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-purple-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
25+
26+
</div>

0 commit comments

Comments
 (0)