Blazor integration for anchor menu item

README.md

@@ -69,7 +69,7 @@ NOTE: To update the component status:
 | Accordion | |  [Issue](https://github.com/ni/nimble/issues/533) | :o: | :o: | :o: |
 | Anchor | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/bfadf499-caf5-4ca0-9814-e777fbae0d46/) |  [Issue](https://github.com/ni/nimble/issues/324) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/anchor--text-anchor) | :white_check_mark: | :white_check_mark: |
 | Anchor Button | |  [Issue](https://github.com/ni/nimble/issues/324) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/anchor-button--outline-anchor-button) | :white_check_mark: | :white_check_mark: |
-| Anchor Menu Item | |  [Issue](https://github.com/ni/nimble/issues/1020) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/menu--anchor-menu-item) | :o: | :o: |
+| Anchor Menu Item | |  [Issue](https://github.com/ni/nimble/issues/1020) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/menu--anchor-menu-item) | :white_check_mark: | :white_check_mark: |
 | Anchor Tabs | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b) |  [Issue](https://github.com/ni/nimble/issues/479) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/anchor-tabs--anchor-tabs) | :white_check_mark: | :white_check_mark: |
 | Banner | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/29c405f7-08ea-48b6-973f-546970b9dbab) |  [Issue](https://github.com/ni/nimble/issues/305) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/banner--banner) | :white_check_mark: | :white_check_mark: |
 | Breadcrumb | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/7b53bb3e-439b-4f13-9d5f-55adc7da8a2e) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/breadcrumb--standard-breadcrumb) | :white_check_mark: | :white_check_mark: |

change/@ni-nimble-blazor-4fb13605-f140-4436-966d-6e247a30de5b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Blazor support for anchor menu item component",
+  "packageName": "@ni/nimble-blazor",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor

@@ -131,6 +131,7 @@
                 <hr>
                 <header>Header 2</header>
                 <NimbleMenuItem>Item 4</NimbleMenuItem>
+                <NimbleAnchorMenuItem Href="#">Item 5 (link)</NimbleAnchorMenuItem>
             </NimbleMenu>
         </div>
         <div class="sub-container">

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor

@@ -1,4 +1,5 @@
 @namespace NimbleBlazor
+@inherits NimbleAnchorBase
 <nimble-anchor
     href="@Href"
     hreflang="@HrefLang"

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor.cs

@@ -2,50 +2,8 @@
 
 namespace NimbleBlazor;
 
-public partial class NimbleAnchor : ComponentBase
+public partial class NimbleAnchor : NimbleAnchorBase
 {
-    /// <summary>
-    /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Href { get; set; }
-
-    /// <summary>
-    /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? HrefLang { get; set; }
-
-    /// <summary>
-    /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Ping { get; set; }
-
-    /// <summary>
-    /// How much of the referrer to send when following the link. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? ReferrerPolicy { get; set; }
-
-    /// <summary>
-    /// The relationship of the linked URL as space-separated link types. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Rel { get; set; }
-
-    /// <summary>
-    /// Where to display the linked URL, as the name for a browsing context. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Target { get; set; }
-
-    /// <summary>
-    /// Hints at the linked URL's format with a MIME type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Type { get; set; }
-
     /// <summary>
     /// Whether the text underline is hidden.
     /// </summary>

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorButton.razor

@@ -1,4 +1,5 @@
 @namespace NimbleBlazor
+@inherits NimbleAnchorBase
 <nimble-anchor-button
     href="@Href"
     hreflang="@HrefLang"

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorButton.razor.cs

@@ -2,50 +2,8 @@
 
 namespace NimbleBlazor;
 
-public partial class NimbleAnchorButton : ComponentBase
+public partial class NimbleAnchorButton : NimbleAnchorBase
 {
-    /// <summary>
-    /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Href { get; set; }
-
-    /// <summary>
-    /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? HrefLang { get; set; }
-
-    /// <summary>
-    /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Ping { get; set; }
-
-    /// <summary>
-    /// How much of the referrer to send when following the link. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? ReferrerPolicy { get; set; }
-
-    /// <summary>
-    /// The relationship of the linked URL as space-separated link types. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Rel { get; set; }
-
-    /// <summary>
-    /// Where to display the linked URL, as the name for a browsing context. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Target { get; set; }
-
-    /// <summary>
-    /// Hints at the linked URL's format with a MIME type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Type { get; set; }
-
     /// <summary>
     /// The appearance mode of the button.
     /// </summary>

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor

@@ -0,0 +1,14 @@
+@namespace NimbleBlazor
+@inherits NimbleAnchorBase
+<nimble-anchor-menu-item
+    href="@Href"
+    hreflang="@HrefLang"
+    ping="@Ping"
+    referrerpolicy="@ReferrerPolicy"
+    rel="@Rel"
+    target="@Target"
+    type="@Type"
+    disabled="@Disabled"
+    @attributes="AdditionalAttributes">
+    @ChildContent
+</nimble-anchor-menu-item>

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+public partial class NimbleAnchorMenuItem : NimbleAnchorBase
+{
+    /// <summary>
+    /// Whether the menu item is disabled.
+    /// </summary>
+    [Parameter]
+    public bool? Disabled { get; set; }
+
+    /// <summary>
+    /// The child content of the element.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Any additional attributes that did not match known properties.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object>? AdditionalAttributes { get; set; }
+}

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor

@@ -1,4 +1,5 @@
 @namespace NimbleBlazor
+@inherits NimbleAnchorBase
 <nimble-anchor-tab
     href="@Href"
     hreflang="@HrefLang"

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs

@@ -5,50 +5,8 @@ namespace NimbleBlazor;
 /// <summary>
 /// A link styled as a tab
 /// </summary>
-public partial class NimbleAnchorTab : ComponentBase
+public partial class NimbleAnchorTab : NimbleAnchorBase
 {
-    /// <summary>
-    /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Href { get; set; }
-
-    /// <summary>
-    /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? HrefLang { get; set; }
-
-    /// <summary>
-    /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Ping { get; set; }
-
-    /// <summary>
-    /// How much of the referrer to send when following the link. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? ReferrerPolicy { get; set; }
-
-    /// <summary>
-    /// The relationship of the linked URL as space-separated link types. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Rel { get; set; }
-
-    /// <summary>
-    /// Where to display the linked URL, as the name for a browsing context. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Target { get; set; }
-
-    /// <summary>
-    /// Hints at the linked URL's format with a MIME type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
-    /// </summary>
-    [Parameter]
-    public string? Type { get; set; }
-
     /// <summary>
     /// The child content of the element.
     /// </summary>

packages/nimble-blazor/NimbleBlazor/NimbleAnchorBase.cs

@@ -0,0 +1,48 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+public abstract class NimbleAnchorBase : ComponentBase
+{
+    /// <summary>
+    /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? Href { get; set; }
+
+    /// <summary>
+    /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? HrefLang { get; set; }
+
+    /// <summary>
+    /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? Ping { get; set; }
+
+    /// <summary>
+    /// How much of the referrer to send when following the link. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? ReferrerPolicy { get; set; }
+
+    /// <summary>
+    /// The relationship of the linked URL as space-separated link types. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? Rel { get; set; }
+
+    /// <summary>
+    /// Where to display the linked URL, as the name for a browsing context. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? Target { get; set; }
+
+    /// <summary>
+    /// Hints at the linked URL's format with a MIME type. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information.
+    /// </summary>
+    [Parameter]
+    public string? Type { get; set; }
+}

packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorButtonTests.cs

@@ -8,7 +8,7 @@ namespace NimbleBlazor.Tests.Unit.Components;
 /// <summary>
 /// Tests for <see cref="NimbleAnchorButton"/>.
 /// </summary>
-public class NimbleAnchorButtonTests
+public class NimbleAnchorButtonTests : NimbleAnchorBaseTests<NimbleAnchorButton>
 {
     [Fact]
     public void NimbleAnchorButton_Render_HasAnchorButtonMarkup()

packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorMenuItemTests.cs

@@ -0,0 +1,39 @@
+using System;
+using System.Linq.Expressions;
+using Bunit;
+using Xunit;
+
+namespace NimbleBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Tests for <see cref="NimbleAnchorMenuItem"/>.
+/// </summary>
+public class NimbleAnchorMenuItemTests : NimbleAnchorBaseTests<NimbleAnchorMenuItem>
+{
+    [Fact]
+    public void NimbleAnchorMenuItem_Render_HasAnchorMenuItemMarkup()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var expectedMarkup = "nimble-anchor-menu-item";
+
+        var menuItem = context.RenderComponent<NimbleAnchorMenuItem>();
+
+        Assert.Contains(expectedMarkup, menuItem.Markup);
+    }
+
+    [Fact]
+    public void AnchorMenuItemDisabled_AttributeIsSet()
+    {
+        var anchorMenuItem = RenderWithPropertySet(x => x.Disabled, true);
+
+        Assert.Contains("disabled", anchorMenuItem.Markup);
+    }
+
+    private IRenderedComponent<NimbleAnchorMenuItem> RenderWithPropertySet<TProperty>(Expression<Func<NimbleAnchorMenuItem, TProperty>> propertyGetter, TProperty propertyValue)
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        return context.RenderComponent<NimbleAnchorMenuItem>(p => p.Add(propertyGetter, propertyValue));
+    }
+}