feat(blazorui): add Rel parameter to BitActionButton #9524 (#9525)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor

@@ -31,6 +31,7 @@ else
 {
     <a @ref="RootElement" @attributes="HtmlAttributes" @onclick="HandleOnClick"
        id="@_Id"
+       rel="@_rel"
        style="@StyleBuilder.Value"
        class="@ClassBuilder.Value"
        dir="@Dir?.ToString().ToLower()"

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor.cs

@@ -4,6 +4,7 @@ namespace Bit.BlazorUI;
 
 public partial class BitActionButton : BitComponentBase
 {
+    private string? _rel;
     private int? _tabIndex;
     private BitButtonType _buttonType;
 
@@ -62,7 +63,9 @@ public partial class BitActionButton : BitComponentBase
     /// The value of the href attribute of the link rendered by the button.
     /// If provided, the component will be rendered as an anchor tag instead of button.
     /// </summary>
-    [Parameter] public string? Href { get; set; }
+    [Parameter]
+    [CallOnSet(nameof(OnSetHrefAndRel))]
+    public string? Href { get; set; }
 
     /// <summary>
     /// The icon name of the icon to render inside the button.
@@ -90,6 +93,13 @@ public partial class BitActionButton : BitComponentBase
     [Parameter, ResetClassBuilder]
     public bool ReversedIcon { get; set; }
 
+    /// <summary>
+    /// If Href provided, specifies the relationship between the current document and the linked document.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetHrefAndRel))]
+    public BitLinkRel? Rel { get; set; }
+
     /// <summary>
     /// The size of the button.
     /// </summary>
@@ -172,4 +182,15 @@ protected virtual async Task HandleOnClick(MouseEventArgs e)
             await OnClick.InvokeAsync(e);
         }
     }
+
+    private void OnSetHrefAndRel()
+    {
+        if (Rel.HasValue is false || Href.HasNoValue() || Href!.StartsWith('#'))
+        {
+            _rel = null;
+            return;
+        }
+
+        _rel = BitLinkRelUtils.GetRels(Rel.Value);
+    }
 }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor

@@ -38,7 +38,23 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Color" RazorCode="@example3RazorCode" Id="example3">
+    <ComponentExampleBox Title="Rel" RazorCode="@example3RazorCode" Id="example3">
+        <ExamplePreview>
+            <div>Use BitActionButton as a hyperlink to external URLs, with a rel attribute.</div>
+            <br />
+            <div class="example-content">
+                <BitActionButton Rel="BitLinkRel.NoFollow" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
+                    Open bitplatform.dev with a rel attribute (nofollow)
+                </BitActionButton>
+
+                <BitActionButton Rel="BitLinkRel.NoFollow | BitLinkRel.NoReferrer" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
+                    Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
+                </BitActionButton>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Color" RazorCode="@example4RazorCode" Id="example4">
         <ExamplePreview>
             <div>Demonstrates BitActionButton with various predefined colors: Primary, Secondary, Tertiary, Info, Success, Warning, SevereWarning, and Error.</div>
             <br />
@@ -133,7 +149,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Size" RazorCode="@example4RazorCode" Id="example4">
+    <ComponentExampleBox Title="Size" RazorCode="@example5RazorCode" Id="example5">
         <ExamplePreview>
             <div>Show BitActionButton in different sizes: Small, Medium, and Large.</div>
             <br />
@@ -145,7 +161,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
         <ExamplePreview>
             <div>Customize the appearance of BitActionButton using styles and CSS classes.</div>
             <br />
@@ -167,7 +183,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Template" RazorCode="@example6RazorCode" Id="example6">
+    <ComponentExampleBox Title="Template" RazorCode="@example7RazorCode" Id="example7">
         <ExamplePreview>
             <div>Add custom template within BitActionButton.</div>
             <br />
@@ -182,7 +198,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Button Type" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <ComponentExampleBox Title="Button Type" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
         <ExamplePreview>
             <div>Use BitActionButton within a form and validate its state.</div>
             <br />
@@ -214,7 +230,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="RTL" RazorCode="@example8RazorCode" Id="example8">
+    <ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" Id="example9">
         <ExamplePreview>
             <div>Use BitActionButton in right-to-left (RTL).</div>
             <br />

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.cs

@@ -110,6 +110,15 @@ public partial class BitActionButtonDemo
             Description = "Reverses the positions of the icon and the content of the button.",
         },
         new()
+        {
+            Name = "Rel",
+            Type = "BitLinkRel?",
+            DefaultValue = "null",
+            Description = "If Href provided, specifies the relationship between the current document and the linked document.",
+            LinkType = LinkType.Link,
+            Href = "#button-rel",
+        },
+        new()
         {
             Name = "Size",
             Type = "BitSize?",
@@ -334,5 +343,92 @@ public partial class BitActionButtonDemo
                 }
             ]
         },
+        new()
+        {
+            Id = "button-rel",
+            Name = "BitLinkRel",
+            Description = "",
+            Items =
+            [
+                new()
+                {
+                    Name = "Alternate",
+                    Value = "1",
+                    Description = "Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror)"
+                },
+                new()
+                {
+                    Name = "Author",
+                    Value = "2",
+                    Description = "Provides a link to the author of the document."
+                },
+                new()
+                {
+                    Name = "Bookmark",
+                    Value = "4",
+                    Description = "Permanent URL used for bookmarking."
+                },
+                new()
+                {
+                    Name = "External",
+                    Value = "8",
+                    Description = "Indicates that the referenced document is not part of the same site as the current document."
+                },
+                new()
+                {
+                    Name = "Help",
+                    Value = "16",
+                    Description = "Provides a link to a help document."
+                },
+                new()
+                {
+                    Name = "License",
+                    Value = "32",
+                    Description = "Provides a link to licensing information for the document."
+                },
+                new()
+                {
+                    Name = "Next",
+                    Value = "64",
+                    Description = "Provides a link to the next document in the series."
+                },
+                new()
+                {
+                    Name = "NoFollow",
+                    Value = "128",
+                    Description = @"Links to an unendorsed document, like a paid link. (""NoFollow"" is used by Google, to specify that the Google search spider should not follow that link)"
+                },
+                new()
+                {
+                    Name = "NoOpener",
+                    Value = "256",
+                    Description = "Requires that any browsing context created by following the hyperlink must not have an opener browsing context."
+                },
+                new()
+                {
+                    Name = "NoReferrer",
+                    Value = "512",
+                    Description = "Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink."
+                },
+                new()
+                {
+                    Name = "Prev",
+                    Value = "1024",
+                    Description = "The previous document in a selection."
+                },
+                new()
+                {
+                    Name = "Search",
+                    Value = "2048",
+                    Description = "Links to a search tool for the document."
+                },
+                new()
+                {
+                    Name = "Tag",
+                    Value = "4096",
+                    Description = "A tag (keyword) for the current document."
+                }
+            ]
+        },
     ];
 }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.samples.cs

@@ -18,6 +18,15 @@ Go to bitplatform GitHub
 </BitActionButton>";
 
     private readonly string example3RazorCode = @"
+<BitActionButton Rel=""BitLinkRel.NoFollow"" Href=""https://bitplatform.dev"" Target=""_blank"" IconName=""@BitIconName.Globe"" Variant=""BitVariant.Outline"">
+    Open bitplatform.dev with a rel attribute (nofollow)
+</BitActionButton>
+
+<BitActionButton Rel=""BitLinkRel.NoFollow | BitLinkRel.NoReferrer"" Href=""https://bitplatform.dev"" Target=""_blank"" IconName=""@BitIconName.Globe"" Variant=""BitVariant.Outline"">
+    Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
+</BitActionButton>";
+
+    private readonly string example4RazorCode = @"
 <BitActionButton Color=""BitColor.Primary"" IconName=""@BitIconName.ColorSolid"">Primary</BitActionButton>
 <BitActionButton Color=""BitColor.Primary"">Primary</BitActionButton>
 
@@ -69,12 +78,12 @@ Go to bitplatform GitHub
 <BitActionButton Color=""BitColor.TertiaryBorder"" IconName=""@BitIconName.ColorSolid"">TertiaryBorder</BitActionButton>
 <BitActionButton Color=""BitColor.TertiaryBorder"">TertiaryBorder</BitActionButton>";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitActionButton Size=""BitSize.Small"" IconName=""@BitIconName.FontSize"">Small</BitActionButton>
 <BitActionButton Size=""BitSize.Medium"" IconName=""@BitIconName.FontSize"">Medium</BitActionButton>
 <BitActionButton Size=""BitSize.Large"" IconName=""@BitIconName.FontSize"">Large</BitActionButton>";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example6RazorCode = @"
 <style>
     .custom-icon {
         color: hotpink;
@@ -119,15 +128,15 @@ Action Button Styles
     Action Button Classes (Hover me)
 </BitActionButton>";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitActionButton IconName=""@BitIconName.AddFriend"">
     <div style=""display:flex;gap:0.5rem;"">
         <div>This is a custom template</div>
         <BitSpinnerLoading CustomSize=""20"" />
     </div>
 </BitActionButton>";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example8RazorCode = @"
 <EditForm Model=""validationButtonModel"" OnValidSubmit=""HandleValidSubmit"">
     <DataAnnotationsValidator />
 
@@ -144,7 +153,7 @@ Action Button Classes (Hover me)
         <BitActionButton IconName=""@BitIconName.ButtonControl"" ButtonType=""BitButtonType.Button"">Button</BitActionButton>
     </div>
 </EditForm>";
-    private readonly string example7CsharpCode = @"
+    private readonly string example8CsharpCode = @"
 public class ButtonValidationModel
 {
     [Required]
@@ -164,7 +173,7 @@ private async Task HandleValidSubmit()
     StateHasChanged();
 }";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example9RazorCode = @"
 <BitActionButton Dir=""BitDir.Rtl"" IconName=""@BitIconName.AddFriend"">ساخت حساب</BitActionButton>";
 
 }