Merge pull request #35 from umbraco-community/feature/matt-wise-linktaghelper

Adds in Matt Wise work submitted as an issues as opposed to a PR in #32

Author: Warren Buckley

Our.Umbraco.TagHelpers/LinkTagHelper.cs

@@ -0,0 +1,55 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using System.Threading.Tasks;
+using Umbraco.Cms.Core.Models;
+
+namespace Our.Umbraco.TagHelpers
+{
+    [HtmlTargetElement("our-link")]
+    public class LinkTagHelper : TagHelper
+    {
+        [HtmlAttributeName("Link")]
+        public Link? Link { get; set; }
+
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            // Ensure we have a Url set on the LinkPicker property editor in Umbraco
+            if (string.IsNullOrWhiteSpace(Link?.Url))
+            {
+                output.SuppressOutput();
+                return;
+            }
+
+            // If the <our-link /> is self closing
+            // Ensure that our <a></a> always has a matching end tag
+            output.TagMode = TagMode.StartTagAndEndTag;
+
+            output.TagName = "a";
+            var childContent = await output.GetChildContentAsync();
+
+            // If we use the TagHelper <umb-link></umb-link>
+            // Without child DOM elements then it will use the Link Name property inside the <a> it generates
+            if (childContent.IsEmptyOrWhiteSpace)
+            {
+                output.Content.SetContent(Link.Name);
+            }
+
+            // Set the HREF of the <a>
+            output.Attributes.SetAttribute("href", Link.Url);
+
+            if (string.IsNullOrWhiteSpace(Link.Target))
+            {
+                return;
+            }
+
+            // Set the <a target=""> attribute such as _blank etc...
+            output.Attributes.SetAttribute("target", Link.Target);
+
+            // If the target is _blank & not an internal picked content node & external
+            // Ensure we set the <a rel="noopener"> attribute
+            if (Link.Target == "_blank" && Link.Type == LinkType.External)
+            {
+                output.Attributes.SetAttribute("rel", "noopener");
+            }
+        }
+    }
+}

README.md

@@ -319,6 +319,25 @@ Alternatively you can use the `our-active-class` attribute in conjuction with `o
 </ul>
 ```
 
+## `<our-link>`
+This tag helper element `<our-link>` will create a simple anchor tag using the Umbraco Multi Url Picker property editor that uses the C# Model `Umbraco.Cms.Core.Models.Link`
+
+Note if the link set is an external link and you set the target of the link to be `_blank`, then the link will have the noopener attribute added to the link.
+
+### Simple Example
+```cshtml
+<our-link="@Model.ctaLink">
+    <h2>Hi There</h2>
+</our-link>
+```
+
+Alternatively if you use the `<our-link>` without child DOM elements then it will use the `Title` property of the link in the Multi Url Picker property editor to create the anchor tag.
+
+```cshtml
+<our-link="@Model.ctaLink"></our-link>
+```
+
+With this tag helper the child DOM elements inside the `<our-link>` is wrapped with the `<a>` tag
 
 ## Video 📺
 [![How to create ASP.NET TagHelpers for Umbraco](https://user-images.githubusercontent.com/1389894/138666925-15475216-239f-439d-b989-c67995e5df71.png)](https://www.youtube.com/watch?v=3fkDs0NwIE8)