From 2b60cace731a7a93c15052f0f52d54661ae1eb4e Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Fri, 26 Mar 2021 18:06:30 +0530
Subject: [PATCH] Use template literals instead of concatenation

---
 js/src/collapse.js       |  3 +--
 js/src/modal.js          |  2 +-
 js/src/popover.js        | 10 +++++-----
 js/src/tooltip.js        |  8 ++++----
 js/src/util/index.js     |  6 ++----
 js/src/util/scrollbar.js |  2 +-
 6 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/js/src/collapse.js b/js/src/collapse.js
index 6cb14cdd26aa..5ceec2cbf837 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -72,8 +72,7 @@ class Collapse extends BaseComponent {
     this._isTransitioning = false
     this._config = this._getConfig(config)
     this._triggerArray = SelectorEngine.find(
-      `${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],` +
-      `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]`
+      `${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]`
     )
 
     const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
diff --git a/js/src/modal.js b/js/src/modal.js
index 2966f03fb5d1..4ce910dc6a5b 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -474,7 +474,7 @@ class Modal extends BaseComponent {
         const actualValue = element.style[styleProp]
         const calculatedValue = window.getComputedStyle(element)[styleProp]
         Manipulator.setDataAttribute(element, styleProp, actualValue)
-        element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
+        element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
       })
   }
 
diff --git a/js/src/popover.js b/js/src/popover.js
index fa8d2c961176..b5ad131890a3 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -28,11 +28,11 @@ const Default = {
   offset: [0, 8],
   trigger: 'click',
   content: '',
-  template: '<div class="popover" role="tooltip">' +
-              '<div class="popover-arrow"></div>' +
-                '<h3 class="popover-header"></h3>' +
-              '<div class="popover-body"></div>' +
-            '</div>'
+  template: `<div class="popover" role="tooltip">
+              <div class="popover-arrow"></div>
+              <h3 class="popover-header"></h3>
+              <div class="popover-body"></div>
+            </div>`
 }
 
 const DefaultType = {
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 4fea1c9646e3..6f5501a89d16 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -71,10 +71,10 @@ const AttachmentMap = {
 
 const Default = {
   animation: true,
-  template: '<div class="tooltip" role="tooltip">' +
-              '<div class="tooltip-arrow"></div>' +
-              '<div class="tooltip-inner"></div>' +
-            '</div>',
+  template: `<div class="tooltip" role="tooltip">
+              <div class="tooltip-arrow"></div>
+              <div class="tooltip-inner"></div>
+            </div>`,
   trigger: 'hover focus',
   title: '',
   delay: 0,
diff --git a/js/src/util/index.js b/js/src/util/index.js
index a7578b18004a..cc35d8a37c4c 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -48,7 +48,7 @@ const getSelector = element => {
 
     // Just in case some CMS puts out a full URL with the anchor appended
     if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
-      hrefAttr = '#' + hrefAttr.split('#')[1]
+      hrefAttr = `#${hrefAttr.split('#')[1]}`
     }
 
     selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
@@ -128,9 +128,7 @@ const typeCheckConfig = (componentName, config, configTypes) => {
 
     if (!new RegExp(expectedTypes).test(valueType)) {
       throw new TypeError(
-        `${componentName.toUpperCase()}: ` +
-        `Option "${property}" provided type "${valueType}" ` +
-        `but expected type "${expectedTypes}".`
+        `${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`
       )
     }
   })
diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index 3e619ef51e43..e63a66bf218b 100644
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -35,7 +35,7 @@ const _setElementAttributes = (selector, styleProp, callback) => {
       const actualValue = element.style[styleProp]
       const calculatedValue = window.getComputedStyle(element)[styleProp]
       Manipulator.setDataAttribute(element, styleProp, actualValue)
-      element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
+      element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
     })
 }