Use lux-tag and lux-input-button (#1041)

Co-authored-by: Jane Sandberg <[email protected]>
pulibrary · Feb 29, 2024 · 008c3cf · 008c3cf
1 parent 926136f
commit 008c3cf
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 42 deletions.
diff --git a/app/views/absence_requests/_index_detail.html.erb b/app/views/absence_requests/_index_detail.html.erb
@@ -1,4 +1,4 @@
-<card id="<%= absence_request.id %>" size="full-width">
+<lux-card id="<%= absence_request.id %>" size="full-width">
   <card-media>
     <lux-icon-base
       width="50"
@@ -11,11 +11,11 @@
     <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="[
+    <lux-tag type="tag" :tag-items="[
       {name: '<%= absence_request.latest_status %>', color: '<%= absence_request.status_color %>'}
       ]"
       horizontal="end"
-      size="small"></tag>
+      size="small"></lux-tag>
     <lux-text-style type="span" variation="small"><%= absence_request.latest_status_date %></lux-text-style>
   </card-content>
-</card>
+</lux-card>
diff --git a/app/views/absence_requests/_record_button.html.erb b/app/views/absence_requests/_record_button.html.erb
@@ -1,5 +1,5 @@
 <% if request.can_record?(agent: current_staff_profile) %>
   <%= form_with(model: request, local: true, url: decide_absence_request_path(request), method: :put, class: 'form-button') do |form| %>
-    <input-button type="submit" variation="solid" name="record">Mark as Recorded</input-button>
+    <lux-input-button type="submit" variation="solid" name="record">Mark as Recorded</lux-input-button>
   <% end %>
 <% end %>
diff --git a/app/views/absence_requests/_review_detail.html.erb b/app/views/absence_requests/_review_detail.html.erb
@@ -1,4 +1,4 @@
-<card id="<%= absence_request.id %>" size="full-width">
+<lux-card id="<%= absence_request.id %>" size="full-width">
   <card-media>
     <lux-icon-base
       width="50"
@@ -11,11 +11,11 @@
     <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="[
+    <lux-tag type="tag" :tag-items="[
       {name: '<%= absence_request.latest_status %>', color: '<%= absence_request.status_color %>'}
       ]"
       horizontal="end"
-      size="small"></tag>
+      size="small"></lux-tag>
     <lux-text-style type="span" variation="small"><%= absence_request.latest_status_date %></lux-text-style>
   </card-content>
-</card>
+</lux-card>
diff --git a/app/views/absence_requests/_review_form.html.erb b/app/views/absence_requests/_review_form.html.erb
@@ -32,10 +32,10 @@
         <card size="full-width">
           <card-content>
             <%if action == 'review' %>
-              <input-button type="submit" variation="solid" name="approve">Approve</input-button>
-              <input-button type="submit" variation="solid" name="deny">Deny</input-button>
+              <lux-input-button type="submit" variation="solid" name="approve">Approve</lux-input-button>
+              <lux-input-button type="submit" variation="solid" name="deny">Deny</lux-input-button>
             <% else %>
-              <input-button type="submit" variation="solid" name="comment">Comment</input-button>
+              <lux-input-button type="submit" variation="solid" name="comment">Comment</lux-input-button>
             <% end %>
           </card-content>
         </card>

diff --git a/app/views/absence_requests/_title_card.html.erb b/app/views/absence_requests/_title_card.html.erb
@@ -1,13 +1,13 @@
-<card class="title-card" size="full-width">
+<lux-card class="title-card" size="full-width">
   <card-media>
       <lux-icon-base
       width="50"
       height="50"
       icon-color="rgb(65, 70, 78)"
     ><<%= request.absence_type_icon %> /></lux-icon-base>
-    <tag type="tag" size="small" :tag-items="[
+    <lux-tag type="tag" size="small" :tag-items="[
           {name: '<%= request.latest_status %>', color: '<%= request.status_color %>', icon: '<%= request.status_icon %>'}
-          ]"></tag>
+          ]"></lux-tag>
   </card-media>
   <card-header>
       <lux-heading level="h1" size="h3">
@@ -25,4 +25,4 @@
           >
         </div>
       </card-content>
-</card>
+</lux-card>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,30 +12,30 @@
   </head>
 
   <body>
-    <library-header app-name="Absence and Travel Requests" abbr-name="LTR" app-url="<%= HomeURL.for(current_user: current_user) %>" class="lux" :max-width=1440 theme="dark">
-    <menu-bar type="main-menu" :menu-items="[
-        <% if current_user %>
-          {name: 'Requests', component: 'My Requests', children: [
-            {name: 'New Travel Request', component: 'New Travel Request', href: '/travel_requests/new/'},
-            <% if Rails.configuration.show_absence_button %>
-            {name: 'New Absence Request', component: 'New Absence Request', href: '/absence_requests/new/'},
+    <lux-library-header app-name="Absence and Travel Requests" abbr-name="LTR" app-url="<%= HomeURL.for(current_user: current_user) %>" class="lux" :max-width=1440 theme="dark">
+      <lux-menu-bar type="main-menu" :menu-items="[
+          <% if current_user %>
+            {name: 'Requests', component: 'My Requests', children: [
+              {name: 'New Travel Request', component: 'New Travel Request', href: '/travel_requests/new/'},
+              <% if Rails.configuration.show_absence_button %>
+              {name: 'New Absence Request', component: 'New Absence Request', href: '/absence_requests/new/'},
+              <% end %>
+              {name: 'My Requests', component: 'My Requests', href: '/my_requests/'},
+              {name: 'Reports', component: 'Reports', href: '/reports/'},
+            ]},
+            <%= "{name: 'Requests to Review', component: 'Requests to Review', href: '/my_approval_requests/'}," if current_staff_profile.supervisor? %>
+            {name: '<%= current_user %>', component: 'My Requests', children: [
+              <% unless current_delegate %>
+              {name: 'My Delegates', component: 'My Delegates', href: '/delegates/'},
+              {name: 'My Delegations', component: 'Delegations', href: '<%= to_assume_delegates_path %>'},
             <% end %>
-            {name: 'My Requests', component: 'My Requests', href: '/my_requests/'},
-            {name: 'Reports', component: 'Reports', href: '/reports/'},
-          ]},
-          <%= "{name: 'Requests to Review', component: 'Requests to Review', href: '/my_approval_requests/'}," if current_staff_profile.supervisor? %>
-          {name: '<%= current_user %>', component: 'My Requests', children: [
-            <% unless current_delegate %>
-            {name: 'My Delegates', component: 'My Delegates', href: '/delegates/'},
-            {name: 'My Delegations', component: 'Delegations', href: '<%= to_assume_delegates_path %>'},
+              {name: 'Help', component: 'Help', href: '/help'},
+              {name: 'Logout', component: 'Logout', href: '/sign_out'},
+            ]},
+            
           <% end %>
-            {name: 'Help', component: 'Help', href: '/help'},
-            {name: 'Logout', component: 'Logout', href: '/sign_out'},
-          ]},
-          
-        <% end %>
-      ]"></menu-bar>
-    </library-header>
+        ]"></lux-menu-bar>
+    </lux-library-header>
     <% if current_delegate %>
       <div class="lux">
         <alert status="info" class="current-delegate">
@@ -54,9 +54,9 @@
     <% end %>
     <div class="main-content">
       <div class="lux">
-        <wrapper :max-width=1400>
+        <lux-wrapper :max-width=1400>
           <%= render 'shared/flash_messages' %>
-        </wrapper>
+        </lux-wrapper>
         <%= yield %>
       </div>
     </div>

diff --git a/app/views/travel_requests/_index_detail.html.erb b/app/views/travel_requests/_index_detail.html.erb
@@ -11,11 +11,11 @@
       <lux-text-style class="event-dates"><%= travel_request.formatted_full_start_date %> to <%= travel_request.formatted_full_end_date %></lux-text-style>
     </lux-card-header>
     <lux-card-content class="right-align">
-      <tag type="tag" :tag-items="[
+      <lux-tag type="tag" :tag-items="[
         {name: '<%= travel_request.latest_status %>', color: '<%= travel_request.status_color %>'}
         ]"
         horizontal="end"
-        size="small"></tag>
+        size="small"></lux-tag>
       <lux-text-style type="span" variation="small"><%= travel_request.latest_status_date %></lux-text-style>
     </lux-card-content>
   </lux-card>