Add usemap attribute to image component

Author: pascalwengerter

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

@@ -6,6 +6,7 @@ def setup
         src: ActionController::Base.helpers.asset_path(options[:path]),
         height: options[:height],
         width: options[:width],
+        usemap: options[:usemap],
         alt: options[:alt]
       })
     end

docs/components/img.md

@@ -6,16 +6,19 @@ The HTML img tag implemented in ruby.
 
 ## Parameters
 
-The image takes a mandatory path argument and can take 3 optional configuration params.
+The image takes a mandatory path argument and can take 4 optional configuration params.
 
-#### # path
-Expects a string with the source to the image. It looks for the image in the assets/images folder and uses the standard Rails asset pipeline.
+#### # alt (optional)
+Expects a string with the alt text the image should have.
 
 #### # height (optional)
 Expects an integer with the height of the image in px.
 
+#### # path
+Expects a string with the source to the image. It looks for the image in the assets/images folder and uses the standard Rails asset pipeline.
+
+#### # usemap (optional)
+Expects a string to specify the image as a client-side image-map.
+
 #### # width (optional)
 Expects an integer with the width of the image in px.
-
-#### # alt (optional)
-Expects a string with the alt text the image should have.

spec/usage/components/img_spec.rb

@@ -8,13 +8,17 @@
     class ExamplePage < Matestack::Ui::Page
       def response
         components {
+          # simple image
           img path: 'matestack-logo.png', width: 500, height: 300, alt: "logo"
+          # using usemap
+          img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo",  usemap: "#newmap"
         }
       end
     end
 
     visit '/example'
 
     expect(page).to have_xpath("//img[contains(@src,'matestack-logo') and @alt='logo' and @width='500' and @height='300']")
+    expect(page).to have_xpath("//img[contains(@src,'matestack-logo') and @alt='otherlogo' and @width='500' and @height='300'] and @usemap='\#newmap'")
   end
 end