chore: Fix linting errors

blocks/banner/banner.js

@@ -1,2 +0,0 @@
-export default async function decorate(block) {
-}

blocks/calculator/calculator.js

@@ -15,13 +15,7 @@ function decorateCurrency(block) {
 }
 function setBubble(range, bubble, termVals) {
   const val = range.value;
-  const min = range.min ? range.min : 0;
-  const max = range.max ? range.max : 100;
-  const newVal = Number(((val - min) * 100) / (max - min));
   bubble.innerHTML = termVals[parseInt(val, 10)];
-
-  // Sorta magic numbers based on size of the native UI thumb
-  //bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
 }
 
 function buildRepayCalcTab(config, placeholders) {
@@ -56,11 +50,11 @@ function buildRepayCalcTab(config, placeholders) {
     </div>
     <div class="right-panel">
       <div class="result-panel">
-        <p>${placeholders["monthlypaybacklabel"]}</p>
+        <p>${placeholders.monthlypaybacklabel}</p>
         <p class="calulated-value green">R190.18</p>
-        <p>${placeholders["totalpaybacklabel"]}</p>
+        <p>${placeholders.totalpaybacklabel}</p>
         <p class="calulated-value">R4,564.32</p>
-        <label for='repayment-rate-range'>${placeholders["interestratelabel"]}</label>
+        <label for='repayment-rate-range'>${placeholders.interestratelabel}</label>
         <div class="range-wrap">
           <output id='repayment-rate-val' class='bubble'></output>
           <input id='repayment-rate-range' type="range" class="range" min="0" max="35">
@@ -69,11 +63,11 @@ function buildRepayCalcTab(config, placeholders) {
             <div class='text-muted'>25.75%</div>
           </div>
         </div>
-        <p>${placeholders["repymentinfomsg"]}</p>
+        <p>${placeholders.repymentinfomsg}</p>
       </div>
       <div class="actions">
-        <a href="#">${placeholders["seeloandetail"]}</a>
-        <a class="button primary" href="#">${placeholders["startloanapplication"]}</a>
+        <a href="#">${placeholders.seeloandetail}</a>
+        <a class="button primary" href="#">${placeholders.startloanapplication}</a>
       </div>
     </div>
   </div>
@@ -82,7 +76,7 @@ function buildRepayCalcTab(config, placeholders) {
   const termRange = calc.querySelector('#repayment-term-range');
   const termBubble = calc.querySelector('#repayment-term-val');
   const termVals = ['6 Months', '1 Year', '2 Years', '3 Years', '4 Years', '5 Years', '6 Years'];
-  termRange.addEventListener('input', (evt) => {
+  termRange.addEventListener('input', () => {
     setBubble(termRange, termBubble, termVals);
   });
   setBubble(termRange, termBubble, termVals);
@@ -93,15 +87,14 @@ function buildRepayCalcTab(config, placeholders) {
   for (let r = 0; r <= 35; r += 1) {
     rateVal.push(`${8.25 + 0.5 * r}%`);
   }
-  rateRange.addEventListener('input', (evt) => {
+  rateRange.addEventListener('input', () => {
     setBubble(rateRange, rateBubble, rateVal);
   });
   setBubble(rateRange, rateBubble, rateVal);
 
   return calc;
 }
 
-
 function buildLoanCalcTab(config) {
   const calc = document.createElement('div');
   calc.innerHTML = `
@@ -168,7 +161,7 @@ function buildLoanCalcTab(config) {
   const termRange = calc.querySelector('#loan-term-range');
   const termBubble = calc.querySelector('#loan-term-val');
   const termVals = ['6 Months', '1 Year', '2 Years', '3 Years', '4 Years', '5 Years', '6 Years'];
-  termRange.addEventListener('input', (evt) => {
+  termRange.addEventListener('input', () => {
     setBubble(termRange, termBubble, termVals);
   });
   setBubble(termRange, termBubble, termVals);
@@ -179,7 +172,7 @@ function buildLoanCalcTab(config) {
   for (let r = 0; r <= 35; r += 1) {
     rateVal.push(`${8.25 + 0.5 * r}%`);
   }
-  rateRange.addEventListener('input', (evt) => {
+  rateRange.addEventListener('input', () => {
     setBubble(rateRange, rateBubble, rateVal);
   });
   setBubble(rateRange, rateBubble, rateVal);

blocks/cards/cards.css

@@ -1,8 +1,8 @@
 /*!
  * This is a autogenerated file. Please don't change the content directly.
- * To change the css, change the same named .less file. 
+ * To change the css, change the same named .less file.
  * After changing .less file, run 'npm run lessc' from terminal to autogenerate .css file.
- */
+ */aaaaaa
 /* cards-container */
 .section.cards-container {
   display: flex;
@@ -671,7 +671,7 @@
     justify-content: space-evenly;
   }
 }
-@media (min-width: 1100px) {
+@media (min-width: 1281px) {
   .cards.large li {
     flex-basis: 0;
   }

blocks/carousel/carousel.js

@@ -1,7 +1,7 @@
 function calculateScrollbarWidth() {
   document.documentElement.style.setProperty(
     '--scrollbar-width',
-    `${window.innerWidth - document.documentElement.clientWidth}px`
+    `${window.innerWidth - document.documentElement.clientWidth}px`,
   );
 }
 
@@ -47,7 +47,7 @@ function getVisibleSlide(event) {
 export default function decorate(block) {
   const buttons = document.createElement('div');
   const autoPlayList = [];
-  let carouselInterval = null;
+  const carouselInterval = null;
 
   // dots
   buttons.className = 'carousel-buttons';
@@ -67,7 +67,7 @@ export default function decorate(block) {
 
     /* buttons */
     const button = document.createElement('button');
-    button.setAttribute('aria-label', `Carousel Button ${i}`)
+    button.setAttribute('aria-label', `Carousel Button ${i}`);
     if (!i) button.classList.add('selected');
     button.addEventListener('click', () => {
       window.clearInterval(carouselInterval);
@@ -109,4 +109,4 @@ export default function decorate(block) {
 
   calculateScrollbarWidth();
   window.addEventListener('resize', calculateScrollbarWidth, false);
-}
+}

blocks/footer/footer.js

@@ -1,4 +1,6 @@
-import { readBlockConfig, decorateIcons, decorateSections, getRootPath } from '../../scripts/scripts.js';
+import {
+  readBlockConfig, decorateIcons, decorateSections, getRootPath,
+} from '../../scripts/scripts.js';
 
 function decorateFooterLinks(footer) {
   let footerLinkGroup = [];

blocks/header/header.js

@@ -1,4 +1,6 @@
-import { readBlockConfig, decorateIcons, makeLinksRelative, getRootPath } from '../../scripts/scripts.js';
+import {
+  readBlockConfig, decorateIcons, makeLinksRelative, getRootPath,
+} from '../../scripts/scripts.js';
 
 /**
  * collapses all open nav sections

blocks/hero/hero.js

@@ -1,10 +1,10 @@
 export default async function decorate(block) {
-    block.querySelectorAll(':scope > div > div').forEach(element => {
+  block.querySelectorAll(':scope > div > div').forEach(() => {
 
-    });
-    const heroPic = block.querySelector(':scope picture');
-    if (heroPic) {
-        block.querySelector(':scope > div').append(heroPic);
-    }
-    return block;
-}
+  });
+  const heroPic = block.querySelector(':scope picture');
+  if (heroPic) {
+    block.querySelector(':scope > div').append(heroPic);
+  }
+  return block;
+}

blocks/related-posts/related-posts.js

@@ -1,5 +1,5 @@
 import {
-  loadBlock, buildBlock, decorateBlock, readBlockConfig,
+  loadBlock, buildBlock, decorateBlock,
 } from '../../scripts/scripts.js';
 
 const carouselCards = [];
@@ -14,10 +14,10 @@ function formatDate(date) {
 
 export default async function decorate(block) {
   block.innerHTML = '';
-  const response = await fetch('/query-index.json')
+  const response = await fetch('/query-index.json');
   const json = await response.json();
-  var dataArr = json.data;
-  for (const itr of dataArr) {
+  const dataArr = json.data;
+  dataArr.forEach((itr) => {
     const carouselCard = [];
     const pic = document.createElement('picture');
     pic.innerHTML = `
@@ -33,7 +33,7 @@ export default async function decorate(block) {
     const description = document.createElement('strong');
     const author = document.createElement('div');
     author.classList.add('author');
-    const pdate = document.createElement("p");
+    const pdate = document.createElement('p');
     const publishDate = document.createElement('em');
 
     const readTime = document.createElement('div');
@@ -44,16 +44,16 @@ export default async function decorate(block) {
 
     title.textContent = itr.title;
     description.textContent = itr.description;
-    author.textContent = "By " + itr.author;
-    publishDate.textContent = 'Published ' + formatDate(itr.date) + ' in Loans';
+    author.textContent = `By ${itr.author}`;
+    publishDate.textContent = `Published ${formatDate(itr.date)} in Loans`;
     readTime.textContent = itr.readTime;
-    readLink.textContent = "Read >"
+    readLink.textContent = 'Read >';
     a.href = itr.path;
     a.appendChild(readLink);
     carouselCard.push(pic);
 
-    var read = document.createElement("div");
-    var carouselText = document.createElement("div");
+    const read = document.createElement('div');
+    const carouselText = document.createElement('div');
     carouselText.appendChild(author);
     pdate.appendChild(publishDate);
     carouselText.appendChild(pdate);
@@ -67,7 +67,7 @@ export default async function decorate(block) {
 
     carouselCard.push(carouselText);
     carouselCards.push(carouselCard);
-  }
+  });
   const multiImageCarousel = buildBlock('carousel', carouselCards);
   multiImageCarousel.classList.add('multiImageCarousel');
   block.appendChild(multiImageCarousel);

blocks/tabs/tabs.js

@@ -1,6 +1,5 @@
 // mobile vs desktop
 const mediaQueryPhone = window.matchMedia('(max-width: 599px)');
-const mediaQueryTablet = window.matchMedia('(max-width: 1024px)');
 
 function openTab(e) {
   const { target } = e;
@@ -32,87 +31,12 @@ function openTab(e) {
   }
 }
 
-function scrollTab(title) {
-  title.scrollIntoView({ block: 'nearest' });
-}
-
-function getVisibleTab(event) {
-  const { target } = event;
-  const dots = target.querySelectorAll('.tabs-dots-dot');
-  const tabTitles = target.querySelectorAll('.tabs-title');
-  const leftPosition = target.scrollLeft;
-  let leftPadding = 0;
-
-  // skip larger screens that don't do the carousel
-  if (!mediaQueryTablet.matches) return;
-
-  tabTitles.forEach((tabTitle, key) => {
-    const offset = tabTitle.offsetLeft;
-
-    // set first offset (extra padding?)
-    if (key === 0) leftPadding = offset;
-
-    if (offset - leftPadding === leftPosition) {
-      // set active dot
-      dots[key].setAttribute('aria-selected', true);
-
-      // trigger default functionality
-      openTab({ target: tabTitle });
-    } else {
-      // remove active classes
-      dots[key].setAttribute('aria-selected', false);
-    }
-  });
-}
-
-function buildDotNav(block) {
-  // count tabs
-  const count = block.querySelectorAll('.tabs-title').length;
-  const dots = document.createElement('ol');
-  dots.classList.add('tabs-dots');
-
-  // make dots
-  [...new Array(count).fill('').keys()].forEach(() => {
-    const dot = document.createElement('li');
-    dot.classList.add('tabs-dots-dot');
-    dot.setAttribute('aria-selected', false);
-    dots.append(dot);
-  });
-
-  // add dynamic grid number, +1 for dots
-  block.style.gridTemplateRows = `repeat(${count + 1}, min-content)`;
-
-  // attach click listener
-  [...dots.children].forEach((dot, key) => {
-    dot.addEventListener('click', (event) => {
-      const { target } = event;
-      const title = [...block.querySelectorAll('.tabs-title')][key];
-
-      // skip selected
-      if (target.getAttribute('aria-selected') === 'true') return;
-
-      // scroll to title
-      scrollTab(title);
-    });
-  });
-
-  // add dots
-  block.append(dots);
-
-  // attach listener
-  block.addEventListener('scroll', getVisibleTab);
-}
-
 export default function decorate(block) {
   [...block.children].forEach((tab) => {
     // setup tab title
     const title = tab.querySelector(':is(h2,h3,h4,h5,h6)');
-    const anchor = title.querySelector('a');
     const open = title.querySelector('strong') !== null; // bold title indicates auto-open tab
-    let titleElement;
-
-
-    titleElement = title;
+    const titleElement = title;
     titleElement.innerHTML = title.textContent;
     titleElement.addEventListener('click', openTab);
 
@@ -126,12 +50,8 @@ export default function decorate(block) {
     content.setAttribute('aria-hidden', !open);
     // move tab and content to block root
     block.append(titleElement, content);
-
-
     tab.remove();
   });
-
-
   // if no tabs are open, open first tab by default
   if (!block.querySelector('.tabs-title[aria-selected="true"]')) {
     block.querySelector('.tabs-title').setAttribute('aria-selected', true);