Merge pull request #319 from matestack/add_template_component

add template tag to core components

Author: jonasjabari

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

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

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

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

docs/components/README.md

@@ -78,6 +78,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
   - th
   - tr
   - td
+- [template](/docs/components/template.md)
 - [u](/docs/components/u.md)
 - [var](/docs/components/var.md)
 - [video](/docs/components/video.md)

docs/components/template.md

@@ -0,0 +1,52 @@
+# matestack core component: Template
+
+Show [specs](/spec/usage/components/template_spec.rb)
+
+The HTML `<template>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params and yield content, either directly or through partials/custom components.
+
+#### # id (optional)
+Expects a string with all ids the `<template>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<template>` should have.
+
+## Example 1: Yield other components inside a template
+
+```ruby
+template id: 'foo', class: 'bar' do
+  paragraph text: 'Template example 1' # optional content
+end
+```
+
+returns
+
+```html
+<template id="foo" class="bar">
+  <p>Template example 1</p>
+</template>
+```
+
+## Example 2: Render a given block, e.g. a partial
+
+```ruby
+template id: 'foo', class: 'bar' do
+  partial :example_content
+end
+
+def example_content
+  partial {
+    paragraph text: 'I am part of a partial'
+  }
+end
+```
+
+returns
+
+```html
+<template id="foo" class="bar">
+  <p>I am part of a partial</p>
+</template>

spec/usage/components/template_spec.rb

@@ -0,0 +1,46 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Template component', type: :feature, js: true do
+  it 'Renders a simple and enhanced template tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Simple template
+          template id: 'foo', class: 'bar' do
+            paragraph text: 'Template example 1'
+          end
+
+          # Enhanced template
+          template id: 'foobar', class: 'bar' do
+            partial :example_content
+          end
+        }
+      end
+
+      def example_content
+        partial {
+          paragraph text: 'I am part of a partial'
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <p>Template example 1</p>
+      <p>I am part of a partial</p>
+    HTML
+    # Below is the original output, but capybara/rspec does not recognize <template>-tags
+    # <template id="foo" class="bar">
+    #   <p>Template example 1</p>
+    # </template>
+    # <template id="foobar" class="bar">
+    #   <p>I am part of a partial</p>
+    # </template>
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end