Merge pull request #243 from basemate/document_link_param_option

Document link param option, fixes #73

Author: pascalwengerter

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
 

docs/components/link.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>
+```

spec/dummy/config/routes.rb

@@ -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/usage/components/link_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