feat(blazorui): add BitSeparator component #5451 (#5452)

bitfoundation · Oct 2, 2023 · 5456a28 · 5456a28
1 parent 4dfcd1b
commit 5456a28
Show file tree

Hide file tree

Showing 10 changed files with 338 additions and 0 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor
@@ -0,0 +1,14 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value">
+     @if (ChildContent is not null)
+     {
+        <div class="bit-spr-cnt" role="separator" aria-orientation="@(IsVertical ? "vertical" : "horizontal")">
+            @ChildContent
+        </div>
+     }
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor.cs
@@ -0,0 +1,60 @@
+namespace Bit.BlazorUI;
+
+public partial class BitSeparator
+{
+    private bool isVertical;
+    private BitSeparatorAlignContent separatorAlignContent = BitSeparatorAlignContent.Center;
+
+
+
+    /// <summary>
+    /// Where the content should be aligned in the separator.
+    /// </summary>
+    [Parameter] public BitSeparatorAlignContent AlignContent
+    {
+        get => separatorAlignContent;
+        set
+        {
+            if (separatorAlignContent == value) return;
+
+            separatorAlignContent = value;
+            ClassBuilder.Reset();
+        }
+    }
+
+    /// <summary>
+    /// The content of the Separator, it can be any custom tag or text.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Whether the element is a vertical separator.
+    /// </summary>
+    [Parameter] public bool IsVertical
+    {
+        get => isVertical;
+        set
+        {
+            if (isVertical == value) return;
+
+            isVertical = value;
+            ClassBuilder.Reset();
+        }
+    }
+
+
+
+    protected override string RootElementClass => "bit-spr";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => IsVertical ? $"{RootElementClass}-vrt" : $"{RootElementClass}-hrz");
+
+        ClassBuilder.Register(() => AlignContent switch
+        {
+            BitSeparatorAlignContent.Start => $"{RootElementClass}-srt",
+            BitSeparatorAlignContent.End => $"{RootElementClass}-end",
+            _ => $"{RootElementClass}-ctr"
+        });
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.scss b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.scss
@@ -0,0 +1,75 @@
+@import "../../Styles/functions.scss";
+
+.bit-spr {
+    position: relative;
+}
+
+.bit-spr-cnt {
+    position: relative;
+    display: inline-block;
+    color: $color-foreground-primary;
+    background: $color-background-primary;
+}
+
+.bit-spr-hrz {
+    display: block;
+    padding: spacing(0.5) 0;
+
+    &::before {
+        content: "";
+        display: block;
+        inset: 50% 0 0;
+        position: absolute;
+        height: $shape-border-width;
+        background-color: $color-border-secondary;
+    }
+
+    .bit-spr-cnt {
+        padding: 0 spacing(1.5);
+    }
+
+    &.bit-spr-ctr {
+        text-align: center;
+    }
+
+    &.bit-spr-srt {
+        text-align: start;
+    }
+
+    &.bit-spr-end {
+        text-align: end;
+    }
+}
+
+.bit-spr-vrt {
+    z-index: 1;
+    height: inherit;
+    display: table-cell;
+    padding: 0 spacing(0.5);
+
+    &::after {
+        content: "";
+        z-index: -1;
+        display: block;
+        inset: 0 0 0 50%;
+        position: absolute;
+        width: $shape-border-width;
+        background-color: $color-border-secondary;
+    }
+
+    .bit-spr-cnt {
+        padding: spacing(1.5) 0;
+    }
+
+    &.bit-spr-ctr {
+        vertical-align: middle;
+    }
+
+    &.bit-spr-srt {
+        vertical-align: top;
+    }
+
+    &.bit-spr-end {
+        vertical-align: bottom;
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparatorAlignContent.cs b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparatorAlignContent.cs
@@ -0,0 +1,8 @@
+namespace Bit.BlazorUI;
+
+public enum BitSeparatorAlignContent
+{
+    Start,
+    Center,
+    End
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss
@@ -39,6 +39,7 @@
 @import "../Components/Pivot/BitPivot.scss";
 @import "../Components/ProgressIndicator/BitProgressIndicator.scss";
 @import "../Components/ScrollablePane/BitScrollablePane.scss";
+@import "../Components/Separator/BitSeparator.scss";
 @import "../Components/Slider/BitSlider.scss";
 @import "../Components/SnackBar/BitSnackBar.scss";
 @import "../Components/Spinner/BitSpinner.scss";

diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor
@@ -0,0 +1,64 @@
+@page "/components/separator"
+
+<PageOutlet Url="components/separator"
+            Title="BitSeparator"
+            Description="separator component of the bit BlazorUI components" />
+
+<div>
+    <ComponentDemo ComponentName="Separator"
+                   ComponentDescription="A Separator is a component that visually separates content into groups."
+                   ComponentParameters="componentParameters"
+                   ComponentSubEnums="componentSubEnums">
+        <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+            <ExamplePreview>
+                <div>
+                    <BitLabel>Empty separator</BitLabel>
+                    <BitSeparator />
+                    <br />
+                    <BitLabel>Separator with text</BitLabel>
+                    <BitSeparator>Text</BitSeparator>
+                    <br />
+                    <BitLabel>Separator with icon</BitLabel>
+                    <BitSeparator><BitIcon IconName="Clock" /></BitSeparator>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+        <ComponentExampleBox Title="Vertical" RazorCode="@example2RazorCode" Id="example1">
+            <ExamplePreview>
+                <div class="custom-horizontal-layout">
+                    <span>Item 1</span>
+                    <BitSeparator IsVertical="true" />
+                    <span>Item 2</span>
+                    <BitSeparator IsVertical="true" />
+                    <span>Item 3</span>
+                    <BitSeparator IsVertical="true" />
+                    <span>Item 4</span>
+                    <BitSeparator IsVertical="true" />
+                    <span>Item 5</span>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+        <ComponentExampleBox Title="AlignContent" RazorCode="@example3RazorCode" Id="example1">
+            <ExamplePreview>
+                <div style="height: 28rem">
+                    <div>
+                        <BitLabel>Horizontal separator with text</BitLabel>
+                        <BitSeparator AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
+                        <br />
+                        <BitSeparator AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
+                        <br />
+                        <BitSeparator AlignContent="@BitSeparatorAlignContent.End">End</BitSeparator>
+                    </div>
+                    <br /><br />
+                    <div style="height: 13rem">
+                        <BitLabel>Vertical separator with text</BitLabel>
+                        <br />
+                        <BitSeparator IsVertical="true" AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
+                        <BitSeparator IsVertical="true" AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
+                        <BitSeparator IsVertical="true" AlignContent="@BitSeparatorAlignContent.End">End</BitSeparator>
+                    </div>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+    </ComponentDemo>
+</div>
diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.cs
@@ -0,0 +1,102 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Separator;
+
+public partial class BitSeparatorDemo
+{
+    private readonly List<ComponentParameter> componentParameters = new()
+    {
+        new()
+        {
+            Name = "AlignContent",
+            Type = "BitSeparatorAlignContent",
+            DefaultValue = "BitSeparatorAlignContent.Center",
+            Description = "Where the content should be aligned in the separator.",
+            Href = "#separator-align-enum",
+            LinkType = LinkType.Link
+        },
+        new()
+        {
+            Name = "ChildContent",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The content of the Separator, it can be any custom tag or text."
+        },
+        new()
+        {
+            Name = "IsVertical",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the element is a vertical separator."
+        }
+    };
+
+    private readonly List<ComponentSubEnum> componentSubEnums = new()
+    {
+        new()
+        {
+            Id = "separator-align-enum",
+            Name = "BitSeparatorAlignContent",
+            Description = "",
+            Items = new List<ComponentEnumItem>()
+            {
+                new()
+                {
+                    Name = "Start",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "Center",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "End",
+                    Value = "2",
+                },
+            }
+        }
+    };
+
+
+
+    private readonly string example1RazorCode = @"
+<BitSeparator />
+<BitSeparator>Text</BitSeparator>
+<BitSeparator><BitIcon IconName=""Clock"" /></BitSeparator>";
+
+    private readonly string example2RazorCode = @"
+<style>
+    .custom-horizontal-layout {
+        gap: 1rem;
+        height: 3rem;
+        display: flex;
+        white-space: nowrap;
+        align-items: center;
+    }
+</style>
+
+
+<div class=""custom-horizontal-layout"">
+    <span>Item 1</span>
+    <BitSeparator IsVertical=""true"" />
+    <span>Item 2</span>
+    <BitSeparator IsVertical=""true"" />
+    <span>Item 3</span>
+    <BitSeparator IsVertical=""true"" />
+    <span>Item 4</span>
+    <BitSeparator IsVertical=""true"" />
+    <span>Item 5</span>
+</div>
+";
+
+    private readonly string example3RazorCode = @"
+<BitSeparator AlignContent=""@BitSeparatorAlignContent.Center"">Center</BitSeparator>
+<BitSeparator AlignContent=""@BitSeparatorAlignContent.Start"">Start</BitSeparator>
+<BitSeparator AlignContent=""@BitSeparatorAlignContent.End"">End</BitSeparator>
+
+<BitSeparator IsVertical=""true"" AlignContent=""@BitSeparatorAlignContent.Center"">Center</BitSeparator>
+<BitSeparator IsVertical=""true"" AlignContent=""@BitSeparatorAlignContent.Start"">Start</BitSeparator>
+<BitSeparator IsVertical=""true"" AlignContent=""@BitSeparatorAlignContent.End"">End</BitSeparator>";
+}
+
+
diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.scss b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.scss
@@ -0,0 +1,7 @@
+.custom-horizontal-layout {
+    gap: 1rem;
+    height: 3rem;
+    display: flex;
+    white-space: nowrap;
+    align-items: center;
+}
diff --git a/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs
@@ -119,6 +119,7 @@ public partial class NavMenu : IDisposable
                 new() { Text = "Icon", Url = "/components/icon" },
                 new() { Text = "Image", Url = "/components/image" },
                 new() { Text = "Overlay", Url = "/components/overlay" },
+                new() { Text = "Separator", Url = "/components/separator" },
                 new() { Text = "Sticky", Url = "/components/sticky" },
             },
         },

diff --git a/src/BlazorUI/Demo/Client/Core/compilerconfig.json b/src/BlazorUI/Demo/Client/Core/compilerconfig.json
@@ -359,6 +359,12 @@
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
+    {
+        "outputFile": "Pages/Components/Separator/BitSeparatorDemo.razor.css",
+        "inputFile": "Pages/Components/Separator/BitSeparatorDemo.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
     {
         "outputFile": "Pages/Components/Slider/BitSliderDemo.razor.css",
         "inputFile": "Pages/Components/Slider/BitSliderDemo.razor.scss",