Add class notranslate to some elements to prevent translating their content

Author: yoksel

src/index-tmpl.html

@@ -44,7 +44,7 @@ <h1 class="visually-hidden"><%= htmlWebpackPlugin.options.TITLE %></h1>
     <button class="theme-control" type="button">Change theme</button>
 
     <template id="demo-tmpl">
-      <div class="demo">
+      <div class="demo notranslate">
         <div class="demo__content">
           <div class="demo__view">
             <div class="parent">

src/js/components/group.js

@@ -40,7 +40,7 @@ export class Group {
     let className = 'group__title';
 
     if (hideTitle) {
-      className = 'visually-hidden';
+      className += ' visually-hidden';
     }
 
     return createElement(`<h2 class="${className}">

src/js/components/nav.js

@@ -126,7 +126,7 @@ export class Nav {
           >${name}</a>${itemsMarkup}</li>`;
     });
 
-    return `<ul class="nav__list ${customClass}">${itemsList.join('')}</ul>`;
+    return `<ul class="nav__list notranslate ${customClass}">${itemsList.join('')}</ul>`;
   }
 
   _navClickHandler (ev) {

src/js/components/prop-section.js

@@ -54,7 +54,7 @@ export class PropSection {
   }
 
   _getTitleElement () {
-    return createElement(`<h3 class="prop__title">
+    return createElement(`<h3 class="prop__title  notranslate">
       ${this._data.name}
       <a class="self-link" href="#${this._sectionId}"></a>
     </h3>`);
@@ -112,7 +112,7 @@ export class PropSection {
 
       markup += `<dt
         id="${id}"
-        class="prop-values__term">
+        class="prop-values__term notranslate">
         ${name}
         <a class="self-link" href="#${id}"></a>
       </dt>
@@ -126,6 +126,7 @@ export class PropSection {
       ">
       <h4 class="
         prop-values__title
+        notranslate
         ${isTitleHidden ? 'visually-hidden' : ''}
       ">${title}</h4>
       <dl class="prop-values__list">${markup}</dl>