From ab62f78f5ce07eda6c561b89901b4ac01f2704dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Mon, 26 Jun 2023 14:54:34 +0200
Subject: [PATCH] BREAKING CHANGE(web-twig): Remove `onClick` prop #DS-686
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 ## Migration Guide

Instead of the `onClick` prop, use native `onclick` in the `Button`, `ButtonLink`,
`HeaderLink`, `HeaderDialogLink` and `Link` components.

- `<Button onClick="alert('alert');" …>` → `<Button onclick="alert('alert');" …>`
- `<ButtonLink onClick="alert('alert');" …>` → `<ButtonLink onclick="alert('alert');" …>`
- `<HeaderLink onClick="alert('alert');" …>` → `<HeaderLink onclick="alert('alert');" …>`
- `<HeaderDialogLink onClick="alert('alert');" …>`
→ `<HeaderDialogLink onclick="alert('alert');" …>`
- `<Link onClick="alert('alert');" …>` → `<Link onclick="alert('alert');" …>`

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.
---
 .../Resources/components/Button/Button.twig   |  8 -------
 .../src/Resources/components/Button/README.md |  1 -
 .../Button/stories/ButtonColorsSizes.twig     |  2 +-
 .../components/ButtonLink/ButtonLink.twig     | 10 ---------
 .../Resources/components/ButtonLink/README.md |  1 -
 .../src/Resources/components/Header/README.md | 22 +++++++++----------
 .../components/Header/_abstracts/Link.twig    |  8 -------
 .../src/Resources/components/Link/Link.twig   | 10 ---------
 .../src/Resources/components/Link/README.md   |  1 -
 ... data set buttonWithMainProps.twig__1.html |  2 +-
 ...ith data set headerDialogLink.twig__1.html |  2 +-
 ...test with data set headerLink.twig__1.html |  2 +-
 ...est with data set linkDefault.twig__1.html |  2 +-
 .../buttonWithMainProps.twig                  |  4 ++--
 .../components-fixtures/headerDialogLink.twig |  2 +-
 .../tests/components-fixtures/headerLink.twig |  2 +-
 .../components-fixtures/linkDefault.twig      |  2 +-
 17 files changed, 20 insertions(+), 61 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Button/Button.twig b/packages/web-twig/src/Resources/components/Button/Button.twig
index 68c1810b8f..29635e6971 100644
--- a/packages/web-twig/src/Resources/components/Button/Button.twig
+++ b/packages/web-twig/src/Resources/components/Button/Button.twig
@@ -6,7 +6,6 @@
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isLoading = props.isLoading | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
-{%- set _onClick = props.onClick | default(null) -%}
 {%- set _type = props.type | default('button') -%}
 
 {# Class names #}
@@ -19,25 +18,18 @@
 
 {# Attributes #}
 {%- set _disabledAttr = _isDisabled or _isLoading ? 'disabled' : null -%}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootLoadingClassName, _rootSquareClassName, _styleProps.className ] -%}
 {%- set _allowedAttributes = [ 'name' ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'Button: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <button
     {{ mainProps(props, _allowedAttributes) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     type="{{ _type }}"
     {{ _disabledAttr }}
-    {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
     {%- if _isLoading -%}
diff --git a/packages/web-twig/src/Resources/components/Button/README.md b/packages/web-twig/src/Resources/components/Button/README.md
index 4d5f93d2d9..cb1f9f55be 100644
--- a/packages/web-twig/src/Resources/components/Button/README.md
+++ b/packages/web-twig/src/Resources/components/Button/README.md
@@ -42,7 +42,6 @@ Without lexer:
 | `isLoading`  | `bool`                                                                                    | `false`   | no       | If true, Button is in a loading state, disabled and the Spinner is visible |
 | `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, Button is square, usually only with an Icon                       |
 | `name`       | `string`                                                                                  | `null`    | no       | For use a button as a form data reference                                  |
-| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                                               |
 | `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | no       | Size variant                                                               |
 | `type`       | `string`                                                                                  | `button`  | no       | Type of the Button                                                         |
 
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
index 1fd4b6a551..51625cb33b 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -8,7 +8,7 @@
       {% for color in colors %}
       <div class="{% if color is same as('inverted') %}docs-Box {% endif %}my-600">
         <div>
-          <Button color={color} size={size} onClick="alert('rimmer')">Button {{ color }}</Button>
+          <Button color={color} size={size} onclick="alert('Button clicked')">Button {{ color }}</Button>
           <Button color={color} size={size}>
             <Icon name="hamburger" UNSAFE_className="mr-400" />
             Menu
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
index 014fe79c9a..fdca1d480c 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
@@ -7,7 +7,6 @@
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isLoading = props.isLoading | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
-{%- set _onClick = props.onClick | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
@@ -18,9 +17,6 @@
 {%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
 
-{# Attributes #}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _styleProps.className ] -%}
@@ -29,17 +25,11 @@
     'target',
 ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'ButtonLink: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     href="{{ _href }}"
-    {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
     {%- if _isLoading -%}
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md
index 76f16c5b29..6f7a2194ab 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/README.md
+++ b/packages/web-twig/src/Resources/components/ButtonLink/README.md
@@ -38,7 +38,6 @@ Without lexer:
 | `isDisabled` | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is disabled                                                |
 | `isLoading`  | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
 | `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is square, usually only with an Icon                       |
-| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                                                   |
 | `target`     | `string`                                                                                  | `null`    | no       | Link target                                                                    |
 | `title`      | `string`                                                                                  | `null`    | no       | Optional title to display on hover                                             |
 
diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md
index 8f68e12724..f657cc1580 100644
--- a/packages/web-twig/src/Resources/components/Header/README.md
+++ b/packages/web-twig/src/Resources/components/Header/README.md
@@ -250,12 +250,11 @@ There is no API for HeaderNavItem.
 
 ##### HeaderLink API
 
-| Prop name   | Type      | Default | Required | Description               |
-| ----------- | --------- | ------- | -------- | ------------------------- |
-| `href`      | `string`  | —       | yes      | Link URL                  |
-| `isCurrent` | `boolean` | `false` | no       | Mark link as current      |
-| `onClick`   | `string`  | `null`  | no       | Function to call on click |
-| `target`    | `string`  | `null`  | no       | HTML `target` attribute   |
+| Prop name   | Type      | Default | Required | Description             |
+| ----------- | --------- | ------- | -------- | ----------------------- |
+| `href`      | `string`  | —       | yes      | Link URL                |
+| `isCurrent` | `boolean` | `false` | no       | Mark link as current    |
+| `target`    | `string`  | `null`  | no       | HTML `target` attribute |
 
 ##### HeaderButton API
 
@@ -391,12 +390,11 @@ There is no API for HeaderDialogNavItem.
 
 ##### HeaderDialogLink API
 
-| Prop name   | Type      | Default | Required | Description               |
-| ----------- | --------- | ------- | -------- | ------------------------- |
-| `href`      | `string`  | —       | yes      | Link URL                  |
-| `isCurrent` | `boolean` | `false` | no       | Mark link as current      |
-| `onClick`   | `string`  | `null`  | no       | Function to call on click |
-| `target`    | `string`  | `null`  | no       | HTML `target` attribute   |
+| Prop name   | Type      | Default | Required | Description             |
+| ----------- | --------- | ------- | -------- | ----------------------- |
+| `href`      | `string`  | —       | yes      | Link URL                |
+| `isCurrent` | `boolean` | `false` | no       | Mark link as current    |
+| `target`    | `string`  | `null`  | no       | HTML `target` attribute |
 
 ##### HeaderDialogButton API
 
diff --git a/packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig b/packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig
index c5f2150a53..159e86f3ef 100644
--- a/packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig
+++ b/packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig
@@ -3,7 +3,6 @@
 {%- set _class = props.class | default(null) -%}
 {%- set _href = props.href -%}
 {%- set _isCurrent = props.isCurrent | default(false) -%}
-{%- set _onClick = props.onClick | default(null) -%}
 {%- set _rootClass = props.rootClass -%}
 
 {# Class names #}
@@ -12,7 +11,6 @@
 
 {# Attributes #}
 {%- set _ariaCurrentAttr = _isCurrent ? 'aria-current=page' : null -%}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
 
 {# Miscellaneous #}
 {%- set _classNames = [ _rootClassName, _rootCurrentClassName, _class ] -%}
@@ -20,17 +18,11 @@
     'target',
 ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'Header: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     {{ classProp(_classNames) }}
     href="{{ _href }}"
     {{ _ariaCurrentAttr }}
-    {{ _onClickAttr | raw }}
 >
     {% block content %}{% endblock %}
 </a>
diff --git a/packages/web-twig/src/Resources/components/Link/Link.twig b/packages/web-twig/src/Resources/components/Link/Link.twig
index 785b0d24cd..db7c978a3a 100644
--- a/packages/web-twig/src/Resources/components/Link/Link.twig
+++ b/packages/web-twig/src/Resources/components/Link/Link.twig
@@ -4,16 +4,12 @@
 {%- set _href = props.href -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isUnderlined = props.isUnderlined | default(false) | boolprop -%}
-{%- set _onClick = props.onClick | default(null) -%}
 
 {# Class names #}
 {%- set _colorClassName = _spiritClassPrefix ~ 'link-' ~ _color -%}
 {%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'link-disabled' : null -%}
 {%- set _rootUnderlinedClassName = _isUnderlined ? _spiritClassPrefix ~ 'link-underlined' : null -%}
 
-{# Attributes #}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _colorClassName, _rootDisabledClassName, _rootUnderlinedClassName, _styleProps.className ] -%}
@@ -22,17 +18,11 @@
     'target',
 ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'Link: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     href="{{ _href }}"
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
-    {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
 </a>
diff --git a/packages/web-twig/src/Resources/components/Link/README.md b/packages/web-twig/src/Resources/components/Link/README.md
index 1953c4c809..7c9734b53c 100644
--- a/packages/web-twig/src/Resources/components/Link/README.md
+++ b/packages/web-twig/src/Resources/components/Link/README.md
@@ -41,7 +41,6 @@ Without lexer:
 | `href`         | `string`                                         | —         | yes      | Link URL                           |
 | `isDisabled`   | `bool`                                           | `false`   | no       | If true, Link is disabled          |
 | `isUnderlined` | `bool`                                           | `false`   | no       | If true, Link is underlined        |
-| `onClick`      | `string`                                         | `null`    | no       | JS function to call on click       |
 | `target`       | `string`                                         | `null`    | no       | Link target                        |
 | `title`        | `string`                                         | `null`    | no       | Optional title to display on hover |
 
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html
index ddf86541b7..f1bb308925 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html	
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <button id="testId" name="testName" data-main="main" aria-label="label" class="Button Button--primary Button--medium" type="button" onclick="alert('&quot; test')">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="alert('&quot; test')" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" class="Button Button--primary Button--medium" type="button" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;" class="Button Button--primary Button--medium" type="button">button</button>
+    <button id="testId" name="testName" data-main="main" aria-label="label" onclick="alert('&quot; test')" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="alert('&quot; test')" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;" class="Button Button--primary Button--medium" type="button">button</button>
   </body>
 </html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerDialogLink.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerDialogLink.twig__1.html
index c4ba84bd0f..ef60342d7e 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerDialogLink.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerDialogLink.twig__1.html	
@@ -8,6 +8,6 @@
     <a class="HeaderDialogLink" href="/job-offers">Job offers</a> <!-- Render as current page -->
      <a class="HeaderDialogLink HeaderDialogLink--current" href="/job-offers" aria-current="page">Job offers</a> 
     <!-- Render with all props -->
-     <a target="_blank" class="HeaderDialogLink HeaderDialogLink--current" href="https://spirit.design" aria-current="page" onclick="console.log('Hello!')">Job offers</a>
+     <a onclick="console.log('Hello!')" target="_blank" class="HeaderDialogLink HeaderDialogLink--current" href="https://spirit.design" aria-current="page">Job offers</a>
   </body>
 </html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerLink.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerLink.twig__1.html
index 34b12353f1..5239e31604 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerLink.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerLink.twig__1.html	
@@ -8,6 +8,6 @@
     <a class="HeaderLink" href="/job-offers">Job offers</a> <!-- Render as current page -->
      <a class="HeaderLink HeaderLink--current" href="/job-offers" aria-current="page">Job offers</a> 
     <!-- Render with all props -->
-     <a target="_blank" class="HeaderLink HeaderLink--current" href="https://spirit.design" aria-current="page" onclick="console.log('Hello!')">Job offers</a>
+     <a onclick="console.log('Hello!')" target="_blank" class="HeaderLink HeaderLink--current" href="https://spirit.design" aria-current="page">Job offers</a>
   </body>
 </html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html
index 9e47702eb7..cf5342fb21 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html	
@@ -8,6 +8,6 @@
     <a href="" class="link-primary">Example link</a> <!-- Render as an underlined secondary link -->
      <a href="/" class="link-secondary link-underlined">Example link</a> <!-- Render as disabled -->
      <a href="/" class="link-primary link-disabled">Example link</a> <!-- Render with all props -->
-     <a target="_blank" title="test title" href="https://spirit.design" class="link-inverted link-disabled link-underlined my-custom-class" onclick="console.log('Hello!');">Example link</a>
+     <a onclick="console.log('Hello!');" target="_blank" title="test title" href="https://spirit.design" class="link-inverted link-disabled link-underlined my-custom-class">Example link</a>
   </body>
 </html>
diff --git a/packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig b/packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig
index 0fd8bd1d84..fdc0574f4c 100644
--- a/packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig
+++ b/packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig
@@ -1,9 +1,9 @@
 {% set onClickCallback = "alert('\" test')" %}
 
-<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onClick={onClickCallback}>button</Button>
+<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickCallback}>button</Button>
 <Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickCallback}>button</Button>
 
 {% set onClickAppend = "document.body.append('<span>hello there</span>'); return false;" %}
 
-<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onClick={onClickAppend}>button</Button>
+<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickAppend}>button</Button>
 <Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickAppend}>button</Button>
diff --git a/packages/web-twig/tests/components-fixtures/headerDialogLink.twig b/packages/web-twig/tests/components-fixtures/headerDialogLink.twig
index 8a653e7a83..b8a3bf071f 100644
--- a/packages/web-twig/tests/components-fixtures/headerDialogLink.twig
+++ b/packages/web-twig/tests/components-fixtures/headerDialogLink.twig
@@ -11,7 +11,7 @@
 <HeaderDialogLink
     href="https://spirit.design"
     isCurrent
-    onClick="console.log('Hello!')"
+    onclick="console.log('Hello!')"
     target="_blank"
 >
     Job offers
diff --git a/packages/web-twig/tests/components-fixtures/headerLink.twig b/packages/web-twig/tests/components-fixtures/headerLink.twig
index aed8d69a0a..73d3f54487 100644
--- a/packages/web-twig/tests/components-fixtures/headerLink.twig
+++ b/packages/web-twig/tests/components-fixtures/headerLink.twig
@@ -11,7 +11,7 @@
 <HeaderLink
     href="https://spirit.design"
     isCurrent
-    onClick="console.log('Hello!')"
+    onclick="console.log('Hello!')"
     target="_blank"
 >
     Job offers
diff --git a/packages/web-twig/tests/components-fixtures/linkDefault.twig b/packages/web-twig/tests/components-fixtures/linkDefault.twig
index f3033e11d7..c0aa1b77c2 100644
--- a/packages/web-twig/tests/components-fixtures/linkDefault.twig
+++ b/packages/web-twig/tests/components-fixtures/linkDefault.twig
@@ -17,7 +17,7 @@
     href="https://spirit.design"
     isDisabled
     isUnderlined
-    onClick="console.log('Hello!');"
+    onclick="console.log('Hello!');"
     target="_blank"
     title="test title"
 >