- Updated screenshots for documentation

microsoft-search · Feb 22, 2024 · b0de738 · b0de738
1 parent 7996248
commit b0de738
Show file tree

Hide file tree

Showing 51 changed files with 49 additions and 134 deletions.
diff --git a/documentation/docs/sharepoint-webparts/add-webparts.mdx b/documentation/docs/sharepoint-webparts/add-webparts.mdx
@@ -4,9 +4,7 @@ sidebar_position: 1
 
 # Add Web Parts to your site
 
-Search Web Parts are deployed globally in the Ubisoft Microsoft 365 tenant. It means **you don't need to deploy them manually or request a deployment to your site**.
-
-To add them on a SharePoint page, edit the page page and search for _"Ubisoft"_: 
+To add them on a SharePoint page, edit the page page and search for _"PnP Modern Search Core"_: 
 
 <div className='center'> 
     ![Add WebParts](./img/add_webparts.png)
@@ -15,3 +13,6 @@ To add them on a SharePoint page, edit the page page and search for _"Ubisoft"_:
 :::note
 SharePoint Web Parts are meant for end-users to integrate them in their SharePoint pages.
 :::
+
+:::note
+⚠️**PnP Modern Search Core Components Web Parts** are different from **[PnP Modern Search](https://microsoft-search.github.io/pnp-modern-search/)** regular Web Parts
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/customize-templates.mdx b/documentation/docs/sharepoint-webparts/available-webparts/customize-templates.mdx
@@ -128,7 +128,7 @@ Here are the possible customizations you can make in templates:
 | Use [`{{this}}`](https://learn.microsoft.com/en-us/graph/toolkit/customize-components/templates#this) | ✔️ | 
 | Use [data context helper properties](https://learn.microsoft.com/en-us/graph/toolkit/customize-components/templates#data-context-helper-properties) | ✔️ | 
 | Use custom web components | ✔️Only components starting with `pnp-` or `mgt-`  | <CodeBlock language="html">{customWebComponentsSnippet}</CodeBlock>
-| Convert text from properties to HTML              | ✔️ (using `data-html` attribute). | <CodeBlock language="html">{dataHtmlSnippet}</CodeBlock> ➝ Without `data-html` <br/><br/> <div style={{width: 513}}>![Without data-html](./img/without_data_html.png)</div> <br/> ➝ With `data-html` <br/><br/><div style={{width: 513}}>![Without data-html](./img/with_data_html.png)</div>
+| Convert text from properties to HTML              | ✔️ (using `data-html` attribute). | <CodeBlock language="html">{dataHtmlSnippet}</CodeBlock> ➝ Without `data-html` <br/><br/> <div style={{width: 339}}>![Without data-html](./img/without_data_html.png)</div> <br/> ➝ With `data-html` <br/><br/><div style={{width: 339}}>![Without data-html](./img/with_data_html.png)</div>
 
 ### Use an external file
 
@@ -146,7 +146,7 @@ The file needs to be accessible in read by users. If you store the file in a Sha
 
 The debug mode allows to inspect underlying data returned by the Web Part. It is also useful to see available properties you can use in your templates.
 
-<div className='center' style={{flexDirection: 'column'}}>   
+<div className='center w-[916px]' style={{flexDirection: 'column'}}>   
     ![Debug mode](./img/debug_mode.png)
 
     ![Debug context](./img/debug_context.png)

diff --git a/...ation/docs/sharepoint-webparts/available-webparts/img/add_search_results_wp.png b/...ation/docs/sharepoint-webparts/available-webparts/img/add_search_results_wp.png
diff --git a/...tation/docs/sharepoint-webparts/available-webparts/img/add_search_verticals.png b/...tation/docs/sharepoint-webparts/available-webparts/img/add_search_verticals.png
diff --git a/...entation/docs/sharepoint-webparts/available-webparts/img/add_searchbox_page.png b/...entation/docs/sharepoint-webparts/available-webparts/img/add_searchbox_page.png
diff --git a/...ocs/sharepoint-webparts/available-webparts/img/add_verticals_webpart_search.png b/...ocs/sharepoint-webparts/available-webparts/img/add_verticals_webpart_search.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/anvil_cards.png b/documentation/docs/sharepoint-webparts/available-webparts/img/anvil_cards.png
diff --git a/...mentation/docs/sharepoint-webparts/available-webparts/img/checkbox_template.png b/...mentation/docs/sharepoint-webparts/available-webparts/img/checkbox_template.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/colors_overrides.png b/documentation/docs/sharepoint-webparts/available-webparts/img/colors_overrides.png
diff --git a/...tation/docs/sharepoint-webparts/available-webparts/img/connect_to_searchbox.png b/...tation/docs/sharepoint-webparts/available-webparts/img/connect_to_searchbox.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/dark_mode.png b/documentation/docs/sharepoint-webparts/available-webparts/img/dark_mode.png
diff --git a/...entation/docs/sharepoint-webparts/available-webparts/img/daterange_template.png b/...entation/docs/sharepoint-webparts/available-webparts/img/daterange_template.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/debug_context.png b/documentation/docs/sharepoint-webparts/available-webparts/img/debug_context.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/debug_mode.png b/documentation/docs/sharepoint-webparts/available-webparts/img/debug_mode.png
diff --git a/...ocs/sharepoint-webparts/available-webparts/img/filter_name_template_example.png b/...ocs/sharepoint-webparts/available-webparts/img/filter_name_template_example.png
diff --git a/...cs/sharepoint-webparts/available-webparts/img/filter_value_template_example.png b/...cs/sharepoint-webparts/available-webparts/img/filter_value_template_example.png
diff --git a/...entation/docs/sharepoint-webparts/available-webparts/img/filters_connection.png b/...entation/docs/sharepoint-webparts/available-webparts/img/filters_connection.png
diff --git a/...n/docs/sharepoint-webparts/available-webparts/img/filters_verticals_webpart.png b/...n/docs/sharepoint-webparts/available-webparts/img/filters_verticals_webpart.png
diff --git a/...tion/docs/sharepoint-webparts/available-webparts/img/items_template_example.png b/...tion/docs/sharepoint-webparts/available-webparts/img/items_template_example.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/light_mode.png b/documentation/docs/sharepoint-webparts/available-webparts/img/light_mode.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/news_list_item.png b/documentation/docs/sharepoint-webparts/available-webparts/img/news_list_item.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/pdf_list_item.png b/documentation/docs/sharepoint-webparts/available-webparts/img/pdf_list_item.png
diff --git a/...entation/docs/sharepoint-webparts/available-webparts/img/query_string_param.png b/...entation/docs/sharepoint-webparts/available-webparts/img/query_string_param.png
diff --git a/...ntation/docs/sharepoint-webparts/available-webparts/img/search_box_settings.png b/...ntation/docs/sharepoint-webparts/available-webparts/img/search_box_settings.png
diff --git a/...ation/docs/sharepoint-webparts/available-webparts/img/search_box_wp_default.png b/...ation/docs/sharepoint-webparts/available-webparts/img/search_box_wp_default.png
diff --git a/.../docs/sharepoint-webparts/available-webparts/img/search_filters_add_to_page.png b/.../docs/sharepoint-webparts/available-webparts/img/search_filters_add_to_page.png
diff --git a/...tion/docs/sharepoint-webparts/available-webparts/img/search_filters_default.png b/...tion/docs/sharepoint-webparts/available-webparts/img/search_filters_default.png
diff --git a/...tion/docs/sharepoint-webparts/available-webparts/img/search_results_default.png b/...tion/docs/sharepoint-webparts/available-webparts/img/search_results_default.png
diff --git a/...ntation/docs/sharepoint-webparts/available-webparts/img/send_query_new_page.png b/...ntation/docs/sharepoint-webparts/available-webparts/img/send_query_new_page.png
diff --git a/...entation/docs/sharepoint-webparts/available-webparts/img/show_count_example.png b/...entation/docs/sharepoint-webparts/available-webparts/img/show_count_example.png
diff --git a/...entation/docs/sharepoint-webparts/available-webparts/img/sort_field_filters.png b/...entation/docs/sharepoint-webparts/available-webparts/img/sort_field_filters.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/tiles_cards.png b/documentation/docs/sharepoint-webparts/available-webparts/img/tiles_cards.png
diff --git a/...ntation/docs/sharepoint-webparts/available-webparts/img/webpart_instance_id.png b/...ntation/docs/sharepoint-webparts/available-webparts/img/webpart_instance_id.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/img/with_data_html.png b/documentation/docs/sharepoint-webparts/available-webparts/img/with_data_html.png
diff --git a/...mentation/docs/sharepoint-webparts/available-webparts/img/without_data_html.png b/...mentation/docs/sharepoint-webparts/available-webparts/img/without_data_html.png
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/search-box.mdx b/documentation/docs/sharepoint-webparts/available-webparts/search-box.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 
 ## Basic configuration
 
-1. Edit the page and add a '_PnP Modern Search Core - Search Box'_. 
+1. Edit the page and add a '_PnP Modern Search Core Components - Search Box'_. 
 
     <div className='center' style={{flexDirection: 'column'}}>   
 
@@ -49,7 +49,7 @@ Instead of using the search box value in the same page, you also have the possib
 
     <br/>
     :::info Configure target page to use the search box value
-    The value can be used in tagert page, in a search results web part by configuring [a dynamic query text](./search-results#query-text).
+    The value can be used in target page, in a search results web part by configuring [a dynamic query text](./search-results#query-text).
     ::: 
 
 
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/search-filters.mdx b/documentation/docs/sharepoint-webparts/available-webparts/search-filters.mdx
@@ -18,12 +18,12 @@ The '_Search Filters_' Web Part allows to filter the results displayed in a conn
 Connection between search filters and search results is always a **two-ways** connection meaning both web parts need to be configured.
 :::
 
-1. Edit the page and add a ['_PnP Modern Search Core - Search Results_'](./search-results) and a _'PnP Modern Search Core - Search Filters'_ web parts.
+1. Edit the page and add a ['_PnP Modern Search Core Components - Search Results_'](./search-results) and a _'PnP Modern Search Core Components - Search Filters'_ web parts.
 
     <div className='center' style={{flexDirection: 'column'}}>
-        ![PnP Modern Search Core Search Filters WebPart](./img/search_filters_add_to_page.png)
+        ![PnP Modern Search Core Components Search Filters WebPart](./img/search_filters_add_to_page.png)
 
-        ![PnP Modern Search Core Search Filters WebPart default](./img/search_filters_default.png)
+        ![PnP Modern Search Core Components Search Filters WebPart default](./img/search_filters_default.png)
     </div>
 
 3. **In the filters web part**
@@ -50,7 +50,7 @@ Connection between search filters and search results is always a **two-ways** co
     </div>
 
     :::tip
-    You can change filters order in the filters bar using drag n'drop in the property pane.
+    You can change filters order in the filters bar using drag n' drop in the property pane.
     :::
 
 4. **In the search results web part**
@@ -77,7 +77,7 @@ Connection between search filters and search results is always a **two-ways** co
             |------------|-----------------|
             | **Filter Name** | The field name from the search schema (ex: `RefinableStringXXX`) <br/><br/> <Admonition type="warning">For a field to be used as filter, it has be [**Refinable**](https://learn.microsoft.com/en-us/microsoftsearch/manage-search-schema#refinable) in the search schema.</Admonition> | 
             | **Display name** | The name of the filter to display for users. You can specify a value per language according to your site language settings. <br/><br/> <Admonition type="info">If your site is configured to use multiple languages, the '**Add new translation**' button will be available. Otherwise, the default language is used by default and the button is greyed out.</Admonition>    
-            | **Template** | The template to use to display filter values. The builtin templates are: <ul><li>**Check box** ➝ use it for `Text` properties (ex: `RefinableStringXXX`) <p align="center">![Check box](./img/checkbox_template.png)</p></li><li>**Date range** ➝ use it for `Datetime` properties (ex: `RefinableDateXXX`) <p align="center">![Date range](./img/daterange_template.png)</p></li><li>**Slider** ➝ use it for `Integer` properties (ex: `RefinableIntXXX`)) <p align="center">![Slider](./img/slider_template.png)</p></li></ul>
+            | **Template** | The template to use to display filter values. The builtin templates are: <ul><li>**Check box** ➝ use it for `Text` properties (ex: `RefinableStringXXX`) <p align="center" class="w-96">![Check box](./img/checkbox_template.png)</p></li><li>**Date range** ➝ use it for `Datetime` properties (ex: `RefinableDateXXX`) <p align="center" class="w-96">![Date range](./img/daterange_template.png)</p></li></ul>
             | **Show count** | If applicable for the selected template, display counts for each filter values.
             | **Operator** | If multi values is selected, the operator to use between values (OR/AND).
             | **Mutli values** | If applicable for the selected template, allow selection of multiple values.
@@ -116,37 +116,13 @@ Connection between search filters and search results is always a **two-ways** co
 
     </TabItem>
 
-    <TabItem value="settings" label="Settings (Slider template)">
-
-        Settings that only apply to slider template.
-
-        <div style={{display: 'flex'}}>
-
-            <div style={{width: '70%', marginRight: 30}}>   
-            | **Setting** | **Description** |
-            |------------|-----------------|
-            | **Minimum value** | The mininum value that can be selected on the slider. **Can be a negative value**.
-            | **Maximum value** | The maximum value that can be selected on the slider. Should be higher than the minimum value.
-            | **Default minimum value** | The default mininum value selected on the slider.
-            | **Default maximum value** | The default maximum value selected on the slider.
-            | **Markers** | Markers are arbitrary points to show on the slider line having a specific value and text. Use markers to build predefined intervals. <br/><br/> <ul><li>**Label**: the label to show in the marker.</li><li>**Value**: the value when selected.</li><li>**Size**: size of the text in pixels.</li></ul> <div style={{display: 'flex',flexDirection: 'column'}}>![Filter marker settings](./img/filters_marker_example2.png)![Filter marker result](./img/filters_marker_example.png)</div>
-            </div>
-
-            <div style={{width: '30%', justifyContent: 'center', alignItems: 'flex-start', display: 'flex'}}>   
-                ![Filter slider template settings](./img/filters_slider_settings.png)
-            </div>
-
-        </div>
-
-    </TabItem>
-
 </Tabs>
 
 ## Control filter visibility with search verticals {#configure-verticals}
 
 Connection with search verticals allows you to configure visibility **for each individual filters**. This allows to have only one search filters web part on the page connected to multiple search results web parts.
 
-1. Edit the page and add a '_PnP Modern Search Core - Search Verticals'. Configure some verticals.
+1. Edit the page and add a '_PnP Modern Search Core Components - Search Verticals'_. Configure some verticals.
 
     <div className='center'>   
         ![Filter display](./img/filters_verticals_webpart.png)
@@ -159,7 +135,7 @@ Connection with search verticals allows you to configure visibility **for each i
 To find the Web Part instance ID ➝ [here](./tips#tip-instanceid)
 :::
 
-5. For each individual filter, a new confoguration tab **'Display'** is available. Select the tab where the current filter should be displayed:
+5. For each individual filter, a new configuration tab **'Display'** is available. Select the tab where the current filter should be displayed:
 
     <div className='center'>   
         ![Filter display](./img/filters_display_verticals.png)
@@ -203,7 +179,7 @@ The following properties can be used in the template:
         ```
     </div>
 
-    <div style={{width: '30%', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
+    <div style={{justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
         ![Filter name template](./img/filter_name_template_example.png)
     </div>
 
@@ -255,43 +231,4 @@ The following properties can be used in the template:
 
 :::tip
 You can apply a template conditionally to a filter name using `data-if="filterName === 'FileType'"`. Use the **debug mode** to inspect variables that can be used in your templates.
-:::
-
-### `bubble`
-
-This template controls the rendering of bubbles content in the slider template.
-
-➝ Applies to filter templates: **Slider**
-
-<span style={{textDecoration: 'underline'}}>**Properties**</span>
-<br/>
-The following properties can be used in the template:
-
-| Property | Description |
-|----------|-------------|
-| `value`    | Current value of the marker in the slider.
-| `selectedMinValue`   | The minimum selected value on the slider.
-
-<div style={{display: 'flex'}}>
-
-    <div style={{width: '70%', marginRight: 30}}>   
-        ```html
-         <template data-type="bubble">
-
-            <div data-if="value < 0">
-                {{ value }} neg
-            </div>
-
-            <div data-if="value > 0">
-                {{ value }} pos
-            </div>
-
-        </template>
-        ```
-    </div>
-
-    <div style={{width: '30%', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
-        ![Bubble slider template](./img/bubble_template_example.png)
-    </div>
-
-</div>
+:::
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/search-results.mdx b/documentation/docs/sharepoint-webparts/available-webparts/search-results.mdx
@@ -16,7 +16,7 @@ This Web Part can be used **alone** or connected to **other Web Parts** to add d
 
 
 1. Edit your SharePoint modern page.
-2. Search for the 'PnP Modern Search Core - Search Results' Web Part and add it to your page:
+2. Search for the _'PnP Modern Search Core Components - Search Results'_ Web Part and add it to your page:
 
 <div className='center' style={{flexDirection: 'column'}}>   
     ![Search Results Webpart](./img/add_search_results_wp.png)
@@ -48,12 +48,12 @@ Entity types represent the type of data you want to retrieve. The following enti
     <div style={{width: '50%'}}>   
         | Entity type | Description
         | ----------- | -----------
-        | **List Items** | Used to retreive SharePoint list items. Note that files and folders are also returned as list items.
+        | **List Items** | Used to retrieve SharePoint list items. Note that files and folders are also returned as list items.
         | **List** | Search for lists. Note that document libraries are also returned as lists.
         | **Drive** | Document libraries.
         | **Drive Items** |  Files, folders, pages, and news.
         | **Sites** | Sites in SharePoint.
-        | **External Items** | External indexed sources (ex: `Profiles`, `Ubipedia`, `DXP`). When selecting this option, you must specify a valid connection ID (see below 👇).
+        | **External Items** | External indexed sources. When selecting this option, you must specify a valid connection ID.
         | **Teams messages** | Messages fron Microsoft Teams.
         | **Bookmarks** | Microsoft Search bookmarks defined at organization level.
         | **Acronyms** | Microsoft Search acronyms defined at organization level.
@@ -95,12 +95,12 @@ Theorically, all SharePoint web parts or extensions defined as a source on the p
 
 <Tabs>
   <TabItem value="searchbox" label="Example: Connect to a search box" default>
-    You can connect the _PnP Modern Search Core - Search Box_ as query text source for the search results Web Part. To do so:
+    You can connect the _PnP Modern Search Core Components - Search Box_ as query text source for the search results Web Part. To do so:
 
-    1. Add the '_PnP Modern Search Core - Search Box_' on the same page.
-    2. Open the '_PnP Modern Search Core - Search Results_' property pane settings.
-    3. In **Query Text** ➝ **Dynamic Value** ➝ **Connect to source**, choose _PnP Modern Search Core - Search Box_.
-    4. In **PnP Modern Search Core - Search Box's properties** choose your Search Box WebPart. 
+    1. Add the '_PnP Modern Search Core Components - Search Box_' on the same page.
+    2. Open the '_PnP Modern Search Core Components - Search Results_' property pane settings.
+    3. In **Query Text** ➝ **Dynamic Value** ➝ **Connect to source**, choose _PnP Modern Search Core Components - Search Box_.
+    4. In **PnP Modern Search Core Components - Search Box's properties** choose your Search Box WebPart. 
 
     <div className='center'> 
         ![Connect search box](./img/connect_to_searchbox.png)
@@ -117,7 +117,7 @@ To find the Web Part instance ID ➝ [here](./tips#tip-instanceid)
         ![Query String param](./img/query_string_param.png)
     </div>
 
-    2. Open the 'PnP Modern Search Core - Search Results' property pane settings.
+    2. Open the 'PnP Modern Search Core Components - Search Results' property pane settings.
     3. In **Query Text** ➝ **Dynamic Value** ➝ **Connect to source**, choose _Page environment_.
     4. In **Page environment's properties** choose your **Query string** ➝ **Query parameters** ➝ &lt;your_param_name&gt; 
 
@@ -235,32 +235,6 @@ Enable this option only if you want to rely on the managed experience instead of
     ![Default value](./img/enable_result_types.png)
 </div>
 
-
-:::info
-
-In the PnP Modern Search Core environment, only the following sources use result types:
-
-- **Profiles**
-- **Ubipedia**
-- **ServiceNow Knowledge Base**
-- **Wordpress DXP**
-
-**Ex: Ubipedia** 
-
-➝ without result types enabled
-
-<div className='center'> 
-    ![Without result type](./img/without_result_type.png)
-</div>
-
-➝ with resulty types enabled
-
-<div className='center'> 
-    ![With result type](./img/with_result_type.png)
-</div>
-
-:::
-
 :::warning Don't forget to define fields!
 Most of the time, result types expect specific fields to be included in the search response to work properly. If you are not sure what fields to use, contact an admin.
 ::: 
@@ -338,7 +312,7 @@ Icons and properties are automatically displayed according to [entity type](#ent
 The tiles template displays items in cards. Example with Anvil SharePoint site:
 
 <div className='center'>   
-    ![Cards](./img/anvil_cards.png)
+    ![Cards](./img/tiles_cards.png)
 </div>
 
 The following options are available:
@@ -379,7 +353,7 @@ The show count option display the total number of results returned by the query.
 
 You can connect the search results Web Part to a search verticals on the same page:
 
-1. Add a _'PnP Modern Search Core - Search Verticals'_ Web Part on the page and [configure some tabs](./search-verticals#configure-verticals).
+1. Add a _'PnP Modern Search Core Components - Search Verticals'_ Web Part on the page and [configure some tabs](./search-verticals#configure-verticals).
 
 <div className='center'>   
     ![Results display](./img/filters_verticals_webpart.png)
@@ -432,18 +406,18 @@ The following properties can be used in the template:
 
 <div style={{display: 'flex'}}>
 
-    <div style={{width: '70%', marginRight: 30}}>   
+    <div style={{width: '50%', marginRight: 30}}>   
         ```html
         <template data-type="items">
             <div data-for='item in items'>
-                <div>Title: {{ item.Title }}</div>
+                <div>Title: {{ item.title }}</div>
                 <div>Path: {{ item.path }}</div>
             </div>
         </template>
         ```
     </div>
 
-    <div style={{width: '30%', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
+    <div style={{width: '50%', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
         ![Items template](./img/items_template_example.png)
     </div>
 

diff --git a/documentation/docs/sharepoint-webparts/available-webparts/search-verticals.mdx b/documentation/docs/sharepoint-webparts/available-webparts/search-verticals.mdx
@@ -12,11 +12,11 @@ The _'Search Verticals'_ Web Part allows to conditionally render a _'Search Resu
 
 ## Configure verticals
 
-1. Edit the page and add a '_PnP Modern Search Core - Search Verticals'_. 
+1. Edit the page and add a '_PnP Modern Search Core Components - Search Verticals'_. 
 
     <div className='center' style={{flexDirection: 'column'}}>   
 
-        ![PnP Modern Search Core Search Verticals](./img/add_verticals_webpart_search.png)
+        ![PnP Modern Search Core Components Search Verticals](./img/add_verticals_webpart_search.png)
 
         ![Add search verticals](./img/add_search_verticals.png)
     </div>
@@ -43,7 +43,7 @@ The _'Search Verticals'_ Web Part allows to conditionally render a _'Search Resu
     </div>
 
     :::info Tip
-    You can change verticals order using drag n'drop in the property pane.
+    You can change verticals order using drag n' drop in the property pane.
     :::
 
 3. Connect the other web parts on page:

diff --git a/documentation/docs/sharepoint-webparts/available-webparts/theming.mdx b/documentation/docs/sharepoint-webparts/available-webparts/theming.mdx
@@ -29,6 +29,6 @@ By default, all Web Parts follow the SharePoint site theme/section background (i
     </div>
 
     <div style={{width: '50%', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
-        ![Verticals template](./img/colors_overrides.png)
+        <div>![Verticals template](./img/colors_overrides.png)</div>
     </div>
 </div>
diff --git a/documentation/docs/sharepoint-webparts/available-webparts/working-with-tokens.md b/documentation/docs/sharepoint-webparts/available-webparts/working-with-tokens.md
@@ -25,7 +25,7 @@ Tokens are case insensitive
 Tokens related to connected Web Parts in the Search Results. 
 
 :::info
-These tokens can be used in the 'PnP Modern Search Core Search Results' and 'PnP Modern Search Core Search Box' Web Parts.
+These tokens can be used in the 'PnP Modern Search Core Components Search Results' and 'PnP Modern Search Core Components Search Box' Web Parts.
 You can escape curly braces characters using `'\'` to avoid: ex: `DepartmentId:\{edbfd618-ef1d-4cc5-a214-95bf44ddf4ee\}`
 :::
 

diff --git a/documentation/docs/sharepoint-webparts/img/add_webparts.png b/documentation/docs/sharepoint-webparts/img/add_webparts.png
diff --git a/documentation/docs/sharepoint-webparts/img/docsVersionDropdown.png b/documentation/docs/sharepoint-webparts/img/docsVersionDropdown.png
diff --git a/documentation/docs/sharepoint-webparts/img/localeDropdown.png b/documentation/docs/sharepoint-webparts/img/localeDropdown.png