adding new lux header (#1013)

* adding new lux header

* updating packages

* adding lux header dropdown component

* linting and dependencies

* refining header and importing appropriate utils

* updating yarn install

* fixing mediaflux version bug

* settings

* eslint

* more linting

* adding vite import and resolves to get lux working

* drafting lux header

* finalizing new TD header

* tests

Author: JaymeeH

app/assets/stylesheets/_settings.scss

@@ -1,3 +1,4 @@
+
 .container{ //Main body of every page
   background-color: rgb(255, 255, 255);
   padding-top: 2em;

app/assets/stylesheets/application.scss

@@ -10,7 +10,8 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  */
-
+/* Import the LUX styles */
+@import "lux-design-system/dist/style.css";
 @import "bootstrap";
 @import "variables";
 
@@ -36,4 +37,3 @@ body {
     }
 }
 
-

app/javascript/entrypoints/application.js

@@ -12,13 +12,30 @@ import 'bootstrap/js/src/scrollspy';
 
 import * as bootstrap from 'bootstrap';
 
+// ActionCable Channels
+import '../channels';
+
+import { createApp } from 'vue';
+import lux from 'lux-design-system';
 import { setTargetHtml } from './helper';
 import UserDatalist from './user_datalist';
 import { displayMediafluxVersion } from './mediafluxVersion';
 import { showCreateScript } from './atermScripts';
 
-// ActionCable Channels
-import '../channels';
+import 'lux-design-system/dist/style.css';
+import '../../assets/stylesheets/application.scss';
+
+const app = createApp({});
+const createMyApp = () => createApp(app);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const elements = document.getElementsByClassName('lux');
+  for (let i = 0; i < elements.length; i += 1) {
+    createMyApp()
+      .use(lux)
+      .mount(elements[i]);
+  }
+});
 
 window.bootstrap = bootstrap;
 window.displayMediafluxVersion = displayMediafluxVersion;

app/views/layouts/application.html.erb

@@ -9,11 +9,11 @@
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+
     <%= action_cable_meta_tag %>
     <%= vite_client_tag %>
-    <script src="//code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <%= vite_javascript_tag 'application' %>
+    <script src="//code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 
     <!--
       If using a TypeScript entrypoint file:

app/views/shared/_header.html.erb

@@ -1,16 +1,23 @@
-<header>
-<div id="header">
-  <nav>
-    <a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a>
-    <div class="body">
-    <%= link_to "Home", root_path, class: "navbar-brand"%>
+<nav>
+  <div class="lux">
     <% if current_user %>
-      User: <%= current_user.uid%>
-      <%= link_to "Log Out", main_app.destroy_user_session_path, class: "btn btn-warning btn-sm" %>
+      <lux-library-header abbr-name="TD" theme="dark">
+        <template v-slot:logo> <a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a> </template>
+        <lux-menu-bar type="main-menu" :menu-items="[
+          {name: 'Contact US', component: 'Home', href: 'mailto:[email protected]'},
+          {name: 'FAQ', component: 'Home', href: 'https://tigerdata.princeton.edu/frequently-asked-questions'},
+          {name: '<%= current_user.display_name %>', component: 'Account', href: '/account/', children: [
+            {name: 'Account Settings', component: 'Account', href: '/'},
+            {name: 'Logout', component: 'Logout', href: '<%= main_app.destroy_user_session_path %> '}
+            ]}
+          ]"
+        ></lux-menu-bar>
+      </lux-library-header>
     <% else %>
-      <%= button_to "Log In", user_cas_omniauth_authorize_path, class: "btn btn-warning btn-sm" %>
+      <lux-library-header abbr-name="TD" theme="dark">
+        <template v-slot:logo><a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a> </template>
+        <%= button_to "Log In", user_cas_omniauth_authorize_path, class: "btn btn-warning btn-sm" %>
+      </lux-library-header>
     <% end %>
-    </div>
-  </nav>
-</div>
-</header>
+  </div>
+</nav>