feat(components): add Alert component

docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs

@@ -23,6 +23,7 @@ public class NavigationStore
 	private static NavigationCategory ComponentsCategory =>
 		new NavigationCategory( "Components", Icons.Rounded.Joystick )
 			.Add( new( nameof( LumexAccordion ) ) )
+			.Add( new( nameof( LumexAlert ), ComponentStatus.New ) )
 			.Add( new( nameof( LumexAvatar ), ComponentStatus.New ) )
 			.Add( new( nameof( LumexButton ) ) )
 			.Add( new( nameof( LumexCard ) ) )

docs/LumexUI.Docs.Client/Components/Preview.razor

@@ -25,7 +25,7 @@
     private readonly Slots _slots = new()
         {
             Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-x-auto scrollbar-hide",
-            PreviewWrapper = "relative p-4 rounded-xl bg-zinc-50 ring ring-foreground-900/10 not-prose",
+            PreviewWrapper = "relative p-4 rounded-xl ring ring-foreground-900/10 not-prose",
             Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
         };
 

docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs

@@ -24,6 +24,7 @@ public partial class PreviewCode
 
     private string ToolbarClass => ElementClass.Empty()
         .Add( "p-2" )
+        .Add( "bg-default-50/50" )
         .Add( "border-t" )
         .Add( "border-foreground-900/10" )
         .Add( "border-b", when: _expanded )

docs/LumexUI.Docs.Client/Pages/Components/Alert/Alert.razor

@@ -0,0 +1,120 @@
+@page "/docs/components/alert"
+@layout DocsContentLayout
+
+@using LumexUI.Docs.Client.Pages.Components.Alert.PreviewCodes
+
+<DocsSection Title="Usage">
+    <Usage />
+
+    <Callout Variant="@CalloutVariant.Info">
+        When both <Code>Title</Code> and <Code>TitleContent</Code> are provided,
+        <Code>TitleContent</Code> takes precedence.
+    </Callout>
+
+    <DocsSection Title="Radius">
+        <p>Use <Code>Radius</Code> parameter to control the border radius of the alert.</p>
+        <Radii />
+    </DocsSection>
+
+    <DocsSection Title="Colors">
+        <p>Use <Code>Color</Code> parameter to set the color of the alert.</p>
+        <Colors />
+    </DocsSection>
+
+    <DocsSection Title="Variants">
+        <p>Use <Code>Variant</Code> parameter to change the visual style of the alert.</p>
+        <Variants />
+    </DocsSection>
+
+    <DocsSection Title="Custom Icon">
+        <p>
+            By default, the alert displays an appropriate icon based on the <Code>Color</Code> parameter.
+            Use <Code>Icon</Code> parameter to replace the default icon with a custom one.
+        </p>
+        <CustomIcon />
+    </DocsSection>
+
+    <DocsSection Title="Hide Icon">
+        <p>Use <Code>HideIcon</Code> parameter to hide the icon entirely.</p>
+        <HideIcon />
+    </DocsSection>
+
+    <DocsSection Title="Closeable">
+        <p>Use <Code>Closeable</Code> or <Code>OnClose</Code> parameters to add a close button to dismiss the alert.</p>
+        <Closeable />
+    </DocsSection>
+
+    <DocsSection Title="End Content">
+        <p>Use <Code>EndContent</Code> parameter to add additional content at the end of the alert, such as actions.</p>
+        <EndContent />
+    </DocsSection>
+
+    <DocsSection Title="Two-way Data Binding">
+        <p>
+            Use <Code>@@bind-Visible</Code> directive or <Code>Visible</Code> and <Code>VisibleChanged</Code>
+            parameters to manually control alert visibility.
+        </p>
+        <TwoWayDataBinding />
+    </DocsSection>
+</DocsSection>
+
+<DocsSection Title="Custom Styles">
+    <div>
+        <h4 class="font-semibold">Alert</h4>
+        <ul>
+            <li><Code>Class</Code>: The CSS class names to style the alert wrapper.</li>
+            <li><Code>Classes</Code>: The CSS class names to style the alert slots.</li>
+        </ul>
+    </div>
+    <CustomStyles />
+</DocsSection>
+
+<DocsApiSection Components="@_apiComponents" />
+
+@code {
+    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;
+
+    private readonly Heading[] _headings = new Heading[]
+    {
+        new("Usage", [
+            new("Radius"),
+            new("Colors"),
+            new("Variants"),
+            new("Custom Icon"),
+            new("Hide Icon"),
+            new("Closeable"),
+            new("End Content"),
+            new("Two-way Data Binding"),
+        ]),
+        new("Custom Styles"),
+        new("API")
+    };
+
+    private readonly Slot[] _slots = new Slot[]
+    {
+        new(nameof(AlertSlots.Base), "The base container of the alert component."),
+        new(nameof(AlertSlots.MainWrapper), "The wrapper for the alert title and description content."),
+        new(nameof(AlertSlots.Title), "The alert title element."),
+        new(nameof(AlertSlots.Description), "The alert description element."),
+        new(nameof(AlertSlots.CloseButton), "The alert close button element."),
+        new(nameof(AlertSlots.IconWrapper), "The wrapper for the alert icon."),
+        new(nameof(AlertSlots.Icon), "The alert icon element.")
+    };
+
+    private readonly string[] _apiComponents = new string[]
+    {
+        nameof(LumexAlert),
+        nameof(LumexButton)
+    };
+
+    protected override void OnInitialized()
+    {
+        Layout.Initialize(
+            title: "Alert",
+            category: "Components",
+            description: "Alerts display concise feedback about an action or event for the user.",
+            headings: _headings,
+            linksProps: new ComponentLinksProps( "Alert", isServer: false )
+        );
+    }
+}

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Closeable.razor

@@ -0,0 +1,23 @@
+@if( _isVisible )
+{
+    <LumexAlert Title="@title"
+                Description="@description"
+                Color="@ThemeColor.Success"
+                Variant="@AlertVariant.Faded"
+                Visible="@_isVisible"
+                OnClose="@(() => _isVisible = false)" />
+}
+else
+{
+    <LumexButton Variant="@Variant.Outlined"
+                 OnClick="@(() => _isVisible = true)">
+        Show alert
+    </LumexButton>
+}
+
+@code {
+    private string title = "Success Notification";
+    private string description = "Your action has been completed successfully. We'll notify you when updates are available.";
+
+    private bool _isVisible = true;
+}

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Colors.razor

@@ -0,0 +1,7 @@
+<div class="w-full flex flex-col gap-3">
+    @foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
+    {
+        var colorText = color.ToString().ToLower();
+        <LumexAlert Title="@($"This is a `{colorText}` color alert")" Color="@color" />
+    }
+</div>

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomIcon.razor

@@ -0,0 +1,3 @@
+<LumexAlert Icon="@Icons.Rounded.Favorite">
+    An alert with a custom icon
+</LumexAlert>

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/CustomStyles.razor

@@ -0,0 +1,30 @@
+<LumexAlert Description="The documents you requested are ready to be viewed"
+            Color="@ThemeColor.Primary"
+            Variant="@AlertVariant.Flat"
+            Classes="@_classes">
+    <div class="flex items-center gap-2 mt-2">
+        <LumexButton Size="@Size.Small"
+                     Variant="@Variant.Outlined"
+                     Class="bg-background text-foreground-700 border shadow-xs">
+            View documents
+        </LumexButton>
+
+        <LumexButton Size="@Size.Small"
+                     Variant="@Variant.Light"
+                     Class="text-foreground-600">
+            Remind me later
+        </LumexButton>
+    </div>
+</LumexAlert>
+
+@code {
+    private AlertSlots _classes = new()
+    {
+        Base = new ElementClass()
+            .Add( "relative" )
+            .Add( "shadow-sm" )
+            .Add( "bg-default-50" )
+            .Add( "overflow-hidden" )
+            .Add( "before:absolute before:z-10 before:left-0 before:inset-y-0 before:w-1 before:bg-primary" )
+    };
+}

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/EndContent.razor

@@ -0,0 +1,12 @@
+<LumexAlert Title="You have no credits left"
+            Description="Upgrade to a paid plan to continue"
+            Color="@ThemeColor.Warning"
+            Variant="@AlertVariant.Faded">
+    <EndContent>
+        <LumexButton Size="@Size.Small"
+                     Color="@ThemeColor.Warning"
+                     Variant="@Variant.Flat">
+            Upgrade
+        </LumexButton>
+    </EndContent>
+</LumexAlert>

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/HideIcon.razor

@@ -0,0 +1,5 @@
+<LumexAlert Title="This is an alert"
+            Description="Thanks for subscribing to our newsletter!"
+            Color="@ThemeColor.Secondary"
+            Variant="@AlertVariant.Faded"
+            HideIcon="@true" />

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Radii.razor

@@ -0,0 +1,7 @@
+<div class="w-full flex flex-col gap-3">
+    @foreach( var radius in Enum.GetValues<Radius>() )
+    {
+        var radiusText = radius.ToString().ToLower();
+        <LumexAlert Title="@($"This is a `{radiusText}` radius alert")" Radius="@radius" />
+    }
+</div>

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/TwoWayDataBinding.razor

@@ -0,0 +1,26 @@
+<div class="w-full flex flex-col gap-2">
+    @if( _isVisible )
+    {
+        <LumexAlert Title="This is an alert"
+                    Description="Thanks for subscribing to our newsletter!"
+                    Color="@ThemeColor.Info"
+                    Closeable="@true"
+                    @bind-Visible="@_isVisible" />
+    }
+    else
+    {
+        <LumexButton Variant="@Variant.Outlined"
+                     OnClick="@(() => _isVisible = true)"
+                     Class="w-fit">
+            Show alert
+        </LumexButton>
+    }
+
+    <p class="text-small text-default-500">
+        Visible: @(_isVisible ? "true" : "false")
+    </p>
+</div>
+
+@code {
+    private bool _isVisible = true;
+}

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Usage.razor

@@ -0,0 +1,2 @@
+<LumexAlert Title="This is an alert"
+            Description="Thanks for subscribing to our newsletter!" />

docs/LumexUI.Docs.Client/Pages/Components/Alert/Examples/Variants.razor

@@ -0,0 +1,7 @@
+<div class="w-full flex flex-col gap-3">
+    @foreach( var variant in Enum.GetValues<AlertVariant>() )
+    {
+        var variantText = variant.ToString().ToLower();
+        <LumexAlert Title="@($"This is a `{variantText}` variant alert")" Variant="@variant" />
+    }
+</div>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Closeable.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.Closeable" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.Closeable />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Colors.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.Colors" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.Colors />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/CustomIcon.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.CustomIcon" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.CustomIcon />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/CustomStyles.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.CustomStyles" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.CustomStyles />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/EndContent.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.EndContent" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.EndContent />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/HideIcon.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.HideIcon" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.HideIcon />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Radii.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.Radii" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.Radii />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/TwoWayDataBinding.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.TwoWayDataBinding" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.TwoWayDataBinding />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Usage.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.Usage" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.Usage />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/Alert/PreviewCodes/Variants.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Alert.Code.Variants" )">
+    <LumexUI.Docs.Client.Pages.Components.Alert.Examples.Variants />
+</PreviewCode>

src/LumexUI/Common/Enums/AlertVariant.cs

@@ -0,0 +1,31 @@
+// Copyright (c) LumexUI 2024
+// LumexUI licenses this file to you under the MIT license
+// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
+
+namespace LumexUI.Common;
+
+/// <summary>
+/// Specifies the visual variants for the <see cref="LumexAlert"/>.
+/// </summary>
+public enum AlertVariant
+{
+	/// <summary>
+	/// A solid alert with a filled background.
+	/// </summary>
+	Solid,
+
+	/// <summary>
+	/// An alert with an outlined border.
+	/// </summary>
+	Outlined,
+
+	/// <summary>
+	/// An alert with a flat background.
+	/// </summary>
+	Flat,
+
+	/// <summary>
+	/// An alert with a flat background and subtle border.
+	/// </summary>
+	Faded
+}