solidus_backend_devise_token_auth 2.8.0.alpha.2

data/app/views/spree/admin/stores/_form.html.erb

@@ -0,0 +1,77 @@
+<div class="row">
+  <div class="col-12 col-md-6">
+    <%= f.field_container :name do %>
+      <%= f.label :name, class: 'required' %>
+      <%= f.text_field :name, required: true, class: 'fullwidth' %>
+      <%= f.error_message_on :name %>
+    <% end %>
+
+    <%= f.field_container :code do %>
+      <%= f.label :code, class: 'required' %>
+      <%= f.text_field :code, required: true, class: 'fullwidth' %>
+      <%= f.error_message_on :code %>
+    <% end %>
+
+    <%= f.field_container :seo_title do %>
+      <%= f.label :seo_title %>
+      <%= f.text_field :seo_title, class: 'fullwidth'  %>
+      <%= f.error_message_on :seo_title %>
+    <% end %>
+
+    <%= f.field_container :meta_keywords do %>
+      <%= f.label :meta_keywords %>
+      <%= f.text_field :meta_keywords, class: 'fullwidth'  %>
+      <%= f.error_message_on :meta_keywords %>
+    <% end %>
+
+    <%= f.field_container :meta_description do %>
+      <%= f.label :meta_description %>
+      <%= f.text_area :meta_description, class: 'fullwidth'  %>
+      <%= f.error_message_on :meta_description %>
+    <% end %>
+  </div>
+  <div class="col-12 col-md-6">
+    <%= f.field_container :url do %>
+      <%= f.label :url, class: 'required' %>
+      <%= f.text_field :url, required: true, class: 'fullwidth'  %>
+      <%= f.error_message_on :url %>
+    <% end %>
+
+    <%= f.field_container :mail_from_address do %>
+      <%= f.label :mail_from_address, class: 'required' %>
+      <%= f.text_field :mail_from_address, required: true, class: 'fullwidth'  %>
+      <%= f.error_message_on :mail_from_address %>
+    <% end %>
+
+    <%= f.field_container :default_currency do %>
+      <%= f.label :default_currency %>
+      <%= f.select :default_currency,
+        Spree::Config.available_currencies.map(&:iso_code),
+        { include_blank: true },
+        { class: 'custom-select fullwidth' } %>
+      <%= f.error_message_on :default_currency %>
+    <% end %>
+
+    <%= f.field_container :cart_tax_country_iso do %>
+      <%= f.label :cart_tax_country_iso %>
+      <%= f.field_hint :cart_tax_country_iso %>
+      <%= f.select :cart_tax_country_iso,
+        Spree::Country.all.map { |c| [c.name, c.iso] },
+        { include_blank: t(".no_cart_tax_country") },
+        { class: "custom-select fullwidth" } %>
+      <%= f.error_message_on :cart_tax_country_iso %>
+    <% end %>
+
+    <%= f.field_container :available_locales do %>
+      <%= f.label :available_locales %>
+      <%= f.field_hint :available_locales %>
+      <%= f.select :available_locales,
+        Spree.i18n_available_locales.map { |locale|
+          [I18n.t('spree.i18n.this_file_language', locale: locale, default: locale.to_s, fallback: false), locale]
+        }.sort,
+        { },
+        { class: 'select2 fullwidth', multiple: true } %>
+      <%= f.error_message_on :default_currency %>
+    <% end %>
+  </div>
+</div>

data/app/views/spree/admin/stores/edit.html.erb

@@ -0,0 +1,19 @@
+<%= render 'spree/admin/shared/general_tabs' %>
+
+<% admin_breadcrumb(link_to(plural_resource_name(Spree::Store), admin_stores_path)) %>
+<% admin_breadcrumb(@store.name) %>
+
+<% content_for :page_actions do %>
+  <li>
+    <%= link_to t('spree.new_store'), new_admin_store_url, class: 'btn btn-primary' %>
+  </li>
+<% end %>
+
+<%= form_for [:admin, @store] do |f| %>
+  <fieldset class="no-border-top">
+    <%= render 'form', f: f %>
+    <% if can? :update, @store %>
+      <%= render 'spree/admin/shared/edit_resource_links' %>
+    <% end %>
+  </fieldset>
+<% end %>

data/app/views/spree/admin/stores/index.html.erb

@@ -0,0 +1,41 @@
+<%= render 'spree/admin/shared/general_tabs' %>
+
+<% content_for :page_title do %>
+  <%= plural_resource_name(Spree::Store) %>
+<% end %>
+
+<% content_for :page_actions do %>
+  <% if can?(:create, Spree::Store) %>
+    <li>
+      <%= link_to t('spree.new_store'), new_admin_store_url, class: 'button' %>
+    </li>
+  <% end %>
+<% end %>
+
+<table class="index">
+  <thead>
+    <tr>
+      <th><%= Spree::Store.human_attribute_name(:name) %></th>
+      <th><%= Spree::Store.human_attribute_name(:url) %></th>
+      <th class="actions"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @stores.each do |store| %>
+      <tr>
+        <td>
+          <%= store.name %>
+          <% if store.default? %>
+            <span class="label label-default"><%= Spree::Store.human_attribute_name(:default) %></span>
+          <% end %>
+        </td>
+        <td><%= store.url %></td>
+        <td class="actions">
+          <% if can?(:edit, store) %>
+            <%= link_to_edit store, no_text: true %>
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/spree/admin/stores/new.html.erb

@@ -0,0 +1,15 @@
+<%= render 'spree/admin/shared/general_tabs' %>
+
+<% admin_breadcrumb(link_to(plural_resource_name(Spree::Store), admin_stores_path)) %>
+<% admin_breadcrumb(t('spree.new_store')) %>
+
+<% content_for :page_actions do %>
+<% end %>
+
+<%= form_for [:admin, @store] do |f| %>
+  <%= render 'form', f: f %>
+
+  <% if can? :create, @store %>
+    <%= render 'spree/admin/shared/new_resource_links' %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/style_guide/index.html.erb

@@ -0,0 +1,5 @@
+<p>
+  This style guide exists to encourage developers to tackle style
+  and interaction design in more bite sized ways
+  and give the community a place to review changes.
+</p>

data/app/views/spree/admin/style_guide/topics/components/_modals.html.erb

@@ -0,0 +1,50 @@
+<p>
+  Bootstrap modals are ready to use by rendering the shared partial and creating
+  a trigger.
+</p>
+
+<p>The partial requires three locals:</p>
+
+<ul>
+  <li>
+    <code>target</code>: this should match the <code>data-target</code> in your
+    trigger
+  </li>
+  <li>
+    <code>title</code>: this will appear in the modal's header
+  </li>
+  <li>
+    <code>content</code>: this will appear in the modal's body. This content can
+    be whatever you like – even another partial.
+  </li>
+</ul>
+
+<%- snippet = capture do %>
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#your-target">
+    Launch demo modal
+  </button>
+
+  &lt;%= render(
+    "spree/admin/shared/modal",
+    target: "your-target",
+    title: "Your Title",
+    content: "The modal's content, could be another partial"
+  ) %&gt;
+<%- end %>
+
+<div class="style-guide-code half">
+  <pre><code class="language-html"><%= escape_once snippet %></code></pre>
+</div>
+
+<div class="style-guide-result half">
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#your-target">
+    Demo Modal
+  </button>
+
+  <%= render(
+    "spree/admin/shared/modal",
+    target: "your-target",
+    title: "Your Title",
+    content: "The modal's content, could be another partial"
+  ) %>
+</div>

data/app/views/spree/admin/style_guide/topics/components/_pills.html.erb

@@ -0,0 +1,101 @@
+<p>
+  Pills are useful for showing statuses as an admin can get a better idea of the
+  state of the object by the color alone. These are most effective in a table,
+  as displayed below, but can also be used in other areas of the system where
+  appropriate.
+</p>
+
+<%- snippet = capture do %>
+  <span class="pill pill-complete">Complete</span>
+  <span class="pill pill-active">Active</span>
+  <span class="pill pill-inactive">Inactive</span>
+  <span class="pill pill-pending">Pending</span>
+  <span class="pill pill-warning">Warning</span>
+  <span class="pill pill-error">Error</span>
+<%- end %>
+
+<div class="style-guide-result half">
+  <%= snippet %>
+</div>
+
+<div class="style-guide-code half">
+  <pre><code class="language-html"><%= escape_once snippet %></code></pre>
+</div>
+
+<div class="style-guide-result">
+  <h3>Orders</h3>
+
+  <table>
+    <thead>
+      <th>Date</th>
+      <th>Number</th>
+      <th>Payments</th>
+      <th>Shipments</th>
+      <th>Customer</th>
+      <th>Total</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>July 18, 2017</td>
+        <td>R1234</td>
+        <td><span class="pill pill-complete">Paid</span></td>
+        <td><span class="pill pill-complete">Shipped</span></td>
+        <td><a href="#">lauren@example.com</a></td>
+        <td>$75.00</td>
+      </tr>
+      <tr>
+        <td>July 17, 2017</td>
+        <td>R1234</td>
+        <td><span class="pill pill-pending">Balance Due</span></td>
+        <td><span class="pill pill-pending">Pending</span></td>
+        <td><a href="#">jessicajones@example.com</a></td>
+        <td>$105.00</td>
+      </tr>
+      <tr>
+        <td>July 15, 2017</td>
+        <td>R1234</td>
+        <td><span class="pill pill-warning">Credit Owed</span></td>
+        <td><span class="pill pill-pending">Ready</span></td>
+        <td><a href="#">john@example.com</a></td>
+        <td>$34.00</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="style-guide-result">
+  <h3>Promotions</h3>
+
+  <table>
+    <thead>
+      <th>Code</th>
+      <th>Status</th>
+      <th>Used</th>
+      <th>Start</th>
+      <th>End</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>FALL2017</td>
+        <td><span class="pill pill-inactive">Inactive</span></td>
+        <td>0</td>
+        <td>September 1, 2017</td>
+        <td>–</td>
+      </tr>
+      <tr>
+        <td>SAVE_20</td>
+        <td><span class="pill pill-active">Active</span></td>
+        <td>651</td>
+        <td>June 20, 2016</td>
+        <td>–</td>
+      </tr>
+      <tr>
+        <td>NEWSLETTER</td>
+        <td><span class="pill pill-inactive">Expired</span></td>
+        <td>358</td>
+        <td>January 1, 2016</td>
+        <td>March 30, 2016</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

data/app/views/spree/admin/style_guide/topics/components/_tabs.html.erb

@@ -0,0 +1,17 @@
+<%- snippet = capture do %>
+  <ul class="tabs">
+    <li class="active"><a href="#">Product Details</a></li>
+    <li><a href="#">Images</a></li>
+    <li><a href="#">Variants</a></li>
+    <li><a href="#">Product Properties</a></li>
+    <li><a href="#">Stock Management</a></li>
+  </ul>
+<%- end %>
+
+<div class="style-guide-result">
+  <%= snippet %>
+</div>
+
+<div class="style-guide-code">
+  <pre><code class="language-html"><%= escape_once snippet %></code></pre>
+</div>

data/app/views/spree/admin/style_guide/topics/forms/_building_forms.html.erb

@@ -0,0 +1,81 @@
+<p>This content is related to the current Solidus layout and it's forms, and does not apply to building pages with Bootstrap. The "Building Forms" section will be removed once all new Bootstrap layouts have been implemented in Solidus core.</p>
+<%- snippet = capture do %>
+  <form id="table-filter">
+    <fieldset>
+      <legend align="center">Search</legend>
+      <div class="row">
+        <div class="field-block col-3">
+          <div class="field">
+            <label for="q_number_cont" class="required">Text Field</label>
+            <input class="required" type="text">
+          </div>
+        </div>
+
+        <div class="field-block col-3">
+          <div class="date-range-filter field">
+            <label for="q_created_at_gt">Date Range</label>
+            <div class="input-group date-range-fields">
+              <input class="form-control datepicker datepicker-from" placeholder="From">
+              <div class="input-group-prepend input-group-append">
+                <span class="input-group-text range-divider">
+                  <i class="fa fa-arrow-right"></i>
+                </span>
+              </div>
+              <input class="form-control datepicker datepicker-to" placeholder="To">
+            </div>
+          </div>
+        </div>
+
+        <div class="col-3">
+          <div class="field checkbox">
+            <label>Select Box
+              <select>
+                <option>Option</option>
+              </select>
+            </label>
+          </div>
+
+          <div class="field">
+            <select class="custom-select">
+              <option>Option A</option>
+              <option>Option B</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="col-3">
+          <div class="field checkbox">
+            <label>
+              <input type="checkbox" checked="checked">
+              Checkbox
+            </label>
+          </div>
+
+          <div class='field'>
+            <label>
+              <input name='radio' type='radio'>
+              Option 1
+            </label>
+            <label>
+              <input name='radio' type='radio'>
+              Option 2
+            </label>
+            <label>
+              <input name='radio' type='radio'>
+              Option 3
+            </label>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </form>
+<%- end %>
+
+
+<div class="style-guide-result">
+  <%= snippet %>
+</div>
+
+<div class="style-guide-code">
+  <pre><code class="language-html"><%= escape_once snippet %></code></pre>
+</div>

data/app/views/spree/admin/style_guide/topics/forms/_buttons.html.erb

@@ -0,0 +1,6 @@
+<ul>
+  <li>Display form buttons at the bottom of the group, after the form inputs.</li>
+  <li>Primary action buttons and icons should be one style, secondary actions a second style, and destroy actions a third style.</li>
+  <li>Display search buttons and upload image buttons attached to the left side of the text field they accompany.</li>
+  <li>Allow users to submit a search form with the enter key when the cursor is inside of the search field.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/forms/_helper_text.html.erb

@@ -0,0 +1,13 @@
+<ul>
+  <li>Include a "i" icon and tooltip beside form labels with supplementary information.</li>
+  <li>Display input restrictions below form labels and above inputs (example: max 100 characters or specific formats).</li>
+  <li>Use helpful text like 'select a taxon' in dropdowns that don't have anything selected.</li>
+  <li>Don't display placeholder text inside text fields and boxes.</li>
+  <li>Display a progress/loading message or graphic if it takes a long time to submit a form.</li>
+</ul>
+
+
+
+
+
+

data/app/views/spree/admin/style_guide/topics/forms/_inputs.html.erb

@@ -0,0 +1,96 @@
+<div class=half>
+  <h4>Grouping and layout</h4>
+  <ul>
+    <li>Group inputs associated with one function within a background container.</li>
+    <li>Layout inputs in a logical order. Try to group similar input types to make it easier to fill out.</li>
+    <li>Display form fields side by side only if they're reasonably related. Don't do it just to fill the space.</li>
+    <li>Display date range fields side by side (and shorter than other text field types).</li>
+    <li>Stack radio buttons and checkboxes. Use more space between them if they aren't a group of similar items.</li>
+  </ul>
+</div>
+
+<div class="half">
+  <h4>Specific field types</h4>
+  <ul>
+    <li>Mark mandatory fields with an *.</li>
+    <li>Use radio buttons instead of dropdown lists for small finite lists and toggles.</li>
+    <li>Display a calendar icon in the right of date picker fields. When either the icon or the field is clicked, a calendar picker should appear.</li>
+    <li>Display a downwards pointing arrow in all dropdown lists, and Select2 dropdown fields.</li>
+    <li>Include a way for users to access a plain text version of their password in a password field.</li>
+  </ul>
+</div>
+
+<h4>Input widths</h4>
+<p>Size a text field or a text box so that it's indicative of how much text goes inside of it.</p>
+<table>
+  <tr>
+    <th>Input type</th>
+    <th>2/3 column<br>(main content area)</th>
+    <th>1/3 column<br>(secondary content area)</th>
+    <th>1/2 column<br>(main content, small screen)</th>
+    <th>1 column<br>(main & secondary content, small screen)
+  </tr>
+  <tr>
+    <td>text field - 'normal'</td>
+    <td>full, half, or quarter width</td>
+    <td>full or half width</td>
+    <td>full or half width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>text field - date picker</td>
+    <td>half width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>text field - multi selects  </td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>2 text fields - date range</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>text box</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>select box ('regular' and select2)</td>
+    <td>full, half, or quarter width</td>
+    <td>full or half width</td>
+    <td>full or half width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>checkbox - single</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>checkbox - list</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>radio button - list</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+</table>

data/app/views/spree/admin/style_guide/topics/forms/_labels.html.erb

@@ -0,0 +1,6 @@
+<ul>
+  <li>Left align field labels and do not include colons.</li>
+  <li>Display field labels above text fields, text boxes and drop downs, and to the right of checkboxes and radio buttons.</li>
+  <li>Labels should be in sentence casing (first letter of the first word is uppercase, the rest are lowercase).</li>
+  <li>Do not add underlines to labels.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/forms/_validation.html.erb

@@ -0,0 +1,21 @@
+<ul>
+  <li>Validate mandatory fields client-side to make sure content is present.</li>
+  <li>Display field labels in red when there is an error in their respective field.</li>
+  <li>Outline inputs in red when there is an error inside.</li>
+  <li>Display validation text in red and below the input it is referring to. It should be closer to that input than anything else on the page.</li>
+</ul>
+
+<div class="errorExplanation">
+  <h2>2 errors prohibited this record from being saved:</h2>
+  <p>There were problems with the following fields:</p>
+  <ul>
+    <li>Email can't be blank</li>
+    <li>Password can't be blank</li>
+  </ul>
+</div>
+
+<div class="field withError half">
+  <span class="field_with_errors"><label for="user_name">Name</label></span>
+    <span class="field_with_errors"><input class="fullwidth" type="text" name="user[name]" id="user_name"></span>
+  <span class="formError">can't be blank</span>
+</div>

data/app/views/spree/admin/style_guide/topics/layout/_full_width_table_layout.html.erb

@@ -0,0 +1,10 @@
+<ul>
+  <li>This one has a main column on the left and secondary column on the right for information to describe what happens in each section of the form. I expect this one will be used more often than the other.</li>
+  <li>Use this for forms that would benefit from a little extra explanation of how to use the section.</li>
+  <li>Use this for forms that have minimal fields and have many equal priority items in them.</li>
+  <li>Try to use this form layout first before using the next one.</li>
+</ul>
+
+
+
+

data/app/views/spree/admin/style_guide/topics/layout/_sidebar_layout.html.erb

@@ -0,0 +1,4 @@
+<ul>
+  <li>This one has a main column on the left and secondary column on the right for form things.</li>
+  <li>Use this for dense, self explanatory forms that have secondary information to them like timing on a product or promotion.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/messaging/_flashes.html.erb

@@ -0,0 +1,19 @@
+<button class="trigger-flash" data-flash-type="success">Success</button>
+<button class="trigger-flash" data-flash-type="notice">Warning</button>
+<button class="trigger-flash" data-flash-type="error">Error</button>
+
+<script>
+  $('.trigger-flash').on('click', function(){
+    type = $(this).data('flashType');
+
+    if (!$('.flash.' + type).is('*')) {
+      flash = $("<div class='flash'>")
+        .text(type)
+        .addClass(type)
+        .appendTo('.js-flash-wrapper')
+        .on('click', function() {
+          $(this).remove();
+        });
+    }
+  });
+</script>

data/app/views/spree/admin/style_guide/topics/messaging/_loading.html.erb

@@ -0,0 +1,30 @@
+<%- snippet = capture do %>
+  <div id="progress">
+    <div class="wrapper">
+      <div id="spinner" class="spinner"></div>
+      <div class="progress-message"><%= t('spree.loading') %>...</div>
+    </div>
+  </div>
+<%- end %>
+
+<div class="style-guide-result">
+  <%= snippet %>
+</div>
+
+<button id="loading-test-button">Toggle Loading</button>
+
+<script>
+  function closeProgress() {
+    $("#progress").toggle()
+    $(document).off('mousedown', 'body', closeProgress)
+  }
+
+  $('#loading-test-button').on('click', function(){
+    $("#progress").toggle({
+      duration: 0,
+      complete: function(){
+        $(document).on('mousedown', 'body', closeProgress)
+      }
+    })
+  });
+</script>