KYAN-293 add authorable id attribute to Button (#507)

* KYAN-293 add authorable id attribute to Button * KYAN-293 update e2e-tests for Button * KYAN-293 add changes due to PR review
websight-io · Oct 1, 2024 · 7e0fae2 · 7e0fae2
1 parent 4096b77
commit 7e0fae2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 30 deletions.
diff --git a/.../common/backend/src/main/java/pl/ds/kyanite/common/components/models/ButtonComponent.java b/.../common/backend/src/main/java/pl/ds/kyanite/common/components/models/ButtonComponent.java
@@ -45,6 +45,10 @@ public class ButtonComponent {
   @Getter
   private boolean hideLabel;
 
+  @ValueMapValue
+  @Getter
+  private String buttonId;
+
   @Inject
   @Getter
   private boolean showIconLeft;

diff --git a/...tions/common/backend/src/main/resources/libs/kyanite/common/components/button/button.html b/...tions/common/backend/src/main/resources/libs/kyanite/common/components/button/button.html
@@ -17,38 +17,26 @@
 */-->
 <sly data-sly-use.model="pl.ds.kyanite.common.components.models.ButtonComponent">
     <sly data-sly-test="${model.type == 'button'}">
-        <sly data-sly-test.disabled="${model.isDisabled}">
-            <button class="button ${model.buttonClasses @ join=' '}" disabled
-                    aria-label="${model.hideLabel ? model.label : ''}">
-                <sly data-sly-use.template="./template.html"
-                     data-sly-call="${template.buttonContent @ model = model}"></sly>
-            </button>
-        </sly>
-        <sly data-sly-test="${!disabled}">
-            <sly data-sly-test="${model.actionType == 'open-modal'}">
-                <button class="button js-modal-trigger ${model.buttonClasses @ join=' '}"
-                        data-target="${model.modalId}"
-                        aria-label="${model.hideLabel ? model.label : ''}">
-                    <sly data-sly-use.template="./template.html"
-                         data-sly-call="${template.buttonContent @ model = model}"></sly>
-                </button>
-            </sly>
-
-            <sly data-sly-test="${model.actionType != 'open-modal'}">
-                <button class="button ${model.buttonClasses @ join=' '}"
-                        aria-label="${model.hideLabel ? model.label : ''}">
-                    <sly data-sly-use.template="./template.html"
-                         data-sly-call="${template.buttonContent @ model = model}"></sly>
-                </button>
-            </sly>
-        </sly>
+        <sly data-sly-set.isDisabled="${model.isDisabled}"
+             data-sly-set.isModal="${!isDisabled && (model.actionType == 'open-modal')}"></sly>
+        <button class="button ${model.buttonClasses @ join=' '}
+                       ${isModal ? 'js-modal-trigger' : ''}"
+                id="${model.buttonId}"
+                data-sly-attribute.data-target="${isModal ? model.modalId : ''}"
+                data-sly-attribute.disabled="${isDisabled}"
+                aria-label="${model.hideLabel ? model.label : ''}">
+            <sly data-sly-use.template="./template.html"
+                 data-sly-call="${template.buttonContent @ model = model}"></sly>
+        </button>
     </sly>
     <sly data-sly-test="${model.type == 'a'}">
-        <a href="${model.url}" data-part1="${model.mailPart1}" data-part2="${model.mailPart2}" data-part3="${model.mailPart3}"  class="button ${model.buttonClasses @ join=' '}"
+        <a href="${model.url}" data-part1="${model.mailPart1}" data-part2="${model.mailPart2}" data-part3="${model.mailPart3}"
+           class="button ${model.buttonClasses @ join=' '}"
+           id="${model.buttonId}"
            target="${model.openInNewTab && model.url != '' ? '_blank' : ''}"
            aria-label="${model.hideLabel ? model.label : ''}">
             <sly data-sly-use.template="./template.html"
                  data-sly-call="${template.buttonContent @ model = model}"></sly>
         </a>
     </sly>
-</sly>
+</sly>
diff --git a/...mon/backend/src/main/resources/libs/kyanite/common/components/button/dialog/.content.json b/...mon/backend/src/main/resources/libs/kyanite/common/components/button/dialog/.content.json
@@ -16,6 +16,12 @@
         "label": "Hide label",
         "description": "Use to describe link without showing the label. Can be useful e.g. to describe link with an icon"
       },
+      "buttonId": {
+        "sling:resourceType": "wcm/dialogs/components/textfield",
+        "name": "buttonId",
+        "label": "Button ID",
+        "description": "ID used for Google Analytics purposes"
+      },
       "type": {
         "sling:resourceType": "wcm/dialogs/components/include",
         "path": "/libs/kyanite/common/components/button/attributes/type"
@@ -456,4 +462,4 @@
       }
     }
   }
-}
+}
diff --git a/tests/end-to-end/tests/elements/button.cy.ts b/tests/end-to-end/tests/elements/button.cy.ts
@@ -140,7 +140,8 @@ describe('Button component', function () {
               'iconLibType': 'mdi',
               'icon': 'mdi-cube-outline',
               'selectOrType': 'select'
-          }
+          },
+          'buttonId': ''
         });
   });
 
@@ -195,7 +196,8 @@ describe('Button component', function () {
           'label': 'Label',
           'sling:resourceType': 'kyanite/common/components/button',
           'openInNewTab': 'true',
-          'isMailto': 'false'
+          'isMailto': 'false',
+          'buttonId': ''
         });
   });
 });