feat(components): add divider component (#6)

* chore(components): add basic divider component

* chore(components): comment out `bg-border` class until theme provider is ready

src/LumexUI/Common/Enums/Orientation.cs

@@ -0,0 +1,12 @@
+// Copyright (c) LumexUI 2024
+// LumexUI licenses this file to you under the MIT license
+// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
+
+namespace LumexUI.Common;
+
+public enum Orientation
+{
+	Horizontal,
+
+	Vertical
+}

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

@@ -76,7 +76,8 @@ public partial class LumexButton : LumexComponentBase
     /// </summary>
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
-	private protected override string? RootClass => TwMerge.Merge( Button.GetStyles( this ) );
+	private protected override string? RootClass 
+        => TwMerge.Merge( Button.GetStyles( this ) );
 
     protected virtual Task OnClickAsync( MouseEventArgs args ) =>
         Disabled ? Task.CompletedTask : OnClick.InvokeAsync( args );

src/LumexUI/Components/Divider/LumexDivider.razor

@@ -0,0 +1,23 @@
+@namespace LumexUI
+@inherits LumexComponentBase
+
+<LumexComponent As="@As"
+                Class="@RootClass"
+                Style="@RootStyle"
+                @attributes="@AdditionalAttributes">
+</LumexComponent>
+
+@code {
+    /// <summary>
+    /// Gets or sets a value defining the divider's orientation.
+    /// </summary>
+    /// <remarks>
+    /// Default value is <see cref="Orientation.Horizontal" />
+    /// </remarks>
+    [Parameter] public Orientation Orientation { get; set; }
+
+    private protected override string? RootClass => 
+        TwMerge.Merge( Divider.GetStyles( this ) );
+
+    private new string As => Orientation is Orientation.Horizontal ? "hr" : "div";
+}

src/LumexUI/Styles/Button.cs

@@ -12,7 +12,7 @@ namespace LumexUI.Styles;
 [ExcludeFromCodeCoverage]
 internal readonly record struct Button
 {
-    private static string _base = CssBuilder.Empty()
+    private readonly static string _base = CssBuilder.Empty()
         .AddClass( "inline-flex" )
         .AddClass( "items-center" )
         .AddClass( "justify-center" )
@@ -28,12 +28,12 @@ internal readonly record struct Button
         .AddClass( "hover:opacity-80" )
         .Build();
 
-    private static string _disabled = CssBuilder.Empty()
+    private readonly static string _disabled = CssBuilder.Empty()
         .AddClass( "opacity-disabled" )
         .AddClass( "pointer-events-none" )
         .Build();
 
-    private static string _fullWidth = CssBuilder.Empty()
+    private readonly static string _fullWidth = CssBuilder.Empty()
         .AddClass( "w-full" )
         .Build();
 

src/LumexUI/Styles/Divider.cs

@@ -0,0 +1,38 @@
+// Copyright (c) LumexUI 2024
+// LumexUI licenses this file to you under the MIT license
+// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
+
+using System.Diagnostics.CodeAnalysis;
+
+using LumexUI.Common;
+using LumexUI.Utilities;
+
+namespace LumexUI.Styles;
+
+[ExcludeFromCodeCoverage]
+internal readonly record struct Divider
+{
+    private readonly static string _base = CssBuilder.Empty()
+        // TODO: Uncomment when the theme provider is ready
+        //.AddClass( "bg-border" )
+        .AddClass( "border-none" )
+        .Build();
+
+    private static string GetOrientationStyles( Orientation orientation ) => orientation switch
+    {
+        Orientation.Horizontal => "w-full h-px",
+        Orientation.Vertical => "h-full w-px",
+        _ => throw new NotImplementedException()
+    };
+
+    public static string GetStyles( LumexDivider divider )
+    {
+        var styles = new CssBuilder()
+            .AddClass( _base )
+            .AddClass( GetOrientationStyles( divider.Orientation ) )
+            .AddClass( divider.Class )
+            .Build();
+
+        return styles;
+    }
+}

src/LumexUI/_Imports.razor

@@ -2,4 +2,6 @@
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Rendering
 
+@using LumexUI.Common
+@using LumexUI.Styles
 @using LumexUI.Utilities

tests/LumexUI.Tests/Components/Divider/DividerTests.cs

@@ -0,0 +1,39 @@
+// Copyright (c) LumexUI 2024
+// LumexUI licenses this file to you under the MIT license
+// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
+
+using LumexUI.Common;
+
+using Microsoft.Extensions.DependencyInjection;
+
+using TailwindMerge;
+
+namespace LumexUI.Tests.Components;
+
+public class DividerTests : TestContext
+{
+    public DividerTests()
+    {
+        Services.AddSingleton<TwMerge>();
+    }
+
+    [Fact]
+    public void Divider_Horizontal_ShouldRenderAsHr()
+    {
+        var cut = RenderComponent<LumexDivider>( p => p
+            .Add( p => p.Orientation, Orientation.Horizontal )
+        );
+
+        cut.Markup.Should().StartWith( "<hr" );
+    }
+
+    [Fact]
+    public void Divider_Vertical_ShouldRenderAsDiv()
+    {
+        var cut = RenderComponent<LumexDivider>( p => p
+            .Add( p => p.Orientation, Orientation.Vertical )
+        );
+
+        cut.Markup.Should().StartWith( "<div" );
+    }
+}