feat(blazorui): add BitLayout component #7505 (#7780)

src/BlazorUI/Bit.BlazorUI/Components/Layout/BitLayout.razor

@@ -0,0 +1,48 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="RootElement"
+     @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+
+    @{
+        var headerHeight = HeaderHeight + StatusBarHeight;
+        var headerHeightStyle = $"{(headerHeight > 0 ? $"height:{headerHeight}px;" : "")}";
+        var headerPaddingStyle = $"{(StatusBarHeight > 0 ? $"padding-top:{StatusBarHeight}px;" : "")}";
+        var headerStyles = $"{headerHeightStyle}{headerPaddingStyle}{Styles?.Header}";
+        var headerClasses = $"bit-lyt-hdr{(FixedHeader ? " bit-lyt-fhd" : "")} {Classes?.Header}";
+
+        var mainPaddingTopStyle = $"{(headerHeight > 0 ? $"padding-top:{headerHeight}px;" : "")}";
+        var mainPaddingBottomStyle = $"{(FooterHeight > 0 ? $"padding-bottom:{FooterHeight}px;" : "")}";
+        var mainStyles = $"{mainPaddingTopStyle}{mainPaddingBottomStyle}{Styles?.Main}";
+        var mainClasses = $"bit-lyt-man {Classes?.Main}";
+
+        var footerHeightStyle = $"{(FooterHeight > 0 ? $"height:{FooterHeight}px;" : "")}";
+        var footerStyles = $"{footerHeightStyle}{Styles?.Footer}";
+        var footerClasses = $"bit-lyt-ftr{(FixedFooter ? " bit-lyt-fft" : "")} {Classes?.Footer}";
+    }
+
+    @if (Header is not null)
+    {
+        <header class="@headerClasses" style="@headerStyles">
+            @Header
+        </header>
+    }
+
+    @if (Main is not null)
+    {
+        <main class="@mainClasses" style="@mainStyles">
+            @Main
+        </main>
+    }
+
+    @if (Footer is not null)
+    {
+        <footer class="@footerClasses" style="@footerStyles">
+            @Footer
+        </footer>
+    }
+</div>

src/BlazorUI/Bit.BlazorUI/Components/Layout/BitLayout.razor.cs

@@ -0,0 +1,67 @@
+namespace Bit.BlazorUI;
+
+public partial class BitLayout
+{
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitLayout.
+    /// </summary>
+    [Parameter] public BitLayoutClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// Enables fixed positioning of the header at the top of the viewport.
+    /// </summary>
+    [Parameter] public bool FixedHeader { get; set; }
+
+    /// <summary>
+    /// Enables fixed positioning of the footer at the bottom of the viewport.
+    /// </summary>
+    [Parameter] public bool FixedFooter { get; set; }
+
+    /// <summary>
+    /// The content of the header section.
+    /// </summary>
+    [Parameter] public RenderFragment? Header { get; set; }
+
+    /// <summary>
+    /// The height of the header to calculate heights and paddings.
+    /// </summary>
+    [Parameter] public int HeaderHeight { get; set; }
+
+    /// <summary>
+    /// The content of the main section.
+    /// </summary>
+    [Parameter] public RenderFragment? Main { get; set; }
+
+    /// <summary>
+    /// The content of the footer section.
+    /// </summary>
+    [Parameter] public RenderFragment? Footer { get; set; }
+
+    /// <summary>
+    /// The height of the footer to calculate heights and paddings.
+    /// </summary>
+    [Parameter] public int FooterHeight { get; set; }
+
+    /// <summary>
+    /// The height of the status bar on mobile devices to calculate heights and paddings.
+    /// </summary>
+    [Parameter] public int StatusBarHeight { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the BitLayout.
+    /// </summary>
+    [Parameter] public BitLayoutClassStyles? Styles { get; set; }
+
+
+    protected override string RootElementClass => "bit-lyt";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => Classes?.Root);
+    }
+
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => Styles?.Root);
+    }
+}

src/BlazorUI/Bit.BlazorUI/Components/Layout/BitLayout.scss

@@ -0,0 +1,45 @@
+@import "../../Styles/functions.scss";
+
+.bit-lyt {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    min-width: 100%;
+    min-height: 100%;
+    flex-flow: column;
+    position: relative;
+    box-sizing: border-box;
+
+    &.bit-dis {
+        color: $color-foreground-disabled;
+    }
+}
+
+.bit-lyt-hdr {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.bit-lyt-fhd {
+    top: 0;
+    position: fixed;
+    z-index: $zindex-base;
+}
+
+.bit-lyt-man {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    box-sizing: border-box;
+}
+
+.bit-lyt-ftr {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.bit-lyt-fft {
+    bottom: 0;
+    position: fixed;
+    z-index: $zindex-base;
+}

src/BlazorUI/Bit.BlazorUI/Components/Layout/BitLayoutClassStyles.cs

@@ -0,0 +1,24 @@
+namespace Bit.BlazorUI;
+
+public class BitLayoutClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the root element of the BitLayout.
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the header section of the BitLayout.
+    /// </summary>
+    public string? Header { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the main section of the BitLayout.
+    /// </summary>
+    public string? Main { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the footer section of the BitLayout.
+    /// </summary>
+    public string? Footer { get; set; }
+}

src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss

@@ -11,6 +11,7 @@
     --bit-zin-modal: 1300;
     --bit-zin-callout: 1200;
     --bit-zin-overlay: 1100;
+    --bit-zin-base: 1000;
     //shape
     --bit-shp-brd-radius: 0.125rem;
     --bit-shp-brd-width: 0.0625rem;

src/BlazorUI/Bit.BlazorUI/Styles/components.scss

@@ -30,6 +30,7 @@
 @import "../Components/Icon/BitIcon.scss";
 @import "../Components/Image/BitImage.scss";
 @import "../Components/Label/BitLabel.scss";
+@import "../Components/Layout/BitLayout.scss";
 @import "../Components/Link/BitLink.scss";
 @import "../Components/Lists/BitBasicList/BitBasicList.scss";
 @import "../Components/Message/BitMessage.scss";

src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss

@@ -162,6 +162,7 @@ $zindex-snackbar: var(--bit-zin-snackbar);
 $zindex-modal: var(--bit-zin-modal);
 $zindex-callout: var(--bit-zin-callout);
 $zindex-overlay: var(--bit-zin-overlay);
+$zindex-base: var(--bit-zin-base);
 
 //shape
 $shape-border-radius: var(--bit-shp-brd-radius);

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layout/BitLayoutDemo.razor

@@ -0,0 +1,53 @@
+@page "/components/layout"
+
+<PageOutlet Url="components/layout"
+            Title="layout"
+            Description="layout component of the bit BlazorUI components" />
+
+<ComponentDemo ComponentName="Layout"
+               ComponentDescription="Layout can be used to create a base UI structure for an application."
+               ComponentParameters="componentParameters"
+               ComponentSubClasses="componentSubClasses">
+    <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+        <ExamplePreview>
+            <div class="container">
+                <BitLayout>
+                    <Header>
+                        <div class="header">
+                            this is header
+                        </div>
+                    </Header>
+                    <Main>
+                        <div class="main">
+                            this is main
+                        </div>
+                    </Main>
+                    <Footer>
+                        <div class="footer">
+                            this is footer
+                        </div>
+                    </Footer>
+                </BitLayout>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Classes & Styles" RazorCode="@example2RazorCode" Id="example2">
+        <ExamplePreview>
+            <div class="container">
+                <BitLayout Classes="@(new() { Header="header", Main="main", Footer="footer" })"
+                           Styles="@(new() { Main="height:500px" })">
+                    <Header>
+                        this is header
+                    </Header>
+                    <Main>
+                        this is main
+                    </Main>
+                    <Footer>
+                        this is footer
+                    </Footer>
+                </BitLayout>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+</ComponentDemo>