Merge pull request #275 from basemate/add_object_component

Add object core component incl. docs&specs

Author: pascalwengerter

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

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

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

@@ -0,0 +1,15 @@
+module Matestack::Ui::Core::Object
+  class Object < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        width: options[:width],
+        height: options[:height],
+        data: options[:data],
+        form: options[:form],
+        name: options[:name],
+        type: options[:type],
+        usemap: options[:usemap]
+      })
+    end
+  end
+end

docs/components/object.md

@@ -0,0 +1,61 @@
+# matestack core component: Object
+
+Show [specs](/spec/usage/components/object_spec.rb)
+
+The HTML `<object>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 9 optional configuration params, but at least one of the `data` or `type` attribute **MUST** be defined.
+
+#### # class (optional)
+Expects a string with all classes the `<object>` should have.
+
+#### # data (optional)
+Expects a string that specifies the URL of the resource to be used by the `<object`.
+
+#### # form (optional)
+Expects a string that contains one or more *form_id*-s to specify one or more forms the `<object>` belongs to.
+
+#### # height (optional)
+Expects a number to specify the height of the `<object>`.
+
+#### # id (optional)
+Expects a string with all ids the `<object>` should have.
+
+#### # name (optional)
+Expects a string that specifies a name for the `<object>`.
+
+#### # type (optional)
+Expects a string to specify the media type of data specified in the data attribute.
+
+#### # usemap (optional)
+Expects a string to specify the name of a client-side image map to be used with the `<object>`.
+
+#### # width (optional)
+Expects a number to specify the width of the `<object>`.
+
+
+## Example 1
+
+```ruby
+object width: 400, height: 400, data: 'helloworld.swf'
+```
+
+returns
+
+```html
+<object width="400" height="400" data="helloworld.swf"></object>
+```
+
+## Example 2
+
+```ruby
+object id: 'my-id', class: 'my-class', width: 400, height: 400, data: 'helloworld.swf'
+```
+
+returns
+
+```html
+<object id="my-id" class="my-class" width="400" height="400" data="helloworld.swf"></object>
+```

spec/usage/components/object_spec.rb

@@ -0,0 +1,38 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Object Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # simple object
+          object width: 400, height: 400, data: 'helloworld.swf'
+
+          # enhanced object
+          object id: 'my-id', class: 'my-class', width: 400, height: 400, data: 'helloworld.swf'
+
+          # using all attributes
+          object id: 'my-id', class: 'my-class', width: 400, height: 400, form: '#my_form', data: 'helloworld.swf', name: 'my_object', type: 'application/vnd.adobe.flash-movie', usemap: '#my_map'
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <object data="helloworld.swf" height="400" width="400"></object>
+    <object data="helloworld.swf" height="400" id="my-id" width="400" class="my-class"></object>
+    <object data="helloworld.swf" form="#my_form" height="400" id="my-id" name="my_object" type="application/vnd.adobe.flash-movie" usemap="#my_map" width="400" class="my-class"></object>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end