From fcc2f9c0a871020f8da04213e561c0953a71d62c Mon Sep 17 00:00:00 2001 From: m-akinc <7282195+m-akinc@users.noreply.github.com> Date: Tue, 28 Mar 2023 17:37:01 -0500 Subject: [PATCH] Blazor integration for anchor menu item (#1123) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🤨 Rationale Blazor support for anchor menu item component ## 👩‍💻 Implementation Followed standard process. Includes test, update to example app, and update to README. ## 🧪 Testing Tested via example app ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --- README.md | 2 +- ...-4fb13605-f140-4436-966d-6e247a30de5b.json | 7 +++ .../Demo.Shared/Pages/ComponentsDemo.razor | 1 + .../Components/NimbleAnchor.razor | 1 + .../Components/NimbleAnchor.razor.cs | 44 +------------- .../Components/NimbleAnchorButton.razor | 1 + .../Components/NimbleAnchorButton.razor.cs | 44 +------------- .../Components/NimbleAnchorMenuItem.razor | 14 +++++ .../Components/NimbleAnchorMenuItem.razor.cs | 24 ++++++++ .../Components/NimbleAnchorTab.razor | 1 + .../Components/NimbleAnchorTab.razor.cs | 44 +------------- .../NimbleBlazor/NimbleAnchorBase.cs | 48 +++++++++++++++ .../Components/NimbleAnchorButtonTests.cs | 2 +- .../Components/NimbleAnchorMenuItemTests.cs | 39 +++++++++++++ .../Unit/Components/NimbleAnchorTabTests.cs | 58 +------------------ .../Unit/Components/NimbleAnchorTests.cs | 2 +- .../Unit/NimbleAnchorBaseTests.cs | 42 ++++++++++++++ 17 files changed, 185 insertions(+), 189 deletions(-) create mode 100644 change/@ni-nimble-blazor-4fb13605-f140-4436-966d-6e247a30de5b.json create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor.cs create mode 100644 packages/nimble-blazor/NimbleBlazor/NimbleAnchorBase.cs create mode 100644 packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorMenuItemTests.cs create mode 100644 packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/NimbleAnchorBaseTests.cs diff --git a/README.md b/README.md index d208938720..c77e7837d1 100644 --- a/README.md +++ b/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: | diff --git a/change/@ni-nimble-blazor-4fb13605-f140-4436-966d-6e247a30de5b.json b/change/@ni-nimble-blazor-4fb13605-f140-4436-966d-6e247a30de5b.json new file mode 100644 index 0000000000..86487bc78c --- /dev/null +++ b/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" +} diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 123fa3c12e..7934eed00a 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -131,6 +131,7 @@
Header 2
Item 4 + Item 5 (link)
diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor index 0b75051ea0..6a426d7260 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor @@ -1,4 +1,5 @@ @namespace NimbleBlazor +@inherits NimbleAnchorBase - /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? Href { get; set; } - - /// - /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? HrefLang { get; set; } - - /// - /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? Ping { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? ReferrerPolicy { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Rel { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Target { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Type { get; set; } - /// /// Whether the text underline is hidden. /// diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorButton.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorButton.razor index 1cf0f671bc..183feba89d 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorButton.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorButton.razor @@ -1,4 +1,5 @@ @namespace NimbleBlazor +@inherits NimbleAnchorBase - /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? Href { get; set; } - - /// - /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? HrefLang { get; set; } - - /// - /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? Ping { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? ReferrerPolicy { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Rel { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Target { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Type { get; set; } - /// /// The appearance mode of the button. /// diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor new file mode 100644 index 0000000000..23b8840ad9 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor @@ -0,0 +1,14 @@ +@namespace NimbleBlazor +@inherits NimbleAnchorBase + + @ChildContent + diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor.cs new file mode 100644 index 0000000000..6d0d489c10 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorMenuItem.razor.cs @@ -0,0 +1,24 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleAnchorMenuItem : NimbleAnchorBase +{ + /// + /// Whether the menu item is disabled. + /// + [Parameter] + public bool? Disabled { get; set; } + + /// + /// The child content of the element. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Any additional attributes that did not match known properties. + /// + [Parameter(CaptureUnmatchedValues = true)] + public IDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor index f36a175571..fd03b91645 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor @@ -1,4 +1,5 @@ @namespace NimbleBlazor +@inherits NimbleAnchorBase /// A link styled as a tab /// -public partial class NimbleAnchorTab : ComponentBase +public partial class NimbleAnchorTab : NimbleAnchorBase { - /// - /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? Href { get; set; } - - /// - /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? HrefLang { get; set; } - - /// - /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. - /// - [Parameter] - public string? Ping { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? ReferrerPolicy { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Rel { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Target { get; set; } - - /// - /// 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. - /// - [Parameter] - public string? Type { get; set; } - /// /// The child content of the element. /// diff --git a/packages/nimble-blazor/NimbleBlazor/NimbleAnchorBase.cs b/packages/nimble-blazor/NimbleBlazor/NimbleAnchorBase.cs new file mode 100644 index 0000000000..0d61a81072 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/NimbleAnchorBase.cs @@ -0,0 +1,48 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public abstract class NimbleAnchorBase : ComponentBase +{ + /// + /// The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. + /// + [Parameter] + public string? Href { get; set; } + + /// + /// Hints at the human language of the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. + /// + [Parameter] + public string? HrefLang { get; set; } + + /// + /// A space-separated list of URLs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for more information. + /// + [Parameter] + public string? Ping { get; set; } + + /// + /// 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. + /// + [Parameter] + public string? ReferrerPolicy { get; set; } + + /// + /// 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. + /// + [Parameter] + public string? Rel { get; set; } + + /// + /// 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. + /// + [Parameter] + public string? Target { get; set; } + + /// + /// 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. + /// + [Parameter] + public string? Type { get; set; } +} \ No newline at end of file diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorButtonTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorButtonTests.cs index d547542cce..7cb356c9dc 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorButtonTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorButtonTests.cs @@ -8,7 +8,7 @@ namespace NimbleBlazor.Tests.Unit.Components; /// /// Tests for . /// -public class NimbleAnchorButtonTests +public class NimbleAnchorButtonTests : NimbleAnchorBaseTests { [Fact] public void NimbleAnchorButton_Render_HasAnchorButtonMarkup() diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorMenuItemTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorMenuItemTests.cs new file mode 100644 index 0000000000..4083c7d666 --- /dev/null +++ b/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; + +/// +/// Tests for . +/// +public class NimbleAnchorMenuItemTests : NimbleAnchorBaseTests +{ + [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(); + + Assert.Contains(expectedMarkup, menuItem.Markup); + } + + [Fact] + public void AnchorMenuItemDisabled_AttributeIsSet() + { + var anchorMenuItem = RenderWithPropertySet(x => x.Disabled, true); + + Assert.Contains("disabled", anchorMenuItem.Markup); + } + + private IRenderedComponent RenderWithPropertySet(Expression> propertyGetter, TProperty propertyValue) + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + return context.RenderComponent(p => p.Add(propertyGetter, propertyValue)); + } +} diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabTests.cs index bce6529089..3705e41f15 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabTests.cs @@ -8,7 +8,7 @@ namespace NimbleBlazor.Tests.Unit.Components; /// /// Tests for . /// -public class NimbleAnchorTabTests +public class NimbleAnchorTabTests : NimbleAnchorBaseTests { [Fact] public void NimbleAnchorTab_Render_HasAnchorTabMarkup() @@ -22,62 +22,6 @@ public void NimbleAnchorTab_Render_HasAnchorTabMarkup() Assert.Contains(expectedMarkup, menuItem.Markup); } - [Fact] - public void AnchorTabHref_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.Href, "foo"); - - Assert.Contains("href=\"foo\"", anchorTab.Markup); - } - - [Fact] - public void AnchorTabHrefLang_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.HrefLang, "foo"); - - Assert.Contains("hreflang=\"foo\"", anchorTab.Markup); - } - - [Fact] - public void AnchorTabPing_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.Ping, "foo"); - - Assert.Contains("ping=\"foo\"", anchorTab.Markup); - } - - [Fact] - public void AnchorTabReferrerPolicy_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.ReferrerPolicy, "foo"); - - Assert.Contains("referrerpolicy=\"foo\"", anchorTab.Markup); - } - - [Fact] - public void AnchorTabRel_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.Rel, "foo"); - - Assert.Contains("rel=\"foo\"", anchorTab.Markup); - } - - [Fact] - public void AnchorTabTarget_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.Target, "foo"); - - Assert.Contains("target=\"foo\"", anchorTab.Markup); - } - - [Fact] - public void AnchorTabType_AttributeIsSet() - { - var anchorTab = RenderWithPropertySet(x => x.Type, "foo"); - - Assert.Contains("type=\"foo\"", anchorTab.Markup); - } - [Fact] public void AnchorTabDisabled_AttributeIsSet() { diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTests.cs index f3e8d1e194..476d6dfd51 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTests.cs @@ -8,7 +8,7 @@ namespace NimbleBlazor.Tests.Unit.Components; /// /// Tests for /// -public class NimbleAnchorTests +public class NimbleAnchorTests : NimbleAnchorBaseTests { [Fact] public void NimbleAnchor_Rendered_HasAnchorMarkup() diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/NimbleAnchorBaseTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/NimbleAnchorBaseTests.cs new file mode 100644 index 0000000000..01b3449921 --- /dev/null +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/NimbleAnchorBaseTests.cs @@ -0,0 +1,42 @@ +using System; +using System.Collections.Generic; +using System.Linq.Expressions; +using Bunit; +using Xunit; + +namespace NimbleBlazor.Tests.Unit; + +/// +/// Tests for . +/// +public abstract class NimbleAnchorBaseTests where T : NimbleAnchorBase +{ + [System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "CA1000:Do not declare static members on generic types", Justification = "Static needed for MemberData of Theory")] + public static IEnumerable Data => + new List + { + new object[] { (Expression>)(x => x.Href), "href" }, + new object[] { (Expression>)(x => x.HrefLang), "hreflang" }, + new object[] { (Expression>)(x => x.Ping), "ping" }, + new object[] { (Expression>)(x => x.ReferrerPolicy), "referrerpolicy" }, + new object[] { (Expression>)(x => x.Rel), "rel" }, + new object[] { (Expression>)(x => x.Target), "target" }, + new object[] { (Expression>)(x => x.Type), "type" } + }; + + [Theory] + [MemberData(nameof(Data))] + public void NimbleAnchorBase_AttributeIsSet(Expression> propertyGetter, string markupName) + { + var anchorMenuItem = RenderWithPropertySet(propertyGetter, "foo"); + + Assert.Contains($"{markupName}=\"foo\"", anchorMenuItem.Markup); + } + + private IRenderedComponent RenderWithPropertySet(Expression> propertyGetter, TProperty propertyValue) + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + return context.RenderComponent(p => p.Add(propertyGetter, propertyValue)); + } +}