Feature/badge component (#171)

* fix button unit test

* add RadzenBadge Component

* add RadzenBadge Component tests

* use scss & rz- classes instead of bootstrap

* add missing newline

* add badge scss to components

* remove underlined text from badge link

* cleanup badge page

* remove badge as link

* Add the inherited attributes from RadzenComponent.

Co-authored-by: Marco Papst <papst@sma.de>
Co-authored-by: Atanas Korchev <akorchev@gmail.com>

Radzen.Blazor.Tests/BadgeTests.cs

@@ -0,0 +1,47 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class BadgeTests
+    {
+        [Fact]
+        public void Badge_Renders_TextParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+
+            var text = "Test";
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Text, text));
+
+            Assert.Contains(text, component.Markup);
+        }
+
+        [Fact]
+        public void Badge_Renders_ChildContent()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+
+            component.SetParametersAndRender(parameters => parameters.AddChildContent("SomeContent"));
+
+            Assert.Contains(@$"SomeContent", component.Markup);
+        }
+
+        [Fact]
+        public void Badge_Renders_BadgeStyle()
+        {
+            var badgeStyle = BadgeStyle.Danger;
+
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.BadgeStyle, badgeStyle));
+
+            Assert.Contains($"badge-{badgeStyle.ToString().ToLower()}", component.Markup);
+        }
+    }
+}

Radzen.Blazor.Tests/ButtonTests.cs

@@ -51,7 +51,7 @@ namespace Radzen.Blazor.Tests
             Assert.DoesNotContain(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
 
             // renders the icon with busy spin animation
-            Assert.Contains(@"<i style=""animation: button-icon-spin", component.Markup);
+            Assert.Contains(@"<i style=""animation: rotation", component.Markup);
             Assert.Contains(">refresh</i>", component.Markup);
         }
 

Radzen.Blazor/Common.cs

@@ -1,16 +1,15 @@
-using System;
-using System.Collections;
-using System.Collections.Generic;
-using Microsoft.AspNetCore.Components;
-using System.Linq.Dynamic.Core;
-using System.Linq;
-using System.Linq.Expressions;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Radzen.Blazor;
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Linq;
+using System.Linq.Dynamic.Core;
+using System.Linq.Expressions;
+using System.Text.Encodings.Web;
 using System.Text.Json;
 using System.Threading.Tasks;
-using System.Text.Encodings.Web;
-using System.Security.Cryptography.X509Certificates;
 
 namespace Radzen
 {
@@ -299,6 +298,17 @@ namespace Radzen
         Center
     }
 
+    public enum BadgeStyle
+    {
+        Primary,
+        Secondary,
+        Light,
+        Success,
+        Danger,
+        Warning,
+        Info
+    }
+
     public class DataGridColumnResizedEventArgs<T>
     {
         public RadzenDataGridColumn<T> Column { get; internal set; }
@@ -306,7 +316,7 @@ namespace Radzen
     }
 
     public class ColumnResizedEventArgs<T>
-    { 
+    {
         public RadzenGridColumn<T> Column { get; internal set; }
         public double Width { get; internal set; }
     }

Radzen.Blazor/RadzenBadge.razor

@@ -0,0 +1,41 @@
+@inherits RadzenComponent
+
+<span @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+    else
+    {
+        @Text
+    }
+</span>
+
+@code {
+    protected override string GetComponentCssClass()
+    {
+        var classList = new List<string>();
+
+        classList.Add("rz-badge");
+        classList.Add($"rz-badge-{BadgeStyle.ToString().ToLower()}");
+
+        if (IsPill)
+        {
+            classList.Add("rz-badge-pill");
+        }
+
+        return string.Join(" ", classList);
+    }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public string Text { get; set; }
+
+    [Parameter]
+    public BadgeStyle BadgeStyle { get; set; }
+
+    [Parameter]
+    public bool IsPill { get; set; }
+}

Radzen.Blazor/themes/_components.scss

@@ -2,6 +2,7 @@
 @import 'components/blazor/icons';
 @import 'components/blazor/common';
 @import 'components/blazor/button';
+@import 'components/blazor/badge';
 @import 'components/blazor/input';
 @import 'components/blazor/header';
 @import 'components/blazor/footer';

Radzen.Blazor/themes/components/blazor/_badge.scss

@@ -0,0 +1,57 @@
+$badge-pill-border-radius: $border-radius !default;
+
+$badge-styles: () !default;
+
+$badge-styles: map-merge(
+  (
+    primary: (
+      background-color: $primary
+    ),
+    light: (
+      background-color: $light,
+      color: $charcoal-grey
+    ),
+    secondary: (
+      background-color: $secondary
+    ),
+    info: (
+      background-color: $info
+    ),
+    warning: (
+      background-color: $warning
+    ),
+    error: (
+      background-color: $danger
+    ),
+    danger: (
+      background-color: $danger
+    ),
+    success: (
+      background-color: $success
+    )
+  ),
+  $badge-styles
+);
+
+.rz-badge {
+    color: $white;
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+}
+
+@each $style, $badge in $badge-styles {
+    .rz-badge-#{$style} {
+        @each $name, $value in $badge {
+            #{$name}: #{$value};
+        }
+    }
+}
+
+.rz-badge-pill {
+    border-radius: $badge-pill-border-radius;
+}

RadzenBlazorDemos/Pages/BadgePage.razor

@@ -0,0 +1,42 @@
+@page "/badge"
+
+<RadzenExample Name="Badge" Documentation="false">
+    <h3>Badges</h3>
+    <RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="Primary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text="Secondary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Light" Text="Light" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="Success" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="Danger" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Warning" Text="Warning" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Info" Text="Info" />
+
+    <h3 style="margin-top:20px">Pills</h3>
+    <RadzenBadge BadgeStyle="BadgeStyle.Primary" IsPill="true" Text="Primary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Secondary" IsPill="true" Text="Secondary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Light" IsPill="true" Text="Light" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Success" IsPill="true" Text="Success" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Danger" IsPill="true" Text="Danger" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="Warning" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Info" IsPill="true" Text="Info" />
+
+    <h3 style="margin-top:20px">In Button</h3>
+    <RadzenButton ButtonStyle="ButtonStyle.Info">
+        Button
+        <RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="15" />
+    </RadzenButton>
+
+    <RadzenButton ButtonStyle="ButtonStyle.Light">
+        Button
+        <RadzenBadge BadgeStyle="BadgeStyle.Primary" IsPill="@true" Text="15" />
+    </RadzenButton>
+
+    <h3 style="margin-top:20px">Child Content</h3>
+    <RadzenBadge BadgeStyle="BadgeStyle.Primary">
+        Childcontent
+    </RadzenBadge>
+</RadzenExample>
+
+
+@code {
+
+}

RadzenBlazorDemos/Services/ExampleService.cs

@@ -1,7 +1,6 @@
 using System;
-using System.Linq;
-using System.Linq.Expressions;
 using System.Collections.Generic;
+using System.Linq;
 
 namespace RadzenBlazorDemos
 {
@@ -34,7 +33,7 @@ namespace RadzenBlazorDemos
             Path = "/support",
             Icon = "&#xe94c"
         },
-   
+
         new Example()
         {
             Name="DataGrid",
@@ -613,7 +612,7 @@ namespace RadzenBlazorDemos
                 }
             }
         },
-   
+
         new Example()
         {
             Name="Containers",
@@ -803,6 +802,13 @@ namespace RadzenBlazorDemos
                     Path = "example-upload",
                     Icon = "&#xe2c6",
                     Tags = new [] { "upload", "file"}
+                },
+                new Example()
+                {
+                    Name = "Badge",
+                    Path = "badge",
+                    Icon = "&#xea67",
+                    Tags = new[] { "badge", "link"}
                 }
             }
         },