Use lux-heading and lux-text-style components from lux (#996)

* These components now have the lux- prefix * They need to be added to each instance of the vue app Co-authored-by: Christina Chortaria <[email protected]>
pulibrary · Feb 15, 2024 · 281b553 · 281b553
1 parent 785fb30
commit 281b553
Show file tree

Hide file tree

Showing 41 changed files with 142 additions and 147 deletions.
diff --git a/app/javascript/components/travelEstimateForm.vue b/app/javascript/components/travelEstimateForm.vue
@@ -10,7 +10,7 @@
           columns="lg-1 sm-12"
           class="expense-delete"
         >
-          <text-style>Delete</text-style>
+          <lux-text-style>Delete</lux-text-style>
         </grid-item>
         <grid-item
           vertical="center"
@@ -24,25 +24,25 @@
           vertical="center"
           columns="lg-1 sm-12"
         >
-          <text-style>Occurrences</text-style>
+          <lux-text-style>Occurrences</lux-text-style>
         </grid-item>
         <grid-item
           vertical="center"
           columns="lg-2 sm-12"
         >
-          <text-style>Cost per Occurrence</text-style>
+          <lux-text-style>Cost per Occurrence</lux-text-style>
         </grid-item>
         <grid-item
           vertical="center"
           columns="lg-4 sm-12"
         >
-          <text-style>Note</text-style>
+          <lux-text-style>Note</lux-text-style>
         </grid-item>
         <grid-item
           vertical="center"
           columns="lg-2 sm-12"
         >
-          <text-style>Total</text-style>
+          <lux-text-style>Total</lux-text-style>
         </grid-item>
       </grid-container>
     </grid-item>

diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
@@ -26,22 +26,25 @@ import travelRequestButton from "../components/travelRequestButton.vue";
 import travelRequestDatePickers from "../components/travelRequestDatePickers.vue";
 import '../../assets/stylesheets/application.scss';
 
+// Create a factory function that will create vue
+// apps, which we can then mount to any element with
+// the class .lux
+const app = createApp({});
+const createMyApp = () => createApp(app)
 
-
-// create the LUX app and mount it to wrappers with class="lux"
 document.addEventListener("DOMContentLoaded", () => {
     const elements = document.getElementsByClassName("lux");
     for (let i = 0; i < elements.length; i++) {
-        const app = createApp({});
-        app.use(lux);
-        app.component('event-date-modal', eventDateModal)
-            .component('event-title-input-wrapper', eventTitleInputWrapper)
-            .component('hours-calculator', hoursCalculator)
-            .component('travel-estimate-form', travelEstimateForm)
-            .component('travel-request-button', travelRequestButton)
-            .component('travel-request-date-pickers', travelRequestDatePickers)
-            console.log(app);
-        app.mount(elements[i]);
+        // Call our factory function, then add all the lux components
+        // and approvals components to it
+        createMyApp().use(lux)
+                     .component('event-date-modal', eventDateModal)
+                     .component('event-title-input-wrapper', eventTitleInputWrapper)
+                     .component('hours-calculator', hoursCalculator)
+                     .component('travel-estimate-form', travelEstimateForm)
+                     .component('travel-request-button', travelRequestButton)
+                     .component('travel-request-date-pickers', travelRequestDatePickers)
+                     .mount(elements[i]);
     }
 });
 
diff --git a/app/views/absence_requests/_balances.html.erb b/app/views/absence_requests/_balances.html.erb
@@ -1,21 +1,21 @@
   <card size="full-width" class="absence">
     <card-content>
-      <heading level="h2" size="h5"><%= balance_title %></heading>
-      <heading level="h3" size="h4">
+      <lux-heading level="h2" size="h5"><%= balance_title %></lux-heading>
+      <lux-heading level="h3" size="h4">
         <lux-icon-base icon-name="vacation"><lux-icon-vacation></lux-icon-vacation></lux-icon-base>
         Vacation
-      </heading>
-      <text-style><%= vacation_balance.round(2) %>  Hours</text-style>
-      <heading level="h3" size="h4">
+      </lux-heading>
+      <lux-text-style><%= vacation_balance.round(2) %>  Hours</lux-text-style>
+      <lux-heading level="h3" size="h4">
         <lux-icon-base icon-name="relax"><lux-icon-relax></lux-icon-relax></lux-icon-base>
         Personal
-      </heading>
-      <text-style><%= personal_balance.round(2) %> Hours</text-style>
-      <heading level="h3" size="h4">
+      </lux-heading>
+      <lux-text-style><%= personal_balance.round(2) %> Hours</lux-text-style>
+      <lux-heading level="h3" size="h4">
       <lux-icon-base icon-name="hospital">
         <lux-icon-hospital></lux-icon-hospital></lux-icon-base>
         Sick
-      </heading>
-      <text-style><%= sick_balance.round(2) %> Hours</text-style>
+      </lux-heading>
+      <lux-text-style><%= sick_balance.round(2) %> Hours</lux-text-style>
     </card-content>
   </card>
diff --git a/app/views/absence_requests/_form.html.erb b/app/views/absence_requests/_form.html.erb
@@ -44,7 +44,7 @@
       </grid-item>
 
       <grid-item columns="lg-12 sm-12">
-      <text-style variation="emphasis">This request will be submitted to: <%= request_change_set.supervisor %></text-style>
+      <lux-text-style variation="emphasis">This request will be submitted to: <%= request_change_set.supervisor %></lux-text-style>
         <input-button type="submit" variation="solid">Submit Request</input-button>
       </grid-item>
     </grid-container>

diff --git a/app/views/absence_requests/_index_detail.html.erb b/app/views/absence_requests/_index_detail.html.erb
@@ -7,15 +7,15 @@
     ><<%= absence_request.absence_type_icon %> /></lux-icon-base>
   </card-media>
   <card-header>
-    <heading level="h2" size="h3"><hyperlink href="<%= absence_request_path(absence_request.to_model)%>"><%= absence_request.event_title_brief %></hyperlink></heading>
-    <text-style><%= absence_request.formatted_full_start_date %> to <%= absence_request.formatted_full_end_date %></text-style>
+    <lux-heading level="h2" size="h3"><hyperlink href="<%= absence_request_path(absence_request.to_model)%>"><%= absence_request.event_title_brief %></hyperlink></lux-heading>
+    <lux-text-style><%= absence_request.formatted_full_start_date %> to <%= absence_request.formatted_full_end_date %></lux-text-style>
   </card-header>
   <card-content class="right-align">
     <tag type="tag" :tag-items="[
       {name: '<%= absence_request.latest_status %>', color: '<%= absence_request.status_color %>'}
       ]"
       horizontal="end"
       size="small"></tag>
-    <text-style type="span" variation="small"><%= absence_request.latest_status_date %></text-style>
+    <lux-text-style type="span" variation="small"><%= absence_request.latest_status_date %></lux-text-style>
   </card-content>
 </card>
diff --git a/app/views/absence_requests/_notes_card.html.erb b/app/views/absence_requests/_notes_card.html.erb
@@ -1,8 +1,8 @@
 <card size="full-width">
     <card-content>
-        <heading level="h3" size="h3">
+        <lux-heading level="h3" size="h3">
             History
-          </heading>
+          </lux-heading>
           <ul class="notes">
             <%= render partial: "shared/request_note", collection:
               request.notes_and_changes, as: :note %>

diff --git a/app/views/absence_requests/_review_detail.html.erb b/app/views/absence_requests/_review_detail.html.erb
@@ -7,15 +7,15 @@
     ><<%= absence_request.absence_type_icon %> /></lux-icon-base>
   </card-media>
   <card-header>
-    <heading level="h2" size="h3"><hyperlink href="<%= review_absence_request_path(absence_request.to_model)%>"><%= absence_request.creator %> - <%= absence_request.event_title_brief %></hyperlink></heading>
-    <text-style><%= absence_request.formatted_full_start_date %> to <%= absence_request.formatted_full_end_date %></text-style>
+    <lux-heading level="h2" size="h3"><hyperlink href="<%= review_absence_request_path(absence_request.to_model)%>"><%= absence_request.creator %> - <%= absence_request.event_title_brief %></hyperlink></lux-heading>
+    <lux-text-style><%= absence_request.formatted_full_start_date %> to <%= absence_request.formatted_full_end_date %></lux-text-style>
   </card-header>
   <card-content>
     <tag type="tag" :tag-items="[
       {name: '<%= absence_request.latest_status %>', color: '<%= absence_request.status_color %>'}
       ]"
       horizontal="end"
       size="small"></tag>
-    <text-style type="span" variation="small"><%= absence_request.latest_status_date %></text-style>
+    <lux-text-style type="span" variation="small"><%= absence_request.latest_status_date %></lux-text-style>
   </card-content>
 </card>
diff --git a/app/views/absence_requests/_review_form.html.erb b/app/views/absence_requests/_review_form.html.erb
@@ -17,7 +17,7 @@
       <grid-item columns="lg-6 sm-12" order="order-lg-3 order-sm-2">
         <card size="full-width">
           <card-content>
-              <text-style variation="strong">Team members absent during this time period</text-style>
+              <lux-text-style variation="strong">Team members absent during this time period</lux-text-style>
               <ul class="staff"><%=  render partial: "shared/absent_staff", collection: request_change_set.absent_staff, as: :staff %></ul>
           </card-content>
         </card>

diff --git a/app/views/absence_requests/_title_card.html.erb b/app/views/absence_requests/_title_card.html.erb
@@ -10,18 +10,18 @@
           ]"></tag>
   </card-media>
   <card-header>
-      <heading level="h1" size="h3">
+      <lux-heading level="h1" size="h3">
         <span class="event-requestor"
           ><%= request.full_name %></span
         >
         <span class="event-title"><%= request.event_title %></span>
-      </heading>
+      </lux-heading>
     </card-header>
     <card-content>
         <div class="status-<%= request.status_color %>">
-          <heading level="h2" size="h3"
-            ><text-style variation="default">Total Hours</text-style><%=
-            request.hours_requested %></heading
+          <lux-heading level="h2" size="h3"
+            ><lux-text-style variation="default">Total Hours</lux-text-style><%=
+            request.hours_requested %></lux-heading
           >
         </div>
       </card-content>

diff --git a/app/views/absence_requests/comment.html.erb b/app/views/absence_requests/comment.html.erb
@@ -1,7 +1,7 @@
 <wrapper :max-width=1440>
   <grid-container>
     <grid-item columns="lg-12 sm-12">
-      <heading level="h1" size="h2">Comment on Absence Request</heading>
+      <lux-heading level="h1" size="h2">Comment on Absence Request</lux-heading>
     </grid-item>
   </grid-container>
 

diff --git a/app/views/absence_requests/edit.html.erb b/app/views/absence_requests/edit.html.erb
@@ -1,7 +1,7 @@
 <wrapper :max-width=1440>
   <grid-container>
     <grid-item columns="lg-12 sm-12">
-      <heading level="h1" size="h2">Edit Absence Request</heading>
+      <lux-heading level="h1" size="h2">Edit Absence Request</lux-heading>
     </grid-item>
   </grid-container>
 

diff --git a/app/views/absence_requests/new.html.erb b/app/views/absence_requests/new.html.erb
@@ -1,7 +1,7 @@
 <wrapper :max-width=1440>
   <grid-container>
     <grid-item columns="lg-12 sm-12">
-      <heading level="h1" size="h2">New Absence Request</heading>
+      <lux-heading level="h1" size="h2">New Absence Request</lux-heading>
     </grid-item>
   </grid-container>
 

diff --git a/app/views/absence_requests/review.html.erb b/app/views/absence_requests/review.html.erb
@@ -1,7 +1,7 @@
 <wrapper :max-width=1440>
   <grid-container>
     <grid-item columns="lg-12 sm-12">
-      <heading level="h1" size="h2">Review Absence Request</heading>
+      <lux-heading level="h1" size="h2">Review Absence Request</lux-heading>
     </grid-item>
   </grid-container>
 

diff --git a/app/views/absence_requests/show.html.erb b/app/views/absence_requests/show.html.erb
@@ -15,7 +15,7 @@
     <grid-item columns="lg-6 sm-12" order="order-lg-3 order-sm-2" :offset="true">
       <card size="full-width">
         <card-content>
-            <text-style variation="strong">Team members absent during this time period</text-style>
+            <lux-text-style variation="strong">Team members absent during this time period</lux-text-style>
             <ul class="staff"><%=  render partial: "shared/absent_staff", collection: @request.absent_staff, as: :staff %></ul>
         </card-content>
       </card>

diff --git a/app/views/delegates/_assume_detail.html.erb b/app/views/delegates/_assume_detail.html.erb
@@ -7,7 +7,7 @@
     ><lux-icon-person></lux-icon-person></lux-icon-base>
   </card-media>
   <card-header>
-    <heading level="h2" size="h3"><hyperlink href="<%= assume_delegate_path(delegator) %>"><%= delegator.delegator %></hyperlink></heading>
-    <text-style><%= delegator.delegator.uid %></text-style>
+    <lux-heading level="h2" size="h3"><hyperlink href="<%= assume_delegate_path(delegator) %>"><%= delegator.delegator %></hyperlink></lux-heading>
+    <lux-text-style><%= delegator.delegator.uid %></lux-text-style>
   </card-header>
 </card>
diff --git a/app/views/delegates/_index_detail.html.erb b/app/views/delegates/_index_detail.html.erb
@@ -7,7 +7,7 @@
     <% end %>
   </card-media>
   <card-header>
-    <heading level="h2" size="h3"><%= delegate.delegate %></heading>
-    <text-style><%= delegate.delegate.uid %></text-style>
+    <lux-heading level="h2" size="h3"><%= delegate.delegate %></lux-heading>
+    <lux-text-style><%= delegate.delegate.uid %></lux-text-style>
   </card-header>
 </card>
diff --git a/app/views/delegates/index.html.erb b/app/views/delegates/index.html.erb
@@ -1,7 +1,7 @@
 <wrapper :max-width=1440>
   <grid-container>
     <grid-item columns="lg-12 sm-12">
-      <heading level="h1" size="h2">My Delegates</heading>
+      <lux-heading level="h1" size="h2">My Delegates</lux-heading>
     </grid-item>
   </grid-container>
 </wrapper>
@@ -25,7 +25,7 @@
   <grid-container>
     <grid-item columns="lg-12 sm-12">
       <% if @delegates.count == 0 %>
-        <heading id="no-delegates" level="h3" size="h3">You don't have any delegates at the moment.</heading>
+        <lux-heading id="no-delegates" level="h3" size="h3">You don't have any delegates at the moment.</lux-heading>
       <% end %>
       <% @delegates.each do |delegate| %>
         <%=  render 'index_detail', delegate: delegate %>

diff --git a/app/views/delegates/to_assume.html.erb b/app/views/delegates/to_assume.html.erb
@@ -1,7 +1,7 @@
 <wrapper :max-width=1440>
   <grid-container>
     <grid-item columns="lg-12 sm-12">
-      <heading level="h1" size="h2">Act as Delegate for...</heading>
+      <lux-heading level="h1" size="h2">Act as Delegate for...</lux-heading>
     </grid-item>
   </grid-container>
 </wrapper>
@@ -12,7 +12,7 @@
     </grid-item>
     <grid-item columns="lg-12 sm-12">
       <% if @delegators.count == 0 %>
-        <heading id="no-delegates" level="h3" size="h3">You don't have any people you can become at the moment.</heading>
+        <lux-heading id="no-delegates" level="h3" size="h3">You don't have any people you can become at the moment.</lux-heading>
       <% end %>
       <% @delegators.each do |delegator| %>
         <%=  render 'assume_detail', delegator: delegator %>

diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -1,7 +1,7 @@
 <wrapper>
   <grid-container class="stretch-height">
     <grid-item >
-      <text-style variation="default">You must login to view the requested resource.</text-style>
+      <lux-text-style variation="default">You must login to view the requested resource.</lux-text-style>
       <hyperlink href="/users/auth/cas" variation="button solid" data-method="post" size="large">LOGIN with NetID</hyperlink>
     </grid-item>
   </grid-container>