BREAKING CHANGE(web-twig): Remove data-toggle from TabLink component …

…refs #DS-840 ## Migration Guide Use `data-spirit-toggle="tabs"` to initialize Tabs functionality. `spirit` infix is made mandatory in PR #935. - `<TabLink …>` → `<TabLink data-spirit-toggle="tabs" …>` The original data attribute was removed due to unwanted initialization of Tabs which was not under control of the developer. Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · 0d7df9b · 0d7df9b
1 parent ee92622
commit 0d7df9b
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 10 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tabs/README.md b/packages/web-twig/src/Resources/components/Tabs/README.md
@@ -7,10 +7,10 @@ Basic example usage:
 ```html
 <TabList>
   <TabItem>
-    <TabLink isSelected id="pane1-tab" target="pane1">Item selected</TabLink>
+    <TabLink isSelected id="pane1-tab" target="pane1" data-toggle="tabs">Item selected</TabLink>
   </TabItem>
   <TabItem>
-    <TabLink id="pane2-tab" target="pane2">Item</TabLink>
+    <TabLink id="pane2-tab" target="pane2" data-toggle="tabs">Item</TabLink>
   </TabItem>
   <TabItem>
     <TabLink href="https://www.example.com">Item link</TabLink>
@@ -74,5 +74,21 @@ You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,
 see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
+## JavaScript Plugin
+
+For full functionality, you need to provide Spirit JavaScript:
+
+```html
+<script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>
+```
+
+Check the [component's docs in the web package][web-js-api] to see the full documentation of the plugin.
+
+Please consult the [main README][web-readme] for how to include JavaScript plugins.
+
+Or, feel free to write the controlling script yourself.
+
+[web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tabs/README.md#javascript-plugin-api
+[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [tabs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tabs
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/Tabs/TabLink.twig b/packages/web-twig/src/Resources/components/Tabs/TabLink.twig
@@ -12,7 +12,6 @@
 {# Attributes #}
 {%- set _ariaControlsAttr = _target ? 'aria-controls="' ~ _target | escape('html_attr') ~ '"' : null -%}
 {%- set _dataTargetAttr = _target ? 'data-target="#' ~ _target | escape('html_attr') ~ '"' : null -%}
-{%- set _dataToggleAttr = _href ? null : 'data-toggle="tabs"' -%}
 {%- set _roleAttr = _href ? 'role="tab"' : null -%}
 {%- set _typeAttr = _href ? null : 'type="button"' -%}
 
@@ -30,7 +29,6 @@
     aria-selected="{{ _ariaSelected }}"
     {{ _ariaControlsAttr | raw }}
     {{ _dataTargetAttr | raw }}
-    {{ _dataToggleAttr | raw }}
     {{ _roleAttr | raw }}
     {{ _typeAttr | raw }}
 >

diff --git a/packages/web-twig/src/Resources/components/Tabs/stories/TabsDefault.twig b/packages/web-twig/src/Resources/components/Tabs/stories/TabsDefault.twig
@@ -1,9 +1,9 @@
 <TabList>
     <TabItem>
-        <TabLink isSelected id="pane1-tab" target="pane1">Item 1</TabLink>
+        <TabLink isSelected id="pane1-tab" data-toggle="tabs" target="pane1">Item 1</TabLink>
     </TabItem>
     <TabItem>
-        <TabLink id="pane2-tab" target="pane2">Item 2</TabLink>
+        <TabLink id="pane2-tab" data-toggle="tabs" target="pane2">Item 2</TabLink>
     </TabItem>
     <TabItem>
         <TabLink href="https://www.example.com">Item link</TabLink>

diff --git a/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set tabsDefault.twig__1.html b/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set tabsDefault.twig__1.html
@@ -7,11 +7,11 @@
   <body>
     <ul class="Tabs" role="tablist">
       <li class="Tabs__item">
-        <button id="pane1-tab" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane1" data-target="#pane1" data-toggle="tabs" type="button">Item selected</button>
+        <button id="pane1-tab" data-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane1" data-target="#pane1" type="button">Item selected</button>
       </li>
 
       <li class="Tabs__item">
-        <button id="pane2-tab" class="Tabs__link" aria-selected="false" aria-controls="pane2" data-target="#pane2" data-toggle="tabs" type="button">Item</button>
+        <button id="pane2-tab" data-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane2" data-target="#pane2" type="button">Item</button>
       </li>
 
       <li class="Tabs__item">

diff --git a/packages/web-twig/tests/components-fixtures/tabsDefault.twig b/packages/web-twig/tests/components-fixtures/tabsDefault.twig
@@ -1,11 +1,11 @@
 <TabList>
   <TabItem>
-    <TabLink isSelected id="pane1-tab" target="pane1">
+    <TabLink isSelected id="pane1-tab" data-toggle="tabs" target="pane1">
       Item selected
     </TabLink>
   </TabItem>
   <TabItem>
-    <TabLink id="pane2-tab" target="pane2">
+    <TabLink id="pane2-tab" data-toggle="tabs" target="pane2">
       Item
     </TabLink>
   </TabItem>