refactor(table): move css class logic to helper

Kajabi · Nov 21, 2022 · c300893 · c300893
1 parent 5fb9500
commit c300893
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 35 deletions.
diff --git a/docs/app/views/examples/components/table/_preview.html.erb b/docs/app/views/examples/components/table/_preview.html.erb
@@ -114,7 +114,7 @@ sample_table = {
 
 <%= sage_component SageTable, {
   caption: %(
-    Block cells can be used with anchor tags to link the entire cell, or <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> elements for content
+    Basic table
   ),
   has_menu_options: true,
   headers: [
@@ -187,22 +187,24 @@ sample_table = {
 <h3 class="t-sage-heading-6">Table with checkbox selection</h3>
 <%= sage_component SageTable, {
   caption: %(
-    Block cells can be used with anchor tags to link the entire cell, or <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> elements for content
+    People example
   ),
   has_leading_input: true,
   has_menu_options: true,
   headers: [
     "",
     "Name",
     "Email",
-    "Revenue",
-    "Status"
+    "Marketing Status",
+    "Added date",
+    "Last activity",
+    ""
   ],
   rows: [
     [
       %(
         #{sage_component(SageCheckbox, {
-          id:"c1",
+          id:"c331",
           label_text: "Checkbox",
           checked: false,
           disabled: false,
@@ -214,7 +216,14 @@ sample_table = {
         #{link_to "Frank Dux", "#", class: "sage-table-cell__link"}
       ),
       "fd@email.com",
-      "$275.43",
+      %(
+        #{sage_component(SageBadge, {
+          color: "locked",
+          value: "Subscribed",
+        })}
+      ),
+      "August 21, 2019",
+      "November 21, 2019",
       %(
         #{sage_component(SageButton, {
           value: "Icon only",
@@ -231,7 +240,7 @@ sample_table = {
     [
       %(
         #{sage_component(SageCheckbox, {
-          id:"c1",
+          id:"c332",
           label_text: "Checkbox",
           checked: false,
           disabled: false,
@@ -243,7 +252,14 @@ sample_table = {
         #{link_to "Stinkmeaner", "#", class: "sage-table-cell__link"}
       ),
       "st@email.com",
-      "$775.43",
+      %(
+        #{sage_component(SageBadge, {
+          color: "locked",
+          value: "Subscribed",
+        })}
+      ),
+      "December 18, 2019",
+      "February 16, 2021",
       %(
         #{sage_component(SageButton, {
           value: "Icon only",
@@ -260,7 +276,7 @@ sample_table = {
     [
       %(
         #{sage_component(SageCheckbox, {
-          id:"c1",
+          id:"c333",
           label_text: "Checkbox",
           checked: false,
           disabled: false,
@@ -272,7 +288,14 @@ sample_table = {
         #{link_to "Huey Freeman", "#", class: "sage-table-cell__link"}
       ),
       "hf@email.com",
-      "$1275.43",
+      %(
+        #{sage_component(SageBadge, {
+          color: "draft",
+          value: "Not subscribed",
+        })}
+      ),
+      "July 22, 2020",
+      "September 16, 2020",
       %(
         #{sage_component(SageButton, {
           value: "Icon only",
@@ -286,7 +309,7 @@ sample_table = {
           small: true
         })})
     ],
-  ]
+  ],
 } %>
 
 <h3 class="t-sage-heading-6">Responsive table with borders</h3>

diff --git a/docs/lib/sage_rails/app/helpers/sage_table_helper.rb b/docs/lib/sage_rails/app/helpers/sage_table_helper.rb
@@ -215,6 +215,56 @@ def sage_table_for(collection, opts={})
     table.contents
   end
 
+  def sage_table_classes(table)
+    table_classlist = "sage-table"
+
+    table_classlist << " sage-table--selectable" if table.selectable
+    table_classlist << " sage-table--condensed" if table.condensed
+    table_classlist << " sage-table--has-leading-input" if table.has_leading_input
+    table_classlist << " sage-table--has-menu-options" if table.has_menu_options
+
+    return table_classlist
+  end
+
+  def sage_table_wrapper_classes(table, is_responsive)
+    table_wrapper_classlist = "sage-table-wrapper"
+    table_wrapper_classlist << " sage-table-wrapper--reset-above" if table.reset_above
+    table_wrapper_classlist << " sage-table-wrapper--reset-below" if table.reset_below
+    table_wrapper_classlist << " sage-table-wrapper--scroll" if is_responsive
+
+    return table_wrapper_classlist
+  end
+
+  def sage_table_caption_classes(table)
+    table_caption_classlist = "sage-table__caption"
+
+    if table.caption_side
+      table_caption_classlist << " sage-table__caption--#{table.caption_side}"
+    end
+
+    return table_caption_classlist
+  end
+
+  def sage_table_row_classes(table)
+    table_row_classlist = ""
+
+    if table.selectable
+      table_row_classlist << "sage-table__row--selectable"
+    end
+
+    return table_row_classlist
+  end
+
+  def sage_table_cell_classes(table)
+    table_cell_classlist = ""
+
+    if table.has_borders
+      table_cell_classlist << "sage-table-cell--borders"
+    end
+
+    return table_cell_classlist
+  end
+
   def sage_table_sortable_header_link(label, attribute)
     current = attribute.to_s == sort_column
     asc = sort_direction == "asc"

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb
@@ -1,35 +1,24 @@
 <%
-is_responsive = true
-if component&.responsive == false
-  is_responsive = false
-end
+  # see `docs/lib/sage_rails/app/helpers/sage_table_helper.rb` for CSS class output logic
+  is_responsive = true
+  if component&.responsive == false
+    is_responsive = false
+  end
 %>
-<div class="
-  sage-table-wrapper
-  <%= "sage-table-wrapper--reset-above" if component.reset_above %>
-  <%= "sage-table-wrapper--reset-below" if component.reset_below %>
-  <%= "sage-table-wrapper--scroll" if is_responsive %>
+<div class="<%= sage_table_wrapper_classes(component, is_responsive) %>"
   <%= component.generated_css_classes %>
-">
+>
   <% if is_responsive %>
     <div class="sage-table-wrapper__overflow">
   <% end %>
 
-  <table class="
-      sage-table
-      <%= "sage-table--selectable" if component.selectable %>
-      <%= "sage-table--condensed" if component.condensed %>
-      <%= "sage-table--has-leading-input" if component.has_leading_input %>
-      <%= "sage-table--has-menu-options" if component.has_menu_options %>
-    "
+  <table
+    class="<%= sage_table_classes(component) %>"
     data-js-table
     <%= component.generated_html_attributes.html_safe %>
   >
     <% if component.caption.present? %>
-      <caption class="
-        sage-table__caption
-        <%= "sage-table__caption--#{component.caption_side}" if component.caption_side %>
-      ">
+      <caption class="<%= sage_table_caption_classes(component) %>">
         <%= component.caption.html_safe %>
       </caption>
     <% end %>
@@ -55,10 +44,10 @@ end
     <tbody>
       <% if component.rows.present? %>
         <% component.rows.each do | row | %>
-          <tr class="<%= "sage-table__row--selectable" if component.selectable %>">
+          <tr class="<%= sage_table_row_classes(component) %>">
             <% if row.is_a? Array %>
               <% row.each do | cell | %>
-                <td class="<%= "sage-table-cell--borders" if component.has_borders %>"
+                <td class="<%= sage_table_cell_classes(component) %>"
                   <% cell[:html_attributes].each do | key, value | %>
                     <%= "#{key}=#{value}" %>
                   <% end if cell&.is_a?(Hash) && cell[:html_attributes].present? %>
@@ -68,7 +57,7 @@ end
               <% end %>
             <% elsif row.is_a? Object or row.is_a? Hash %>
               <% row.each do | key, value | %>
-                <td class="<%= "sage-table-cell--borders" if component.has_borders %>"
+                <td class="<%= sage_table_cell_classes(component) %>"
                   data-cell-key="<%= key %>"
                   <% value[:html_attributes].each do | k, v | %>
                     <%= "#{k}=#{v}" %>