Add examples and documentation for the Persona component.

microsoft · Oct 11, 2023 · de24423 · de24423
1 parent 45ce752
commit de24423
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 0 deletions.
diff --git a/examples/Demo/Shared/Pages/Persona/Examples/PersonaDefault.razor b/examples/Demo/Shared/Pages/Persona/Examples/PersonaDefault.razor
@@ -0,0 +1,7 @@
+<FluentPersona Name="Kevin Sturgis"
+               Status="PresenceStatus.Available"
+               StatusSize="PresenceBadgeSize.Small"
+               StatusTitle="He is available"
+               Image="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png"
+               ImageSize="50px">
+</FluentPersona>
diff --git a/examples/Demo/Shared/Pages/Persona/Examples/PersonaDismiss.razor b/examples/Demo/Shared/Pages/Persona/Examples/PersonaDismiss.razor
@@ -0,0 +1,20 @@
+<div hidden="@this.Hidden">
+    <FluentPersona Name="Kevin Sturgis"
+                   Status="PresenceStatus.Available"
+                   StatusSize="PresenceBadgeSize.Small"
+                   StatusTitle="He is available"
+                   Image="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png"
+                   ImageSize="50px"
+                   DismissTitle="Hide Kevin"
+                   OnDismissClick="@this.Dismiss">
+    </FluentPersona>
+</div>
+
+@code {
+    private bool Hidden { get; set; }
+
+    private void Dismiss()
+    {
+        this.Hidden = true;
+    }
+}
diff --git a/examples/Demo/Shared/Pages/Persona/Examples/PersonaInitials.razor b/examples/Demo/Shared/Pages/Persona/Examples/PersonaInitials.razor
@@ -0,0 +1,4 @@
+<FluentPersona Name="Lydia Bauer"
+               ImageSize="50px"
+               Initials="LY">
+</FluentPersona>
diff --git a/examples/Demo/Shared/Pages/Persona/Examples/PersonaNoImage.razor b/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>
diff --git a/examples/Demo/Shared/Pages/Persona/PersonaPage.razor b/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)" />
+
+
diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor b/examples/Demo/Shared/Shared/DemoNavMenu.razor
@@ -97,6 +97,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>

diff --git a/examples/Demo/Shared/Shared/DemoNavMenuList.razor b/examples/Demo/Shared/Shared/DemoNavMenuList.razor
@@ -163,6 +163,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>

diff --git a/examples/Demo/Shared/Shared/DemoNavMenuTree.razor b/examples/Demo/Shared/Shared/DemoNavMenuTree.razor
@@ -82,6 +82,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" />