Merge branch 'master' of https://github.com/microsoft/fast-dna

.gitignore

@@ -37,9 +37,9 @@ storybook-static
 #Ignore Mac .DS_Store
 .DS_Store
 
-#Ignore VSCode
-.vscode/
-.vs/
+#Ignore VSCode in Root
+/.vscode/
+/.vs/
 
 # tmp directories
 .tmp/
@@ -63,3 +63,7 @@ docs/en/packages/*/api/
 
 # GitHub Actions Local Testing
 .github/workflows/testing/*.json
+
+# Ignore Build Artefacts
+bin/
+obj/

.prettierignore

@@ -1 +1,2 @@
 packages/web-components/fast-components/src/default-palette.ts
+packages/web-components/fast-element/src/**/*.spec.ts

examples/blazor/.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+   // Use IntelliSense to find out which attributes exist for C# debugging
+   // Use hover for the description of the existing attributes
+   // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+   "version": "0.2.0",
+   "configurations": [
+        {
+            "name": "Launch and Debug Standalone Blazor WebAssembly App",
+            "type": "blazorwasm",
+            "request": "launch",
+            "cwd": "${workspaceFolder}"
+        }
+    ]
+}

examples/blazor/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/BlazingFast.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/BlazingFast.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "${workspaceFolder}/BlazingFast.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

examples/blazor/App.razor

@@ -0,0 +1,10 @@
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p>Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

examples/blazor/BlazingFast.csproj

@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-rc.2.*" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-rc.2.*" PrivateAssets="all" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.2.*" />
+  </ItemGroup>
+
+</Project>

examples/blazor/Pages/Counter.razor

@@ -0,0 +1,23 @@
+@page "/counter"
+
+<h1>Counter</h1>
+
+<p>
+    Current count: 
+    <fluent-badge appearance="@badgeAppearance">@currentCount</fluent-badge>
+</p>
+
+<fluent-button appearance="accent" @onclick="IncrementCount">Click me</fluent-button>
+
+@code {
+    private int currentCount = 0;
+    private string badgeAppearance = "neutral";
+
+    private void IncrementCount()
+    {
+        currentCount++;
+        badgeAppearance = currentCount % 2 == 0
+            ? "neutral"
+            : "accent";
+    }
+}

examples/blazor/Pages/FetchData.razor

@@ -0,0 +1,55 @@
+@page "/fetchdata"
+@inject HttpClient Http
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+@if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var forecast in forecasts)
+            {
+                <tr>
+                    <td>@forecast.Date.ToShortDateString()</td>
+                    <td>@forecast.TemperatureC</td>
+                    <td>@forecast.TemperatureF</td>
+                    <td>@forecast.Summary</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[] forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
+    }
+
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public string Summary { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+}

examples/blazor/Pages/Index.razor

@@ -0,0 +1,55 @@
+@page "/"
+@using System.Timers;
+
+<div class="container">
+  <div class="col-md-8 offset-md-2">
+    <h4 class="mb-3">Contact Us</h4>
+    <form>
+      <div class="row">
+        <div class="col-3">
+          <fluent-text-field @bind-value="FirstName" @bind-value:event="oninput">First Name</fluent-text-field>
+        </div>
+        <div class="col-3">
+          <fluent-text-field @bind-value="LastName" @bind-value:event="oninput">Last Name</fluent-text-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          Full Name: @FirstName @LastName
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-3">
+          <fluent-text-field>Username</fluent-text-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-3">
+          <fluent-text-field type="email">Email</fluent-text-field>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <fluent-text-area placeholder="Please enter your message here.">Message</fluent-text-area>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <fluent-checkbox>
+            Sign up for our newsletter
+          </fluent-checkbox>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <fluent-button class="call-to-action" appearance="accent">Send</fluent-button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+@code {
+  private string FirstName { get; set; } = "Blazor";
+  private string LastName { get; set; } = "FAST";
+}

examples/blazor/Program.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+
+namespace BlazingFast
+{
+    public class Program
+    {
+        public static async Task Main(string[] args)
+        {
+            var builder = WebAssemblyHostBuilder.CreateDefault(args);
+            builder.RootComponents.Add<App>("app");
+
+            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+            await builder.Build().RunAsync();
+        }
+    }
+}

examples/blazor/Properties/launchSettings.json

@@ -0,0 +1,29 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:50454",
+      "sslPort": 44399
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "BlazingFast": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

examples/blazor/README.md

@@ -0,0 +1,48 @@
+# Blazing FAST
+
+A simple demo of Blazor and Fluent UI Web Components (built on FAST) working together. To see it in action, navigate to the Counter page and click the button. The button is a `fluent-button` with a Blazor event handler. The counter is displayed using a `fluent-badge`. Blazor provides the content of the button. It also binds the `appearance` attribute of the `fluent-badge` to a C# field which toggles between two `fluent-badge` `appearance` values depending on whether the field value is odd or even.
+
+## FAST Integration
+
+The core component library is referenced with a single script tag in the `index.html` file. It looks like this:
+
+```html
+<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
+```
+
+Additionally, we configure the design system in the `index.html` so that it applies to the entire application. That is done with this markup:
+
+```html
+<fluent-design-system-provider use-defaults>
+    <app>Loading...</app>
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+</fluent-design-system-provider>
+```
+
+With this in place, the Fluent UI Web Components can be used throughout all Blazor views. For example, here's what the Counter page markup looks like:
+
+```html
+<h1>Counter</h1>
+
+<p>
+    Current count: 
+    <fluent-badge appearance="@badgeAppearance">@currentCount</fluent-badge>
+</p>
+
+<fluent-button appearance="accent" @onclick="IncrementCount">Click me</fluent-button>
+```
+
+## Running the Example
+
+The recommended way to run the example is with the following command:
+
+```shell
+dotnet watch run
+```
+
+This will build, run, and open a browser. As you make changes, the browser should auto-refresh.

examples/blazor/Shared/MainLayout.razor

@@ -0,0 +1,15 @@
+@inherits LayoutComponentBase
+
+<div class="sidebar">
+    <NavMenu />
+</div>
+
+<div class="main">
+    <div class="top-row px-4">
+        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
+    </div>
+
+    <div class="content px-4">
+        @Body
+    </div>
+</div>