Merge pull request #265 from marcoroth/param_tag

add param matestack core component

Author: pascalwengerter

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

@@ -0,0 +1 @@
+%param{@tag_attributes}

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

@@ -0,0 +1,10 @@
+module Matestack::Ui::Core::Param
+  class Param < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        name: options[:name],
+        value: options[:value]
+      })
+    end
+  end
+end

docs/components/README.md

@@ -34,6 +34,7 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [button](/docs/components/button.md)
 - [link](/docs/components/link.md)
 - [label](/docs/components/label.md)
+- [param](/docs/components/param.md)
 - [progress](/docs/components/progress.md)
 - [ruby](/docs/components/ruby.md)
 - [rt](/docs/components/rb.md)

docs/components/param.md

@@ -0,0 +1,46 @@
+# matestack core component: Param
+
+Show [specs](/spec/usage/components/param_spec.rb)
+
+The HTML `<param>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 4 optional configuration params.
+
+#### # id (optional)
+Expects a string with all ids the `<param>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<param>` should have.
+
+#### # name (optional)
+Specifies the name of a parameter.
+
+#### # value (optional)
+Specifies the value of the parameter
+
+
+## Example 1:
+
+```ruby
+param name: 'autoplay', value: 'true'
+```
+
+returns
+
+```html
+<param name="autoplay" value="true">
+```
+
+## Example 2:
+
+```ruby
+param name: 'autoplay', value: 'true', id: 'my-id', class: 'my-class'
+```
+
+returns
+
+```html
+<param id="my-id" name="autoplay" value="true" class="my-class">
+```

spec/usage/components/param_spec.rb

@@ -0,0 +1,33 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Param component', type: :feature, js: true do
+  it 'Renders a param tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Just the tag
+          param
+
+          # With some attributes
+          param name: 'autoplay', value: 'true'
+
+          # All attributes
+          param name: 'autoplay', value: 'true', id: 'my-id', class: 'my-class'
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <param>
+      <param name="autoplay" value="true">
+      <param id="my-id" name="autoplay" value="true" class="my-class">
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end