Tabbed Navigation component (#1054)

* creating custom tab navigation

* adding active class when tab is clicked

* linting

---------

Co-authored-by: Hector Correa <[email protected]>

Author: JaymeeH

app/assets/stylesheets/_settings.scss

@@ -60,7 +60,8 @@
     margin-top: 0.5em;
   }
 }
-
+// TODO
+// Turn the tab nav css into a mixin component
 #welcome {
   .emulation {
     display: inline-flex;
@@ -74,7 +75,30 @@
     margin-top: 11px;
     margin-left: 22em;
   }
+  .tab-nav {
+    padding: 0;
+    border: none;
+    background: none;
+
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+
+    // Typography
+    color: var(--Neutral-Black, #121212);
+    /* Body S Bold */
+    font-family: "Libre Franklin";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+
+    // states
+    button:active {
+      color: var(--Primary-Blue, #0d6efd);
+    }
 
+  }
   #emulation_bar {
     margin-left: 5px;
   }

app/javascript/entrypoints/application.js

@@ -240,6 +240,39 @@ function showValidationError() {
   });
 }
 
+function tabNav() {
+  $('#tab-nav').on('mouseenter', (el) => {
+    const element = el;
+    element.preventDefault();
+    const tab = document.getElementById('tab-nav');
+
+    if (!tab.classList.contains('active')) {
+      tab.style.borderBottom = 'solid';
+      tab.style.borderColor = '#121212';
+    }
+  });
+
+  $('#tab-nav').on('mouseleave', (el) => {
+    const element = el;
+    element.preventDefault();
+    const tab = document.getElementById('tab-nav');
+
+    if (!tab.classList.contains('active')) {
+      tab.style.border = 'none';
+    }
+  });
+
+  $('#tab-nav').on('click', (el) => {
+    const element = el;
+    element.preventDefault();
+    const tab = document.getElementById('tab-nav');
+    // change background color to red
+    tab.style.borderBottom = 'solid';
+    tab.style.borderColor = '#E77500';
+    tab.classList.add('active');
+  });
+}
+
 function initPage() {
   $('#test-jquery').click((event) => {
     setTargetHtml(event, 'jQuery works!');
@@ -250,6 +283,7 @@ function initPage() {
   showMoreLessSysAdmin();
   emulate();
   showValidationError();
+  tabNav();
 }
 
 window.addEventListener('load', () => initPage());

app/views/welcome/styles_preview.html.erb

@@ -1,5 +1,9 @@
-<h1>Styles Preview</h1>
+<div id="welcome">
+    <button id="tab-nav" class="tab-nav"> Activity</button>
+</div>
 
+
+<h1>Styles Preview</h1>
 <p>This page shows the styles that have been implemented for this site's look and feel.</p>
 
 <h1>Heading Level 1</h1>
@@ -38,14 +42,3 @@
 <div class="status-warning">Status Warning</div>
 <div class="status-info">Status Info</div>
 </div>
-
-
-
-
-
-
-
-
-
-
-