diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md index e58cfef54fc..be90f3cb82d 100644 --- a/src/Toolkit/CHANGELOG.md +++ b/src/Toolkit/CHANGELOG.md @@ -2,6 +2,7 @@ ## 2.35 +- [Shadcn] Add `toggle` recipe - [Shadcn] Use `html_attr_type` filter from `twig/html-extra:^3.24` for composable trigger attributes - [Shadcn] Rename `trigger_attrs` to `alert_dialog_trigger_attrs` in `AlertDialog:Trigger` - [Shadcn] Rename `trigger_attrs` to `dialog_trigger_attrs` in `Dialog:Trigger` diff --git a/src/Toolkit/kits/shadcn/toggle/assets/controllers/toggle_controller.js b/src/Toolkit/kits/shadcn/toggle/assets/controllers/toggle_controller.js new file mode 100644 index 00000000000..16b84c32d87 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/assets/controllers/toggle_controller.js @@ -0,0 +1,27 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static values = { pressed: Boolean }; + + connect() { + if (!this.hasPressedValue) { + this.pressedValue = this.element.getAttribute('aria-pressed') === 'true'; + } + + this.updateState(); + } + + toggle() { + this.pressedValue = !this.pressedValue; + } + + pressedValueChanged() { + this.updateState(); + } + + updateState() { + const pressed = this.pressedValue; + this.element.setAttribute('aria-pressed', String(pressed)); + this.element.dataset.state = pressed ? 'active' : 'inactive'; + } +} diff --git a/src/Toolkit/kits/shadcn/toggle/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/toggle/examples/Demo.html.twig new file mode 100644 index 00000000000..0999e21bca3 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/examples/Demo.html.twig @@ -0,0 +1,4 @@ + + + Bookmark + diff --git a/src/Toolkit/kits/shadcn/toggle/examples/Disabled.html.twig b/src/Toolkit/kits/shadcn/toggle/examples/Disabled.html.twig new file mode 100644 index 00000000000..3cad5ce7162 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/examples/Disabled.html.twig @@ -0,0 +1,8 @@ +
+ + Disabled + + + Disabled + +
diff --git a/src/Toolkit/kits/shadcn/toggle/examples/Outline.html.twig b/src/Toolkit/kits/shadcn/toggle/examples/Outline.html.twig new file mode 100644 index 00000000000..ab6611e2cb4 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/examples/Outline.html.twig @@ -0,0 +1,10 @@ +
+ + + Italic + + + + Bold + +
diff --git a/src/Toolkit/kits/shadcn/toggle/examples/Size.html.twig b/src/Toolkit/kits/shadcn/toggle/examples/Size.html.twig new file mode 100644 index 00000000000..a8f33e423b2 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/examples/Size.html.twig @@ -0,0 +1,11 @@ +
+ + Small + + + Default + + + Large + +
diff --git a/src/Toolkit/kits/shadcn/toggle/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/toggle/examples/Usage.html.twig new file mode 100644 index 00000000000..5dea31677ce --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/examples/Usage.html.twig @@ -0,0 +1,3 @@ + + Toggle + diff --git a/src/Toolkit/kits/shadcn/toggle/examples/With Text.html.twig b/src/Toolkit/kits/shadcn/toggle/examples/With Text.html.twig new file mode 100644 index 00000000000..2b14d021e80 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/examples/With Text.html.twig @@ -0,0 +1,4 @@ + + + Italic + diff --git a/src/Toolkit/kits/shadcn/toggle/manifest.json b/src/Toolkit/kits/shadcn/toggle/manifest.json new file mode 100644 index 00000000000..97192db6715 --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/manifest.json @@ -0,0 +1,13 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Toggle", + "description": "A two-state button that can be either on or off.", + "copy-files": { + "assets/": "assets/", + "templates/": "templates/" + }, + "dependencies": { + "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/shadcn/toggle/templates/components/Toggle.html.twig b/src/Toolkit/kits/shadcn/toggle/templates/components/Toggle.html.twig new file mode 100644 index 00000000000..b303136b0ce --- /dev/null +++ b/src/Toolkit/kits/shadcn/toggle/templates/components/Toggle.html.twig @@ -0,0 +1,31 @@ +{# @prop variant 'default'|'outline' The visual style variant. Defaults to `default` #} +{# @prop size 'default'|'sm'|'lg' The toggle size. Defaults to `default` #} +{# @prop pressed boolean Whether the toggle is initially pressed. Defaults to `false` #} +{# @block content The toggle label and/or icon #} +{%- props variant = 'default', size = 'default', pressed = false -%} +{%- set style = html_cva( + base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + variants: { + variant: { + default: 'bg-transparent', + outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground', + }, + size: { + default: 'h-9 min-w-9 px-2', + sm: 'h-8 min-w-8 px-1.5', + lg: 'h-10 min-w-10 px-2.5', + }, + }, +) -%} + diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html new file mode 100644 index 00000000000..bc4be76fff2 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html @@ -0,0 +1,12 @@ + + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Demo.html__1.html new file mode 100644 index 00000000000..73390105bdc --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Demo.html__1.html @@ -0,0 +1,14 @@ + + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Disabled.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Disabled.html__1.html new file mode 100644 index 00000000000..c9271b3921f --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Disabled.html__1.html @@ -0,0 +1,21 @@ + +
+ + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html new file mode 100644 index 00000000000..1dd4da16bed --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html @@ -0,0 +1,12 @@ + + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Outline.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Outline.html__1.html new file mode 100644 index 00000000000..bc7aaae597c --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Outline.html__1.html @@ -0,0 +1,25 @@ + +
+ + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Size.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Size.html__1.html new file mode 100644 index 00000000000..26ec85d8b3e --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Size.html__1.html @@ -0,0 +1,26 @@ + +
+ + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html new file mode 100644 index 00000000000..d869e27c65b --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html @@ -0,0 +1,12 @@ + + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Usage.html__1.html new file mode 100644 index 00000000000..f7be389c541 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Usage.html__1.html @@ -0,0 +1,12 @@ + + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file With Text.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file With Text.html__1.html new file mode 100644 index 00000000000..f357aa0e62d --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file With Text.html__1.html @@ -0,0 +1,14 @@ + + \ No newline at end of file