Add examples and documentation for the Persona component. (#843)

* Add examples and documentation for the Persona component.

* Fix the Persona samples to use "@DataSource.SamplePicture" instead of using external resources.

---------

Co-authored-by: Gilles TOURREAU <[email protected]>

Author: GillesTourreau

examples/Demo/Shared/Pages/Persona/Examples/PersonaDefault.razor

@@ -0,0 +1,7 @@
+<FluentPersona Name="Bill Gates"
+               Status="PresenceStatus.Available"
+               StatusSize="PresenceBadgeSize.Small"
+               StatusTitle="He is available"
+               Image="@DataSource.SamplePicture"
+               ImageSize="50px">
+</FluentPersona>

examples/Demo/Shared/Pages/Persona/Examples/PersonaDismiss.razor

@@ -0,0 +1,20 @@
+<div hidden="@this.Hidden">
+    <FluentPersona Name="Bill Gates"
+                   Status="PresenceStatus.Available"
+                   StatusSize="PresenceBadgeSize.Small"
+                   StatusTitle="He is available"
+                   Image="@DataSource.SamplePicture"
+                   ImageSize="50px"
+                   DismissTitle="Hide Bill"
+                   OnDismissClick="@this.Dismiss">
+    </FluentPersona>
+</div>
+
+@code {
+    private bool Hidden { get; set; }
+
+    private void Dismiss()
+    {
+        this.Hidden = true;
+    }
+}

examples/Demo/Shared/Pages/Persona/Examples/PersonaInitials.razor

@@ -0,0 +1,4 @@
+<FluentPersona Name="Lydia Bauer"
+               ImageSize="50px"
+               Initials="LY">
+</FluentPersona>

examples/Demo/Shared/Pages/Persona/Examples/PersonaNoImage.razor

@@ -0,0 +1,5 @@
+<FluentPersona Name="Lydia Bauer"
+               ImageSize="50px"
+               Status="PresenceStatus.Busy"
+               StatusSize="PresenceBadgeSize.Small">
+</FluentPersona>

examples/Demo/Shared/Pages/Persona/PersonaPage.razor

@@ -0,0 +1,35 @@
+@page "/Persona"
+@using FluentUI.Demo.Shared.Pages.Persona.Examples
+
+<h1>Persona</h1>
+<p>A Persona is a visual representation of a person with an avatar. A status can be specified optionally.</p>
+
+<h2>Examples</h2>
+<DemoSection Title="Default" Component="typeof(PersonaDefault)">
+    <Description>
+        Display a person with his avatar and his status.
+    </Description>
+</DemoSection>
+
+<DemoSection Title="With no image (Default initials)" Component="typeof(PersonaNoImage)">
+    <Description>
+        If no image is specified, the initials of the person is automatically retrieved.
+    </Description>
+</DemoSection>
+
+<DemoSection Title="With no image (Specific initials)" Component="typeof(PersonaInitials)">
+    <Description>
+        Explicit initials for the person can be defined with the <code>Initials</code> property.
+    </Description>
+</DemoSection>
+
+<DemoSection Title="Dismiss action" Component="typeof(PersonaDismiss)">
+    <Description>
+        Display a "Dismiss" cross and raise an event.
+    </Description>
+</DemoSection>
+
+<h2>API Documentation</h2>
+<ApiDocumentation Component="typeof(FluentPersona)" />
+
+

examples/Demo/Shared/Shared/DemoNavMenu.razor

@@ -96,6 +96,7 @@
                 <FluentNavLink Href="/Overflow" Icon="@(new Icons.Regular.Size20.MultiselectRtl())">Overflow</FluentNavLink>
                 <FluentNavLink Href="/Overlay" Icon="@(new Icons.Regular.Size20.CursorHover())">Overlay</FluentNavLink>
                 <FluentNavLink Href="/Panel" Icon="@(new Icons.Regular.Size20.PanelRight())">Panel</FluentNavLink>
+                <FluentNavLink Href="/Persona" Icon="@(new Icons.Regular.Size20.PersonAvailable())">Persona</FluentNavLink>
                 <FluentNavLink Href="/Popover" Icon="@(new Icons.Regular.Size20.TooltipQuote())">Popover</FluentNavLink>
                 <FluentNavLink Href="/Progress" Icon="@(new Icons.Regular.Size20.SquareHint())">Progress</FluentNavLink>
                 <FluentNavLink Href="/ProgressRing" Icon="@(new Icons.Regular.Size20.ArrowClockwiseDashes())">Progress Ring</FluentNavLink>

examples/Demo/Shared/Shared/DemoNavMenuList.razor

@@ -160,6 +160,9 @@
     <li>
         <FluentAnchor Href="Panel" Appearance=Appearance.Neutral>Panel</FluentAnchor>
     </li>
+    <li>
+        <FluentAnchor Href="Persona" Appearance=Appearance.Neutral>Persona</FluentAnchor>
+    </li>
     <li>
         <FluentAnchor Href="Popover" Appearance=Appearance.Neutral>Popover</FluentAnchor>
     </li>

examples/Demo/Shared/Shared/DemoNavMenuTree.razor

@@ -81,6 +81,7 @@
             <FluentNavMenuLink Href="/Overflow" Icon="@(new Icons.Regular.Size20.MultiselectRtl())" Text="Overflow" />
             <FluentNavMenuLink Href="/Overlay" Icon="@(new Icons.Regular.Size20.CursorHover())" Text="Overlay" />
             <FluentNavMenuLink Href="/Panel" Icon="@(new Icons.Regular.Size20.PanelRight())" Text="Panel" />
+            <FluentNavMenuLink Href="/Persona" Icon="@(new Icons.Regular.Size20.PersonAvailable())" Text="Persona" />
             <FluentNavMenuLink Href="/Popover" Icon="@(new Icons.Regular.Size20.TooltipQuote())" Text="Popover" />
             <FluentNavMenuLink Href="/Progress" Icon="@(new Icons.Regular.Size20.SquareHint())" Text="Progress" />
             <FluentNavMenuLink Href="/ProgressRing" Icon="@(new Icons.Regular.Size20.ArrowClockwiseDashes())" Text="Progress Ring" />