refactor(components): replace spans with the icon component for the…

… button's start and end contents

src/LumexUI/Common/Enums/ThemeColor.cs

@@ -6,6 +6,8 @@ namespace LumexUI.Common;
 
 public enum ThemeColor
 {
+    None,
+
     Default,
 
 	Primary,

src/LumexUI/Components/Bases/LumexInputBase.cs

@@ -32,7 +32,7 @@ public abstract class LumexInputBase<TValue> : LumexComponentBase
     /// <remarks>
     /// The default is <see cref="ThemeColor.Default"/>
     /// </remarks>
-    [Parameter] public ThemeColor Color { get; set; }
+    [Parameter] public ThemeColor Color { get; set; } = ThemeColor.Default;
 
     /// <summary>
     /// Gets or sets the size of the input.

src/LumexUI/Components/Button/LumexButton.razor

@@ -10,15 +10,13 @@
                 @onclick="@OnClickAsync">
     @if( !string.IsNullOrWhiteSpace( StartIcon ) )
     {
-        // TODO: Replace with the real icon component
-        <span>@StartIcon</span>
+        <LumexIcon Icon="@StartIcon" Color="@ThemeColor.None" />
     }
 
     @ChildContent
 
     @if( !string.IsNullOrWhiteSpace( EndIcon ) )
     {
-        // TODO: Replace with the real icon component
-        <span>@EndIcon</span>
+        <LumexIcon Icon="@EndIcon" Color="@ThemeColor.None" />
     }
 </LumexComponent>

src/LumexUI/Components/Button/LumexButton.razor.cs

@@ -41,7 +41,7 @@ public partial class LumexButton : LumexComponentBase
     /// <remarks>
     /// Default value is <see cref="ThemeColor.Default"/>
     /// </remarks>
-    [Parameter] public ThemeColor Color { get; set; }
+    [Parameter] public ThemeColor Color { get; set; } = ThemeColor.Default;
 
     /// <summary>
     /// Gets or sets the size of the button.

src/LumexUI/Components/Icon/LumexIcon.razor.cs

@@ -45,7 +45,7 @@ public partial class LumexIcon : LumexComponentBase
     /// <remarks>
     /// Default value is <see cref="ThemeColor.Default"/>
     /// </remarks>
-    [Parameter] public ThemeColor Color { get; set; }
+    [Parameter] public ThemeColor Color { get; set; } = ThemeColor.Default;
 
     private protected override string? RootClass =>
         TwMerge.Merge( Styles.Icon.GetStyles( this ) );

src/LumexUI/Styles/ColorVariants.cs

@@ -6,6 +6,7 @@ internal class ColorVariants
 {
     public readonly static Dictionary<ThemeColor, string> Solid = new()
     {
+        [ThemeColor.None] = "",
         [ThemeColor.Default] = "bg-default text-default-foreground",
         [ThemeColor.Primary] = "bg-primary text-primary-foreground",
         [ThemeColor.Secondary] = "bg-secondary text-secondary-foreground",
@@ -17,6 +18,7 @@ internal class ColorVariants
 
     public readonly static Dictionary<ThemeColor, string> Outlined = new()
     {
+        [ThemeColor.None] = "",
         [ThemeColor.Default] = "border-default text-foreground",
         [ThemeColor.Primary] = "border-primary text-primary",
         [ThemeColor.Secondary] = "border-secondary text-secondary",
@@ -28,6 +30,7 @@ internal class ColorVariants
 
     public readonly static Dictionary<ThemeColor, string> Flat = new()
     {
+        [ThemeColor.None] = "",
         [ThemeColor.Default] = "bg-default-100 text-default-foreground",
         [ThemeColor.Primary] = "bg-primary-50 text-primary",
         [ThemeColor.Secondary] = "bg-secondary-50 text-secondary",
@@ -39,6 +42,7 @@ internal class ColorVariants
 
     public readonly static Dictionary<ThemeColor, string> Shadow = new()
     {
+        [ThemeColor.None] = "",
         [ThemeColor.Default] = "shadow-lg shadow-default/40 bg-default text-default-foreground",
         [ThemeColor.Primary] = "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
         [ThemeColor.Secondary] = "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
@@ -50,6 +54,7 @@ internal class ColorVariants
 
     public readonly static Dictionary<ThemeColor, string> Ghost = new()
     {
+        [ThemeColor.None] = "",
         [ThemeColor.Default] = "borde-default text-default-foreground hover:bg-default",
         [ThemeColor.Primary] = "border-primary text-primary hover:text-primary-foreground hover:bg-primary",
         [ThemeColor.Secondary] = "border-secondary text-secondary hover:text-secondary-foreground hover:bg-secondary",
@@ -61,6 +66,7 @@ internal class ColorVariants
 
     public readonly static Dictionary<ThemeColor, string> Light = new()
     {
+        [ThemeColor.None] = "",
         [ThemeColor.Default] = "text-default-foreground",
         [ThemeColor.Primary] = "text-primary",
         [ThemeColor.Secondary] = "text-secondary",

tests/LumexUI.Tests/Components/Button/ButtonTests.cs

@@ -83,24 +83,20 @@ public void Button_Type_ShouldHaveCorrectTypeAttribute()
     [Fact]
     public void Button_StartIcon_ShouldRenderWithStartIcon()
     {
-        var icon = "start-icon";
-
         var cut = RenderComponent<LumexButton>( p => p
-            .Add( p => p.StartIcon, icon )
+            .Add( p => p.StartIcon, Icons.Rounded.Person )
         );
 
-        cut.Markup.Should().Contain( icon );
+        cut.FindComponent<LumexIcon>();
     }
 
     [Fact]
     public void Button_EndIcon_ShouldRenderWithEndIcon()
     {
-        var icon = "end-icon";
-
         var cut = RenderComponent<LumexButton>( p => p
-            .Add( p => p.EndIcon, icon )
+            .Add( p => p.EndIcon, Icons.Rounded.Person )
         );
 
-        cut.Markup.Should().Contain( icon );
+        cut.FindComponent<LumexIcon>();
     }
 }