Add support for text changing attributes

infor-design · Jun 22, 2023 · 2836bd5 · 2836bd5
1 parent abe8ff8
commit 2836bd5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/module-nav/module-nav.common.js b/src/components/module-nav/module-nav.common.js
@@ -26,20 +26,22 @@ export const SWITCHER_ICON_HTML = `<svg
 </svg>`;
 
 /**
+ * @param {string} [buttonText] provides the template with descriptive button text, if applicable
  * @returns {string} IdsButton component HTML template used to define Module Nav Switcher Button
  */
-export const buttonTemplate = () => `<div class="module-nav-section module-btn">
+export const buttonTemplate = buttonText => `<div class="module-nav-section module-btn">
   <button id="module-nav-homepage-btn" class="btn-icon btn-tertiary">
     ${SWITCHER_ICON_HTML}
-    <span>${Locale ? Locale.translate('ModuleSwitch') : 'Switch Modules'}</span>
+    <span>${buttonText || (Locale ? Locale.translate('ModuleSwitch') : 'Switch Modules')}</span>
   </button>
 </div>`;
 
 /**
+ * @param {string} [labelText] provides the template with descriptive label text, if applicable
  * @returns {string} IdsDropdown component HTML template used to define Module Nav Switcher Dropdown
  */
-export const dropdownTemplate = () => `<div class="module-nav-section role-dropdown">
-  <label for="module-nav-role-switcher" class="label audible">Roles</label>
+export const dropdownTemplate = labelText => `<div class="module-nav-section role-dropdown">
+  <label for="module-nav-role-switcher" class="label audible">${labelText || 'Roles'}</label>
   <select id="module-nav-role-switcher" name="module-nav-role-switcher" class="dropdown"></select>
 </div>`;
 

diff --git a/src/components/module-nav/module-nav.switcher.js b/src/components/module-nav/module-nav.switcher.js
@@ -21,6 +21,8 @@ const MODULE_NAV_SWITCHER_DEFAULTS = {
   displayMode: MODULE_NAV_DISPLAY_MODES[0],
   generate: true,
   icon: () => SWITCHER_ICON_HTML,
+  moduleButtonText: 'Standard Module',
+  roleDropdownLabel: 'Roles',
   roles: []
 };
 
@@ -154,7 +156,7 @@ ModuleNavSwitcher.prototype = {
 
   renderModuleButton() {
     if (this.settings.generate && (!this.moduleButtonContainerEl || !this.moduleButtonEl)) {
-      this.element[0].insertAdjacentHTML('afterbegin', buttonTemplate());
+      this.element[0].insertAdjacentHTML('afterbegin', buttonTemplate(this.settings.moduleButtonText));
     }
     if (this.moduleButtonEl) {
       $(this.moduleButtonEl).button({
@@ -165,7 +167,7 @@ ModuleNavSwitcher.prototype = {
 
   renderRoleDropdown() {
     if (this.settings.generate && (!this.roleDropdownContainerEl || !this.roleDropdownEl)) {
-      this.element[0].insertAdjacentHTML('beforeend', dropdownTemplate());
+      this.element[0].insertAdjacentHTML('beforeend', dropdownTemplate(this.settings.roleDropdownLabel));
     }
     if (!$(this.roleDropdownEl).find('option').length) {
       this.renderDropdownOptions();