Next version bump

docs/app/views/examples/components/icon/_props.html.erb

@@ -36,7 +36,10 @@
 </tr>
 <tr>
   <td><%= md('`icon`') %><%= sage_component SageBadge, { color: "published", value: "required" } %></td>
-  <td><%= md('Which icon to display. See Sage Icons under "Design."') %></td>
+  <td><%= md('
+    Which icon to display. See Sage Icons under "Figma Design."
+    Note: `null` is also available to place an empty space icon
+  ') %></td>
   <td><%= md('`String` for desired icon.') %></td>
   <td><%= md('--') %></td>
 </tr>

docs/app/views/examples/components/list/_preview.html.erb

@@ -55,41 +55,76 @@ sample_products = [
 
 <h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Default configuration</h3>
 <%= md("
-SageList is implemented most simply by passing the desired contents for the items through the `SageList` `items` property.
-This assumes that the contents of the list are already formatted as desired.
+`SageList` is implemented most simply by passing the desired contents for the items through the `SageList` `items` property.
+This assumes that the contents of the list are already formatted as desired or you're outputting simple content values.
 ", use_sage_type: true) %>
 
 <%= sage_component SageList, {
+  items: sample_products.map { | item | {
+      content: "Item #{item[:name]}",
+      id: "example-default-item-#{item[:id]}",
+      more_actions: { items: dropdown_items(item[:id]) },
+    }
+  },
+} %>
+
+<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Sortable configuration</h3>
+<%= md("
+Sortable lists can be created with `SageList` by adding `sortable: true` and a `sortable_resource`.
+You can also pass a `sortable_update_url` for sorting callbacks to items
+that will be called after the user finishes sorting an item.
+", use_sage_type: true) %>
+
+<%= sage_component SageList, {
+  sortable: true,
   sortable_resource: "sample_products",
   items: sample_products.map { | item | {
-      content: %(
-        <h4>Item #{item[:name]}</h4>
-        <p>Item #{item[:id]} specs</p>
-      ).html_safe,
-      id: item[:id],
+      content: "Item #{item[:name]}",
+      id: "example-sortable-item-#{item[:id]}",
       more_actions: { items: dropdown_items(item[:id]) },
-      sortable: true,
       sortable_update_url: "#sortable-update-url?item=#{item[:id]}",
     }
-  }
+  },
+} %>
+
+<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Fully draggable row</h3>
+<%= md('
+By default only the drag handle is active for dragging/sorting a row.
+However, `drag_handle_type` can be set to `"row"` in order to allow the whole row to be draggable instead.
+', use_sage_type: true) %>
+
+<%= sage_component SageList, {
+  sortable: true,
+  sortable_resource: "sample_products_2",
+  items: sample_products.map { | item | {
+    content: "Item #{item[:name]}",
+    id: "example-fully-draggable-item-#{item[:id]}",
+    more_actions: { items: dropdown_items(item[:id]) },
+    sortable_update_url: "#sortable-update-url?item=#{item[:id]}",
+  }},
+  drag_handle_type: "row",
 } %>
 
 <h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Compositional approach</h3>
 <%= md("
-If you need more native content formatting you can instead opt to render items using a nested loop and the SageListItem component.
+If you need more native content formatting you can instead opt to render items using a nested loop and the `SageListItem` component.
+Note that this example also implements the [Reveal utility class](#{pages_helpers_path(:reveal)}).
 ", use_sage_type: true) %>
 
-<%= sage_component SageList, { sortable_resource: "sample_products_2" } do %>
+<%= sage_component SageList, {
+  sortable: true,
+  sortable_resource: "sample_products_3",
+  drag_handle_type: "row",
+} do %>
   <% sample_products.each do | item | %>
     <%= sage_component SageListItem, {
-      id: item[:id],
+      id: "example-default-item-#{item[:id]}",
       more_actions: { items: dropdown_items(item[:id]) },
-      sortable: true,
       sortable_update_url: "#sortable-update-url?item={item[:id]}",
       css_classes: SageClassnames::REVEAL_CONTAINER,
     } do %>
       <%= sage_component SageCardRow, { grid_template: "ete" } do %>
-        <img src="//source.unsplash.com/random/240x160?v=<%= item[:id] %>" width="100" alt="" />
+        <img src="https://source.unsplash.com/random/240x160?v=<%= item[:id] %>" width="64" alt="" />
         <%= sage_component SageCardBlock, {} do %>
           <h4><%= item[:name] %></h4>
           <p>Item <%= item[:id] %> specs</p>

docs/app/views/examples/components/list/_props.html.erb

@@ -9,18 +9,21 @@
   <td><%= md('See schema for `SageListItem` below.') %></td>
   <td><%= md('`[]`') %></td>
 </tr>
+<tr>
+  <td><%= md('`drag_handle_type`') %></td>
+  <td><%= md('
+    By default only the drag handle is active for dragging/sorting a row.
+    However, `drag_handle_type` can be set to `"row"` in order to allow the whole row to be draggable instead.
+  ') %></td>
+  <td><%= md('`"default"` | `"row"` ') %></td>
+  <td><%= md('`"default"`') %></td>
+</tr>
 <tr>
   <td><%= md('`sortable_resource`') %></td>
   <td><%= md('Provide the resource name for a sortable list. Required only when `sortable` is activated for any child items') %></td>
   <td><%= md('String') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
-<tr>
-  <td><%= md('`hide_first_border`') %></td>
-  <td><%= md('Removes top border from first list item within a SageList') %></td>
-  <td><%= md('Boolean') %></td>
-  <td><%= md('`false`') %></td>
-</tr>
 <tr>
   <td colspan="4">
     <%= md("**SageListItem**") %>

docs/app/views/examples/components/modal/_preview.html.erb

@@ -45,6 +45,14 @@
         "data-js-modaltrigger": "cool-modal-large",
       }
     } %>
+    <%= sage_component SageButton, {
+      style: "primary",
+      icon: { name: "launch", style: "right" },
+      value: "Modal with Size Option",
+      attributes: {
+        "data-js-modaltrigger": "cool-modal-size-option",
+      }
+    } %>
     <%= sage_component SageButton, {
       style: "primary",
       icon: { name: "launch", style: "right" },
@@ -262,6 +270,41 @@
       <% end %>
     <% end %>
   <% end %>
+
+  <%# Standard Modal with Size Option %>
+  <%= sage_component SageModal, { id: "cool-modal-size-option", size: "full" } do %>
+    <%= sage_component SageModalContent, {
+      title: "Example Modal"
+    } do %>
+      <% content_for :sage_header_aside do %>
+        <%= sage_component SageButton, {
+          style: "secondary",
+          subtle: true,
+          value: "Close Modal",
+          icon: { name: "remove", style: "only" },
+          attributes: { "data-js-modal": true }
+        } %>
+      <% end %>
+
+      <%= sample_body_text %>
+
+      <% content_for :sage_footer do %>
+        <% content_for :sage_footer_aside do %>
+          <%= sage_component SageButton, {
+            style: "secondary",
+            subtle: true,
+            value: "Close Modal",
+            attributes: { "data-js-modal": true }
+          } %>
+        <% end %>
+        <%= sage_component SageButton, {
+          style: "primary",
+          icon: { name: "check", style: "left" },
+          value: "Take An Action",
+        } %>
+      <% end %>
+    <% end %>
+  <% end %>
   <%# Large Modal %>
   <%= sage_component SageModal, {
     id: "cool-modal-large",

docs/lib/sage_rails/app/helpers/sage_grid_helper.rb

@@ -0,0 +1,34 @@
+module SageGridHelper
+  def grid_column_classes(col)
+    column_classes = ""
+
+    if col.breakpoint.present? && col.size.present?
+      # if both breakpoint and sizing are provided
+      column_classes << "sage-col--#{col.breakpoint}-#{col.size} "
+    elsif !col.breakpoint.present? && col.size.present?
+      # or if only a size is provided, without a breakpoint
+      column_classes << "sage-col-#{col.size} "
+    elsif !col.breakpoint.present? && !col.size.present? && grid_col_legacy(col)
+      # or if a legacy individual breakpoint is provided
+      grid_col_breakpoint_individual(col, column_classes)
+    else
+      # otherwise we display a default unsized column
+      column_classes << "sage-col "
+    end
+
+    column_classes << col.generated_css_classes
+  end
+
+  private
+
+  def grid_col_legacy(col)
+    col.xlarge.present? || col.large.present? || col.medium.present? || col.small.present?
+  end
+
+  def grid_col_breakpoint_individual(col, column_classes)
+    column_classes << "sage-col--xl-#{col.xlarge} " if col.xlarge.present?
+    column_classes << "sage-col--lg-#{col.large} " if col.large.present?
+    column_classes << "sage-col--md-#{col.medium} " if col.medium.present?
+    column_classes << "sage-col--sm-#{col.small} " if col.small.present?
+  end
+end

docs/lib/sage_rails/app/sage_components/sage_modal.rb

@@ -12,6 +12,7 @@ class SageModal < SageComponent
     id: [:optional, NilClass, String],
     large: [:optional, TrueClass],
     remove_content_on_close: [:optional, TrueClass],
-    remote_url: [:optional, String]
+    remote_url: [:optional, String],
+    size: [:optional, Set.new(SageTokens::CONTAINER_SIZES)]
   })
 end

docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb

@@ -143,15 +143,15 @@ module SageSchemas
   LIST_ITEM = {
     id: [:optional, Integer, String],
     more_actions: [:optional, NilClass, SageSchemas::DROPDOWN],
-    sortable: [:optional, NilClass, TrueClass],
     sortable_update_url: [:optional, NilClass, String],
   }
 
   LIST = {
+    drag_handle_type: [:optional, NilClass, Set.new(["default", "row"])],
     items: [:optional, [[SageSchemas::LIST_ITEM]]],
+    sortable: [:optional, NilClass, TrueClass],
     sortable_resource: [:optional, NilClass, String],
     tag: [:optional, NilClass, Set.new(["ul", "ol"])],
-    hide_first_border: [:optional, TrueClass, String],
   }
 
   PANEL_FIGURE = {

docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb

@@ -250,6 +250,7 @@ def SageTokens.grid_templates
     "move-right",
     "multi-pay",
     "newsletter",
+    "null",
     "one-off-session",
     "one-time",
     "package",

docs/lib/sage_rails/app/views/sage_components/_sage_grid_col.html.erb

@@ -1,14 +1,3 @@
-<% has_infix = component.breakpoint || component.size || component.small || component.medium || component.large %>
-
-<div class="
-  <%= "sage-col" if !has_infix -%>
-  <%= "sage-col-#{component.size}" if component.size -%>
-  <%= "sage-col--#{component.breakpoint}-#{component.size}" if component.breakpoint && component.size -%>
-  <%= "sage-col--sm-#{component.small}" if component.small%>
-  <%= "sage-col--md-#{component.medium}" if component.medium%>
-  <%= "sage-col--lg-#{component.large}" if component.large%>
-  <%= "sage-col--xl-#{component.xlarge}" if component.xlarge%>
-  <%= component.generated_css_classes %>
-" <%= component.generated_html_attributes.html_safe %>>
+<div class="<%= grid_column_classes(component) %>" <%= component.generated_html_attributes.html_safe %>>
   <%= component.content %>
 </div>

docs/lib/sage_rails/app/views/sage_components/_sage_list.html.erb

@@ -1,11 +1,14 @@
 <%
-tag = component.tag.present? ? component.tag : "ul"
+tag = component.sortable ? "ol" : "ul"
+tag = component.tag || tag
+drag_handle_type = component.drag_handle_type.present? ? component.drag_handle_type : "default"
 %>
 <<%= tag %>
   class="
     sage-list
     <%= component.generated_css_classes %>
-    <%= "sage-list--hide-first-border" if component.hide_first_border %>
+    <%= "sage-list--sortable" if component.sortable %>
+    <%= "sage-list--draggable-by-row" if drag_handle_type == "row" %>
   "
   <%= "data-js-list-sortable=#{component.sortable_resource}" if component.sortable_resource.present? %>
   <%= component.generated_html_attributes.html_safe %>
@@ -15,6 +18,5 @@ tag = component.tag.present? ? component.tag : "ul"
       <%= sage_component SageListItem, item_configs %>
     <% end %>
   <% end %>
-
   <%= component.content %>
 </<%= tag %>>

docs/lib/sage_rails/app/views/sage_components/_sage_list_item.html.erb

@@ -10,18 +10,15 @@ end
 <li
   class="
     sage-list__item
-    <%= "sage-list__item--sortable" if component.sortable %>
     <%= component.generated_css_classes %>
   "
   <%= "data-js-list-sortable-update-url=#{component.sortable_update_url}" if component.sortable_update_url.present? %>
   <%= "id=#{component.id}" if component.id %>
   <%= component.generated_html_attributes.html_safe %>
 >
-  <% if component.sortable %>
-    <div class="sage-list__item-sortable-handle">
-      <%= sage_component SageIcon, { icon: "handle" } %>
-    </div>
-  <% end %>
+  <div class="sage-list__item-sortable-handle">
+    <%= sage_component SageIcon, { icon: "handle-2-vertical" } %>
+  </div>
 
   <div class="sage-list__item-content">
     <%= component.content %>

docs/lib/sage_rails/app/views/sage_components/_sage_modal.html.erb

@@ -6,6 +6,7 @@
     <%= "sage-modal--no-blur" if component.disable_background_blur -%>
     <%= "sage-modal--no-background-dismiss" if component.disable_background_dismiss -%>
     <%= "sage-modal--scrollable" if component.allow_scroll %>
+    <%= "sage-modal--size-#{component.size}" if component.size %>
     <%= component.generated_css_classes %>
   "
   <%= "data-sage-animate" if component.animate.present? %>

package.json

@@ -11,7 +11,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "commitizen": "^4.2.2",
     "dotenv": "8.2.0",
-    "eslint": "^7.10.0",
+    "eslint": "7.32.0",
     "handlebars": "^4.7.7",
     "lerna": "^3.22.1",
     "lodash": "^4.17.21",