From 6e5223766593e85f4c9de0bec42ff9d21e4c7013 Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rastegarinia <mh.rastegari@outlook.com>
Date: Sun, 11 Aug 2024 10:16:56 +0330
Subject: [PATCH] feat(blazorui): improve BitCheckbox demo page #8277 (#8280)

---
 .../Inputs/Checkbox/BitCheckboxDemo.razor     | 48 +++++++++++++++---
 .../Inputs/Checkbox/BitCheckboxDemo.razor.cs  | 49 +++++++++++++++----
 .../Checkbox/BitCheckboxDemo.razor.scss       | 34 ++++++++++---
 3 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
index 310d654ad4..251ccbe032 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
@@ -11,6 +11,8 @@
                ComponentSubClasses="componentSubClasses">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
+            <div>Basic usage of BitCheckbox with enabled and disabled states.</div>
+            <br />
             <BitCheckbox Label="Basic checkbox" />
             <br />
             <BitCheckbox Label="Disable checkbox" IsEnabled="false" />
@@ -21,14 +23,18 @@
 
     <ComponentExampleBox Title="Check icon" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
+            <div>Customize the check icon of BitCheckbox.</div>
+            <br />
             <BitCheckbox Label="Custom check icon" CheckIconName="@BitIconName.Heart" />
             <br />
             <BitCheckbox Label="Disabled custom check icon" CheckIconName="@BitIconName.WavingHand" Value="true" IsEnabled="false" />
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Label position" RazorCode="@example3RazorCode" Id="example3">
+    <ComponentExampleBox Title="Reversed" RazorCode="@example3RazorCode" Id="example3">
         <ExamplePreview>
+            <div>Adjust the label position of BitCheckbox to be reversed.</div>
+            <br />
             <BitCheckbox Label="Reversed" Reversed />
             <br />
             <BitCheckbox Label="Reversed - Disabled" Reversed IsEnabled="false" />
@@ -39,6 +45,8 @@
 
     <ComponentExampleBox Title="LabelTemplate" RazorCode="@example4RazorCode" Id="example4">
         <ExamplePreview>
+            <div>Customizing the label of BitCheckbox using a template.</div>
+            <br />
             <BitCheckbox>
                 <LabelTemplate>
                     <BitTag Color="BitColor.Success">Label Template</BitTag>
@@ -49,6 +57,8 @@
 
     <ComponentExampleBox Title="Indeterminate" RazorCode="@example5RazorCode" Id="example5">
         <ExamplePreview>
+            <div>Display BitCheckbox in an indeterminate state.</div>
+            <br />
             <BitCheckbox Label="Indeterminate checkbox" Indeterminate />
             <br />
             <BitCheckbox Label="Disabled indeterminate checkbox" Indeterminate IsEnabled="false" />
@@ -57,6 +67,8 @@
 
     <ComponentExampleBox Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <ExamplePreview>
+            <div>Demonstrates one-way and two-way data binding with BitCheckbox.</div>
+            <br /><br />
             <div><b>Value</b>:</div><br />
             <BitCheckbox Label="One-way checked (Fixed)" Value="true" />
             <br />
@@ -87,6 +99,8 @@
 
     <ComponentExampleBox Title="Custom content" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <ExamplePreview>
+            <div>Create a custom checkbox with unique content and style.</div>
+            <br />
             <BitCheckbox @bind-Value="customCheckboxValue">
                 <BitIcon Style="border:1px solid gray;width:22px;height:22px"
                          IconName="@(customCheckboxValue ? BitIconName.Accept : null)" />
@@ -106,22 +120,38 @@
 
     <ComponentExampleBox Title="Style & Class" RazorCode="@example8RazorCode" Id="example8">
         <ExamplePreview>
-            <div>
-                <div>Component's Style & Class:</div><br />
-                <BitCheckbox Label="Styled checkbox" Style="background-color:aqua;color:red" />
+            <div>Explore styling and class customization for BitCheckbox, including component styles, custom classes, and detailed styles.</div>
+            <br /><br />
+            <div>Component's Style & Class:</div>
+            <br />
+            <div class="example-content">
+                <BitCheckbox Label="Styled checkbox" Style="color: dodgerblue; text-shadow: lightskyblue 0 0 1rem;" />
                 <br />
                 <BitCheckbox Label="Classed checkbox" Class="custom-class" />
-                <br /><br /><br /><br />
-                <div><b>Styles</b> & <b>Classes</b>:</div><br />
-                <BitCheckbox Label="Styles" Styles="@(new() { Label="color:darkgoldenrod", Box="border-color:brown", Icon="color:red" })" />
+            </div>
+            <br /><br /><br />
+            <div><b>Styles</b> & <b>Classes</b>:</div>
+            <br />
+            <div class="example-content">
+                <BitCheckbox Label="Styles"
+                             Styles="@(new() { Checked = "--check-color: deeppink; --icon-color: white;",
+                                               Label = "color: var(--check-color);",
+                                               Box = "border-radius: 50%; border-color: var(--check-color); background-color: var(--check-color);",
+                                               Icon = "color: var(--icon-color);" })" />
                 <br />
-                <BitCheckbox Label="Classes" Classes="@(new() { Label="custom-label", Box="custom-box" })" />
+                <BitCheckbox Label="Classes"
+                             Classes="@(new() { Checked = "custom-checked",
+                                                Icon = "custom-icon",
+                                                Label="custom-label",
+                                                Box="custom-box" })" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
 
     <ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <ExamplePreview>
+            <div>Use data annotations to validate the BitCheckbox component.</div>
+            <br />
             <div>
                 @if (string.IsNullOrEmpty(SuccessMessage))
                 {
@@ -146,6 +176,8 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
         <ExamplePreview>
+            <div>Use BitCheckbox in a right-to-left (RTL).</div>
+            <br />
             <div dir="rtl">
                 <BitCheckbox Dir="BitDir.Rtl" Label="چکباکس راست به چپ" />
                 <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.cs
index 526b89e963..cad6fee18b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.cs
@@ -288,32 +288,61 @@ private void HandleInvalidSubmit()
     private readonly string example8RazorCode = @"
 <style>
     .custom-class {
-        color: brown;
-        padding: 1rem;
-        background-color: aquamarine;
+        padding: 0.5rem;
+        border-radius: 0.125rem;
+        background-color: #d3d3d347;
+        border: 1px solid dodgerblue;
     }
 
+
     .custom-label {
-        color: darkblue;
-        font-size: 18px;
         font-weight: bold;
+        color: lightseagreen;
+    }
+
+    .custom-icon {
+        color: lightseagreen
     }
 
     .custom-box {
-        border-width: 3px;
-        border-color: crimson;
+        border-radius: 0.2rem;
+        border-color: lightseagreen;
+    }
+
+    .custom-checked .custom-icon {
+        color: white
+    }
+
+    .custom-checked:hover .custom-icon {
+        color: whitesmoke;
+    }
+
+    .custom-checked .custom-box {
+        background-color: lightseagreen;
+    }
+
+    .custom-checked:hover .custom-box {
+        border-color: mediumseagreen;
     }
 </style>
 
 
-<BitCheckbox Label=""Styled checkbox"" Style=""background-color:aqua;color:red"" />
+<BitCheckbox Label=""Styled checkbox"" Style=""color: dodgerblue; text-shadow: lightskyblue 0 0 1rem;"" />
 
 <BitCheckbox Label=""Classed checkbox"" Class=""custom-class"" />
 
 
-<BitCheckbox Label=""Styles"" Styles=""@(new() { Label=""color:darkgoldenrod"", Box=""border-color:brown"", Icon=""color:red"" })"" />
+<BitCheckbox Label=""Styles"" 
+             Styles=""@(new() { Checked = ""--check-color: deeppink; --icon-color: white;"", 
+                               Label = ""color: var(--check-color);"",
+                               Box = ""border-radius: 50%; border-color: var(--check-color); background-color: var(--check-color);"",
+                               Icon = ""color: var(--icon-color);"" })"" />
 
-<BitCheckbox Label=""Classes"" Classes=""@(new() { Label=""custom-label"", Box=""custom-box"" })"" />";
+<BitCheckbox Label=""Classes"" 
+             Classes=""@(new() { Checked = ""custom-checked"",
+                                Icon = ""custom-icon"",
+                                Label=""custom-label"",
+                                Box=""custom-box"" })"" />";
 
     private readonly string example9RazorCode = @"
 <style>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.scss
index 98ffb86fee..ff2b73aecf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.scss
@@ -14,20 +14,40 @@
 
 ::deep {
     .custom-class {
-        color: brown;
-        padding: 1rem;
-        background-color: aquamarine;
+        padding: 0.5rem;
+        border-radius: 0.125rem;
+        background-color: #d3d3d347;
+        border: 1px solid dodgerblue;
     }
 
     .custom-label {
-        color: darkblue;
-        font-size: 18px;
         font-weight: bold;
+        color: lightseagreen;
+    }
+
+    .custom-icon {
+        color: lightseagreen
     }
 
     .custom-box {
-        border-width: 3px;
-        border-color: crimson;
+        border-radius: 0.2rem;
+        border-color: lightseagreen;
+    }
+
+    .custom-checked .custom-icon {
+        color: white
+    }
+
+    .custom-checked:hover .custom-icon {
+        color: whitesmoke;
+    }
+
+    .custom-checked .custom-box {
+        background-color: lightseagreen;
+    }
+
+    .custom-checked:hover .custom-box {
+        border-color: mediumseagreen;
     }
 
     .validation-message {