[Docs] Add a sticker sheet

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor

@@ -0,0 +1,29 @@
+<FluentDialogBody>
+
+    <TitleTemplate>
+        Dialog
+    </TitleTemplate>
+
+    <ChildContent>
+        This is the body content of the dialog.
+    </ChildContent>
+
+    <ActionTemplate>
+        <FluentButton OnClick="btnOK_Click" Appearance="ButtonAppearance.Primary">Close</FluentButton>
+    </ActionTemplate>
+
+</FluentDialogBody>
+
+@code
+{
+    [CascadingParameter]
+    public required IDialogInstance Dialog { get; set; }
+
+    [Inject]
+    public required IDialogService DialogService { get; set; }
+
+    private async Task btnOK_Click()
+    {
+        await Dialog.CloseAsync(DialogResult.Ok("Yes"));
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor

@@ -0,0 +1,8 @@
+<FluentAccordion>
+    <FluentAccordionItem Header="Accordion header 1">
+        Accordion panel 1
+    </FluentAccordionItem>
+    <FluentAccordionItem Header="Accordion header 2">
+        Accordion panel 2
+    </FluentAccordionItem>
+</FluentAccordion>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor

@@ -0,0 +1,17 @@
+<FluentStack Wrap="true" HorizontalGap="12px" VerticalGap="10px">
+    <FluentAnchorButton>
+        Default
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Primary">
+        Primary
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Outline">
+        Outline
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Subtle">
+        Subtle
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Transparent">
+        Transparent
+    </FluentAnchorButton>
+</FluentStack>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor

@@ -0,0 +1,47 @@
+<FluentAppBar Orientation="Orientation.Horizontal" Style="width: 350px;">
+    <FluentAppBarItem IconRest="ResourcesIcon()"
+                        IconActive="ResourcesIcon(active: true)"
+                        Text="Resources" />
+    <FluentAppBarItem IconRest="ConsoleLogsIcon()"
+                        IconActive="ConsoleLogsIcon(active: true)"
+                        Text="Console Logs" />
+    <FluentAppBarItem Href="/sticker-sheet"
+                        IconRest="StickerSheetIcon()"
+                        IconActive="StickerSheetIcon(active: true)"
+                        Text="Sticker Sheet" />
+    <FluentAppBarItem IconRest="StructuredLogsIcon()"
+                        IconActive="StructuredLogsIcon(active: true)"
+                        Text="Logs"
+                        Tooltip="Structured Logs" />
+    <FluentAppBarItem IconRest="TracesIcon()"
+                        IconActive="TracesIcon(active: true)"
+                        Text="Traces" />
+    <FluentAppBarItem IconRest="MetricsIcon()"
+                        IconActive="MetricsIcon(active: true)"
+                        Text="Metrics" />
+</FluentAppBar>
+
+@code {
+    private static Icon ResourcesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.AppFolder()
+               : new Icons.Regular.Size24.AppFolder();
+
+    private static Icon ConsoleLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideText()
+               : new Icons.Regular.Size24.SlideText();
+
+    private static Icon StructuredLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideTextSparkle()
+               : new Icons.Regular.Size24.SlideTextSparkle();
+
+    private static Icon TracesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.GanttChart()
+               : new Icons.Regular.Size24.GanttChart();
+
+    private static Icon MetricsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.ChartMultiple()
+               : new Icons.Regular.Size24.ChartMultiple();
+    private static Icon StickerSheetIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.Sticker()
+               : new Icons.Regular.Size24.Sticker();
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor

@@ -0,0 +1,21 @@
+@using static FluentUI.Demo.SampleData.Olympics2024
+
+<FluentAutocomplete TOption="Country"
+                    TValue="string"
+                    Width="100%"
+                    Label="Select countries"
+                    Placeholder="Type to search..."
+                    OnOptionsSearch="@OnSearchAsync"
+                    OptionText="@(item => item.Name)"
+                    OptionDisabled="@(e => e.Code == "au")" />
+
+@code
+{
+    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
+    {
+        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
+                           .OrderBy(i => i.Name);
+
+        return Task.CompletedTask;
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor

@@ -0,0 +1,6 @@
+<FluentStack Wrap="true" HorizontalGap="12px" VerticalGap="10px">
+<FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size32" Initials="VB" />
+    <FluentAvatar Shape="AvatarShape.Square" Size="AvatarSize.Size32" Initials="DV" />
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size48" Initials="MK" />
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size48" Initials="AC" Active="true" />
+</FluentStack>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor

@@ -0,0 +1,12 @@
+<FluentBadge Appearance="BadgeAppearance.Filled" Color="BadgeColor.Brand">
+    Filled
+</FluentBadge>
+<FluentBadge Appearance="BadgeAppearance.Ghost" Color="BadgeColor.Brand">
+    Ghost
+</FluentBadge>
+<FluentBadge Appearance="BadgeAppearance.Outline" Color="BadgeColor.Brand">
+    Outline
+</FluentBadge>
+<FluentBadge Appearance="BadgeAppearance.Tint" Color="BadgeColor.Brand">
+    Tint
+</FluentBadge>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor

@@ -0,0 +1,17 @@
+<FluentStack Wrap="true" HorizontalGap="12px" VerticalGap="10px">
+    <FluentButton>
+        Default
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Primary">
+        Primary
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Outline">
+        Outline
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Subtle">
+        Subtle
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Transparent">
+        Transparent
+    </FluentButton>
+</FluentStack>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor

@@ -0,0 +1,21 @@
+<FluentCalendar DisabledDateFunc="@DisabledDay"
+                @bind-Value="@SelectedDay"
+                @bind-PickerMonth="@PickerDay"
+                Style="height: 250px; align-content: start;" />
+
+@code {
+
+    private static readonly DateTime Today = DateTime.Today;
+    private static readonly DateTime StartOfMonth = new DateTime(Today.Year, Today.Month, 1);
+
+    private DateTime SelectedDay = Today;
+    private DateTime PickerDay = StartOfMonth;
+    private DateTime SelectedMonth = Today;
+    private DateTime PickerMonth = StartOfMonth;
+    private DateTime SelectedYear = Today;
+    private DateTime PickerYear = StartOfMonth;
+
+    private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20;
+    private bool DisableMonth(DateTime date) => date.Month == 3 || date.Month == 8;
+    private bool DisableYear(DateTime date) => date.Year == 2026 || date.Year == 2027;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor

@@ -0,0 +1,3 @@
+<FluentCard Shadow="CardShadow.Default">
+    Hello! This is a card.
+</FluentCard>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor

@@ -0,0 +1,13 @@
+<FluentStack Orientation="Orientation.Vertical">
+    <FluentCheckbox Margin="0" @bind-Value="@value1" Label="Checked" />
+    <FluentCheckbox Margin="0" @bind-Value="@value2" Disabled="true" Label="Disabled" />
+    <FluentCheckbox Margin="0" @bind-Value="@value3" Label="Unchecked" />
+    <FluentCheckbox Margin="0"  @bind-CheckState="value4" ShowIndeterminate="true" Label="Indeterminate" />
+</FluentStack>
+
+@code {
+    bool value1 = true;
+    bool value2 = true;
+    bool value3;
+    bool? value4;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor

@@ -0,0 +1,3 @@
+<FluentColorPickerInput Label="Color"
+                        Placeholder="#000000"
+                        View="ColorPickerView.SwatchPalette" />

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor

@@ -0,0 +1,11 @@
+<FluentCombobox Label="Country"
+                Placeholder="Select your country"
+                Multiple="false"
+                OptionText="@(i => i?.Name)"
+                OptionValue="@(i => i?.Name)"
+                Items="@Countries" />
+
+@code {
+
+    IEnumerable<SampleData.Olympics2024.Country> Countries = SampleData.Olympics2024.Countries;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor

@@ -0,0 +1,8 @@
+<FluentStack HorizontalGap="12px;">
+    <FluentCompoundButton Label="Primary" Appearance="ButtonAppearance.Primary">
+        <Description>Description content</Description>
+    </FluentCompoundButton>
+    <FluentCompoundButton Label="Default">
+        <Description>Description content</Description>
+    </FluentCompoundButton>
+</FluentStack>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor

@@ -0,0 +1,4 @@
+<FluentCounterBadge Count="5" />
+<FluentCounterBadge Count="42" />
+<FluentCounterBadge Count="0" ShowZero="true" />
+<FluentCounterBadge Count="120" Appearance="BadgeAppearance.Ghost" />

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor

@@ -0,0 +1,19 @@
+<FluentDataGrid Items="@people">
+    <PropertyColumn Width="75px" Property="@(p => p.PersonId)" Sortable="true" />
+    <PropertyColumn Width="175px" Property="@(p => p.Name)" Sortable="true" />
+    <PropertyColumn Width="110px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+</FluentDataGrid>
+
+@code {
+    PaginationState pagination = new PaginationState() { ItemsPerPage = 2 };
+
+    record Person(int PersonId, string Name, DateOnly BirthDate);
+
+    IQueryable<Person> people = new[]
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
+        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
+        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
+    }.AsQueryable();
+
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor

@@ -0,0 +1,5 @@
+<FluentDatePicker Label="Pick a date" @bind-Value="@SelectedValue" />
+
+@code{
+    private DateTime SelectedValue { get; set; } = DateTime.Today.AddDays(-2);
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor

@@ -0,0 +1,22 @@
+@inject IDialogService DialogService
+<FluentStack HorizontalAlignment="HorizontalAlignment.Center" VerticalAlignment="VerticalAlignment.Center" Height="200px;">
+    <FluentButton OnClick="@OpenDialogAsync">
+        Open Dialog
+    </FluentButton>
+</FluentStack>
+
+@code
+{
+
+    private async Task OpenDialogAsync()
+    {
+        var result = await DialogService.ShowDialogAsync<DialogForCard>(options =>
+        {
+            options.Modal = true;
+            options.Size = DialogSize.Small;
+
+        });
+
+
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor

@@ -0,0 +1,12 @@
+<FluentStack Orientation="Orientation.Vertical">
+    <FluentDivider />
+    <FluentDivider>
+        Text
+    </FluentDivider>
+    <FluentDivider Appearance="DividerAppearance.Brand">
+        Brand
+    </FluentDivider>
+    <FluentDivider Appearance="DividerAppearance.Subtle">
+        Subtle
+    </FluentDivider>
+</FluentStack>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor

@@ -0,0 +1,2 @@
+<FluentEmoji Value="@(new Emojis.PeopleBody.Color.Default.Artist())" />
+<FluentEmoji Value="@(new Emojis.SmileysEmotion.Color.Default.RollingOnTheFloorLaughing())" Width="50px" />

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor

@@ -0,0 +1 @@
+<FluentTextInput Placeholder="Enter text" Label="Label" Message="Helper message" MessageCondition="@FluentFieldCondition.Always"></FluentTextInput>

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor

@@ -0,0 +1,26 @@
+@using System.ComponentModel.DataAnnotations
+
+<EditForm Model="@model" novalidate="true">
+    <DataAnnotationsValidator />
+    <FluentValidationSummary />
+
+    <FluentStack Orientation="Orientation.Vertical">
+        <div>
+            <FluentTextInput Name="identifier" @bind-Value="model.Identifier" Label="Identifier" Required="true" />
+        </div>
+
+        <FluentButton Type="ButtonType.Submit" Appearance="ButtonAppearance.Primary">Submit</FluentButton>
+    </FluentStack>
+</EditForm>
+
+@code {
+    private class Model
+    {
+        [Required]
+        [StringLength(10, MinimumLength = 3, ErrorMessage = "Identifier must be between 3 and 10 characters.")]
+        public string Identifier { get; set; } = string.Empty;
+    }
+
+    private Model model = new Model();
+
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor

@@ -0,0 +1,9 @@
+<FluentHighlighter HighlightedText="@Highlight"
+                   Delimiters=" ,;"
+                   Text="@Text" />
+
+@code
+{
+    static string Text = SampleData.Text.GenerateLoremIpsum(1,50);
+    string Highlight = "Lorem";
+}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor

@@ -0,0 +1,2 @@
+<FluentIcon Value="@(new Icons.Regular.Size24.Save())" Title="Save" />
+<FluentIcon Value="@(new Icons.Regular.Size24.Open())" Title="Open" Color="Color.Error" />

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor

@@ -0,0 +1 @@
+<FluentImage Source="/big-heart.jpg" AlternateText="Placeholder Image" />