complete demo page

bitfoundation · Dec 24, 2024 · c0052ba · c0052ba
1 parent b4ab0ec
commit c0052ba
Show file tree

Hide file tree

Showing 12 changed files with 721 additions and 216 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor
@@ -14,7 +14,7 @@
           AutoToggleScroll="AutoToggleScroll"
           Blocking="Blocking"
           Classes="Classes"
-          DragElementSelector="DragElementSelector"
+          DragElementSelector="@DragElementSelector"
           Draggable="Draggable"
           IsOpen="IsOpen"
           IsOpenChanged="AssignIsOpen"
@@ -26,16 +26,16 @@
           Styles="Styles">
     @if (Header is not null || HeaderText is not null || ShowCloseButton)
     {
-        <div style="@Styles?.HeaderContainer" class="bit-ppl-hcn @Classes?.HeaderContainer">
+        <div style="@Styles?.HeaderContainer" class="bit-pmd-hcn @Classes?.HeaderContainer">
             @if (Header is not null)
             {
-                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                <div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
                     @Header
                 </div>
             }
             else if (HeaderText is not null)
             {
-                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                <div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
                     @HeaderText
                 </div>
             }
@@ -44,26 +44,26 @@
             {
                 <button @onclick="CloseModal"
                         style="@Styles?.CloseButton"
-                        class="bit-ppl-cls @Classes?.CloseButton">
+                        class="bit-pmd-cls @Classes?.CloseButton">
                     <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
                 </button>
             }
         </div>
     }
 
-    <div style="@Styles?.Body" class="bit-ppl-bdy @Classes?.Body">
+    <div style="@Styles?.Body" class="bit-pmd-bdy @Classes?.Body">
         @(Body ?? ChildContent)
     </div>
 
     @if (Footer is not null)
     {
-        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+        <div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
             @Footer
         </div>
     }
     else if (FooterText is not null)
     {
-        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+        <div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
             @FooterText
         </div>
     }

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss
@@ -4,25 +4,88 @@
 }
 
 .bit-pmd-mfl {
-    .bit-pnl-ovl {
+    .bit-mdl-ovl {
         background-color: $clr-bg-overlay;
     }
 }
 
+.bit-pmd-tbr {
+    .bit-mdl-ctn {
+        border-top: spacing(0.5) solid $clr-pri;
+    }
+}
+
 .bit-pmd-fhe {
     .bit-mdl-ctn {
         height: 100%;
+        border-top: none;
     }
 }
 
 .bit-pmd-fwi {
     .bit-mdl-ctn {
         width: 100%;
     }
+
+    .bit-pmd-bdy {
+        max-width: unset;
+    }
 }
 
-.bit-pmd-tbr {
-    .bit-mdl-ctn {
-        border-top: rem2(4px) solid $clr-pri;
+.bit-pmd-hcn {
+    top: 0;
+    z-index: 1;
+    display: flex;
+    position: sticky;
+    font-weight: 600;
+    color: $clr-fg-pri;
+    overflow-wrap: anywhere;
+    background-color: $clr-bg-pri;
+    padding: spacing(2) spacing(2) 0;
+}
+
+.bit-pmd-hdr {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    font-size: spacing(2.5);
+}
+
+.bit-pmd-cls {
+    display: flex;
+    cursor: pointer;
+    width: spacing(5);
+    height: spacing(5);
+    align-items: center;
+    justify-content: center;
+    font-size: spacing(1.75);
+    border-radius: spacing(0.25);
+    background-color: transparent;
+
+    @media (hover: hover) {
+        &:hover {
+            color: $clr-fg-pri-hover;
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+
+    &:active {
+        color: $clr-fg-pri-active;
+        background-color: $clr-bg-pri-active;
     }
 }
+
+.bit-pmd-bdy {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: spacing(2);
+    max-width: spacing(75);
+}
+
+.bit-pmd-fcn {
+    bottom: 0;
+    z-index: 1;
+    position: sticky;
+    background-color: $clr-bg-pri;
+    padding: 0 spacing(2) spacing(2) spacing(2);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
@@ -3,18 +3,6 @@
 
 $html-font-size: 16px;
 
-@function stripUnit($value) {
-    @return math.div($value, ($value * 0 + 1));
-}
-
-@function em2($pxValue, $base-font-size: $html-font-size) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($base-font-size))}em;
-}
-
-@function rem2($pxValue) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($html-font-size))}rem;
-}
-
 @function spacing($spacingValue) {
     @return calc($spacing-scaling-factor * $spacingValue);
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
@@ -5,21 +5,35 @@
         <BitText Typography="BitTypography.H3" Class="title">@ComponentName</BitText>
         <section id="overview-section" class="page-section">
             <BitText Typography="BitTypography.Subtitle1">
-                @ComponentDescription
+                @if (DescriptionTemplate is not null)
+                {
+                    @DescriptionTemplate
+                }
+                else
+                {
+                    @ComponentDescription
+                }
             </BitText>
         </section>
 
-        @if (Notes.HasValue())
+        @if (NotesTemplate is not null || Notes.HasValue())
         {
             <section id="notes-section" class="page-section">
                 <BitText Typography="BitTypography.H4" Class="subtitle">Notes</BitText>
-                @Notes
+                @if (NotesTemplate is not null)
+                {
+                    @NotesTemplate
+                }
+                else
+                {
+                    @Notes
+                }
             </section>
         }
 
         <section id="usage-section" class="page-section">
             <BitText Typography="BitTypography.H4" Class="subtitle">Usage</BitText>
-            @ChildContent
+            @(Body ?? ChildContent)
         </section>
 
         <section id="api-section" class="page-section">

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
@@ -5,6 +5,9 @@ public partial class ComponentDemo
     [Parameter] public string ComponentName { get; set; } = default!;
     [Parameter] public string? ComponentDescription { get; set; }
     [Parameter] public string? Notes { get; set; }
+    [Parameter] public RenderFragment? DescriptionTemplate { get; set; }
+    [Parameter] public RenderFragment? NotesTemplate { get; set; }
+    [Parameter] public RenderFragment? Body { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public List<ComponentParameter> ComponentParameters { get; set; } = [];
     [Parameter] public List<ComponentSubClass> ComponentSubClasses { get; set; } = [];