Adding Labs infobadge and infobar

CommunityToolkit · Nov 6, 2023 · a77a6df · a77a6df
1 parent 1b6a0a6
commit a77a6df
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/CommunityToolkit.App.Shared/CommunityToolkit.App.Shared.projitems b/CommunityToolkit.App.Shared/CommunityToolkit.App.Shared.projitems
@@ -247,8 +247,6 @@
     <Content Include="$(MSBuildThisFileDirectory)Assets\WideTile.scale-200_altform-colorful_theme-light.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\WideTile.scale-400.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\WideTile.scale-400_altform-colorful_theme-light.png" />
-
-
     <Content Include="$(MSBuildThisFileDirectory)LinkerConfig.xml" />
   </ItemGroup>
   <ItemGroup>

diff --git a/CommunityToolkit.App.Shared/Helpers/NavigationViewHelper.cs b/CommunityToolkit.App.Shared/Helpers/NavigationViewHelper.cs
@@ -41,12 +41,23 @@ public static class NavigationViewHelper
     {
         foreach (var metadata in sampleMetadata.OrderBy(meta => meta.Title))
         {
-            yield return new MUXC.NavigationViewItem
+            MUXC.NavigationViewItem navItem = new MUXC.NavigationViewItem
             {
                 Content = metadata.Title,
-                Icon = new BitmapIcon() { ShowAsMonochrome = false, UriSource = new Uri(IconHelper.GetIconPath(metadata.Icon)) },
+                Icon = new BitmapIcon()
+                {
+                    ShowAsMonochrome = false,
+                    UriSource = new Uri(IconHelper.GetIconPath(metadata.Icon))
+                },
                 Tag = metadata,
             };
+
+            // Check if this is a Labs component
+            if (metadata.IsExperimental == true)
+            {
+                navItem.InfoBadge = new MUXC.InfoBadge() { Style = (Style)App.Current.Resources["LabsIconBadgeStyle"] };
+            }
+            yield return navItem;
         }
     }
 

diff --git a/CommunityToolkit.App.Shared/Renderers/ToolkitDocumentationRenderer.xaml b/CommunityToolkit.App.Shared/Renderers/ToolkitDocumentationRenderer.xaml
@@ -17,6 +17,7 @@
       mc:Ignorable="d wasm">
 
     <Page.Resources>
+        <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
         <!--  Overriding the default Markdown styling to be inline with the default Windows typography / design guidelines  -->
         <Style TargetType="renderer:MarkdownTextBlock">
             <Setter Property="Background" Value="Transparent" />
@@ -301,12 +302,16 @@
             <muxc:InfoBar Title="Experimental"
                           Grid.Row="3"
                           Grid.ColumnSpan="2"
-                          Margin="0,16,0,0"
+                          Margin="0,16,0,16"
+                          BorderBrush="Transparent"
                           IsClosable="False"
-                          Visibility="Collapsed">
+                          Message="This is component it part of Toolkit Labs and is considered experimental."
+                          Severity="Warning"
+                          Visibility="{x:Bind Metadata.IsExperimental, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
+                <!--  TO DO: Bind IsOpen to a property that indicates whether the package is experimental  -->
                 <muxc:InfoBar.ActionButton>
-                    <HyperlinkButton Content="Learn how you can use this experiment in your app"
-                                     NavigateUri="https://aka.ms/wct/wiki/previewpackages" />
+                    <HyperlinkButton Content="Learn more about Toolkit Labs"
+                                     NavigateUri="https://aka.ms/toolkit/labs/windows" />
                 </muxc:InfoBar.ActionButton>
             </muxc:InfoBar>
         </Grid>

diff --git a/CommunityToolkit.App.Shared/Styles/Buttons.xaml b/CommunityToolkit.App.Shared/Styles/Buttons.xaml
@@ -347,5 +347,27 @@
         <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
     </Style>
 
-
+    <Style x:Key="LabsIconBadgeStyle"
+           TargetType="muxc:InfoBadge">
+        <Setter Property="Padding" Value="4,0,4,0" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:InfoBadge">
+                    <Grid x:Name="RootGrid"
+                          Padding="{TemplateBinding Padding}"
+                          Background="#FFC225"
+                          CornerRadius="4">
+                        <TextBlock x:Name="ValueTextBlock"
+                                   HorizontalAlignment="Center"
+                                   VerticalAlignment="Center"
+                                   FontSize="12"
+                                   FontWeight="SemiBold"
+                                   Foreground="Black"
+                                   Text="LABS" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>