Merge pull request #4771 from serhiyzhovnir/create-redirect-url-widge…

…t-documentation

Add documentation for RedirectUrl widget

_data/toc/javascript-developer-guide.yml

@@ -85,5 +85,8 @@ pages:
         - label: QuickSearch widget
           url: /javascript-dev-guide/widgets/widget_quickSearch.html
 
+        - label: RedirectUrl widget
+          url: /javascript-dev-guide/widgets/widget_redirectUrl.html
+
         - label: Tabs widget
           url: /javascript-dev-guide/widgets/widget_tabs.html

guides/v2.1/javascript-dev-guide/widgets/jquery-widgets-about.md

@@ -21,6 +21,7 @@ This guide discusses the following widgets:
 -   [Navigation widget]
 -   [Prompt widget]
 -   [QuickSearch widget]
+-   [RedirectUrl widget]
 -   [Tabs widget]
 
 {:.bs-callout .bs-callout-info}
@@ -43,5 +44,6 @@ Magento out of the box does not contain jQuery UI styles. Also, it is not recomm
 [Navigation widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_navigation.html
 [Prompt widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_prompt.html
 [QuickSearch widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_quickSearch.html
+[RedirectUrl widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_redirectUrl.html
 [Tabs widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_tabs.html
 [jQuery UI 1.9.2]: http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/

guides/v2.1/javascript-dev-guide/widgets/widget_redirectUrl.md

@@ -0,0 +1,86 @@
+---
+group: javascript-developer-guide
+subgroup: 3_Widgets
+title: RedirectUrl widget
+contributor_name: Atwix
+contributor_link: https://www.atwix.com/
+---
+
+## Overview
+
+The RedirectUrl {% glossarytooltip f0dcf847-ce21-4b88-8b45-83e1cbf08100 %}widget{% endglossarytooltip %} allows redirecting to an URL when an event triggers.
+
+The RedirectUrl widget source is [lib/web/mage/redirect-url.js][].
+
+## Initialize the RedirectUrl widget
+
+For information about how to initialize a widget in a JS component or `.phtml` template, see the [Initialize JavaScript][] topic.
+
+Generally the RedirectUrl widget is instantiated like following:
+
+```javascript
+$("#element").redirectUrl({url: 'http://example.com'});
+```
+
+Where:
+
+- `#element` is the selector of the element for which RedirectUrl is initialized.
+
+Phtml template file examples using script:
+
+```html
+<script>
+    require([
+        'jquery',
+        'redirectUrl'
+    ], function ($) {
+        'use strict';
+        
+        $("#element").redirectUrl({url: 'http://example.com'});
+    });
+</script>
+```
+
+## Options
+
+The RedirectUrl widget has the following options:
+
+- [event]
+- [url]
+
+### `event`
+
+The event of the DOM element for which you want to carry out the redirect.
+
+**Type**: String
+
+**Default value**: `click`
+
+### `url`
+
+The redirect URL.
+
+**Type**: String
+
+**Default value**: `undefined`
+
+## Code sample
+
+The following example shows the button and after clicking on this button you will be redirected to the `http://example.com` URL.
+
+```html
+<button class="action primary"
+        data-mage-init='{"redirectUrl": {"event": "click", "url": "http://example.com"}}'
+        type="button"
+        title="Redirect Button">
+    <span>Redirect Button</span>
+</button>
+```
+
+## Result
+
+![RedirectUrl Button Example]({{ site.baseurl }}/common/images/widget/redirectUrl-widget-result.png)
+
+<!-- Link Definitions -->
+[lib/web/mage/redirect-url.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/redirect-url.js
+[Initialize JavaScript]: {{page.baseurl}}/javascript-dev-guide/javascript/js_init.html

guides/v2.2/javascript-dev-guide/widgets/widget_redirectUrl.md

@@ -0,0 +1 @@
+../../../v2.1/javascript-dev-guide/widgets/widget_redirectUrl.md

guides/v2.3/javascript-dev-guide/widgets/widget_redirectUrl.md

@@ -0,0 +1 @@
+../../../v2.2/javascript-dev-guide/widgets/widget_redirectUrl.md