add output matestack core component

Closes #204

Author: marcoroth

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

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

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

@@ -0,0 +1,11 @@
+module Matestack::Ui::Core::Output
+  class Output < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!(
+        name: options[:name],
+        for: options[:for],
+        form: options[:form]
+      )
+    end
+  end
+end

docs/components/README.md

@@ -41,6 +41,7 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [legend](/docs/components/legend.md)
 - [mark](/docs/components/mark.md)
 - [noscript](/docs/components/noscript.md)
+- [output](/docs/components/output.md)
 - [sup](/docs/components/sup.md)
 - [sub](/docs/components/sub.md)
 - [var](/docs/components/var.md)

docs/components/output.md

@@ -0,0 +1,52 @@
+# matestack core component: Output
+
+Show [specs](/spec/usage/components/output_spec.rb)
+
+The HTML `<output>` tag implemented in ruby.
+
+## Parameters
+
+This component can take up to 5 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 `<output>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<output>` should have.
+
+#### # name (optional)
+Specifies a name for the `<output>` element
+
+#### # for (optional)
+Specifies the relationship between the result of the calculation, and the elements used in the calculation
+
+#### # form (optional)
+Specifies one or more forms the `<output>` element belongs to
+
+## Example 1:
+
+```ruby
+output name: 'x', for: 'a b', text: ''
+```
+
+returns
+
+```html
+<output for="a b" name="x"></output>
+```
+
+## Example 2:
+
+```ruby
+output id: 'my-id', class: 'my-class', name: 'x', for: 'a b', form: 'form_id' do
+  plain 'All attributes'
+end
+```
+
+returns
+
+```html
+<output for="a b" form="form_id" id="my-id" name="x" class="my-class">
+  All attributes
+</output>
+```

spec/usage/components/output_spec.rb

@@ -0,0 +1,35 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Output component', type: :feature, js: true do
+  it 'Renders a simple and enhanced output tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Without content
+          output name: 'x', for: 'a b'
+
+          # Only content
+          output text: 'Only content'
+
+          # All attributes
+          output id: 'my-id', class: 'my-class', name: 'x', for: 'a b', form: 'form_id' do
+            plain 'All attributes'
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <output for="a b" name="x"></output>
+      <output>Only content</output>
+      <output for="a b" form="form_id" id="my-id" name="x" class="my-class">All attributes</output>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end