Merge pull request #125 from basemate/extra-table-components

Add extra table components to core

Author: pascalwengerter

app/concepts/matestack/ui/core/tbody/tbody.haml

@@ -0,0 +1,3 @@
+%tbody{@tag_attributes}
+  - if block_given?
+    = yield

app/concepts/matestack/ui/core/tbody/tbody.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Tbody
+  class Tbody < Matestack::Ui::Core::Component::Static
+
+  end
+end

app/concepts/matestack/ui/core/tfoot/tfoot.haml

@@ -0,0 +1,3 @@
+%tfoot{@tag_attributes}
+  - if block_given?
+    = yield

app/concepts/matestack/ui/core/tfoot/tfoot.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Tfoot
+  class Tfoot < Matestack::Ui::Core::Component::Static
+
+  end
+end

app/concepts/matestack/ui/core/thead/thead.haml

@@ -0,0 +1,3 @@
+%thead{@tag_attributes}
+  - if block_given?
+    = yield

app/concepts/matestack/ui/core/thead/thead.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Thead
+  class Thead < Matestack::Ui::Core::Component::Static
+
+  end
+end

docs/components/table.md

@@ -2,12 +2,12 @@
 
 Show [specs](../../spec/usage/components/table_spec.rb)
 
-Use tables to implement `<table>`, `<tr>`, `<th>` and `<td>`-tags.
+Use tables to implement `<table>`, `<tr>`, `<th>`, `<td>`, `<thead>`, `<tbody>` and `<tfoot>` tags.
 
 ## Parameters
 
-`<table>`, `<tr>`, can take 2 optional configuration params.
-`<th>` and `<td>`-tags can also take a third param, text input.
+`<table>`, `<tr>`, `<thead>`, `<tbody>` and `<tfoot>` can take 2 optional configuration params.
+`<th>` and `<td>` tags can also take a third param, text input.
 
 #### # id (optional)
 Expects a string with all ids the element should have.
@@ -23,20 +23,31 @@ Implementing a simple, hard coded table.
 
 ```ruby
 table class: "foo" do
-  tr class: "bar" do
-    th text: "First"
-    th text: "Matestack"
-    th text: "Table"
+  thead do
+    tr class: "bar" do
+      th text: "First"
+      th text: "Matestack"
+      th text: "Table"
+    end
   end
-  tr do
-    td text: "One"
-    td text: "Two"
-    td text: "Three"
+  tbody do
+    tr do
+      td text: "One"
+      td text: "Two"
+      td text: "Three"
+    end
+    tr do
+      td text: "Uno"
+      td text: "Dos"
+      td text: "Tres"
+    end
   end
-  tr do
-    td text: "Uno"
-    td text: "Dos"
-    td text: "Tres"
+  tfoot do
+    tr do
+      td text: "Eins"
+      td text: "Zwei"
+      td text: "Drei"
+    end
   end
 end
 ```
@@ -128,3 +139,72 @@ returns
   </tr>
 </table>
 ```
+
+## Example 3
+
+`thead`, `tbody` and `tfoot` are optional containers for any number of `tr`s. If none are specified, `tbody` will be used to contain all `tr` components. `thead` is typically used for the head of the table, and `tfoot` for any table footer, where applicable, such as a sum or count.
+
+```ruby
+table do
+  thead do
+    tr do
+      th text: "Product"
+      th text: "Price"
+    end
+  end
+  # tbody is unnecessary, since it has no class or id and will be added automatically
+  # tbody do
+    tr do
+      td text: "Apples"
+      td text: "3.50"
+    end
+    tr do
+      td text: "Oranges"
+      td text: "2.75"
+    end
+    tr do
+      td text: "Bananas"
+      td text: "4.99"
+    end
+  # end
+  tfoot do
+    tr do
+      td text: "Total:"
+      td text: "11.24"
+    end
+  end
+end
+```
+
+returns
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Product</th>
+      <th>Price</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Apples</td>
+      <td>3.50</td>
+    </tr>
+    <tr>
+      <td>Oranges</td>
+      <td>2.75</td>
+    </tr>
+    <tr>
+      <td>Bananas</td>
+      <td>4.99</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Total:</td>
+      <td>11.24</td>
+    </tr>
+  </tfoot>
+</table>
+```

spec/usage/components/table_th_tr_td_spec.rb renamed to spec/usage/components/table_spec.rb

@@ -1,7 +1,7 @@
 require_relative '../../support/utils'
 include Utils
 
-describe 'Table Components table, th, tr, td', type: :feature, js: true do
+describe 'Table Components table, th, tr, td, thead, tbody, tfoot', type: :feature, js: true do
 
   it 'Example 1' do
 
@@ -10,20 +10,31 @@ class ExamplePage < Matestack::Ui::Page
       def response
         components {
           table class: 'foo' do
-            tr class: 'bar' do
-              th text: 'First'
-              th text: 'Matestack'
-              th text: 'Table'
+            thead class: 'head' do
+              tr class: 'bar' do
+                th text: 'First'
+                th text: 'Matestack'
+                th text: 'Table'
+              end
             end
-            tr do
-              td text: 'One'
-              td text: 'Two'
-              td text: 'Three'
+            tbody class: 'body' do
+              tr do
+                td text: 'One'
+                td text: 'Two'
+                td text: 'Three'
+              end
+              tr do
+                td text: 'Uno'
+                td text: 'Dos'
+                td text: 'Tres'
+              end
             end
-            tr do
-              td text: 'Uno'
-              td text: 'Dos'
-              td text: 'Tres'
+            tfoot class: 'foot' do
+              tr do
+                td text: 'Eins'
+                td text: 'Zwei'
+                td text: 'Drei'
+              end
             end
           end
         }
@@ -37,12 +48,14 @@ def response
 
     expected_static_output = <<~HTML
     <table class="foo">
-      <tbody>
+      <thead class="head">
         <tr class="bar">
           <th>First</th>
           <th>Matestack</th>
           <th>Table</th>
         </tr>
+      </thead>
+      <tbody class="body">
         <tr>
           <td>One</td>
           <td>Two</td>
@@ -54,13 +67,20 @@ def response
           <td>Tres</td>
         </tr>
       </tbody>
+      <tfoot class="foot">
+        <tr>
+          <td>Eins</td>
+          <td>Zwei</td>
+          <td>Drei</td>
+        </tr>
+      </tfoot>
     </table>
     HTML
 
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 
-  it 'Example 2' do
+  it 'Example 2, when thead, tbody, tfoot are omitted, then tbody is implied' do
 
     class ExamplePage < Matestack::Ui::Page
 
@@ -137,4 +157,55 @@ def response
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 
+  it 'Example 2, with only thead, then tbody is implied for other rows' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          table do
+            thead do
+              tr do
+                th text: 'First'
+                th text: 'Matestack'
+                th text: 'Table'
+              end
+            end
+            tr do
+              td text: 'One'
+              td text: 'Two'
+              td text: 'Three'
+            end
+          end
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <table>
+      <thead>
+        <tr>
+          <th>First</th>
+          <th>Matestack</th>
+          <th>Table</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>One</td>
+          <td>Two</td>
+          <td>Three</td>
+        </tr>
+      </tbody>
+    </table>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
 end