From 4206923cd598e92126b6aa1d26e7a6a2e7b1f014 Mon Sep 17 00:00:00 2001 From: bernard-ng Date: Fri, 17 Oct 2025 21:10:34 +0200 Subject: [PATCH 1/3] [Toolkit][Shadcn] Add Item component --- src/Toolkit/kits/shadcn/item/EXAMPLES.md | 99 +++++++++++++++++++ src/Toolkit/kits/shadcn/item/manifest.json | 12 +++ .../item/templates/components/Item.html.twig | 29 ++++++ .../components/Item/Actions.html.twig | 7 ++ .../components/Item/Content.html.twig | 7 ++ .../components/Item/Description.html.twig | 7 ++ .../components/Item/Footer.html.twig | 7 ++ .../templates/components/Item/Group.html.twig | 8 ++ .../components/Item/Header.html.twig | 7 ++ .../templates/components/Item/Media.html.twig | 23 +++++ .../components/Item/Separator.html.twig | 15 +++ .../templates/components/Item/Title.html.twig | 7 ++ ...Kit shadcn, component item, code 1__1.html | 83 ++++++++++++++++ ...Kit shadcn, component item, code 2__1.html | 41 ++++++++ ...Kit shadcn, component item, code 3__1.html | 51 ++++++++++ 15 files changed, 403 insertions(+) create mode 100644 src/Toolkit/kits/shadcn/item/EXAMPLES.md create mode 100644 src/Toolkit/kits/shadcn/item/manifest.json create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Content.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Description.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Footer.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Group.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Header.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig create mode 100644 src/Toolkit/kits/shadcn/item/templates/components/Item/Title.html.twig create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 1__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 2__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 3__1.html diff --git a/src/Toolkit/kits/shadcn/item/EXAMPLES.md b/src/Toolkit/kits/shadcn/item/EXAMPLES.md new file mode 100644 index 00000000000..02ba0bb64bb --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/EXAMPLES.md @@ -0,0 +1,99 @@ +# Examples + +## Default + +```twig {"preview":true} +
+ + + 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 + + + +
+``` + +## With Icon + +```twig {"preview":true} +
+ + + + + + Security Alert + + New login detected from unknown device. + + + + + Review + + + +
+``` + +## Link + +```twig {"preview":true} +
+ + + 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..43f9dc65fcc --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/manifest.json @@ -0,0 +1,12 @@ +{ + "$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": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"] + } +} 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..97d660a055a --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig @@ -0,0 +1,29 @@ +{%- 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', + }, + }, + defaultVariants: { + 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..e97ed353cc5 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig @@ -0,0 +1,7 @@ +
+ {%- 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..4978f31aeb6 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Content.html.twig @@ -0,0 +1,7 @@ +
+ {%- 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..84fe52d1305 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Description.html.twig @@ -0,0 +1,7 @@ +

+ {%- 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..1422d15f982 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Footer.html.twig @@ -0,0 +1,7 @@ +
+ {%- 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..59fe87af13f --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Group.html.twig @@ -0,0 +1,8 @@ +
+ {%- 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..537629189f8 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Header.html.twig @@ -0,0 +1,7 @@ +
+ {%- 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..dd94b0f03fa --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig @@ -0,0 +1,23 @@ +{%- 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', + }, + }, + defaultVariants: { + 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..5d5a888e6b3 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig @@ -0,0 +1,15 @@ +{%- 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..5c0a08f8ab1 --- /dev/null +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Title.html.twig @@ -0,0 +1,7 @@ +
+ {%- block content %}{% endblock -%} +
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..c7ce44c74c9 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 1__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 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..fb07e4bf6bd --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 2__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 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..1de69ec46b7 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 3__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 From bde6354185f381dbd06550d31184f141145399b1 Mon Sep 17 00:00:00 2001 From: bernard-ng Date: Thu, 6 Nov 2025 20:24:13 +0200 Subject: [PATCH 2/3] [Toolkit][Shadcn] docs for Item component --- .../kits/shadcn/item/templates/components/Item.html.twig | 4 ++++ .../shadcn/item/templates/components/Item/Actions.html.twig | 1 + .../shadcn/item/templates/components/Item/Content.html.twig | 1 + .../item/templates/components/Item/Description.html.twig | 1 + .../shadcn/item/templates/components/Item/Footer.html.twig | 1 + .../shadcn/item/templates/components/Item/Group.html.twig | 1 + .../shadcn/item/templates/components/Item/Header.html.twig | 1 + .../shadcn/item/templates/components/Item/Media.html.twig | 2 ++ .../shadcn/item/templates/components/Item/Separator.html.twig | 3 +++ .../shadcn/item/templates/components/Item/Title.html.twig | 1 + 10 files changed, 16 insertions(+) diff --git a/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig index 97d660a055a..a9f6f8fb5ca 100644 --- a/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig @@ -1,3 +1,7 @@ +{# @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]', 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 index e97ed353cc5..26092ee30a4 100644 --- a/src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #}
Date: Sat, 8 Nov 2025 08:42:48 +0100 Subject: [PATCH 3/3] [Toolkit][Shadcn][Item] Minor fixes (html_cva, missing dependencies, more examples) --- .../templates/components/Avatar.html.twig | 1 + src/Toolkit/kits/shadcn/item/EXAMPLES.md | 128 +++++++++++++++++- src/Toolkit/kits/shadcn/item/manifest.json | 3 +- .../item/templates/components/Item.html.twig | 6 +- .../templates/components/Item/Media.html.twig | 6 +- .../components/Item/Separator.html.twig | 20 +-- ...t shadcn, component avatar, code 1__1.html | 2 +- ...t shadcn, component avatar, code 2__1.html | 4 +- ...t shadcn, component avatar, code 3__1.html | 6 +- ...Kit shadcn, component item, code 1__1.html | 71 ++++------ ...Kit shadcn, component item, code 2__1.html | 74 +++++++--- ...Kit shadcn, component item, code 3__1.html | 51 ++++--- ...Kit shadcn, component item, code 4__1.html | 41 ++++++ ...Kit shadcn, component item, code 5__1.html | 97 +++++++++++++ ...Kit shadcn, component item, code 6__1.html | 51 +++++++ .../assets/styles/toolkit-shadcn.css | 2 +- 16 files changed, 443 insertions(+), 120 deletions(-) create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 4__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 5__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component item, code 6__1.html 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 index 02ba0bb64bb..1d692e145fc 100644 --- a/src/Toolkit/kits/shadcn/item/EXAMPLES.md +++ b/src/Toolkit/kits/shadcn/item/EXAMPLES.md @@ -2,8 +2,40 @@ ## Default -```twig {"preview":true} -
+```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 @@ -46,13 +78,45 @@
``` -## With Icon +## 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 @@ -69,9 +133,61 @@
``` +## 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} +```twig {"preview":true,"height":"400px"}
diff --git a/src/Toolkit/kits/shadcn/item/manifest.json b/src/Toolkit/kits/shadcn/item/manifest.json index 43f9dc65fcc..ed49d6efa2b 100644 --- a/src/Toolkit/kits/shadcn/item/manifest.json +++ b/src/Toolkit/kits/shadcn/item/manifest.json @@ -7,6 +7,7 @@ "templates/": "templates/" }, "dependencies": { - "composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"] + "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 index a9f6f8fb5ca..8adb1c6c95a 100644 --- a/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig @@ -3,7 +3,7 @@ {# @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({ +{%- 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: { @@ -16,11 +16,11 @@ sm: 'py-3 px-4 gap-2.5', }, }, - defaultVariants: { + default_variant: { variant: 'default', size: 'default', }, -}) -%} +) -%} <{{ as }} data-slot="item" 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 index 87198b572a3..1f566d1bdce 100644 --- a/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig +++ b/src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig @@ -1,7 +1,7 @@ {# @prop variant 'default'|'icon'|'image' The variant, default to `default` #} {# @block content The default block #} {%- props variant = 'default' -%} -{%- set style = html_cva({ +{%- 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: { @@ -10,10 +10,10 @@ image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover', }, }, - defaultVariants: { + default_variant: { variant: 'default', }, -}) -%} +) -%} + 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 index c7ce44c74c9..d782899e1a4 100644 --- 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 @@ -3,81 +3,56 @@ - Component: Item - Code: ```twig -
- - - Default Variant - - Standard styling with subtle background and borders. - - - - - Open - - - +
- Outline Variant + Basic Item - Outlined style with clear borders and transparent background. + A simple item with title and description. - Open + Action - + + + + + - Muted Variant - - Subdued appearance with muted colors for secondary content. - + Your profile has been verified. - - Open - +
``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
-
+
+
-
Default Variant
-

Standard styling with subtle background and borders. +

Basic Item
+

A simple item with title and description.

-
-
-
-
Outline Variant
-

Outlined style with clear borders and transparent background. -

+ +
+
-
- -
-
-
-
-
Muted Variant
-

Subdued appearance with muted colors for secondary content. -

+
+
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 index fb07e4bf6bd..80189317eb1 100644 --- 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 @@ -3,38 +3,80 @@ - Component: Item - Code: ```twig -
+
+ + + Default Variant + + Standard styling with subtle background and borders. + + + + + Open + + + - - - - Security Alert + Outline Variant - New login detected from unknown device. + Outlined style with clear borders and transparent background. - - Review + + Open + + + + + + Muted Variant + + Subdued appearance with muted colors for secondary content. + + + + + Open
``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
-
-
- +
+
+
+
Default Variant
+

Standard styling with subtle background and borders. +

-
-
Security Alert
-

New login detected from unknown device. +

+ +
+
+
+
+
Outline Variant
+

Outlined style with clear borders and transparent background. +

+
+
+ +
+
+
+
+
Muted Variant
+

Subdued appearance with muted colors for secondary content.

-
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 index 1de69ec46b7..d782899e1a4 100644 --- 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 @@ -3,49 +3,56 @@ - Component: Item - Code: ```twig -
- +
+ - Visit our documentation + Basic Item - Learn how to get started with our components. + A simple item with title and description. - + + Action + - + + + + + - External resource - - Opens in a new tab with security attributes. - + Your profile has been verified. - +
``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
-
-
Visit our documentation
-

Learn how to get started with our components. +

+
+
+
Basic Item
+

A simple item with title and description.

- +
- -
-
External resource
-

Opens in a new tab with security attributes. -

+
+ +
+ +
+
+
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 *));