Add lux prefix in various components (#1074)

app/views/absence_requests/_errors.html.erb

@@ -1,4 +1,4 @@
-<grid-item columns="lg-12">
+<lux-grid-item columns="lg-12">
   <alert status="error">
     <h2><%= pluralize(request_change_set.errors.count, "error") %> prohibited this request from being saved:</h2>
 
@@ -8,4 +8,4 @@
     <% end %>
     </ul>
   </alert>
-</grid-item>
+</lux-grid-item>

app/views/absence_requests/_index_detail.html.erb

@@ -1,21 +1,21 @@
 <lux-card id="<%= absence_request.id %>" size="full-width">
-  <card-media>
+  <lux-card-media>
     <lux-icon-base
       width="50"
       height="50"
       icon-color="rgb(65, 70, 78)"
     ><<%= absence_request.absence_type_icon %> /></lux-icon-base>
-  </card-media>
-  <card-header>
+  </lux-card-media>
+  <lux-card-header>
     <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= absence_request_path(absence_request.to_model)%>"><%= absence_request.event_title_brief %></lux-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">
+  </lux-card-header>
+  <lux-card-content class="right-align">
     <lux-tag type="tag" :tag-items="[
       {name: '<%= absence_request.latest_status %>', color: '<%= absence_request.status_color %>'}
       ]"
       horizontal="end"
       size="small"></lux-tag>
     <lux-text-style type="span" variation="small"><%= absence_request.latest_status_date %></lux-text-style>
-  </card-content>
+  </lux-card-content>
 </lux-card>

app/views/absence_requests/_notes_card.html.erb

@@ -1,5 +1,5 @@
-<card size="full-width">
-    <card-content>
+<lux-card size="full-width">
+    <lux-card-content>
         <lux-heading level="h3" size="h3">
             History
           </lux-heading>
@@ -11,5 +11,5 @@
     <% if render_edit %>
       <lux-input-text id="absence_request_notes_content" name="absence_request[notes][content]" label="Notes" type="textarea" width="expand"></lux-input-text>
     <% end %>
-    </card-content>
-  </card>
+    </lux-card-content>
+  </lux-card>

app/views/absence_requests/_review_detail.html.erb

@@ -1,21 +1,21 @@
 <lux-card id="<%= absence_request.id %>" size="full-width">
-  <card-media>
+  <lux-card-media>
     <lux-icon-base
       width="50"
       height="50"
       icon-color="rgb(65, 70, 78)"
     ><<%= absence_request.absence_type_icon %> /></lux-icon-base>
-  </card-media>
-  <card-header>
+  </lux-card-media>
+  <lux-card-header>
     <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= review_absence_request_path(absence_request.to_model)%>"><%= absence_request.creator %> - <%= absence_request.event_title_brief %></lux-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>
+  </lux-card-header>
+  <lux-card-content>
     <lux-tag type="tag" :tag-items="[
       {name: '<%= absence_request.latest_status %>', color: '<%= absence_request.status_color %>'}
       ]"
       horizontal="end"
       size="small"></lux-tag>
     <lux-text-style type="span" variation="small"><%= absence_request.latest_status_date %></lux-text-style>
-  </card-content>
+  </lux-card-content>
 </lux-card>

app/views/absence_requests/_review_form.html.erb

@@ -1,46 +1,46 @@
 <div >
 
   <%= form_with(model: request_change_set.model, local: true, url: decide_absence_request_path(request_change_set.model), method: :put) do |form| %>
-    <grid-container>
+    <lux-grid-container>
       <% if request_change_set.errors.any? %>
         <%=render 'errors', request_change_set: request_change_set%>
       <% end %>
 
 
-      <grid-item columns="lg-12 sm-12" order="order-lg-1">
+      <lux-grid-item columns="lg-12 sm-12" order="order-lg-1">
             <%= render 'title_card', request: request_change_set %>      
-      </grid-item>
+      </lux-grid-item>
 
-      <grid-item columns="lg-6 sm-12" order="order-lg-2 order-sm-3">
+      <lux-grid-item columns="lg-6 sm-12" order="order-lg-2 order-sm-3">
         <%= render 'notes_card', request: request_change_set, render_edit: true %>      
-      </grid-item>
-      <grid-item columns="lg-6 sm-12" order="order-lg-3 order-sm-2">
-        <card size="full-width">
-          <card-content>
+      </lux-grid-item>
+      <lux-grid-item columns="lg-6 sm-12" order="order-lg-3 order-sm-2">
+        <lux-card size="full-width">
+          <lux-card-content>
               <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>
+          </lux-card-content>
+        </lux-card>
         <%= render 'balances', balance_title: request_change_set.balance_title, 
                               vacation_balance:  request_change_set.vacation_balance,
                               personal_balance: request_change_set.personal_balance,
                               sick_balance: request_change_set.sick_balance  %>
 
-      </grid-item>
+      </lux-grid-item>
 
-      <grid-item columns="lg-12 sm-12" order="order-lg-4 order-sm-4">
-        <card size="full-width">
-          <card-content>
+      <lux-grid-item columns="lg-12 sm-12" order="order-lg-4 order-sm-4">
+        <lux-card size="full-width">
+          <lux-card-content>
             <%if action == 'review' %>
               <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 %>
               <lux-input-button type="submit" variation="solid" name="comment">Comment</lux-input-button>
             <% end %>
-          </card-content>
-        </card>
-      </grid-item>
+          </lux-card-content>
+        </lux-card>
+      </lux-grid-item>
 
-  </grid-container>
+  </lux-grid-container>
 <% end %>
 </div>

app/views/absence_requests/_title_card.html.erb

@@ -1,5 +1,5 @@
 <lux-card class="title-card" size="full-width">
-  <card-media>
+  <lux-card-media>
       <lux-icon-base
       width="50"
       height="50"
@@ -8,21 +8,21 @@
     <lux-tag type="tag" size="small" :tag-items="[
           {name: '<%= request.latest_status %>', color: '<%= request.status_color %>', icon: '<%= request.status_icon %>'}
           ]"></lux-tag>
-  </card-media>
-  <card-header>
+  </lux-card-media>
+  <lux-card-header>
       <lux-heading level="h1" size="h3">
         <span class="event-requestor"
           ><%= request.full_name %></span
         >
         <span class="event-title"><%= request.event_title %></span>
       </lux-heading>
-    </card-header>
-    <card-content>
+    </lux-card-header>
+    <lux-card-content>
         <div class="status-<%= request.status_color %>">
           <lux-heading level="h2" size="h3"
             ><lux-text-style variation="default">Total Hours</lux-text-style><%=
             request.hours_requested %></lux-heading
           >
         </div>
-      </card-content>
+      </lux-card-content>
 </lux-card>

app/views/absence_requests/comment.html.erb

@@ -1,9 +1,9 @@
 <wrapper :max-width=1440>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <lux-heading level="h1" size="h2">Comment on Absence Request</lux-heading>
-    </grid-item>
-  </grid-container>
+    </lux-grid-item>
+  </lux-grid-container>
 
   <%= render 'review_form', request_change_set: @request_change_set, action: 'comment' %>
 

app/views/absence_requests/edit.html.erb

@@ -1,9 +1,9 @@
 <wrapper :max-width=1440>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <lux-heading level="h1" size="h2">Edit Absence Request</lux-heading>
-    </grid-item>
-  </grid-container>
+    </lux-grid-item>
+  </lux-grid-container>
 
   <%= render 'form', request_change_set: @request_change_set %>
 

app/views/absence_requests/new.html.erb

@@ -1,9 +1,9 @@
 <wrapper :max-width=1440>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <lux-heading level="h1" size="h2">New Absence Request</lux-heading>
-    </grid-item>
-  </grid-container>
+    </lux-grid-item>
+  </lux-grid-container>
 
 <%= render 'form', request_change_set: @request_change_set %>
 

app/views/absence_requests/review.html.erb

@@ -1,9 +1,9 @@
 <wrapper :max-width=1440>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <lux-heading level="h1" size="h2">Review Absence Request</lux-heading>
-    </grid-item>
-  </grid-container>
+    </lux-grid-item>
+  </lux-grid-container>
 
   <%= render 'review_form', request_change_set: @request_change_set, action: 'review' %>
 

app/views/delegates/_assume_detail.html.erb

@@ -1,13 +1,13 @@
-<card id="<%= delegator.id %>" size="full-width" class="delegate">
-  <card-media>
+<lux-card id="<%= delegator.id %>" size="full-width" class="delegate">
+  <lux-card-media>
     <lux-icon-base
       width="50"
       height="50"
       icon-color="rgb(65, 70, 78)"
     ><lux-icon-person></lux-icon-person></lux-icon-base>
-  </card-media>
-  <card-header>
+  </lux-card-media>
+  <lux-card-header>
     <lux-heading level="h2" size="h3"><lux-hyperlink href="<%= assume_delegate_path(delegator) %>"><%= delegator.delegator %></lux-hyperlink></lux-heading>
     <lux-text-style><%= delegator.delegator.uid %></lux-text-style>
-  </card-header>
-</card>
+  </lux-card-header>
+</lux-card>

app/views/delegates/_index_detail.html.erb

@@ -1,13 +1,13 @@
-<card id="<%= delegate.id %>" size="full-width" class="delegate">
-  <card-media>
+<lux-card id="<%= delegate.id %>" size="full-width" class="delegate">
+  <lux-card-media>
     <%= link_to delegate, method: :delete do %>
       <lux-icon-base width="50" height="50" icon-name="Remove Delegate" icon-color="red">
         <lux-icon-denied></lux-icon-denied>
       </lux-icon-base>
     <% end %>
-  </card-media>
-  <card-header>
+  </lux-card-media>
+  <lux-card-header>
     <lux-heading level="h2" size="h3"><%= delegate.delegate %></lux-heading>
     <lux-text-style><%= delegate.delegate.uid %></lux-text-style>
-  </card-header>
-</card>
+  </lux-card-header>
+</lux-card>

app/views/delegates/index.html.erb

@@ -1,36 +1,36 @@
-<wrapper :max-width=1440>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+<lux-wrapper :max-width=1440>
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <lux-heading level="h1" size="h2">My Delegates</lux-heading>
-    </grid-item>
-  </grid-container>
-</wrapper>
-<wrapper :max-width=1440 class="my-delegates">
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
-      <alert status="info" class="tip-card">Please use this feature with care as it allows other people whom you designate to act on your behalf.</alert>
-    </grid-item>
-    <grid-item columns="lg-12 sm-12">
-      <card size="full-width" class="search-filter-sort">
-        <card-content>
-          <grid-container>
-            <grid-item columns="lg-12 sm-12">
+    </lux-grid-item>
+  </lux-grid-container>
+</lux-wrapper>
+<lux-wrapper :max-width=1440 class="my-delegates">
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
+      <lux-alert status="info" class="tip-card">Please use this feature with care as it allows other people whom you designate to act on your behalf.</lux-alert>
+    </lux-grid-item>
+    <lux-grid-item columns="lg-12 sm-12">
+      <lux-card size="full-width" class="search-filter-sort">
+        <lux-card-content>
+          <lux-grid-container>
+            <lux-grid-item columns="lg-12 sm-12">
               <%= render 'form', delegate: @delegate %>
-            </grid-item>
-          </grid-container>
-        </card-content>
-      </card>
-    </grid-item>
-  </grid-container>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+            </lux-grid-item>
+          </lux-grid-container>
+        </lux-card-content>
+      </lux-card>
+    </lux-grid-item>
+  </lux-grid-container>
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <% if @delegates.count == 0 %>
         <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 %>
       <% end %>
-    </grid-item>
-  </grid-container>
+    </lux-grid-item>
+  </lux-grid-container>
 </wrapper>
 <br/>

app/views/delegates/to_assume.html.erb

@@ -1,23 +1,23 @@
-<wrapper :max-width=1440>
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
+<lux-wrapper :max-width=1440>
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
       <lux-heading level="h1" size="h2">Act as Delegate for...</lux-heading>
-    </grid-item>
-  </grid-container>
-</wrapper>
-<wrapper :max-width=1440 class="my-delegates">
-  <grid-container>
-    <grid-item columns="lg-12 sm-12">
-      <alert status="info" class="tip-card">Please use this feature with care as it allows you to act on someone's behalf.</alert>
-    </grid-item>
-    <grid-item columns="lg-12 sm-12">
+    </lux-grid-item>
+  </lux-grid-container>
+</lux-wrapper>
+<lux-wrapper :max-width=1440 class="my-delegates">
+  <lux-grid-container>
+    <lux-grid-item columns="lg-12 sm-12">
+      <lux-alert status="info" class="tip-card">Please use this feature with care as it allows you to act on someone's behalf.</lux-alert>
+    </lux-grid-item>
+    <lux-grid-item columns="lg-12 sm-12">
       <% if @delegators.count == 0 %>
         <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 %>
       <% end %>
-    </grid-item>
-  </grid-container>
-</wrapper>
+    </lux-grid-item>
+  </lux-grid-container>
+</lux-wrapper>
 <br/>

app/views/devise/sessions/new.html.erb

@@ -1,8 +1,8 @@
 <wrapper>
-  <grid-container class="stretch-height">
-    <grid-item >
+  <lux-grid-container class="stretch-height">
+    <lux-grid-item >
       <lux-text-style variation="default">You must login to view the requested resource.</lux-text-style>
       <lux-hyperlink href="/users/auth/cas" variation="button solid" data-method="post" size="large">LOGIN with NetID</lux-hyperlink>
-    </grid-item>
-  </grid-container>
+    </lux-grid-item>
+  </lux-grid-container>
 </wrapper>