diff --git a/src/Toolkit/kits/shadcn/kbd/EXAMPLES.md b/src/Toolkit/kits/shadcn/kbd/EXAMPLES.md new file mode 100644 index 00000000000..26c6a6d49f2 --- /dev/null +++ b/src/Toolkit/kits/shadcn/kbd/EXAMPLES.md @@ -0,0 +1,51 @@ +# Examples + +## Default + +```twig {"preview":true} +
+ + ⌘ + ⇧ + ⌥ + ⌃ + + + Ctrl + + + B + +
+``` + +## Group + +Use the `KbdGroup` component to group keyboard keys together. + +```twig {"preview":true} +
+

+ Use + + Ctrl + B + Ctrl + K + + to open the command palette +

+
+``` + +## Button + +Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button. + +```twig {"preview":true} +
+ + Accept ⏎ + + + Cancel Esc + +
+``` diff --git a/src/Toolkit/kits/shadcn/kbd/manifest.json b/src/Toolkit/kits/shadcn/kbd/manifest.json new file mode 100644 index 00000000000..85d3553ad88 --- /dev/null +++ b/src/Toolkit/kits/shadcn/kbd/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Kbd", + "description": "Used to display textual user input from keyboard.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/shadcn/kbd/templates/components/Kbd.html.twig b/src/Toolkit/kits/shadcn/kbd/templates/components/Kbd.html.twig new file mode 100644 index 00000000000..ef6451a97c2 --- /dev/null +++ b/src/Toolkit/kits/shadcn/kbd/templates/components/Kbd.html.twig @@ -0,0 +1,7 @@ +{# @block content The default block #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/shadcn/kbd/templates/components/KbdGroup.html.twig b/src/Toolkit/kits/shadcn/kbd/templates/components/KbdGroup.html.twig new file mode 100644 index 00000000000..198a0764a14 --- /dev/null +++ b/src/Toolkit/kits/shadcn/kbd/templates/components/KbdGroup.html.twig @@ -0,0 +1,4 @@ +{# @block content The default block #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 1__1.html new file mode 100644 index 00000000000..2e8f25e6839 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 1__1.html @@ -0,0 +1,31 @@ + +
+ ⌘ + ⇧ + ⌥ + ⌃ + + Ctrl + + + B + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 2__1.html new file mode 100644 index 00000000000..0dcf72c967e --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 2__1.html @@ -0,0 +1,26 @@ + +
+

+ Use + Ctrl + B + Ctrl + K + + to open the command palette +

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