From 8d85df9fa09cd6c131e9522c401b47140133ba09 Mon Sep 17 00:00:00 2001 From: Defkon1 Date: Fri, 24 Jul 2026 12:39:31 +0200 Subject: [PATCH 1/7] feat Added BottomNav component, Closes #20 --- bottomnav.md | 107 ++++++++++++++++++ docs/README.md | 5 + docs/quick-reference.md | 5 + .../Components/BottomNav/BitBottomNav.razor | 38 +++++++ .../BottomNav/BitBottomNav.razor.cs | 25 ++++ .../Components/BottomNav/BitBottomNavItem.cs | 59 ++++++++++ .../Components/BitBottomNav.stories.razor | 66 +++++++++++ .../Layouts/SimpleMobileViewPort.razor | 4 + .../Layouts/SimpleMobileViewPort.razor.css | 16 +++ .../BitBottomNavTest.Rendering.razor | 81 +++++++++++++ 10 files changed, 406 insertions(+) create mode 100644 bottomnav.md create mode 100644 src/BitBlazor/Components/BottomNav/BitBottomNav.razor create mode 100644 src/BitBlazor/Components/BottomNav/BitBottomNav.razor.cs create mode 100644 src/BitBlazor/Components/BottomNav/BitBottomNavItem.cs create mode 100644 stories/BitBlazor.Stories/Components/Stories/Components/BitBottomNav.stories.razor create mode 100644 stories/BitBlazor.Stories/Layouts/SimpleMobileViewPort.razor create mode 100644 stories/BitBlazor.Stories/Layouts/SimpleMobileViewPort.razor.css create mode 100644 tests/BitBlazor.Test/Components/BottomNav/BitBottomNavTest.Rendering.razor diff --git a/bottomnav.md b/bottomnav.md new file mode 100644 index 0000000..f00df91 --- /dev/null +++ b/bottomnav.md @@ -0,0 +1,107 @@ +# BitBottomNav + +The `BitBottomNav` component renders a [mobile-optimized bottom navigation bar](https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/bottomnav/) to show the current location or quick actions. It supports icons, badges, alert indicators and accessibility-friendly labels for each item. + +## Namespace + +```csharp +BitBlazor.Components +``` + +## Description + +BitBottomNav displays a horizontal list of navigation entries optimized for bottom placement (common on mobile apps). Each entry is a BitBottomNavItem that can render: +- a text, +- an icon (via BitIcon), +- an optional badge (text/number), +- an optional alert indicator (dot) when no badge is present, +- an active state applied via the IsActive flag. + +Items are rendered as anchor elements () so they are keyboard-focusable and navigable. Visual styling is provided by the consuming app's stylesheet; the component emits semantic classes the CSS targets. + +## Parameters + +| Name | Type | Required | Default | Description | +|-----------|--------------------------------------|----------|---------|-----------------------------------------------------------------------------| +| Items | IReadOnlyList | ✗ | `Enumerable.Empty().ToList()` | The collection of items to render in the bottom navigation. | + +## BitBottomNavItem + +Each item in Items is a `BitBottomNavItem`. Main properties: + +| Property | Type | Default | Description | +|------------|----------|---------------------|---------------------------------------------------------| +| `Text` | `string` | `string.Empty` | Visible label for the item. | +| `Icon` | `string?` | `null` | Optional icon name (rendered via `BitIcon`). | +| `Link` | `string?` | `null` | Optional URL for the item (). | +| `BadgeText` | `string?` | `null` | Optional badge text; when present renders a badge element. | +| `BadgeAriaLabel` | `string?` | `null` | Optional ARIA label for the badge/alert; rendered in a visually-hidden span. | +| `IsActive` | `bool` | `false` | If `true`, the item gets an active class (indicates current/selected item). | +| `IsAlertActive` | `bool` | `false` | When `true` and no `BadgeText` is set, a small alert indicator (dot) is rendered. | + +Helper methods on `BitBottomNavItem`: +- `HasBadge()` — `true` when `BadgeText` is non-empty. +- `HasAriaLabel()` — `true` when (badge or alert) and `BadgeAriaLabel` is non-empty. +- `HasIcon()` — `true` when `Icon` is non-empty. + +## Usage Examples + +### Default + +C# (prepare items): + +```csharp +var items = new() + { + new BitBottomNavItem { Text = "Messages", Link = "#", Icon = BitBlazor.Utilities.Icons.ItComment, BadgeText = "1", BadgeAriaLabel = "to read" }, + new BitBottomNavItem { Text = "Images", Link = "#", Icon = BitBlazor.Utilities.Icons.ItCamera, BadgeText = "2", BadgeAriaLabel = "to view" }, + new BitBottomNavItem { Text = "Documents", Link = "#", Icon = BitBlazor.Utilities.Icons.ItFile, BadgeText = "42", BadgeAriaLabel = "to examine" }, + new BitBottomNavItem { Text = "Favorites", Link = "#", Icon = BitBlazor.Utilities.Icons.ItStarOutline, IsActive = true }, + new BitBottomNavItem { Text = "Settings", Link = "#", Icon = BitBlazor.Utilities.Icons.ItSettings, IsAlertActive = true } + }; +``` + +Razor (render component): + +```razor + +``` + +## Common scenarios: +- Numeric/text badge: set `BadgeText` = "7" and optionally `BadgeAriaLabel` = "7 unread messages". +- Alert indicator (dot): set `IsAlertActive` = true and leave `BadgeText` empty. +- Icon-only visual with accessible status: supply Icon, Text, and a `BadgeAriaLabel` if there is a badge or alert. + +## Accessibility +- When a badge or alert is present and BadgeAriaLabel is provided, the label is rendered inside a visually-hidden span next to the visible label so assistive technologies receive the context (for example, "3 unread notifications"). +- Items render as anchors (), providing keyboard focus and native navigation behavior. Supply meaningful Link values. +- Provide concise and descriptive `Text` and `BadgeAriaLabel` strings to maximize clarity for screen reader users. + +## Generated CSS Classes + +- `bottom-nav` — root container on the