diff --git a/src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig b/src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig index 40fd86e29fa..d64ab3dd479 100644 --- a/src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig +++ b/src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig @@ -1,5 +1,6 @@ {%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/item/EXAMPLES.md b/src/Toolkit/kits/shadcn/item/EXAMPLES.md new file mode 100644 index 00000000000..1d692e145fc --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/EXAMPLES.md @@ -0,0 +1,215 @@ +# Examples + +## Default + +```twig {"preview":true,"height":"400px"} +
+ + + Basic Item + + A simple item with title and description. + + + + + Action + + + + + + + + + + Your profile has been verified. + + + + + +
+``` + +## Variants + +```twig {"preview":true,"height":"400px"} +
+ + + Default Variant + + Standard styling with subtle background and borders. + + + + + Open + + + + + + Outline Variant + + Outlined style with clear borders and transparent background. + + + + + Open + + + + + + Muted Variant + + Subdued appearance with muted colors for secondary content. + + + + + Open + + + +
+``` + +## Size + +```twig {"preview":true,"height":"400px"} +
+ + + Basic Item + + A simple item with title and description. + + + + + Action + + + + + + + + + + Your profile has been verified. + + + + + +
+``` + +## Icon + +```twig {"preview":true} +
+ + + + + + Security Alert + + New login detected from unknown device. + + + + + Review + + + +
+``` + +## Avatar + +```twig {"preview":true,"height":"400px"} +
+ + + + + + + + Evil Rabbit + + Last seen 5 months ago + + + + + + + + + + + +
+ + + + + +
+ + + No Team Members + + Invite your team to collaborate on this project. + + + + + Invite + + + +
+``` + +## Link + +```twig {"preview":true,"height":"400px"} +
+ + + Visit our documentation + + Learn how to get started with our components. + + + + + + + + + External resource + + Opens in a new tab with security attributes. + + + + + + +
+``` diff --git a/src/Toolkit/kits/shadcn/item/manifest.json b/src/Toolkit/kits/shadcn/item/manifest.json new file mode 100644 index 00000000000..ed49d6efa2b --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/manifest.json @@ -0,0 +1,13 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Item", + "description": "A versatile component that you can use to display any content.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"], + "recipe": ["separator"] + } +} diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig new file mode 100644 index 00000000000..8adb1c6c95a --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig @@ -0,0 +1,33 @@ +{# @prop variant 'default'|'outline'|'muted' The variant, default to `default` #} +{# @prop size 'default'|'sm' The size, default to `default` #} +{# @prop as 'div' The HTML tag to use, default to `div` #} +{# @block content The default block #} +{%- props variant = 'default', size = 'default', as = 'div' -%} +{%- set style = html_cva( + 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]', + variants: { + variant: { + default: 'bg-transparent', + outline: 'border-border', + muted: 'bg-muted/50', + }, + size: { + default: 'p-4 gap-4', + sm: 'py-3 px-4 gap-2.5', + }, + }, + default_variant: { + variant: 'default', + size: 'default', + }, +) -%} + +<{{ as }} + data-slot="item" + data-variant="{{ variant }}" + data-size="{{ size }}" + class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}" + {{ attributes }} +> + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig new file mode 100644 index 00000000000..26092ee30a4 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Content.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Content.html.twig new file mode 100644 index 00000000000..5f52f11b479 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Content.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Description.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Description.html.twig new file mode 100644 index 00000000000..a03ee890311 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Description.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +

+ {%- block content %}{% endblock -%} +

diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Footer.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Footer.html.twig new file mode 100644 index 00000000000..b99b36ce9dd --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Footer.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Group.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Group.html.twig new file mode 100644 index 00000000000..c6867c3e89e --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Group.html.twig @@ -0,0 +1,9 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Header.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Header.html.twig new file mode 100644 index 00000000000..0f8b83be75d --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Header.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig new file mode 100644 index 00000000000..1f566d1bdce --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig @@ -0,0 +1,25 @@ +{# @prop variant 'default'|'icon'|'image' The variant, default to `default` #} +{# @block content The default block #} +{%- props variant = 'default' -%} +{%- set style = html_cva( + 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', + variants: { + variant: { + default: 'bg-transparent', + icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4", + image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover', + }, + }, + default_variant: { + variant: 'default', + }, +) -%} + +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig new file mode 100644 index 00000000000..ee4d540c8ca --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig @@ -0,0 +1,10 @@ +{# @prop orientation 'horizontal'|'vertical' The orientation, default to `horizontal` #} +{# @prop decorative bool Whether the separator is decorative, default to `true` #} +{# @block content The default block #} +{%- props orientation = 'horizontal', decorative = true -%} + diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item/Title.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item/Title.html.twig new file mode 100644 index 00000000000..69b2577ae85 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Title.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 1__1.html index e1c7e6eed56..01ee06f88f5 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 1__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 1__1.html @@ -8,6 +8,6 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -@symfony +@symfony \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 2__1.html index 7ef48de0fd2..c500aa8aacb 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 2__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 2__1.html @@ -14,8 +14,8 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
- FP + FP - FP + FP
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 3__1.html index c16030c2697..db2dd6769eb 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 3__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component avatar, code 3__1.html @@ -17,11 +17,11 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
- @symfony + @symfony - FP + FP - FP + FP
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 1__1.html new file mode 100644 index 00000000000..d782899e1a4 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 1__1.html @@ -0,0 +1,58 @@ + +
+
+
+
Basic Item
+

A simple item with title and description. +

+
+
+ +
+
+ +
+ +
+
+
Your profile has been verified.
+
+
+ +
+ +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 2__1.html new file mode 100644 index 00000000000..80189317eb1 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 2__1.html @@ -0,0 +1,83 @@ + +
+
+
+
Default Variant
+

Standard styling with subtle background and borders. +

+
+
+ +
+
+
+
+
Outline Variant
+

Outlined style with clear borders and transparent background. +

+
+
+ +
+
+
+
+
Muted Variant
+

Subdued appearance with muted colors for secondary content. +

+
+
+ +
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 3__1.html new file mode 100644 index 00000000000..d782899e1a4 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 3__1.html @@ -0,0 +1,58 @@ + +
+
+
+
Basic Item
+

A simple item with title and description. +

+
+
+ +
+
+ +
+ +
+
+
Your profile has been verified.
+
+
+ +
+ +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 4__1.html new file mode 100644 index 00000000000..577a65e370e --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 4__1.html @@ -0,0 +1,41 @@ + +
+
+
+ +
+
+
Security Alert
+

New login detected from unknown device. +

+
+
+ +
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 5__1.html new file mode 100644 index 00000000000..a72558e773d --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 5__1.html @@ -0,0 +1,97 @@ + +
+
+
+ER + + +
+
+
Evil Rabbit
+

Last seen 5 months ago +

+
+
+ +
+
+ +
+
+
+ + + @evilrabbit + + +
+
+
+
No Team Members
+

Invite your team to collaborate on this project. +

+
+
+ +
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 6__1.html new file mode 100644 index 00000000000..20f661aed66 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 6__1.html @@ -0,0 +1,51 @@ + +
+
+
Visit our documentation
+

Learn how to get started with our components. +

+
+
+ +
+ +
+
External resource
+

Opens in a new tab with security attributes. +

+
+
+ +
+ +
\ No newline at end of file diff --git a/ux.symfony.com/assets/styles/toolkit-shadcn.css b/ux.symfony.com/assets/styles/toolkit-shadcn.css index a012610b7f3..1404f1b743f 100644 --- a/ux.symfony.com/assets/styles/toolkit-shadcn.css +++ b/ux.symfony.com/assets/styles/toolkit-shadcn.css @@ -1,5 +1,5 @@ @import "tailwindcss"; -@source "../../vendor/symfony/ux-toolkit/kits"; +@source "../../vendor/symfony/ux-toolkit/kits/shadcn"; @custom-variant dark (&:is(.dark *));