- Storybook doc fixes and updates

packages/components/src/components/search-results/SearchResultsComponent.ts

@@ -395,7 +395,7 @@ export class SearchResultsComponent extends BaseComponent {
               </div>
               <div class="flex mt-1 mb-1 ml-0 mr-0pt-[3px] space-x-1">
                 <div>
-                    ${resource?.lastModifiedBy?.user?.displayName ? `${strings.modifiedBy} ${resource?.lastModifiedBy?.user?.displayName}` : null }
+                    ${resource?.lastModifiedBy?.user?.displayName ? `${this.strings.modifiedBy} ${resource?.lastModifiedBy?.user?.displayName}` : null }
                 </div>
                 <div>
                     ${ resource.lastModifiedDateTime ?
@@ -496,7 +496,7 @@ export class SearchResultsComponent extends BaseComponent {
             </div>
             <div class="flex mt-1 mb-1 ml-0 mr-0 dark:text-textColorDark pt-[3px] space-x-1">
                 <div>
-                    ${resource?.lastModifiedBy?.user?.displayName ? `${strings.modifiedBy} ${resource?.lastModifiedBy?.user?.displayName}` : null }
+                    ${resource?.lastModifiedBy?.user?.displayName ? `${this.strings.modifiedBy} ${resource?.lastModifiedBy?.user?.displayName}` : null }
                 </div>
                 <div>
                     ${ resource.lastModifiedDateTime ?
@@ -941,7 +941,7 @@ export class SearchResultsComponent extends BaseComponent {
         ];
     }
 
-    protected override get strings() {
+    protected override get strings(): { [x: string]: string; } {
         return strings;
     }
 

packages/components/src/stories/components/search-filters/filters.mdx

@@ -67,32 +67,28 @@ Aggregations are useful to group multiple filter values to an unique one with a
 
 To use aggegations, pass the following properties to the `aggregations` filter configuration property:
 
-<Source
-  language='json'
-  dark
-  format={false}
-  code={dedent`
-    {
-        ...Other filter properties
-        aggregations: [
-            {
-            "aggregationName":{
-                "fr-fr":"Document Word",
-                "ro-ro":"document Word",
-                "default":"Word document"
-            },
-            "matchingValues":[
-                "docx",
-                "doc",
-                "docm"
-            ],
-            "aggregationValue":"or(\"docx\",\"doc\",\"docm\")",
-            "aggregationValueIconUrl":"http://localhost:8000/assets/icons/word.svg"
-            }
-        ]
-    }
-  `}
-/>
+```json
+{
+    ...Other filter properties
+    aggregations: [
+          {
+          "aggregationName":{
+              "fr-fr":"Document Word",
+              "ro-ro":"document Word",
+              "default":"Word document"
+          },
+          "matchingValues":[
+              "docx",
+              "doc",
+              "docm"
+          ],
+          "aggregationValue":"or(\"docx\",\"doc\",\"docm\")",
+          "aggregationValueIconUrl":"http://localhost:8000/assets/icons/word.svg"
+        }
+    ]
+    ...
+}
+```
 
 | Property | Description | Example  |
 | -------- | ----------- | -------- | 

packages/components/src/stories/components/search-results/query.stories.ts

@@ -55,6 +55,7 @@ const AdvancedQueryTemplate = (args) => {
               fields=${args.fields.join(",")} 
               page-size=${args["page-size"]}
               sort-properties=${JSON.stringify(args["sort-properties"])}
+              theme=${args["theme"]}
             >
             </pnp-search-results>
   `;

packages/components/src/stories/components/search-results/styling.mdx

@@ -25,7 +25,7 @@ To use a custom template, simply use the `<template>` directive inside the conte
     >
         <template data-type="items">
             <div data-for='item in items'>
-                <!-- Template content here using [[item.<prop>]] binding syntax -->
+                <!-- Template content here using {{item.<prop>}} binding syntax -->
             </div>
         </template>
     </pnp-search-results>
@@ -36,7 +36,7 @@ Where valid `data-type` attribute values are:
 - **items** to customize results display.
 - **shimmers** to customize display when results are loading
 
-> By default the binding syntax fo componetns is `[[<expr>]]` and you can use regular Javascript here.
+> By default the binding syntax for components is `{{<expr>}}` and you can use regular Javascript here.
 
 ### Template: result items
 
@@ -52,8 +52,8 @@ This template is used **after results are loaded**:
             <div data-for='item in items'>
                 <div class="pb-8">
                     <div class="flex space-x-2 mb-2">
-                        <div class="font-bold">[[item.resource.fields.title]]</div>
-                        <div class="h-6">By [[item.resource.fields.createdBy]]</div>
+                        <div class="font-bold">{{item.resource.fields.title}}</div>
+                        <div class="h-6">By {{item.resource.fields.createdBy}}</div>
                     </div>
                 </div>
             </div>

packages/components/src/stories/components/search-results/styling.stories.ts

@@ -31,6 +31,7 @@ const CustomItemsTemplate = (args) => {
             entity-types=${args["entity-types"]} 
             fields=${args.fields.join(",")} 
             page-size=${args["page-size"]}
+            theme=${args["theme"]}
         >
         <template data-type="items">
 
@@ -76,6 +77,7 @@ const CustomHeaderTemplate = (args) => {
                 see-all-link=${args["see-all-link"]}
                 comp-title=${args["comp-title"]}
                 ?show-count=${args["show-count"]}
+                theme=${args["theme"]}
             >
             </pnp-search-results>
         `;
@@ -94,6 +96,7 @@ const PagingTemplate = (args) => {
                 page-size=${args["page-size"]}
                 pages-number=${args["pages-number"]}
                 ?show-paging=${args["show-paging"]}
+                theme=${args["theme"]}
             >
             </pnp-search-results>
         `;

packages/components/src/stories/introduction/auth.stories.mdx

@@ -5,15 +5,15 @@ import { Meta } from '@storybook/blocks';
 # Authentication
 
 To get it work, some components need the current user to be logged in against Azure AD and the Microsoft 365 tenant where you try get data from.
-The PnP Modern Search core components bundle include the Microsoft Graph Toolkit library `3.0.0` so it means you can use any components from it, like [authentication providers](https://learn.microsoft.com/en-us/graph/toolkit/providers/providers). 
+The PnP Modern Search core components bundle include the Microsoft Graph Toolkit library `3.1.3` so it means you can use any components from it, like [authentication providers](https://learn.microsoft.com/en-us/graph/toolkit/providers/providers). 
 
 The only thing to keep in mind is we use a dedicated **pnp** prefix for MGT components. Example:
 
-```
+```html
 <mgt-pnp-file>
 ```
 
-Provider component needs to be added to your page so other components that require authentication can work. Here is an example with the mSAL2 provider:
+Provider component needs to be added to your page so other components that require authentication can work. Here is an example with the MSAL2 provider:
 
 
 Example:

packages/components/src/stories/introduction/introduction.stories.mdx

@@ -1,23 +1,28 @@
 import { Meta, Source } from '@storybook/blocks';
 import { PACKAGE_VERSION } from "../../../src/utils/version";
-import m365logo from "../assets/m365_logo.png";
+import pnpLogo from "../assets/pnp.png";
+import ubisoftLogo from "../assets/ubisoft_stacked_logo_black.png";
 
 <Meta title="Introduction / Getting started" />
 
 # PnP Modern Search - Core components
 
-<img width="162px" src={m365logo}/>
+<div style={{display: 'flex', justifyContent: 'center', height: '150px'}}>
+    <img alt="PnP Logo"src={pnpLogo}/>
+    <img alt="Ubisoft Logo" src={ubisoftLogo}/>
+</div>
 
 ## What's included?
 
 The following components are included in the bundle:
 
-| Component                                                                         | HTML tag                      | Purpose                                                                         |
-|-----------------------------------------------------------------------------------|-------------------------------|---------------------------------------------------------------------------------|
-| [Search results](?path=/docs/components-search-search-results--usage-query)       | `<pnp-search-results>`    | Display results from Microsoft Search index according to configured parameters. |   
-| [Search filters](?path=/docs/components-search-search-filters--usage)             | `<pnp-filters>`    | Display filters from a connected search results components                      | 
-| [Search box](?path=/docs/components-search-search-box--usage)                     | `<pnp-search-input>`      | Allow users to enter free text search keywords.                                 |
-| [Search verticals](?path=/docs/components-search-search-verticals--usage)         | `<pnp-search-verticals>`  | Displays tabs to search by verticals                                            |
+| Component | HTML tag | Purpose |
+| --------- | -------- | ------- |
+| [Search results](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-results--usage-query) | `<pnp-search-results>` | Display results from Microsoft Search index according to configured parameters. |
+| [Search filters](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-filters--usage) | `<pnp-search-filters>` | Display filters from a connected search results components |
+| [Search box](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-box--usage) | `<pnp-search-input>` | Allow users to enter free text search keywords.
+| [Search verticals](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-verticals--usage) | `<pnp-search-verticals>`  | Displays tabs to search by verticals |
+| [Video player](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-misc-video-player--usage) | `<pnp-video-player>`  | Play video from SharePoint (outside of SharePoint domain) |
 
 ## Usage
 
@@ -32,18 +37,19 @@ Include the following script in your HTML page:
 />
 
 > Components are registered automatically on the page when the package is imported.
+> Use [versions numbers](https://www.npmjs.com/package/@pnp/modern-search-core?activeTab=versions) from `npm`.
 
 ### Via npm package
 
-The npm package `@pnp/modern-search-core` is available in npm to be used in you application
+The npm package [`@pnp/modern-search-core`](https://www.npmjs.com/package/@pnp/modern-search-core) is available in npm to be used in you application
 
 ### Installation
 
 `npm i --save @pnp/modern-search-core`
 
 ### Side effects
 
-The `@pnp/modern-search-core` package is side effect free, expect for the entrypoints located under _define/_ folder;
+The [`@pnp/modern-search-core`](https://www.npmjs.com/package/@pnp/modern-search-core) package is side effect free, except for the entrypoints located under _define/_ folder;
 
 ### Usage
 
@@ -59,22 +65,46 @@ import "@pnp/modern-search-core/dist/es6/exports/define/pnp-search-results";
 ```
 
 #### Scoped
-When used in a microfrontend, you'll probably need to use scoped elements to avoid any registration conflicts:
+When used in a microfrontend, you'll probably need to use scoped elements to avoid any registration conflicts
 
-`import { PnPSearchResultsComponent} from "@pnp/modern-search-core";`
+**Manually defined element**
 
 ```typescript
+import { SearchResultsComponent} from "@pnp/modern-search-core";
 
-// Use the PnPSearchResultsComponent with the scoped element mixin (https://open-wc.org/docs/development/scoped-elements/) 
-// or
-// define your component with SearchResultsComponent
+// Define your component manually with SearchResultsComponent
 if (!customElements.get("myapp-search-results")) {
-    customElements.define("myapp-search-results", PnPSearchResultsComponent)
+    customElements.define("myapp-search-results", SearchResultsComponent)
 }
 ...
-<myapp-search-results
-    id="edfdea93-23c9-4ba6-94d9-a848a1384104"
-/>
+<myapp-search-results />
 ```
 
-Will register the PnPSearchResultsComponent component under the name myapp-search-results in the custom element registry.
+**[Scoped element mixin](https://open-wc.org/docs/development/scoped-elements/) in your own web component** 
+
+```typescript
+
+//
+import { SearchResultsComponent} from "@pnp/modern-search-core";
+import { ScopedElementsMixin } from "@open-wc/scoped-elements";
+
+export class MyComponent extends ScopedElementsMixin(LitElement) {
+
+    ...
+
+    static get scopedElements() { 
+        return {
+            "myapp-search-results": SearchResultsComponent
+        }; 
+    }
+    ...
+
+    public render() {
+        ...
+
+        return html`<myapp-search-results />`;
+    }
+    ...
+}
+
+```

packages/spfx/src/layouts/results/tiles/results-tiles.html

@@ -14,7 +14,7 @@
                     </div>
                         <div class="font-bold line-clamp-2 h-full">
                             <a href='{{ slot("Path",item) }}' target="_blank">{{ slot("Title",item) }}</a>
-                        </div>
+                        </div>                        
                         <div data-if='slot("Subtitle",item)' class="">{{ slot("Subtitle",item) }}</div>
                         <div data-if='slot("Summary",item)' class="p-2 h-full">
                             <p data-html class="line-clamp-4">{{ slot("Summary",item) }}</p>