MWPW-148229 Left Rail filter hover Text (#43)

* changed title attribute * merch-sidenav libs changes for title attribute * title attribute change in test file --------- Co-authored-by: Mira Fedas <30750556+mirafedas@users.noreply.github.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com>
adobecom · Jul 24, 2024 · 11af2de · 11af2de
1 parent c9d55dc
commit 11af2de
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/libs/merch-sidenav.js b/libs/merch-sidenav.js
@@ -169,7 +169,7 @@ customElements.define("merch-search", MerchSearch);
 import { html as html2, LitElement as LitElement2, css as css3 } from "/libs/deps/lit-all.min.js";
 var MerchSidenavList = class extends LitElement2 {
   static properties = {
-    title: { type: String },
+    sidenavListTitle: { type: String },
     label: { type: String },
     deeplink: { type: String, attribute: "deeplink" },
     selectedText: {
@@ -291,7 +291,7 @@ var MerchSidenavList = class extends LitElement2 {
             aria-label="${this.label}"
             @change="${(e) => this.selectionChanged(e)}"
         >
-            ${this.title ? html2`<h2>${this.title}</h2>` : ""}
+            ${this.sidenavListTitle ? html2`<h2>${this.sidenavListTitle}</h2>` : ""}
             <slot></slot>
         </div>`;
   }
@@ -302,7 +302,7 @@ customElements.define("merch-sidenav-list", MerchSidenavList);
 import { html as html3, LitElement as LitElement3, css as css4 } from "/libs/deps/lit-all.min.js";
 var MerchSidenavCheckboxGroup = class extends LitElement3 {
   static properties = {
-    title: { type: String },
+    sidenavCheckboxTitle: { type: String },
     label: { type: String },
     deeplink: { type: String },
     selectedValues: { type: Array, reflect: true },
@@ -372,7 +372,7 @@ var MerchSidenavCheckboxGroup = class extends LitElement3 {
   }
   render() {
     return html3`<div aria-label="${this.label}">
-            <h3>${this.title}</h3>
+            <h3>${this.sidenavCheckboxTitle}</h3>
             <div
                 @change="${(e) => this.selectionChanged(e)}"
                 class="checkbox-group"
@@ -440,7 +440,7 @@ document.addEventListener("sp-closed", () => {
 });
 var MerchSideNav = class extends LitElement4 {
   static properties = {
-    title: { type: String },
+    sidenavTitle: { type: String },
     closeText: { type: String, attribute: "close-text" },
     modal: { type: Boolean, attribute: "modal", reflect: true }
   };
@@ -527,7 +527,7 @@ var MerchSideNav = class extends LitElement4 {
                     <div id="content">
                         <div id="sidenav">
                             <div>
-                                <h2>${this.title}</h2>
+                                <h2>${this.sidenavTitle}</h2>
                                 <slot></slot>
                             </div>
                             <sp-link href="#" @click="${this.closeModal}"
@@ -541,7 +541,7 @@ var MerchSideNav = class extends LitElement4 {
   }
   get asAside() {
     return html4`<sp-theme theme="spectrum" color="light" scale="medium"
-            ><h2>${this.title}</h2>
+            ><h2>${this.sidenavTitle}</h2>
             <slot></slot
         ></sp-theme>`;
   }

diff --git a/web-components/src/sidenav/merch-sidenav-checkbox-group.js b/web-components/src/sidenav/merch-sidenav-checkbox-group.js
@@ -3,7 +3,7 @@ import { parseState, pushStateFromComponent } from '@adobe/mas-commons';
 
 export class MerchSidenavCheckboxGroup extends LitElement {
     static properties = {
-        title: { type: String },
+        sidenavCheckboxTitle: { type: String },
         label: { type: String },
         deeplink: { type: String },
         selectedValues: { type: Array, reflect: true },
@@ -78,7 +78,7 @@ export class MerchSidenavCheckboxGroup extends LitElement {
 
     render() {
         return html`<div aria-label="${this.label}">
-            <h3>${this.title}</h3>
+            <h3>${this.sidenavCheckboxTitle}</h3>
             <div
                 @change="${(e) => this.selectionChanged(e)}"
                 class="checkbox-group"

diff --git a/web-components/src/sidenav/merch-sidenav-list.js b/web-components/src/sidenav/merch-sidenav-list.js
@@ -5,7 +5,7 @@ import { debounce } from '../utils';
 
 export class MerchSidenavList extends LitElement {
     static properties = {
-        title: { type: String },
+        sidenavListTitle: { type: String },
         label: { type: String },
         deeplink: { type: String, attribute: 'deeplink' },
         selectedText: {
@@ -141,7 +141,7 @@ export class MerchSidenavList extends LitElement {
             aria-label="${this.label}"
             @change="${(e) => this.selectionChanged(e)}"
         >
-            ${this.title ? html`<h2>${this.title}</h2>` : ''}
+            ${this.sidenavListTitle ? html`<h2>${this.sidenavListTitle}</h2>` : ''}
             <slot></slot>
         </div>`;
     }

diff --git a/web-components/src/sidenav/merch-sidenav.js b/web-components/src/sidenav/merch-sidenav.js
@@ -16,7 +16,7 @@ document.addEventListener('sp-closed', () => {
 
 export class MerchSideNav extends LitElement {
     static properties = {
-        title: { type: String },
+        sidenavTitle: { type: String },
         closeText: { type: String, attribute: 'close-text' },
         modal: { type: Boolean, attribute: 'modal', reflect: true },
     };
@@ -110,7 +110,7 @@ export class MerchSideNav extends LitElement {
                     <div id="content">
                         <div id="sidenav">
                             <div>
-                                <h2>${this.title}</h2>
+                                <h2>${this.sidenavTitle}</h2>
                                 <slot></slot>
                             </div>
                             <sp-link href="#" @click="${this.closeModal}"
@@ -125,7 +125,7 @@ export class MerchSideNav extends LitElement {
 
     get asAside() {
         return html`<sp-theme theme="spectrum" color="light" scale="medium"
-            ><h2>${this.title}</h2>
+            ><h2>${this.sidenavTitle}</h2>
             <slot></slot
         ></sp-theme>`;
     }

diff --git a/web-components/test/sidenav/catalog-sidenav.test.html b/web-components/test/sidenav/catalog-sidenav.test.html
@@ -30,7 +30,7 @@
             <div id="merch-sidenav"></div>
         </main>
         <template id="merch-sidenav-template">
-            <merch-sidenav title="REFINE YOUR RESULTS">
+            <merch-sidenav sidenavTitle="REFINE YOUR RESULTS">
                 <merch-search deeplink="search">
                     <sp-search placeholder="Search all products"></sp-search>
                 </merch-search>
@@ -53,12 +53,12 @@
                         </sp-sidenav-item>
                     </sp-sidenav>
                 </merch-sidenav-list>
-                <merch-sidenav-checkbox-group title="Types" label="types" deeplink="types">
+                <merch-sidenav-checkbox-group sidenavCheckboxTitle="Types" label="types" deeplink="types">
                     <sp-checkbox emphasized name="desktop">Desktop</sp-checkbox>
                     <sp-checkbox emphasized name="mobile">Mobile</sp-checkbox>
                     <sp-checkbox emphasized name="web">Web</sp-checkbox>
                 </merch-sidenav-checkbox-group>
-                <merch-sidenav-list title="RESOURCES">
+                <merch-sidenav-list sidenavListTitle="RESOURCES">
                     <sp-sidenav
                         manageTabIndex="true"
                         label="resources"