Docs(button): Add Button page

LumexUI · Mar 24, 2024 · a867dad · a867dad
1 parent ef5d1bc
commit a867dad
Show file tree

Hide file tree

Showing 45 changed files with 798 additions and 316 deletions.
diff --git a/docs/LumexUI.Docs/Components/DocsPageContent.razor b/docs/LumexUI.Docs/Components/DocsPageContent.razor
@@ -1,6 +1,6 @@
 @namespace LumexUI.Docs.Components
 
-<article class="ad-content prose">
+<article class="ad-content">
 	@ChildContent
 </article>
 

diff --git a/docs/LumexUI.Docs/Components/DocsPageIntro.razor b/docs/LumexUI.Docs/Components/DocsPageIntro.razor
@@ -1,32 +1,21 @@
 @namespace LumexUI.Docs.Components
 
 <header class="ad-intro">
-    <p class="ad-intro-category">@Category</p>
-    <h1 class="ad-intro-title">@Title</h1>
-    <div class="ad-intro-description">
-        @if( Description is not null )
-        {
-            @Description
-        }
-        else
-        {
-            @Subtitle
-        }
+    <p class="mb-2 text-sm text-semibold text-orange-400">
+        @Category
+    </p>
+
+    <h1 class="text-3xl text-extrabold">
+        @Title
+    </h1>
+
+    <div class="ad-intro-description lh-lg text-lg text-light">
+        @Description
     </div>
 </header>
 
 @code {
     [Parameter] public RenderFragment? Description { get; set; }
-    [Parameter] public string? Title { get; set; }
-    [Parameter] public string? Subtitle { get; set; }
     [Parameter] public string? Category { get; set; }
-
-    protected override void OnParametersSet()
-    {
-        if( Description is not null && !string.IsNullOrEmpty( Subtitle ) )
-        {
-            throw new InvalidOperationException(
-                $"{typeof( DocsPageIntro )} requires one of {nameof( Description )} or {nameof( Subtitle )}, but both were specified." );
-        }
-    }
+    [Parameter] public string? Title { get; set; }
 }
diff --git a/docs/LumexUI.Docs/Components/DocsPageSection.razor b/docs/LumexUI.Docs/Components/DocsPageSection.razor
@@ -2,23 +2,33 @@
 
 @inject NavigationManager NavigationManager
 
-<h2 id="@_id" class="ad-section-title">
-    @Title
+<CascadingValue TValue="DocsPageSection" Value="@this" IsFixed="@true">
+    <LumexElement Tag="@(Parent is null ? "h2" : "h3")"
+                  Id="@_id"
+                  Class="flex gap-2 text-">
+        @Title
 
-    <LumexLink Route="@SectionLink">
-        <LumexIcon Icon="@Icons.Rounded.Tag" />
-    </LumexLink>
-</h2>
+        <LumexLink Route="@Link">
+            <LumexIcon Icon="@Icons.Rounded.Tag" />
+        </LumexLink>
+    </LumexElement>
 
-@ChildContent
+    @ChildContent
+</CascadingValue>
 
 @code {
     [CascadingParameter] private DocsPage Page { get; set; } = default!;
+    [CascadingParameter] private DocsPageSection Parent { get; set; } = default!;
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Title { get; set; }
 
-    private string SectionLink => $"{_pageRelativePath}#{_id}";
+    internal int Level => (Parent?.Level ?? -1) + 1;
+    private string Link => $"{_pageRelativePath}#{_id}";
+
+    private string TitleCssClass =>
+        new CssBuilder( "flex gap-2" )
+            .Build();
 
     private string? _id;
     private string? _pageRelativePath;
@@ -34,13 +44,13 @@
         if( !string.IsNullOrEmpty( Title ) )
         {
             _id = BuildIdAttributeValue( Title );
-            Page.AddSection( new PageSectionInfo( Title, SectionLink ) );
+            Page.AddSection( new PageSectionInfo( Title, Link, Level ) );
         }
     }
 
     private string BuildIdAttributeValue( string title )
     {
-        var words = title.Split( ' ' );
-        return string.Join( "-", words ).ToLowerInvariant();
+        var titleParts = title.Split( ' ' );
+        return string.Join( "-", titleParts ).ToLowerInvariant();
     }
 }
diff --git a/docs/LumexUI.Docs/Components/DocsPageTableOfContents.razor b/docs/LumexUI.Docs/Components/DocsPageTableOfContents.razor
@@ -1,11 +1,11 @@
 @namespace LumexUI.Docs.Components
 
 <div class="ld-toc -ms-4 lg:ms-0">
-    <h5 class="ms-6 mb-3 text-h6 text-medium lh-6">
+    <h5 class="ms-6 mb-3 text-h6 text-medium lh-md">
         On this page
     </h5>
 
-    <LumexNav Orientation="@Orientation.Vertical" Class="lh-6">
+    <LumexNav Orientation="@Orientation.Vertical" Class="lh-md">
         @_renderTableOfContents
     </LumexNav>
 </div>
@@ -15,7 +15,7 @@
     {
         foreach( var section in Sections )
         {
-            <LumexNavItem>
+            <LumexNavItem Class="@(section.Level == 1 ? "ms-4" : default)">
                 <LumexLink Route="@(section.Link)" Class="flex">
                     <div class="me-2">
                         <LumexIcon Icon="@Icons.Rounded.ChevronRight" Size="@Size.Small" />

diff --git a/docs/LumexUI.Docs/Components/DocsPageTableOfContents.razor.cs b/docs/LumexUI.Docs/Components/DocsPageTableOfContents.razor.cs
@@ -35,6 +35,7 @@ protected override async Task OnAfterRenderAsync( bool firstRender )
     {
         if( firstRender )
         {
+            StateHasChanged();
             await ScrollToSection();
         }
     }

diff --git a/docs/LumexUI.Docs/Components/ExampleSnippet.razor b/docs/LumexUI.Docs/Components/ExampleSnippet.razor
@@ -1,15 +1,25 @@
 @namespace LumexUI.Docs.Components
 
-<div class="ad-example-snippet">
-    <div class="ad-example-snippet-content">
+<div class="ld-example-snippet flex flex-column border rounded-xl">
+    <div class="ld-example-snippet-content">
         <div class="absolute inset-0"></div>
-        <span class="z-10">@ChildContent</span>
+        <span class="z-10">
+            @ChildContent
+        </span>
     </div>
 
     <LumexToolbar Class="@ToolbarCssClass">
         <div class="ms-auto">
-            <LumexButton Size="@Size.Small" OnClick="@CollapseCode">@ButtonLabel</LumexButton>
-            <LumexIconButton Icon="@Icons.Rounded.ContentCopy" Size="@Size.Small" />
+            <LumexButton Color="@ThemeColor.Primary"
+                         Variant="@Variant.Ghost"
+                         Size="@Size.Small"
+                         Class="py-0 px-2 rounded-full text-xs"
+                         OnClick="@CollapseCode">
+                @ButtonLabel
+            </LumexButton>
+            <LumexButton Variant="@Variant.Light" Size="@Size.Small" IconOnly="@true">
+                <LumexIcon Icon="@Icons.Rounded.ContentCopy" Size="@Size.Small" />
+            </LumexButton>
         </div>
     </LumexToolbar>
 

diff --git a/docs/LumexUI.Docs/Data/Models/Page/PageSectionInfo.cs b/docs/LumexUI.Docs/Data/Models/Page/PageSectionInfo.cs
@@ -4,4 +4,4 @@
 
 namespace LumexUI.Docs.Data;
 
-public record PageSectionInfo( string Title, string Link );
+public record PageSectionInfo( string Title, string Link, int Level );
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Button.razor b/docs/LumexUI.Docs/Pages/Components/Button/Button.razor
@@ -0,0 +1,69 @@
+@page "/docs/components/button"
+@namespace LumexUI.Docs.Pages
+
+@using LumexUI.Docs.Pages.Components.Button.Examples
+
+<DocsPage>
+    <DocsPageIntro Title="Button" Category="Components">
+        <Description>
+            <p>Buttons allow users to take actions, and make choices, with a single tap.</p>
+        </Description>
+    </DocsPageIntro>
+
+    <DocsPageContent>
+        <DocsPageSection Title="Usage">
+            <ExampleSnippet Code="ButtonUsage">
+                <ButtonUsage />
+            </ExampleSnippet>
+
+            <DocsPageSection Title="Sizes">
+                <ExampleSnippet Code="ButtonSizes">
+                    <ButtonSizes />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="Radius">
+                <ExampleSnippet Code="ButtonRadius">
+                    <ButtonRadius />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="Colors">
+                <ExampleSnippet Code="ButtonColors">
+                    <ButtonColors />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="Variants">
+                <ExampleSnippet Code="ButtonVariants">
+                    <ButtonVariants />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="Disabled">
+                <ExampleSnippet Code="ButtonDisabled">
+                    <ButtonDisabled />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="With Icons">
+                <ExampleSnippet Code="ButtonWithIcons">
+                    <ButtonWithIcons />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="Icon Only">
+                <ExampleSnippet Code="ButtonIconOnly">
+                    <ButtonIconOnly />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+            <DocsPageSection Title="Custom Styles">
+                <ExampleSnippet Code="ButtonCustomStyles">
+                    <ButtonCustomStyles />
+                </ExampleSnippet>
+            </DocsPageSection>
+
+        </DocsPageSection>
+    </DocsPageContent>
+</DocsPage>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonColors.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonColors.razor
@@ -0,0 +1,7 @@
+<LumexButton Color="@ThemeColor.Default">Default</LumexButton>
+<LumexButton Color="@ThemeColor.Primary">Primary</LumexButton>
+<LumexButton Color="@ThemeColor.Secondary">Secondary</LumexButton>
+<LumexButton Color="@ThemeColor.Success">Success</LumexButton>
+<LumexButton Color="@ThemeColor.Warning">Warning</LumexButton>
+<LumexButton Color="@ThemeColor.Danger">Danger</LumexButton>
+<LumexButton Color="@ThemeColor.Info">Info</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonCustomStyles.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonCustomStyles.razor
@@ -0,0 +1,11 @@
+<LumexButton Class="custom-variant">Button</LumexButton>
+
+<style>
+    .custom-variant {
+        --LumexButton-color: #fff;
+        --LumexButton-font-weight: 500;
+        --LumexButton-border-color: hsl(var(--lumex-secondary-100));
+        --LumexButton-border-width: 2px;
+        --LumexButton-bg: hsl(var(--lumex-secondary-50));
+    }
+</style>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonDisabled.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonDisabled.razor
@@ -0,0 +1,9 @@
+<LumexButton Color="@ThemeColor.Primary"
+             Disabled="@true">
+    Disabled
+</LumexButton>
+<LumexButton Color="@ThemeColor.Primary"
+             Variant="@Variant.Outlined"
+             Class="@Constants.ComponentStates.Disabled">
+    Disabled
+</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonIconOnly.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonIconOnly.razor
@@ -0,0 +1,6 @@
+<LumexButton Color="@ThemeColor.Danger" IconOnly="@true">
+    <LumexIcon Icon="@Icons.Rounded.Favorite" />
+</LumexButton>
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Outlined" IconOnly="@true">
+    <LumexIcon Icon="@Icons.Rounded.SettingsAccessibility" />
+</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonRadius.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonRadius.razor
@@ -0,0 +1,8 @@
+<LumexButton Class="rounded-none">None</LumexButton>
+<LumexButton Class="rounded-xs">XSmall</LumexButton>
+<LumexButton Class="rounded-sm">Small</LumexButton>
+<LumexButton Class="rounded-md">Medium</LumexButton>
+<LumexButton Class="rounded-lg">Large</LumexButton>
+<LumexButton Class="rounded-xl">XLarge</LumexButton>
+<LumexButton Class="rounded-xxl">XXLarge</LumexButton>
+<LumexButton Class="rounded-full">Full</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonSizes.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonSizes.razor
@@ -0,0 +1,3 @@
+<LumexButton Size="@Size.Small">Small</LumexButton>
+<LumexButton Size="@Size.Medium">Medium</LumexButton>
+<LumexButton Size="@Size.Large">Large</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonUsage.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonUsage.razor
@@ -0,0 +1 @@
+<LumexButton Color="@ThemeColor.Primary">Button</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonVariants.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonVariants.razor
@@ -0,0 +1,6 @@
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Solid">Solid</LumexButton>
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Outlined">Outlined</LumexButton>
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Flat">Flat</LumexButton>
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Shadow">Shadow</LumexButton>
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Ghost">Ghost</LumexButton>
+<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Light">Light</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonWithIcons.razor b/docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonWithIcons.razor
@@ -0,0 +1,9 @@
+<LumexButton Color="@ThemeColor.Primary"
+             EndIcon="@Icons.Rounded.Share">
+    Share
+</LumexButton>
+<LumexButton Color="@ThemeColor.Danger"
+             Variant="@Variant.Ghost"
+             StartIcon="@Icons.Rounded.Cancel">
+    Cancel
+</LumexButton>
diff --git a/docs/LumexUI.Docs/Pages/Getting Started/Usage/Examples/UsageQuickstartButton.razor b/docs/LumexUI.Docs/Pages/Getting Started/Usage/Examples/UsageQuickstartButton.razor
@@ -1,7 +1,7 @@
-<LumexButton Size="@Size.Medium"
-              Color="@ThemeColor.Primary"
-              Variant="@ButtonVariant.Flat"
-              OnClick="@HandleClick">
+<LumexButton Color="@ThemeColor.Primary"
+             Variant="@Variant.Flat"
+             Size="@Size.Medium"
+             OnClick="@HandleClick">
     Hello World @(CounterLabel)
 </LumexButton>
 

diff --git a/docs/LumexUI.Docs/Services/Navigation/NavigationService.cs b/docs/LumexUI.Docs/Services/Navigation/NavigationService.cs
@@ -19,12 +19,13 @@ internal class NavigationService : INavigationService
 
     private NavigationCategory ComponentsCategory =>
         new NavigationCategory( "Components" )
-            .AddGroup( new NavigationCategory( "Surfaces" )
-                .AddItem( typeof( LumexNavbar ) )
-                .AddItem( typeof( LumexToolbar ) ) )
             .AddGroup( new NavigationCategory( "Inputs" )
+                .AddItem( typeof( LumexButton ) )
                 .AddItem( typeof( LumexTextBox ) )
                 .AddItem( typeof( LumexNumBox<T> ) ) )
+            .AddGroup( new NavigationCategory( "Surfaces" )
+                .AddItem( typeof( LumexNavbar ) )
+                .AddItem( typeof( LumexToolbar ) ) )
             .AddGroup( new NavigationCategory( "Navigation" )
                 .AddItem( typeof( LumexDrawer ) )
                 .AddItem( typeof( LumexNav ) ) );

diff --git a/docs/LumexUI.Docs/Shared/Header.razor b/docs/LumexUI.Docs/Shared/Header.razor
@@ -11,7 +11,7 @@
 
     <LumexDrawer Id="header" Anchor="@Anchor.End" Breakpoint="@Breakpoint.Lg">
         <BodyContent>
-            <LumexNavbarContent Class="gap-4 lg:gap-6 lh-6">
+            <LumexNavbarContent Class="gap-4 lg:gap-6 lh-md">
                 <LumexNavbarItem>
                     <LumexLink Route="docs/overview">Docs</LumexLink>
                 </LumexNavbarItem>

diff --git a/docs/LumexUI.Docs/Shared/MainLayout.razor b/docs/LumexUI.Docs/Shared/MainLayout.razor
@@ -1,6 +1,6 @@
 @inherits LayoutComponentBase
 
-<LumexThemeProvider Theme="@_theme" />
+<LumexThemeProvider Config="@_theme" />
 
 <LumexLayout Class="ad-layout">
     <Header />
@@ -24,7 +24,7 @@
     [Inject] private IJSRuntime JS { get; set; } = default!;
     [Inject] private IDrawerService DrawerService { get; set; } = default!;
 
-    private readonly Theme _theme = new();
+    private readonly DocsThemeConfig _theme = new();
 
     protected override async Task OnAfterRenderAsync( bool firstRender )
     {

diff --git a/docs/LumexUI.Docs/Shared/NavMenu.razor b/docs/LumexUI.Docs/Shared/NavMenu.razor
@@ -6,7 +6,7 @@
             <h5 class="text-semibold">Lumex<span class="text-thin">UI</span></h5>
         </HeaderContent>
         <BodyContent>
-            <LumexNav Orientation="@Orientation.Vertical" Class="gap-3 lh-6">
+            <LumexNav Orientation="@Orientation.Vertical" Class="gap-3 lh-md">
                 @_renderNavigation
             </LumexNav>
         </BodyContent>

diff --git a/docs/LumexUI.Docs/Styles/components/_callout.scss b/docs/LumexUI.Docs/Styles/components/_callout.scss
@@ -25,8 +25,8 @@
 
 @each $variant in $callout-variants {
 	.ad-callout--#{$variant} {
-		--ad-callout-color: rgb(var(--lumex-#{$variant}-50));
-		--ad-callout-bg: rgb(var(--lumex-#{$variant}-950), .15);
-		--ad-callout-border: rgb(var(--lumex-#{$variant}-100), .15);
+		--ad-callout-color: hsl(var(--lumex-#{$variant}-50));
+		--ad-callout-bg: hsl(var(--lumex-#{$variant}-950), .15);
+		--ad-callout-border: hsl(var(--lumex-#{$variant}-100), .15);
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up @@
         {
             if( firstRender )
             {
+                StateHasChanged();
                 await ScrollToSection();
             }
         }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@

		namespace LumexUI.Docs.Data;

		public record PageSectionInfo( string Title, string Link );
		public record PageSectionInfo( string Title, string Link, int Level );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<LumexButton Color="@ThemeColor.Primary">Button</LumexButton>