Merge pull request #247 from basemate/add_var_component

add var component

Author: pascalwengerter

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

@@ -0,0 +1,5 @@
+%var{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

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

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

docs/components/README.md

@@ -5,20 +5,21 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 
 ## Static Core Components
 
+- [b](/docs/components/b.md)
+- [br](/docs/components/br.md)
 - [div](/docs/components/div.md)
-- [header](/docs/components/header.md)
 - [footer](/docs/components/footer.md)
+- [header](/docs/components/header.md)
+- [heading](/docs/components/heading.md)
+- [kbd](/docs/components/kbd.md)
+- [hr](/docs/components/hr.md)
+- [icon](/docs/components/icon.md)
 - [main](/docs/components/main.md)
 - [nav](/docs/components/nav.md)
-- [section](/docs/components/section.md)
-- [br](/docs/components/br.md)
-- [hr](/docs/components/hr.md)
-- [heading](/docs/components/heading.md)
 - [plain](/docs/components/plain.md)
 - [pg](/docs/components/pg.md)
+- [section](/docs/components/section.md)
 - [span](/docs/components/span.md)
-- [b](/docs/components/b.md)
-- [icon](/docs/components/icon.md)
 - [list](/docs/components/list.md)
   - ul
   - ol
@@ -28,7 +29,6 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
   - tr
   - td
 - [img](/docs/components/img.md)
-- [video](/docs/components/video.md)
 - [button](/docs/components/button.md)
 - [link](/docs/components/link.md)
 - [label](/docs/components/label.md)
@@ -40,7 +40,8 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [noscript](/docs/components/noscript.md)
 - [sup](/docs/components/sup.md)
 - [sub](/docs/components/sub.md)
-- [kbd](/docs/components/kbd.md)
+- [var](/docs/components/var.md)
+- [video](/docs/components/video.md)
 
 ## Dynamic Core Components
 

docs/components/var.md

@@ -0,0 +1,45 @@
+# matestack core component: Var
+
+Show [specs](/spec/usage/components/var_spec.rb)
+
+The HTML `<var>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params and either yield content or display what gets passed to the `text` configuration param.
+
+#### # id (optional)
+Expects a string with all ids the `<var>` tag should have.
+
+#### # class (optional)
+Expects a string with all classes the `<var>` tag should have.
+
+## Example 1: Yield a given block
+
+```ruby
+var id: "foo", class: "bar" do
+  plain 'Simple text'
+end
+```
+
+returns
+
+```html
+<var id="foo" class="bar">
+  Simple text
+</var>
+```
+
+## Example 2: Render options[:text] param
+
+```ruby
+var id: "foo", class: "bar", text: 'Simple text'
+```
+
+returns
+
+```html
+<var id="foo" class="bar">
+  Simple text
+</var>
+```

spec/usage/components/var_spec.rb

@@ -0,0 +1,35 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Var Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # example 1
+          var id: "foo", class: "bar" do
+            plain 'I get yielded'
+          end
+          # example 2
+          var id: "foo", class: "bar", text: 'I am text'
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <var id="foo" class="bar">I get yielded</var>
+    <var id="foo" class="bar">I am text</var>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end