Merge pull request #2123 from graygilmore/pills

Pill Component
solidusio · Aug 2, 2017 · ec13f80 · ec13f80
2 parents 663ed21 + 43eef78
commit ec13f80
Show file tree

Hide file tree

Showing 47 changed files with 512 additions and 211 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_pills.scss b/backend/app/assets/stylesheets/spree/backend/components/_pills.scss
@@ -0,0 +1,91 @@
+.pill {
+  display: inline-block;
+  padding: 0.2em 0.9em;
+  border-radius: 10px;
+  font-size: $font-size-pill;
+  background: $color-pill-neutral;
+  color: $color-pill-neutral-text;
+  white-space: nowrap;
+
+  $states: (
+    complete: (
+      background: $color-pill-complete,
+      color: $color-pill-complete-text
+    ),
+    active: (
+      background: $color-pill-active,
+      color: $color-pill-active-text
+    ),
+    inactive: (
+      background: $color-pill-inactive,
+      color: $color-pill-inactive-text
+    ),
+    pending: (
+      background: $color-pill-pending,
+      color: $color-pill-pending-text
+    ),
+    warning: (
+      background: $color-pill-warning,
+      color: $color-pill-warning-text
+    ),
+    error: (
+      background: $color-pill-error,
+      color: $color-pill-error-text
+    )
+  );
+
+  @each $name, $colors in $states {
+    &-#{$name} {
+      background: map-get($colors, background);
+      color: map-get($colors, color);
+    }
+  }
+}
+
+// Extend pill states for custom order, payment, and shipment state names
+.pill-address,
+.pill-awaiting,
+.pill-awaiting_return,
+.pill-backorder,
+.pill-backordered,
+.pill-balance_due,
+.pill-cart,
+.pill-checkout,
+.pill-confirm,
+.pill-credit_owed,
+.pill-delivery,
+.pill-in_transit,
+.pill-on_hand,
+.pill-partial,
+.pill-payment,
+.pill-processing,
+.pill-resumed {
+  @extend .pill-pending;
+}
+
+.pill-authorized,
+.pill-canceled,
+.pill-completed,
+.pill-expired,
+.pill-given_to_customer,
+.pill-lost_in_transit,
+.pill-paid,
+.pill-received,
+.pill-reimbursed,
+.pill-returned,
+.pill-shipped,
+.pill-shipped_wrong_item,
+.pill-short_shipped,
+.pill-unexchanged,
+.pill-void {
+  @extend .pill-complete;
+}
+
+.pill-failed {
+  @extend .pill-warning;
+}
+
+.pill-errored,
+.pill-invalid {
+  @extend .pill-error;
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_states.scss b/backend/app/assets/stylesheets/spree/backend/components/_states.scss
@@ -22,12 +22,3 @@
     }
   }
 }
-
-table tbody tr {
-  &[class*="state"] td:first-child {
-    border-left-width: 3px;
-  }
-  &.state-complete td:first-child { border-left-color: $brand-success }
-  &.state-cart     td:first-child { border-left-color: very-light($brand-warning, 6) }
-  &.state-canceled td:first-child { border-left-color: $brand-danger }
-}
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -6,6 +6,7 @@
 //--------------------------------------------------------------
 @include solidus-deprecated-variable("base-font-family", "font-family-base");
 $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$font-size-pill: 11px;
 
 // Colors
 //--------------------------------------------------------------
@@ -74,6 +75,27 @@ $color-btn-text:                 $color-1 !default;
 $color-btn-hover-bg:             $color-2 !default;
 $color-btn-hover-text:           $color-1 !default;
 
+// Pill colors
+//
+// For now these are custom assigned colors just for this section. As we go
+// about updating other areas of the admin we will likely want to pull these
+// colors out into better named variables.
+$color-pill-text: #1f2933;
+$color-pill-neutral: #e6e6e6;
+$color-pill-neutral-text: $color-pill-text;
+$color-pill-complete: #c8d8e8;
+$color-pill-complete-text: $color-pill-text;
+$color-pill-active: #bbe5b3;
+$color-pill-active-text: $color-pill-text;
+$color-pill-inactive: $color-pill-neutral;
+$color-pill-inactive-text: lighten($color-pill-text, 30%);
+$color-pill-pending: #ffe87d;
+$color-pill-pending-text: $color-pill-text;
+$color-pill-warning: #f9b36d;
+$color-pill-warning-text: $color-pill-text;
+$color-pill-error: #ff967b;
+$color-pill-error-text: $color-pill-text;
+
 // Actions colors
 $color-action-edit-bg:           very-light($color-success, 5  ) !default;
 $color-action-edit-brd:          very-light($color-success, 20 ) !default;

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
@@ -114,6 +114,11 @@
   }
 }
 
+.style-guide-code,
+.style-guide-result {
+  margin: 1rem 0;
+}
+
 .color-variables {
   display: flex;
   flex-wrap: wrap;

diff --git a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss
@@ -36,6 +36,7 @@
 @import 'spree/backend/components/number_field_update';
 @import 'spree/backend/components/stock_table';
 @import 'spree/backend/components/editable_table';
+@import 'spree/backend/components/pills';
 @import 'spree/backend/components/tabs';
 
 @import 'font-awesome';

diff --git a/backend/app/controllers/spree/admin/customer_returns_controller.rb b/backend/app/controllers/spree/admin/customer_returns_controller.rb
@@ -1,7 +1,6 @@
 module Spree
   module Admin
     class CustomerReturnsController < ResourceController
-      helper 'spree/admin/reimbursements'
       helper 'spree/admin/reimbursement_type'
       belongs_to 'spree/order', find_by: :number
 

diff --git a/backend/app/controllers/spree/admin/style_guide_controller.rb b/backend/app/controllers/spree/admin/style_guide_controller.rb
@@ -22,6 +22,7 @@ def index
             'validation'
           ],
           components: [
+            'pills',
             'tabs'
           ],
           messaging: [

diff --git a/backend/app/helpers/spree/admin/reimbursements_helper.rb b/backend/app/helpers/spree/admin/reimbursements_helper.rb
diff --git a/backend/app/helpers/spree/admin/stock_transfers_helper.rb b/backend/app/helpers/spree/admin/stock_transfers_helper.rb
@@ -17,10 +17,6 @@ def stock_transfer_edit_or_ship_path(stock_transfer)
         end
       end
 
-      def stock_transfer_status(stock_transfer)
-        stock_transfer.closed? ? Spree.t(:closed) : Spree.t(:open)
-      end
-
       def deleted_variant_admin_hint(variant)
         newer_variant_with_same_sku = Spree::Variant.find_by(sku: variant.sku)
         hint_type = newer_variant_with_same_sku ? :deleted_explanation_with_replacement : :deleted_explanation

diff --git a/backend/app/views/spree/admin/adjustment_reasons/index.html.erb b/backend/app/views/spree/admin/adjustment_reasons/index.html.erb
@@ -33,7 +33,9 @@
             <%= adjustment_reason.name %>
           </td>
           <td class="align-center">
-            <%= Spree.t(adjustment_reason.active? ? :active : :inactive) %>
+            <span class="pill pill-<%= adjustment_reason.active? ? 'active' : 'inactive' %>">
+              <%= Spree.t(adjustment_reason.active? ? :active : :inactive) %>
+            </span>
           </td>
           <td class="actions">
             <%= link_to_edit adjustment_reason, no_text: true %>

diff --git a/backend/app/views/spree/admin/cancellations/index.html.erb b/backend/app/views/spree/admin/cancellations/index.html.erb
@@ -34,7 +34,11 @@
             <% end %>
           </td>
           <td class="inventory-unit-quantity align-center">1</td>
-          <td class="inventory-unit-state align-center"><%= inventory_unit.state %></td>
+          <td class="inventory-unit-state align-center">
+            <span class="pill pill-<%= inventory_unit.state %>">
+              <%= Spree.t(inventory_unit.state, scope: :inventory_states) %>
+            </span>
+          </td>
           <td class="inventory-unit-shipment align-center"><%= inventory_unit.shipment.number %></td>
           <td class="inventory-unit-cancel align-center">
             <%= check_box_tag 'inventory_unit_ids[]', inventory_unit.id %>

diff --git a/backend/app/views/spree/admin/customer_returns/_reimbursements_table.html.erb b/backend/app/views/spree/admin/customer_returns/_reimbursements_table.html.erb
@@ -20,8 +20,11 @@
         </td>
         <td><%= reimbursement.display_total %></td>
         <td>
-          <span class="state <%= reimbursement_status_color(reimbursement) %>">
-            <%= reimbursement.reimbursement_status %>
+          <span class="pill pill-<%= reimbursement.reimbursement_status %>">
+            <%= Spree.t(
+              reimbursement.reimbursement_status,
+              scope: :reimbursement_states
+            ) %>
           </span>
         </td>
         <td><%= pretty_time(reimbursement.created_at) %></td>

diff --git a/backend/app/views/spree/admin/customer_returns/_return_item_decision.html.erb b/backend/app/views/spree/admin/customer_returns/_return_item_decision.html.erb
@@ -39,7 +39,12 @@
           <%= return_item.acceptance_status_errors %>
         </td>
         <td class-"align-center">
-          <%= return_item.reception_status.humanize %>
+          <span class="pill pill-<%= return_item.reception_status %>">
+            <%= Spree.t(
+              return_item.reception_status,
+              scope: :reception_states
+            ) %>
+          </span>
         </td>
         <% unless return_item.received? %>
           <td class='align-center'>

diff --git a/backend/app/views/spree/admin/customer_returns/_return_item_selection.html.erb b/backend/app/views/spree/admin/customer_returns/_return_item_selection.html.erb
@@ -38,7 +38,12 @@
           <%= return_item.display_amount %>
         </td>
         <td class="align-center">
-          <%= return_item.inventory_unit.state %>
+          <span class="pill pill-<%= return_item.inventory_unit.state %>">
+            <%= Spree.t(
+              return_item.inventory_unit.state,
+              scope: :inventory_states
+            ) %>
+          </span>
         </td>
         <td class="align-center">
           <%= return_item.exchange_variant.try(:exchange_name) %>

diff --git a/backend/app/views/spree/admin/customer_returns/index.html.erb b/backend/app/views/spree/admin/customer_returns/index.html.erb
@@ -31,9 +31,9 @@
           <td><%= pretty_time(customer_return.created_at) %></td>
           <td>
             <% if customer_return.fully_reimbursed? %>
-              <span class="state success"><%= Spree.t(:reimbursed) %></span>
+              <span class="pill pill-complete"><%= Spree.t(:reimbursed) %></span>
             <% else %>
-              <span class="state notice"><%= Spree.t(:incomplete) %></span>
+              <span class="pill pill-pending"><%= Spree.t(:incomplete) %></span>
             <% end %>
           </td>
           <td class='actions align-center' data-hook="admin_orders_customer_returns_index_row_actions">

diff --git a/backend/app/views/spree/admin/orders/_risk_analysis.html.erb b/backend/app/views/spree/admin/orders/_risk_analysis.html.erb
@@ -11,32 +11,34 @@
           <%= Spree.t(:failed_payment_attempts) %>:
         </strong></td>
           <td class="align-center">
-            <span class="<%= @order.payments.failed.count > 0 ? 'state void' : 'state complete' %>">
-              <%= link_to Spree.t(:payments_failed_count,
-                                  count: @order.payments.failed.count),
-                          spree.admin_order_payments_path(@order) %>
+            <span class="pill pill-<%= @order.payments.failed.count > 0 ? 'warning' : 'complete' %>">
+              <%= Spree.t(
+                :payments_failed_count,
+                count: @order.payments.failed.count
+              ) %>
             </span>
         </td>
       </tr>
 
       <tr>
         <td><strong><%= Spree.t(:avs_response) %>:</strong></td>
         <td class="align-center">
-          <% if latest_payment.is_avs_risky? %>
-            <span class="state void"><%= Spree.t(:error) %>:</span>
-            <%= avs_response_code[latest_payment.avs_response] %>
-          <% else %>
-            <span class="state complete"><%= Spree.t(:success) %></span>
-          <% end %>
+          <span class="pill pill-<%= latest_payment.is_avs_risky? ? 'warning' : 'complete' %>">
+            <% if latest_payment.is_avs_risky? %>
+              <%= avs_response_code[latest_payment.avs_response] %>
+            <% else %>
+              <%= Spree.t(:success) %>
+            <% end %>
+          </span>
         </td>
       </tr>
 
       <tr>
         <td><strong><%= Spree.t(:cvv_response) %>:</strong></td>
         <td class="align-center">
-          <span class="<%= latest_payment.is_cvv_risky? ? 'state void' : 'state complete' %>">
+          <span class="pill pill-<%= latest_payment.is_cvv_risky? ? 'warning' : 'complete' %>">
             <% if latest_payment.is_cvv_risky? %>
-              <%= "#{Spree.t(:error)}: #{cvv_response_code[latest_payment.cvv_response_code]}" %>
+              <%= cvv_response_code[latest_payment.cvv_response_code] %>
             <% else %>
               <%= Spree.t(:success) %>
             <% end %>

diff --git a/backend/app/views/spree/admin/orders/confirm/_payments.html.erb b/backend/app/views/spree/admin/orders/confirm/_payments.html.erb
@@ -30,8 +30,8 @@
             <%= payment.transaction_id %>
           </td>
           <td class="align-center">
-            <span class="state <%= payment.state %>">
-              <%= Spree.t(payment.state, scope: :payment_states, default: payment.state.capitalize) %>
+            <span class="pill pill-<%= payment.state %>">
+              <%= Spree.t(payment.state, scope: :payment_states) %>
             </span>
           </td>
         </tr>

diff --git a/backend/app/views/spree/admin/orders/index.html.erb b/backend/app/views/spree/admin/orders/index.html.erb
@@ -147,14 +147,30 @@
     </thead>
     <tbody>
     <% @orders.each do |order| %>
-      <tr data-hook="admin_orders_index_rows" class="state-<%= order.state.downcase %> <%= cycle('odd', 'even') %>">
+      <tr data-hook="admin_orders_index_rows" class="<%= cycle('odd', 'even') %>">
         <td class="align-center"><%= l (@show_only_completed ? order.completed_at : order.created_at).to_date %></td>
         <td class="align-center"><%= link_to order.number, edit_admin_order_path(order) %></td>
-        <td class="align-center"><span class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></span></td>
-        <td class="align-center"><span class="state <%= order.payment_state %>"><%= link_to Spree.t("payment_states.#{order.payment_state}"), admin_order_payments_path(order) if order.payment_state %></span></td>
-          <% if Spree::Order.checkout_step_names.include?(:delivery) %>
-            <td class="align-center"><span class="state <%= order.shipment_state %>"><%= Spree.t("shipment_states.#{order.shipment_state}") if order.shipment_state %></span></td>
+        <td class="align-center">
+          <span class="pill pill-<%= order.state %>">
+            <%= Spree.t(order.state, scope: :order_state) %>
+          </span>
+        </td>
+        <td class="align-center">
+          <% if order.payment_state  %>
+            <span class="pill pill-<%= order.payment_state %>">
+              <%= Spree.t(order.payment_state, scope: :payment_states) %>
+            </span>
           <% end %>
+        </td>
+        <% if Spree::Order.checkout_step_names.include?(:delivery) %>
+          <td class="align-center">
+            <% if order.shipment_state %>
+              <span class="pill pill-<%= order.shipment_state %>">
+                <%= Spree.t(order.shipment_state, scope: :shipment_states) %>
+              </span>
+            <% end %>
+          </td>
+        <% end %>
         <td>
           <% if order.user %>
             <%= link_to order.email, edit_admin_user_path(order.user) %>

diff --git a/backend/app/views/spree/admin/payment_methods/index.html.erb b/backend/app/views/spree/admin/payment_methods/index.html.erb
@@ -31,7 +31,7 @@
         <th><%= Spree::PaymentMethod.human_attribute_name(:type) %></th>
         <th><%= Spree::PaymentMethod.human_attribute_name(:available_to_users) %></th>
         <th><%= Spree::PaymentMethod.human_attribute_name(:available_to_admin) %></th>
-        <th><%= Spree::PaymentMethod.human_attribute_name(:active) %></th>
+        <th><%= Spree::PaymentMethod.human_attribute_name(:state) %></th>
         <th data-hook="admin_payment_methods_index_header_actions" class="actions"></th>
       </tr>
     </thead>
@@ -43,7 +43,11 @@
           <td class="align-center"><%= method.model_name.human %></td>
           <td class="align-center"><%= method.available_to_users ? Spree.t(:say_yes) : Spree.t(:say_no) %></td>
           <td class="align-center"><%= method.available_to_admin ? Spree.t(:say_yes) : Spree.t(:say_no) %></td>
-          <td class="align-center"><%= method.active ? Spree.t(:say_yes) : Spree.t(:say_no) %></td>
+          <td class="align-center">
+            <span class="pill pill-<%= method.active ? 'active' : 'inactive' %>">
+              <%= Spree.t(method.active? ? :active : :inactive) %>
+            </span>
+          </td>
           <td data-hook="admin_payment_methods_index_row_actions" class="actions">
             <% if can?(:update, method.becomes(Spree::PaymentMethod)) %>
               <%= link_to_edit method.becomes(Spree::PaymentMethod), no_text: true %>