Merge branch 'develop' of https://github.com/IowaComputerGurus/aspnetcore.utilities.bootstrap5taghelpers into develop

Author: mitchelsellers

.github/workflows/ci-build.yml

@@ -26,15 +26,15 @@ jobs:
           fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Cache SonarCloud packages
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           path: ~\sonar\cache
           key: ${{ runner.os }}-sonar
           restore-keys: ${{ runner.os }}-sonar
 
       - name: Cache SonarCloud scanner
         id: cache-sonar-scanner
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           path: .\.sonar\scanner
           key: ${{ runner.os }}-sonar-scanner

README.md

@@ -1,6 +1,6 @@
 # AspNetCore Bootstrap5 Tag Helpers ![](https://img.shields.io/github/license/iowacomputergurus/aspnetcore.utilities.bootstrap5taghelpers.svg)
 
-A collection of TagHelpers for ASP.NET Core that make utilizing the Bootstrap 4.x library easier to use for developers.  Designed to reduce code effort substantially
+A collection of TagHelpers for ASP.NET Core that make utilizing the Bootstrap 5.x library easier to use for developers.  Designed to reduce code effort substantially
 
 ![Build Status](https://github.com/IowaComputerGurus/aspnetcore.utilities.bootstrap5taghelpers/actions/workflows/ci-build.yml/badge.svg)
 
@@ -23,14 +23,14 @@ These tag helpers are only for markup display, your web project must properly in
 You must modify your `_viewimports.cshtml` file by adding
 
 ``` html+razor
-@addTagHelper *, ICG.AspNetCore.Utilities.bootstrap5taghelpers
+@addTagHelper *, ICG.AspNetCore.Utilities.Bootstrap5TagHelpers
 ```
 
 ## Usage
 
-The goal of these tag helpers is to reduce the redundant coding, and compliance with various features of not only the Bootstrap library but form patterns.  Within the "Samples" folder there are examples of all included tag helpers.  However, the below shows a quick example of the power of these helps.
+The goal of these tag helpers is to reduce the redundant coding, and compliance with various features of not only the Bootstrap library but form patterns.  Within the "Sample" project you will find examples of all tag helper usage.  However, the below shows a quick example of the power of these tag helpers.
 
-### Before Usage
+### Before Bootstrap 5 Tag Helper
 
 The following markup is how you would output a model-bound field for a password field, including a note on complexity and validation.
 
@@ -45,7 +45,7 @@ The following markup is how you would output a model-bound field for a password
 
 This is a total of *306* characters with spaces or *268* without.  Granted we get some help with auto-complete etc.
 
-### After Using
+### After Using Bootstrap 5 Tag Helper
 
 You can take the entire above example and simplify it to the following
 
@@ -64,11 +64,15 @@ At this time tag helpers have been implemented for the following elements.
 
 | Element | Description of Implementation |
 | --- | --- |
+| Accordion | Full support for implementation of accordion, including stay-open modes |
 | Alerts | Full support for implementation of alerts, including dismissible alerts |
 | Badges | Full support for implementation of badges of all Bootstrap color variations |
 | Buttons | Full support for implementation of buttons of all Bootstrap color variations, including outlines |
 | Cards | Support for Card, Card Header, Card Header Actions, and Card body elements |
 | Environment Alert | An extension of the `<environment>` tag helper to render as an alert style |
 | Input | Support for Form input controls for anything tied to the `<input>` tag including ASP.NET Code Model Binding & Validation |
 | Modals | Support for modal dialogs, including Modal Body, header, footer, dismiss, and toggles |
+| Offcanvas | Full support for implementation of offcanvas display, including sizing/placement |
 | TextArea | Support for Form input controls tied to the `<textarea>` tag including ASP.NET Core Model Binding & Validation | 
+
+If you find that we are missing a particular tag helper, we welcome contributions!

src/AspNetCore.Utilities.Bootstrap5TagHelpers.Sample/Views/Home/Index.cshtml

@@ -324,50 +324,50 @@
 
 <table class="table table-striped table-hover">
     <thead>
-        <tr>
-            <th>Example</th>
-            <th>Code</th>
-        </tr>
+    <tr>
+        <th>Example</th>
+        <th>Code</th>
+    </tr>
     </thead>
     <tbody>
-        <tr>
-            <td>
-                <modal-toggle Target="testing">
-                    Launch Demo
-                </modal-toggle>
+    <tr>
+        <td>
+            <modal-toggle Target="testing">
+                Launch Demo
+            </modal-toggle>
 
-                <modal id="testing" class="im-weird" vertically-centered="true" >
-                    <modal-header Title="Testing Modal Header">
-                        <modal-header-dismiss></modal-header-dismiss>
-                    </modal-header>
-                    <modal-body>
-                        <form-input asp-for="FirstName"></form-input>
-                    </modal-body>
-                    <modal-footer>
-                        <bs-button bs-color="Secondary" dismisses="modal">Close</bs-button>
-                    </modal-footer>
-                </modal>
-            </td>
-            <td>
-                <code>
-                    &lt;modal-toggle Target=&quot;testing&quot;&gt;
-                    Launch Demo
-                    &lt;/modal-toggle&gt;
+            <modal id="testing" class="im-weird" vertically-centered="true" >
+                <modal-header Title="Testing Modal Header">
+                    <modal-header-dismiss></modal-header-dismiss>
+                </modal-header>
+                <modal-body>
+                    <form-input asp-for="FirstName"></form-input>
+                </modal-body>
+                <modal-footer>
+                    <bs-button bs-color="Secondary" dismisses="modal">Close</bs-button>
+                </modal-footer>
+            </modal>
+        </td>
+        <td>
+            <code>
+                &lt;modal-toggle Target=&quot;testing&quot;&gt;
+                Launch Demo
+                &lt;/modal-toggle&gt;
 
-                    &lt;modal id=&quot;testing&quot;&gt;
-                    &lt;modal-header Title=&quot;Testing Modal Header&quot;&gt;
-                    &lt;modal-header-dismiss&gt;&lt;/modal-header-dismiss&gt;
-                    &lt;/modal-header&gt;
-                    &lt;modal-body&gt;
-                    &lt;form-input asp-for=&quot;FirstName&quot;&gt;&lt;/form-input&gt;
-                    &lt;/modal-body&gt;
-                    &lt;modal-footer&gt;
-                    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
-                    &lt;/modal-footer&gt;
-                    &lt;/modal&gt;
-                </code>
-            </td>
-        </tr>      
+                &lt;modal id=&quot;testing&quot;&gt;
+                &lt;modal-header Title=&quot;Testing Modal Header&quot;&gt;
+                &lt;modal-header-dismiss&gt;&lt;/modal-header-dismiss&gt;
+                &lt;/modal-header&gt;
+                &lt;modal-body&gt;
+                &lt;form-input asp-for=&quot;FirstName&quot;&gt;&lt;/form-input&gt;
+                &lt;/modal-body&gt;
+                &lt;modal-footer&gt;
+                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
+                &lt;/modal-footer&gt;
+                &lt;/modal&gt;
+            </code>
+        </td>
+    </tr>      
     <tr>
         <td>
             <modal-toggle Target="testing-secondary">
@@ -409,6 +409,117 @@
     </tbody>
 </table>
 
+<h2>Progress</h2>
+<table class="table table-striped table-hover">
+    <thead>
+    <tr>
+        <th>Description</th>
+        <th>Display</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <th>Simple Progress</th>
+        <th><progress progress-value="75" ></progress></th>
+        </tr>
+        <tr>
+            <th>With Background</th>
+            <th><progress progress-value="75" background-color="BootstrapColor.Danger"></progress></th>
+        </tr>
+    <tr>
+        <th>With Background, Striped</th>
+        <th><progress progress-value="75" background-color="BootstrapColor.Danger" is-striped="true"></progress></th>
+        </tr>
+        <tr>
+            <th>With Background, Striped, Animated</th>
+            <th><progress progress-value="75" background-color="BootstrapColor.Danger" is-striped="true" is-animated="true"></progress></th>
+        </tr>
+    <tr>
+        <th>With Background, Striped, Animated, Label</th>
+        <th><progress progress-value="75" background-color="BootstrapColor.Danger" is-striped="true" is-animated="true" progress-display-label="75%"></progress></th>
+    </tr>
+    </tbody>
+</table>
+
+<h2>OffCanvas</h2>
+<table class="table table-striped table-hover">
+    <thead>
+        <tr>
+            <th>Description</th>
+            <th>Display</th>
+        </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>Simple Setup</td>
+        <td>
+            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+                Show Demo
+            </button>
+            <offcanvas id="offcanvasExample">
+                <offcanvas-header title="Example 1">
+                    <offcanvas-dismiss></offcanvas-dismiss>
+                </offcanvas-header>
+                <offcanvas-body>
+                    <h3>Magic Content</h3>
+                    <p>Goes here!</p>
+                </offcanvas-body>
+            </offcanvas>
+        </td>
+        </tr>
+    <tr>
+        <td>Static Backdrop</td>
+        <td>
+            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample2" aria-controls="offcanvasExample2">
+                Show Example
+            </button>
+            <offcanvas id="offcanvasExample2" static-backdrop="true">
+                <offcanvas-header title="Example 2">
+                    <offcanvas-dismiss></offcanvas-dismiss>
+            </offcanvas-header>
+                <offcanvas-body>
+                    <h3>Magic Content</h3>
+                    <p>Goes here!</p>
+                </offcanvas-body>
+            </offcanvas>
+        </td>
+    </tr>
+    <tr>
+        <td>Body Scroll Backdrop</td>
+        <td>
+            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample3" aria-controls="offcanvasExample3">
+                Show Example
+            </button>
+            <offcanvas id="offcanvasExample3" enable-body-scrolling="true">
+                <offcanvas-header title="Example 3">
+                    <offcanvas-dismiss></offcanvas-dismiss>
+                </offcanvas-header>
+                <offcanvas-body>
+                    <h3>Magic Content</h3>
+                    <p>Goes here!</p>
+                </offcanvas-body>
+            </offcanvas>
+        </td>
+        </tr>
+        <tr>
+            <td>Placement</td>
+            <td>
+                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample4" aria-controls="offcanvasExample4">
+                    Show Example
+                </button>
+                <offcanvas id="offcanvasExample4" placement="End">
+                    <offcanvas-header title="Example 4">
+                        <offcanvas-dismiss></offcanvas-dismiss>
+                    </offcanvas-header>
+                    <offcanvas-body>
+                        <h3>Magic Content</h3>
+                        <p>Goes here!</p>
+                    </offcanvas-body>
+                </offcanvas>
+            </td>
+        </tr>
+    </tbody>
+</table>
 <style>
     code {
         white-space: pre;

src/AspNetCore.Utilities.Bootstrap5TagHelpers.Tests/ButtonTagHelperTests.cs

@@ -105,7 +105,6 @@ public async Task Sets_Button_Size_If_Not_Normal(ButtonSize size, string expecte
     public async Task Throws_Error_If_Invalid_ButtonSize()
     {
         var error = await Assert.ThrowsAsync<ArgumentOutOfRangeException>(async () => await (new ButtonTagHelper { Size = (ButtonSize)Int16.MaxValue }).Render());
-
     }
 
     [Fact]

src/AspNetCore.Utilities.Bootstrap5TagHelpers.Tests/Modal/ModalTagHelperTests.cs

@@ -1,6 +1,7 @@
 using ICG.AspNetCore.Utilities.Bootstrap5TagHelpers.Contexts;
 using ICG.AspNetCore.Utilities.Bootstrap5TagHelpers.Modal;
 using Microsoft.AspNetCore.Razor.TagHelpers;
+using System.Drawing;
 
 namespace ICG.AspNetCore.Utilities.Bootstrap5TagHelpers.Tests.Modal;
 
@@ -186,4 +187,47 @@ public async Task Should_Render_Scrollable_Class_When_Flagged()
         //Assert
         Assert.Equal(expectedContent, output.Content.GetContent());
     }
+
+    [Theory]
+    [InlineData(ModalSize.Small, "modal-dialog modal-sm")]
+    [InlineData(ModalSize.Default, "modal-dialog")]
+    [InlineData(ModalSize.Large, "modal-dialog modal-lg")]
+    [InlineData(ModalSize.ExtraLarge, "modal-dialog modal-xl")]
+    public async Task Should_Render_ProperModalDialogClass_ForSize(ModalSize size, string expectedClass)
+    {
+        //Arrange
+        TagHelperContext context = MakeTagHelperContext();
+        TagHelperOutput output = MakeTagHelperOutput(" ");
+        var expectedContent = $"<div class=\"{expectedClass}\"><div class=\"modal-content\"></div></div>";
+
+        //Act
+        var helper = new ModalTagHelper { Size = size};
+        await helper.ProcessAsync(context, output);
+
+        //Assert
+        Assert.Equal(expectedContent, output.Content.GetContent());
+    }
+
+    [Theory]
+    [InlineData(ModalFullscreenMode.Never, "modal-dialog")]
+    [InlineData(ModalFullscreenMode.Always, "modal-dialog modal-fullscreen")]
+    [InlineData(ModalFullscreenMode.BelowSmall, "modal-dialog modal-fullscreen-sm-down")]
+    [InlineData(ModalFullscreenMode.BelowMedium, "modal-dialog modal-fullscreen-md-down")]
+    [InlineData(ModalFullscreenMode.BelowLarge, "modal-dialog modal-fullscreen-lg-down")]
+    [InlineData(ModalFullscreenMode.BelowXLarge, "modal-dialog modal-fullscreen-xl-down")]
+    [InlineData(ModalFullscreenMode.BelowXXLarge, "modal-dialog modal-fullscreen-xxl-down")]
+    public async Task Should_Render_ProperModalDialogClass_ForFullscreen(ModalFullscreenMode mode, string expectedClass)
+    {
+        //Arrange
+        TagHelperContext context = MakeTagHelperContext();
+        TagHelperOutput output = MakeTagHelperOutput(" ");
+        var expectedContent = $"<div class=\"{expectedClass}\"><div class=\"modal-content\"></div></div>";
+
+        //Act
+        var helper = new ModalTagHelper { FullscreenMode = mode};
+        await helper.ProcessAsync(context, output);
+
+        //Assert
+        Assert.Equal(expectedContent, output.Content.GetContent());
+    }
 }