Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blazor integration for anchor menu item #1123

Merged
merged 9 commits into from
Mar 28, 2023
Merged
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
}
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@namespace NimbleBlazor
<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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
ο»Ώusing Microsoft.AspNetCore.Components;

namespace NimbleBlazor;

public partial class NimbleAnchorMenuItem : 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; }

/// <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; }
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using Bunit;
using Xunit;

namespace NimbleBlazor.Tests.Unit.Components;

/// <summary>
/// Tests for <see cref="NimbleAnchorMenuItem"/>.
/// </summary>
public class NimbleAnchorMenuItemTests
{
[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);
}
}