fix(sortable-custom): add panel styling similar to sortable-item

Kajabi · Aug 18, 2021 · 3731a69 · 3731a69
1 parent 1a0d5d3
commit 3731a69
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/docs/app/views/examples/components/sortable/_preview.html.erb b/docs/app/views/examples/components/sortable/_preview.html.erb
@@ -120,7 +120,7 @@
 `SageSortableItemCustom` should be used when you want to create a layout within the Sortable Item that follows any pattern using specified dot and dash pattern denoted in the [Sage Grid Templates](http://sage-design-system.kajabi.com/pages/layout/grid_templates) docs. At its simpliest form, `SageSortableItemCustom` is `SageSortableItem` as cards with no image or subtitles, but any combination Sage Grid Template.
 ', use_sage_type: true) %>
 
-<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "te"</code></h3>
+<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "te"</code> as a Panel List</h3>
 <%= sage_component SageSortable, { resource_name: "link" } do %>
   <% 3.times do |i| %>
     <%= sage_component SageSortableItemCustom, {
@@ -178,11 +178,12 @@
   <% end %>
 <% end %>
 
-<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "me"</code></h3>
+<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "me"</code>as cards</h3>
 <%= sage_component SageSortable, {
   resource_name: "link" } do %>
   <% 3.times do %>
     <%= sage_component SageSortableItemCustom, {
+      card: true,
       grid_template: "me",
       id: "id",
       url_update: "update/endpoint",

diff --git a/docs/app/views/examples/components/sortable/_props.html.erb b/docs/app/views/examples/components/sortable/_props.html.erb
@@ -7,6 +7,12 @@
 <tr>
   <td colspan="4"><%= md('**Sortable Row**') %></td>
 </tr>
+<tr>
+  <td><%= md('`card`') %></td>
+  <td><%= md('Determines styling associated with SortableItem.') %></td>
+  <td><%= md('Boolean') %></td>
+  <td><%= md('`false`') %></td>
+</tr>
 <tr>
   <td><%= md('`grid_template`') %></td>
   <td><%= md('Sets the grid template to be used in the row of the component. See the [Grid Templates](http://sage-design-system.kajabi.com/pages/layout/grid_templates) to decide which pattern.') %></td>

diff --git a/docs/lib/sage_rails/app/sage_components/sage_sortable_item_custom.rb b/docs/lib/sage_rails/app/sage_components/sage_sortable_item_custom.rb
@@ -1,5 +1,6 @@
 class SageSortableItemCustom < SageComponent
   set_attribute_schema({
+    card: [:optional, TrueClass],
     grid_template: String,
     id: [:optional, Integer, String],
     url_update: [:optional, String],

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item_custom.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_sortable_item_custom.html.erb
@@ -1,6 +1,7 @@
 <li
   class="
     sage-sortable__item
+    <%= "sage-sortable__item--card" if component.card %>
     sage-sortable__item--custom
     <%= component.generated_css_classes %>
   "

diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
@@ -37,8 +37,7 @@ $-sortable-image-height: rem(48px);
     }
   }
 
-  &.sage-sortable__item--card,
-  &.sage-sortable__item--custom {
+  &.sage-sortable__item--card {
     padding: sage-spacing(xs) sage-spacing(card);
     border-bottom: sage-border();
     border-left: sage-border();