From 7d3377adbe14e4b78f1a5497a800c3818c502d47 Mon Sep 17 00:00:00 2001
From: wildone <max.barrass@gmail.com>
Date: Fri, 21 Jun 2024 16:14:27 +1000
Subject: [PATCH] update component badges to use template.

---
 .../components/content/embed/embed.html       |  6 ++---
 .../fields/button/variant.hamburger.html      |  7 +++---
 .../forms/fields/composite/variant.html       |  5 +++-
 .../forms/fields/composite/variant.list.html  |  5 +++-
 .../forms/fields/label/variant.html           |  6 ++---
 .../layout/accordion/accordion.html           | 25 +++++++++++++++----
 .../layout/accordionitem/accordionitem.html   |  4 ++-
 .../components/layout/container/variant.html  |  5 +++-
 .../components/layout/template/variant.html   |  9 +++++--
 .../components/layout/treeview/variant.html   |  9 +++----
 .../components/widgets/tabs/tabs.html         |  6 ++---
 11 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/application/backend/src/main/resources/apps/typerefinery/components/content/embed/embed.html b/application/backend/src/main/resources/apps/typerefinery/components/content/embed/embed.html
index 42eb18f44..a0574aa48 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/content/embed/embed.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/content/embed/embed.html
@@ -26,9 +26,9 @@
   >
     <sly data-sly-use.template="${template}" data-sly-call="${template.variant @ model=model}">
     </sly>
-    <sly data-sly-test="${wcmmode.isEdit}">
-      <div style="--bs-bg-opacity: .5;" class="bg-warning">${model.componentTitle} Component</div>
-    </sly>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
   </div>
 </sly>
      
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/button/variant.hamburger.html b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/button/variant.hamburger.html
index f2eadfb75..54634db30 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/button/variant.hamburger.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/button/variant.hamburger.html
@@ -24,7 +24,8 @@
             </sly>
         </button>
     </div>
-    <sly data-sly-test="${wcmmode.isEdit}">
-        <div style="--bs-bg-opacity: .5;" class="bg-warning">Hamburger visible for limited screen size.</div>
-    </sly>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Visible only on some screen sizes.'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.html b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.html
index 335ec2a1f..2592cf776 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.html
@@ -33,5 +33,8 @@
   <div template>
     <sly data-sly-include="${'parsys.html' @ prependPath='/apps/typerefinery/components/parsys'}"></sly>
   </div>
-  <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}</div>
+  <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - (', model.name ,')'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.list.html b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.list.html
index bf22ef35b..a570762bc 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.list.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.list.html
@@ -84,5 +84,8 @@
       </div>
     </template>
   </sly>  
-  <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template</div>
+  <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Template (', model.name ,')'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/label/variant.html b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/label/variant.html
index 3dbf4d906..8fcbc1bd5 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/label/variant.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/forms/fields/label/variant.html
@@ -7,7 +7,7 @@
       class="${model.componentClassNames} ${model.variantClassNames}"
       for="${model.forId}">${model.label}</label>    
   </sly>
-  <sly data-sly-test="${wcmmode.isEdit && model.hideLabel}">
-    <div style="--bs-bg-opacity: .5;" class="bg-warning">Label is Hidden</div>
-  </sly>
+  <sly data-sly-test="${model.hideLabel}" data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Label is hidden'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
 </template>
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html b/application/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html
index 57db9c06f..be5e8612e 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html
@@ -20,26 +20,41 @@
     class="${model.componentName} ${model.componentClassNames} ${model.variantClassNames}"
     data-model="${model.jsonString}"
     data-sly-test="${resource.hasChildren}">
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Items Start</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Items Start'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+    
     <sly data-sly-repeat.paragraph="${resource.children}">
         <sly data-sly-test="${paragraph.name != 'template'}">
           <sly data-sly-test="${paragraph.resourceType && paragraph['sling:resourceType']}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
         </sly>
     </sly>
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Items End</div>
 
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Items End'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+      
     <sly data-sly-test="${model.isTemplated}">
-      <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template Start</div>
+      <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+        data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Template Start'] @ join=''}"
+        data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
       <sly data-sly-repeat.paragraph="${resource.children}">
           <sly data-sly-test="${paragraph.name == 'template'}">
             <sly data-sly-test="${paragraph.resourceType && paragraph['sling:resourceType']}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
           </sly>
       </sly>
-      <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template End</div>
+
+      <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+        data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Template End'] @ join=''}"
+        data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
     </sly>
   </div>
   <sly data-sly-use.lib="/libs/wcm/foundation/components/commons/templates.html"
       data-sly-call="${lib.placeholder @ classes=model.componentClassNames}">
   </sly>
-  <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}</div>
+  <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
 </sly>
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/layout/accordionitem/accordionitem.html b/application/backend/src/main/resources/apps/typerefinery/components/layout/accordionitem/accordionitem.html
index 8d21ee3e5..02849bea6 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/layout/accordionitem/accordionitem.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/layout/accordionitem/accordionitem.html
@@ -31,7 +31,9 @@ <h2 class="accordion-header">
           data-sly-call="${lib.placeholder @ classes=model.componentClassNames}">
         </sly>
 
-        <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}</div>
+        <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+          data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - (', model.title ,')'] @ join=''}"
+          data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
       </div>
     </div>
   </div>
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/layout/container/variant.html b/application/backend/src/main/resources/apps/typerefinery/components/layout/container/variant.html
index 24c588244..e66be5b8f 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/layout/container/variant.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/layout/container/variant.html
@@ -18,7 +18,10 @@
   <!--/* Show error if this container is inheriting but can't find parent. */-->
   <sly data-sly-test="${model.inheriting && !model.cancelInheritParent && !model.inheritedResource}">
     <!--${model.componentName} inherited resource not found-->
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentName}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}: Inherited but parent not found.</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Inherited but parent not found'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
   </sly>
   <!--/* Print output of inherited resource. */-->
   <sly data-sly-test="${model.inheriting && !model.cancelInheritParent && model.inheritedResource}">
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/layout/template/variant.html b/application/backend/src/main/resources/apps/typerefinery/components/layout/template/variant.html
index 91d645a55..2cdd11a9c 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/layout/template/variant.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/layout/template/variant.html
@@ -20,7 +20,10 @@
     id="${model.id}"
     name="${model.name}"
     >
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} Start (${model.id})</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Start (', model.id ,')'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+      
     <sly data-sly-test="${resource.hasChildren}">
       <sly data-sly-include="${'parsys.html' @ prependPath='/libs/wcm/foundation/components/parsys'}"></sly>
     </sly>
@@ -29,6 +32,8 @@
         data-sly-call="${lib.placeholder @ classes=model.componentClassNames}">
       </sly>
     </sly>
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} End (${model.id})</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - End (', model.id ,')'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
   </template>
 </template>
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/layout/treeview/variant.html b/application/backend/src/main/resources/apps/typerefinery/components/layout/treeview/variant.html
index c653c7d91..0c67c413b 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/layout/treeview/variant.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/layout/treeview/variant.html
@@ -8,9 +8,8 @@
     data-sly-test="${model.parentPagePath}"
   >
   </div>
-  <sly data-sly-test="${!model.parentPagePath && wcmmode.isEdit}">
-    <div style="--bs-bg-opacity: .5;" class="bg-warning text-center">
-      Tree view content
-    </div>
-  </sly>
+  <sly data-sly-test="${!model.parentPagePath}" data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Set parent page path.'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
\ No newline at end of file
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/widgets/tabs/tabs.html b/application/backend/src/main/resources/apps/typerefinery/components/widgets/tabs/tabs.html
index cb04e4a3f..5f182ed59 100644
--- a/application/backend/src/main/resources/apps/typerefinery/components/widgets/tabs/tabs.html
+++ b/application/backend/src/main/resources/apps/typerefinery/components/widgets/tabs/tabs.html
@@ -3,9 +3,9 @@
 <sly data-sly-use.model="ai.typerefinery.websight.models.components.widgets.tabs.Tabs"
     data-sly-set.template="${'./variant.html'}">
 
-    <sly data-sly-test="${wcmmode.isEdit}">
-      <div style="--bs-bg-opacity: .5;" class="bg-warning">${model.componentTitle} Component</div>
-    </sly>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
 
     <div class="${model.componentClassNames}">
       <div