fix(module: badge): preset color of ribbon (#791)

* Fix ribbon syle

Text color was same as background color.

* Ribbon documentation

Added two ribbon examples with color set (preset and custom)

* fix : badgeribbon html content

Html content must be the same as in the react version

* revert changes

We don't change less files. They are copied from react version.

* revert

* tests: fix badgeribbon unit tests

Modified expected html to match markup from react version.

* Update tests/badge/RibbonTests.cs

Co-authored-by: James Yeung <shunjiey@hotmail.com>

components/badge/BadgeRibbon.razor

@@ -7,7 +7,9 @@
         @ChildContent
     }
     <div class="@ClassMapper.Class" style="@_colorStyle">
-        @if (TextTemplate != null)@TextTemplate else @Text
+        <span class="ant-ribbon-text">
+            @if (TextTemplate != null)@TextTemplate else @Text
+        </span>
         <div class="ant-ribbon-corner" style="@_cornerColorStyle" />
     </div>
 </div>

site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor

@@ -2,6 +2,14 @@
     <Card Bordered>And raises the spyglass.</Card>
 </BadgeRibbon>
 <br />
+<BadgeRibbon Text="Pushes open the window" Color="orange">
+    <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
+<BadgeRibbon Text="Pushes open the window" Color="#832">
+    <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
 <BadgeRibbon >
     <TextTemplate>
         <Icon Type="windows" Theme="outline" />Pushes open the window

tests/badge/RibbonTests.cs

@@ -1,4 +1,4 @@
-using Bunit;
+using Bunit;
 using Microsoft.AspNetCore.Components;
 using Xunit;
 
@@ -13,6 +13,7 @@ namespace AntDesign.Tests.Badge
             cut.MarkupMatches(@"
                 <div class=""ant-ribbon-wrapper""> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
+                    <span class=""ant-ribbon-text""></span>
                         <div class=""ant-ribbon-corner""></div>
                     </div>
                 </div>
@@ -32,6 +33,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-start"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -48,6 +50,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -68,6 +71,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -91,6 +95,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"" style=""background: {color}"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"" style=""color: {color}"">
                         </div>
                     </div>
@@ -112,7 +117,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
-                        unicorn
+                    <span class=""ant-ribbon-text"">unicorn</span>
                         <div class=""ant-ribbon-corner"">
                             </div>
                         </div>
@@ -142,7 +147,9 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
-                        <span class=""cool"">Hello</span>
+                        <span class=""ant-ribbon-text"">
+                            <span class=""cool"">Hello</span>
+                        </span>
                         <div class=""ant-ribbon-corner"">
                         </div>
                     </div>