example theme switch to p-theme-toggle__button class, set label in ja…

…vascript
canonical · May 29, 2024 · 882e5b0 · 882e5b0
1 parent 9f8cd49
commit 882e5b0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/scss/docs/example.scss b/scss/docs/example.scss
@@ -27,10 +27,6 @@ body {
   position: fixed;
   right: 0;
 
-  .u-theme-toggle__button {
-    text-transform: capitalize;
-  }
-
   @media only percy {
     visibility: hidden !important;
   }

diff --git a/templates/static/js/example-tools.js b/templates/static/js/example-tools.js
@@ -63,14 +63,23 @@ var activeTheme = DEFAULT_COLOR_THEME;
   }
 
   /**
-   * Converts a theme name to its JS toggler class name, used for targeting it with JS events
+   * Converts a theme name to its JS toggler identifier name, used for targeting it with JS events
    * @param {String} themeName
    * @returns {string}
    */
   function convertThemeNameToButtonIdentifier(themeName) {
     return `js-${themeName}-theme-toggle`;
   }
 
+  /**
+   * Converts a string to titlecase (first letter capitalized & subsequent letters lowercase)
+   * @param {String} str
+   * @returns {string}
+   */
+  function titleCase(str) {
+    return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`;
+  }
+
   /**
    * Sets a color theme as active; removes all other color themes from active status
    * @param {String} themeToSelect
@@ -128,7 +137,7 @@ var activeTheme = DEFAULT_COLOR_THEME;
         if (SUPPORTED_THEMES?.length > 1) {
           var themeSwitcherControls = SUPPORTED_THEMES.map(
             (themeName) =>
-              `<button id="${convertThemeNameToButtonIdentifier(themeName)}" class="p-segmented-control__button u-theme-toggle__button is-dense" role="button" aria-selected="${body.classList.contains(convertThemeNameToClassName(themeName))}" data-color-theme-name="${themeName}">${themeName}</button>`,
+              `<button id="${convertThemeNameToButtonIdentifier(themeName)}" class="p-segmented-control__button p-theme-toggle__button is-dense" role="button" aria-selected="${body.classList.contains(convertThemeNameToClassName(themeName))}" data-color-theme-name="${themeName}">${titleCase(themeName)}</button>`,
           );
           var themeSwitcherSegmentedControl = fragmentFromString(
             `<div class="p-segmented-control u-theme-toggle"><div class="p-segmented-control__list">${themeSwitcherControls.join('')}</div></div>`,
@@ -147,7 +156,7 @@ var activeTheme = DEFAULT_COLOR_THEME;
       body.appendChild(controls);
 
       // Below code relies on the controls already existing in the DOM, so must come after `body.appendChild`.
-      var themeToggleButtons = document.querySelectorAll('.u-theme-toggle__button');
+      var themeToggleButtons = document.querySelectorAll('.p-theme-toggle__button');
       themeToggleButtons.forEach((themeToggleButton) => {
         themeToggleButton.addEventListener('click', () => {
           selectColorTheme(themeToggleButton.getAttribute('data-color-theme-name'));