Merge branch 'develop' into add_object_component

Author: pascalwengerter

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

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

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

@@ -0,0 +1,18 @@
+module Matestack::Ui::Core::Area
+  class Area < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        alt: options[:alt],
+        coords: options[:coords].join(','),
+        download: options[:download],
+        href: options[:href],
+        hreflang: options[:hreflang],
+        media: options[:media],
+        rel: options[:rel],
+        shape: options[:shape],
+        target: options[:target],
+        type: options[:type]
+      })
+    end
+  end
+end

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

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

@@ -9,7 +9,8 @@ def setup
         "id": component_id,
         "method": options[:method],
         "target": options[:target] ||= nil,
-        "href": link_path
+        "href": link_path,
+        "title": options[:title]
       })
     end
 

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

@@ -0,0 +1,3 @@
+%map{@tag_attributes}
+  - if block_given?
+    = yield

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

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

builder/yarn.lock

@@ -0,0 +1,62 @@
+# matestack core component: Area
+
+Tested within the [map specs](/spec/usage/components/map_spec.rb).
+
+The HTML `<area>` tag implemented in Ruby.
+
+## Parameters
+This component takes up to 10 optional configuration params. It is meant to be used within the `<map>` component.
+
+#### # alt (optional)
+Expects a string that specifies an alternate text for the `<area>`. Required if the href attribute is present.
+
+#### # coords (optional)
+Expects an array of integers that define the `<area>`'s coordinates. For more details, see the [official documentation](https://www.w3schools.com/tags/att_area_coords.asp).
+
+#### # download (optional)
+Expects a string to specify the target that will be downloaded when a user clicks on the hyperlink.
+
+#### # href (optional)
+Expects a string to specify the hyperlink target for the area.
+
+#### # hreflang (optional)
+Expects a string to specify the language of the target URL.
+
+#### # media (optional)
+Expects a string to specify what media/device the target URL is optimized for.
+
+#### # rel (optional)
+Expects a string to specify the relationship between the current document and the target URL.
+
+#### # shape (optional)
+Expects a string to specify the shape of the area: Default, rect, circle, poly.
+
+#### # target (optional)
+Expects a string to specify where to open the target URL.
+
+#### # type (optional)
+Expects a string to specify the media type of the target URL.
+
+## Example:
+
+```ruby
+img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo",  usemap: "#newmap"
+
+map name: 'newmap' do
+  area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
+  area shape: 'rect', coords: [0,0,100,100], href: 'second.htm', alt: 'Second'
+  area shape: 'rect', coords: [0,0,100,100], href: 'third.htm', alt: 'Third'
+end
+```
+
+returns
+
+```html
+<img src="matestack-logo.png" alt="otherlogo" width="500" height="300" usemap="#newmap">
+
+<map name="newmap">
+   <area shape="rect" coords="0,0,100,100" href="first.htm" alt="First">
+   <area shape="rect" coords="100,100,200,200" href="second.htm" alt="Second">
+   <area shape="rect" coords="200,200,300,300" href="third.htm" alt="Third">
+</map>
+```

docs/components/area.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.

docs/components/img.md

@@ -28,6 +28,9 @@ The HTTP request method the link should implement.
 #### # target (optional, default is nil)
 Specify where to open the linked document.
 
+#### # title (optional)
+Specify a title for the link (shown on mouseover).
+
 ## Example 1
 This example renders a simple link within a `<div`-tag
 
@@ -50,7 +53,7 @@ This example renders a link without a specific link-text, so it wraps the rest o
 
 ```ruby
 div id: "foo", class: "bar" do
-  link path: "https://matestack.org" do
+  link path: "https://matestack.org", title: "The matestack website" do
     plain "Here"
   end
 end
@@ -59,7 +62,7 @@ end
 returns
 
 ```html
-<div id="foo" class="bar">
+<div id="foo" class="bar" title="The matestack website">
   <a href="https://matestack.org">Here</a>
 </div>
 ```
@@ -107,3 +110,37 @@ returns
   </a>
 </div>
 ```
+
+## Example 5 - path from symbol
+This example renders a link with a get request to any within your Rails application. In case you want to switch between pages within one specific matestack app, using the `transition` component probably is a better idea though!
+
+```ruby
+div id: "foo", class: "bar" do
+  link path: :inline_edit_path, text: 'Click to edit'
+end
+```
+
+returns
+
+```html
+<div id="foo" class="bar">
+  <a href="/inline_edit">Click to edit</a>
+</div>
+```
+
+## Example 6 - path from symbol with params
+You can also dynamically create `paths` from symbols and params, as displayed below:
+
+```ruby
+div id: "foo", class: "bar" do
+  link path: :single_endpoint_path, params: {number: 1}, text: 'Call API endpoint 1'
+end
+```
+
+returns
+
+```html
+<div id="foo" class="bar">
+  <a href="/api/single_endpoint/1">Call API endpoint 1</a>
+</div>
+```

docs/components/link.md

@@ -0,0 +1,41 @@
+# matestack core component: Map
+
+Show [specs](/spec/usage/components/map_spec.rb)
+
+The HTML `<map>` tag implemented in Ruby.
+
+## Parameters
+This component has a required `name` attribute and takes 2 optional configuration params. It contains a number of `<area>` elements that define the clickable areas in the image map.
+
+#### # id (optional)
+Expects a string with all ids the `<map>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<map>` should have.
+
+#### # name
+Specifies the name of a parameter.
+
+## Example:
+
+```ruby
+img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo",  usemap: "#newmap"
+
+map name: 'newmap' do
+  area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
+  area shape: 'rect', coords: [0,0,100,100], href: 'second.htm', alt: 'Second'
+  area shape: 'rect', coords: [0,0,100,100], href: 'third.htm', alt: 'Third'
+end
+```
+
+returns
+
+```html
+<img src="matestack-logo.png" alt="otherlogo" width="500" height="300" usemap="#newmap">
+
+<map name="newmap">
+   <area shape="rect" coords="0,0,100,100" href="first.htm" alt="First">
+   <area shape="rect" coords="100,100,200,200" href="second.htm" alt="Second">
+   <area shape="rect" coords="200,200,300,300" href="third.htm" alt="Third">
+</map>
+```

docs/components/map.md

@@ -1,6 +1,6 @@
 {
   "name": "matestack-ui-core",
-  "version": "0.6.0",
+  "version": "0.7.2.1",
   "private": true,
   "dependencies": {
     "axios": "^0.18.1",

package.json

@@ -38,6 +38,7 @@
 
   scope :api do
     get 'data', to: 'api#data'
+    get 'data/:number', to: 'api#single_endpoint', as: "single_endpoint"
   end
 
 end

spec/dummy/config/routes.rb

@@ -3514,6 +3514,14 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"

spec/dummy/yarn.lock

@@ -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

spec/usage/components/img_spec.rb

@@ -37,7 +37,7 @@ class ExamplePage < Matestack::Ui::Page
       def response
         components {
           div id: "foo", class: "bar" do
-            link path: "https://matestack.org" do
+            link path: "https://matestack.org", title: "The matestack website" do
               plain 'here'
             end
           end
@@ -53,7 +53,7 @@ def response
 
     expected_static_output = <<~HTML
     <div id="foo" class="bar">
-      <a href="https://matestack.org">here</a>
+      <a href="https://matestack.org" title="The matestack website">here</a>
     </div>
     HTML
 
@@ -125,4 +125,58 @@ def response
     expect(stripped(static_output)).to ( include(stripped(expected_static_output)) )
   end
 
+  it 'Example 5 - Rails Routing using symbols' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          div id: "foo", class: "bar" do
+            link text: 'Click', path: :inline_edit_path
+          end
+        }
+      end
+
+    end
+
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <div id="foo" class="bar">
+      <a href="/my_app/inline_edit">Click</a>
+    </div>
+    HTML
+
+    expect(stripped(static_output)).to ( include(stripped(expected_static_output)) )
+  end
+
+  it 'Example 6 - Rails Routing using symbols with params' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          div id: "foo", class: "bar" do
+            link path: :single_endpoint_path, params: {number: 1}, text: 'Call API endpoint 1'
+          end
+
+        }
+      end
+
+    end
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <div id="foo" class="bar">
+      <a href="/api/data/1">Call API endpoint 1</a>
+    </div>
+    HTML
+
+    expect(stripped(static_output)).to ( include(stripped(expected_static_output)) )
+  end
+
 end