Skip to content

Commit a867dad

Browse files
desmondinhodesmondinho
committed
Docs(button): Add Button page
1 parent ef5d1bc commit a867dad

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+798
-316
lines changed

‎docs/LumexUI.Docs/Components/DocsPageContent.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@namespace LumexUI.Docs.Components
22

3-
<article class="ad-content prose">
3+
<article class="ad-content">
44
@ChildContent
55
</article>
66

‎docs/LumexUI.Docs/Components/DocsPageIntro.razor

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,21 @@
11
@namespace LumexUI.Docs.Components
22

33
<header class="ad-intro">
4-
<p class="ad-intro-category">@Category</p>
5-
<h1 class="ad-intro-title">@Title</h1>
6-
<div class="ad-intro-description">
7-
@if( Description is not null )
8-
{
9-
@Description
10-
}
11-
else
12-
{
13-
@Subtitle
14-
}
4+
<p class="mb-2 text-sm text-semibold text-orange-400">
5+
@Category
6+
</p>
7+
8+
<h1 class="text-3xl text-extrabold">
9+
@Title
10+
</h1>
11+
12+
<div class="ad-intro-description lh-lg text-lg text-light">
13+
@Description
1514
</div>
1615
</header>
1716

1817
@code {
1918
[Parameter] public RenderFragment? Description { get; set; }
20-
[Parameter] public string? Title { get; set; }
21-
[Parameter] public string? Subtitle { get; set; }
2219
[Parameter] public string? Category { get; set; }
23-
24-
protected override void OnParametersSet()
25-
{
26-
if( Description is not null && !string.IsNullOrEmpty( Subtitle ) )
27-
{
28-
throw new InvalidOperationException(
29-
$"{typeof( DocsPageIntro )} requires one of {nameof( Description )} or {nameof( Subtitle )}, but both were specified." );
30-
}
31-
}
20+
[Parameter] public string? Title { get; set; }
3221
}

‎docs/LumexUI.Docs/Components/DocsPageSection.razor

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,33 @@
22

33
@inject NavigationManager NavigationManager
44

5-
<h2 id="@_id" class="ad-section-title">
6-
@Title
5+
<CascadingValue TValue="DocsPageSection" Value="@this" IsFixed="@true">
6+
<LumexElement Tag="@(Parent is null ? "h2" : "h3")"
7+
Id="@_id"
8+
Class="flex gap-2 text-">
9+
@Title
710

8-
<LumexLink Route="@SectionLink">
9-
<LumexIcon Icon="@Icons.Rounded.Tag" />
10-
</LumexLink>
11-
</h2>
11+
<LumexLink Route="@Link">
12+
<LumexIcon Icon="@Icons.Rounded.Tag" />
13+
</LumexLink>
14+
</LumexElement>
1215

13-
@ChildContent
16+
@ChildContent
17+
</CascadingValue>
1418

1519
@code {
1620
[CascadingParameter] private DocsPage Page { get; set; } = default!;
21+
[CascadingParameter] private DocsPageSection Parent { get; set; } = default!;
1722

1823
[Parameter] public RenderFragment? ChildContent { get; set; }
1924
[Parameter] public string? Title { get; set; }
2025

21-
private string SectionLink => $"{_pageRelativePath}#{_id}";
26+
internal int Level => (Parent?.Level ?? -1) + 1;
27+
private string Link => $"{_pageRelativePath}#{_id}";
28+
29+
private string TitleCssClass =>
30+
new CssBuilder( "flex gap-2" )
31+
.Build();
2232

2333
private string? _id;
2434
private string? _pageRelativePath;
@@ -34,13 +44,13 @@
3444
if( !string.IsNullOrEmpty( Title ) )
3545
{
3646
_id = BuildIdAttributeValue( Title );
37-
Page.AddSection( new PageSectionInfo( Title, SectionLink ) );
47+
Page.AddSection( new PageSectionInfo( Title, Link, Level ) );
3848
}
3949
}
4050

4151
private string BuildIdAttributeValue( string title )
4252
{
43-
var words = title.Split( ' ' );
44-
return string.Join( "-", words ).ToLowerInvariant();
53+
var titleParts = title.Split( ' ' );
54+
return string.Join( "-", titleParts ).ToLowerInvariant();
4555
}
4656
}

‎docs/LumexUI.Docs/Components/DocsPageTableOfContents.razor

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@namespace LumexUI.Docs.Components
22

33
<div class="ld-toc -ms-4 lg:ms-0">
4-
<h5 class="ms-6 mb-3 text-h6 text-medium lh-6">
4+
<h5 class="ms-6 mb-3 text-h6 text-medium lh-md">
55
On this page
66
</h5>
77

8-
<LumexNav Orientation="@Orientation.Vertical" Class="lh-6">
8+
<LumexNav Orientation="@Orientation.Vertical" Class="lh-md">
99
@_renderTableOfContents
1010
</LumexNav>
1111
</div>
@@ -15,7 +15,7 @@
1515
{
1616
foreach( var section in Sections )
1717
{
18-
<LumexNavItem>
18+
<LumexNavItem Class="@(section.Level == 1 ? "ms-4" : default)">
1919
<LumexLink Route="@(section.Link)" Class="flex">
2020
<div class="me-2">
2121
<LumexIcon Icon="@Icons.Rounded.ChevronRight" Size="@Size.Small" />

‎docs/LumexUI.Docs/Components/DocsPageTableOfContents.razor.cs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ protected override async Task OnAfterRenderAsync( bool firstRender )
3535
{
3636
if( firstRender )
3737
{
38+
StateHasChanged();
3839
await ScrollToSection();
3940
}
4041
}

‎docs/LumexUI.Docs/Components/ExampleSnippet.razor

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
@namespace LumexUI.Docs.Components
22

3-
<div class="ad-example-snippet">
4-
<div class="ad-example-snippet-content">
3+
<div class="ld-example-snippet flex flex-column border rounded-xl">
4+
<div class="ld-example-snippet-content">
55
<div class="absolute inset-0"></div>
6-
<span class="z-10">@ChildContent</span>
6+
<span class="z-10">
7+
@ChildContent
8+
</span>
79
</div>
810

911
<LumexToolbar Class="@ToolbarCssClass">
1012
<div class="ms-auto">
11-
<LumexButton Size="@Size.Small" OnClick="@CollapseCode">@ButtonLabel</LumexButton>
12-
<LumexIconButton Icon="@Icons.Rounded.ContentCopy" Size="@Size.Small" />
13+
<LumexButton Color="@ThemeColor.Primary"
14+
Variant="@Variant.Ghost"
15+
Size="@Size.Small"
16+
Class="py-0 px-2 rounded-full text-xs"
17+
OnClick="@CollapseCode">
18+
@ButtonLabel
19+
</LumexButton>
20+
<LumexButton Variant="@Variant.Light" Size="@Size.Small" IconOnly="@true">
21+
<LumexIcon Icon="@Icons.Rounded.ContentCopy" Size="@Size.Small" />
22+
</LumexButton>
1323
</div>
1424
</LumexToolbar>
1525

‎docs/LumexUI.Docs/Data/Models/Page/PageSectionInfo.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44

55
namespace LumexUI.Docs.Data;
66

7-
public record PageSectionInfo( string Title, string Link );
7+
public record PageSectionInfo( string Title, string Link, int Level );

‎docs/LumexUI.Docs/Pages/Components/Button/Button.razor

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@page "/docs/components/button"
2+
@namespace LumexUI.Docs.Pages
3+
4+
@using LumexUI.Docs.Pages.Components.Button.Examples
5+
6+
<DocsPage>
7+
<DocsPageIntro Title="Button" Category="Components">
8+
<Description>
9+
<p>Buttons allow users to take actions, and make choices, with a single tap.</p>
10+
</Description>
11+
</DocsPageIntro>
12+
13+
<DocsPageContent>
14+
<DocsPageSection Title="Usage">
15+
<ExampleSnippet Code="ButtonUsage">
16+
<ButtonUsage />
17+
</ExampleSnippet>
18+
19+
<DocsPageSection Title="Sizes">
20+
<ExampleSnippet Code="ButtonSizes">
21+
<ButtonSizes />
22+
</ExampleSnippet>
23+
</DocsPageSection>
24+
25+
<DocsPageSection Title="Radius">
26+
<ExampleSnippet Code="ButtonRadius">
27+
<ButtonRadius />
28+
</ExampleSnippet>
29+
</DocsPageSection>
30+
31+
<DocsPageSection Title="Colors">
32+
<ExampleSnippet Code="ButtonColors">
33+
<ButtonColors />
34+
</ExampleSnippet>
35+
</DocsPageSection>
36+
37+
<DocsPageSection Title="Variants">
38+
<ExampleSnippet Code="ButtonVariants">
39+
<ButtonVariants />
40+
</ExampleSnippet>
41+
</DocsPageSection>
42+
43+
<DocsPageSection Title="Disabled">
44+
<ExampleSnippet Code="ButtonDisabled">
45+
<ButtonDisabled />
46+
</ExampleSnippet>
47+
</DocsPageSection>
48+
49+
<DocsPageSection Title="With Icons">
50+
<ExampleSnippet Code="ButtonWithIcons">
51+
<ButtonWithIcons />
52+
</ExampleSnippet>
53+
</DocsPageSection>
54+
55+
<DocsPageSection Title="Icon Only">
56+
<ExampleSnippet Code="ButtonIconOnly">
57+
<ButtonIconOnly />
58+
</ExampleSnippet>
59+
</DocsPageSection>
60+
61+
<DocsPageSection Title="Custom Styles">
62+
<ExampleSnippet Code="ButtonCustomStyles">
63+
<ButtonCustomStyles />
64+
</ExampleSnippet>
65+
</DocsPageSection>
66+
67+
</DocsPageSection>
68+
</DocsPageContent>
69+
</DocsPage>

‎docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonColors.razor

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<LumexButton Color="@ThemeColor.Default">Default</LumexButton>
2+
<LumexButton Color="@ThemeColor.Primary">Primary</LumexButton>
3+
<LumexButton Color="@ThemeColor.Secondary">Secondary</LumexButton>
4+
<LumexButton Color="@ThemeColor.Success">Success</LumexButton>
5+
<LumexButton Color="@ThemeColor.Warning">Warning</LumexButton>
6+
<LumexButton Color="@ThemeColor.Danger">Danger</LumexButton>
7+
<LumexButton Color="@ThemeColor.Info">Info</LumexButton>

‎docs/LumexUI.Docs/Pages/Components/Button/Examples/ButtonCustomStyles.razor

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<LumexButton Class="custom-variant">Button</LumexButton>
2+
3+
<style>
4+
.custom-variant {
5+
--LumexButton-color: #fff;
6+
--LumexButton-font-weight: 500;
7+
--LumexButton-border-color: hsl(var(--lumex-secondary-100));
8+
--LumexButton-border-width: 2px;
9+
--LumexButton-bg: hsl(var(--lumex-secondary-50));
10+
}
11+
</style>

0 commit comments

Comments
 (0)