Merge branch 'release/0.3.0'

microsoft-search · Feb 5, 2024 · db61e09 · db61e09
2 parents cc79ad9 + 20b4482
commit db61e09
Show file tree

Hide file tree

Showing 79 changed files with 7,044 additions and 5,574 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -124,6 +124,7 @@ jobs:
         working-directory: ./packages/spfx
         run: |
           gulp update-version --value $MAJORMINORPATCH
+          pnpm run tailwindcss
           gulp bundle --ship
           gulp package-solution --ship
 
@@ -208,7 +209,7 @@ jobs:
 
       - name: Version package
         run: pnpm version $VERSION --no-git-tag-version
-  
+
       - name: Bundle
         run: pnpm run bundle:prod
 

diff --git a/README.md b/README.md
@@ -2,6 +2,12 @@
 
 > These components have been initially made by [Ubisoft](https://www.ubisoft.com/) as part of their Microsoft Search implementation. They've been adapted are given to the community for free. A big thanks to them! Sharing is caring.
 
+   <p align="center">
+      The complete use case can be downloaded here
+      <a href="https://microsoft-search.github.io/pnp-modern-search-core-components/assets/ubisoft_microsoft-search-implementation_use_case.pdf" target="_blank"><img src="./docs/assets/read_btn.svg"/></a>
+   </p>
+
+
 <p align="center">
    <img alt="PnP Logo"src="./docs/assets/pnp.png"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<picture><source media="(prefers-color-scheme: dark)" srcset="./docs/assets/ubisoft_stacked_logo_white.png"><source media="(prefers-color-scheme: light)" srcset="./docs/assets/ubisoft_stacked_logo_black.png"><img alt="Ubisoft Logo" src="./docs/assets/ubisoft_stacked_logo_black.png"/></picture>
 </p>

diff --git a/docs/assets/extra.css b/docs/assets/extra.css
@@ -5,7 +5,7 @@
 }
 
 .logo {
-    width: 280px;
+    width: 150px;
 }
 
 .md-header {

diff --git a/docs/assets/read_btn.png b/docs/assets/read_btn.png
diff --git a/docs/assets/read_btn.svg b/docs/assets/read_btn.svg
diff --git a/docs/assets/ubisoft_microsoft-search-implementation_use_case.pdf b/docs/assets/ubisoft_microsoft-search-implementation_use_case.pdf
diff --git a/docs/index.md b/docs/index.md
@@ -3,7 +3,13 @@
 !!! information
     These components have been initially made by [Ubisoft](https://www.ubisoft.com/) as part of their Microsoft Search implementation. They've been adapted are given to the community for free. A big thanks to them! Sharing is caring.
 
-    !["Ubisoft"](./assets//ubisoft_logo.png){: .center .logo }
+    !["Ubisoft"](./assets/ubisoft_stacked_logo_black.png){: .center .logo}
+
+    <p align="center">
+      The complete use case can be downloaded here
+      <a href="./assets/ubisoft_microsoft-search-implementation_use_case.pdf" target="_blank"><img src="./assets/read_btn.svg"/></a>
+   </p> 
+
 
 The goal is to provide reusable components based on Microsoft Search and Microsoft Graph in general that can be used transversally in an organization.
 

diff --git a/docs/thanks.md b/docs/thanks.md
@@ -5,8 +5,10 @@ A big thank you to all Ubisoft people that make this solution happen (by alphabe
 - [Franck Cornu](https://www.linkedin.com/in/franckcornu/), Microsoft 365 developer
 - [Stéphanie Daigle](https://www.linkedin.com/in/stephaniedaigle), IT Manager Microsoft 365
 - [Laura-Simona Dobresenciuc](https://www.linkedin.com/in/dobresenciuc-laura-simona-b5a165b8), Technical Lead - IT Development
+- [Mathilde Eginard](https://www.linkedin.com/in/mathilde-eginard/), Content strategist
 - [Jessica Fernandes](https://www.linkedin.com/in/jessica-fernandes-3068551/), IT Associate Director  Communication & Collaboration
+- [Andrei-Lucian Ghenea](https://www.linkedin.com/in/andrei-lucian-ghenea/), Senior Web Designer
 - [Rishi Nanda](https://www.linkedin.com/in/rishi-nanda/), IT Manager - Connect & Explore Product Team
 - [Manuela Neaga-Budoiu](https://www.linkedin.com/in/manuela-neaga-ionescu-361734b), Manager Software Engineering - Collab & Comm
--[Mihaela Nita](https://www.linkedin.com/in/mihaela-nita-6373aa12a/), Product Owner
--[Cosmin-Alexandru Serban](https://www.linkedin.com/in/cosmin-serban-92b08b94/), FullStack Software Developer
+- [Mihaela Nita](https://www.linkedin.com/in/mihaela-nita-6373aa12a/), Product Owner
+- [Cosmin-Alexandru Serban](https://www.linkedin.com/in/cosmin-serban-92b08b94/), FullStack Software Developer
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -18,7 +18,7 @@ nav:
 # Configuration
 theme:
   name: material
-  logo: assets/logo.svg
+  logo: assets/pnp.png
   icon:
     repo: fontawesome/brands/github
 
@@ -45,11 +45,6 @@ markdown_extensions:
   - pymdownx.inlinehilite
   - pymdownx.snippets
   - pymdownx.superfences
-  - markdown_include.include:
-          base_path: docs
-
-extra_javascript:
-  - fix-trailing-slash.js
 
 # Plugins
 plugins:

diff --git a/packages/components/custom-elements.json b/packages/components/custom-elements.json
diff --git a/packages/components/dev/index.html b/packages/components/dev/index.html
@@ -61,7 +61,7 @@
                 <span class="font-bold">PnP Modern Search - Core Components</span>
             </div>
 
-            <div><mgt-pnp-login class="" login-view="avatar"></mgt-pnp-login></div>
+            <div><mgt-pnp-login ></mgt-pnp-login></div>
 
         </div>
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -70,7 +70,7 @@
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.12.0",
-    "@microsoft/fast-foundation": "2.49.1",
+    "@microsoft/fast-foundation": "2.49.4",
     "@microsoft/mgt": "3.1.3",
     "@microsoft/mgt-components": "3.1.3",
     "@microsoft/mgt-element": "3.1.3",
@@ -107,6 +107,7 @@
     "@storybook/web-components": "7.4.5",
     "@storybook/web-components-webpack5": "7.4.5",
     "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "0.4.4",
     "@types/chai-dom": "^0.0.8",
     "@types/lodash-es": "^4.17.6",
     "@types/mocha": "10.0.1",
@@ -143,8 +144,8 @@
     "postcss-loader": "7.0.1",
     "postcss-nested": "^6.0.1",
     "postcss-preset-env": "7.8.3",
-    "puppeteer": "^20.0.0",
-    "puppeteer-core": "^20.0.0",
+    "puppeteer": "20.0.0",
+    "puppeteer-core": "20.0.0",
     "prettier": "2.8.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/components/src/bundle/index.ts b/packages/components/src/bundle/index.ts
@@ -1,5 +1,5 @@
-
 import { customElementHelper } from "@microsoft/mgt-element/dist/es6/components/customElementHelper";
+
 import "../exports/define/pnp-adaptive-card";
 import "../exports/define/pnp-language-provider";
 import "../exports/define/pnp-search-filters";

diff --git a/packages/components/src/components/BaseComponent.ts b/packages/components/src/components/BaseComponent.ts
@@ -5,7 +5,7 @@ import { property, state } from "lit/decorators.js";
 import { ErrorTypes, ThemeDefaultCSSVariablesValues, ThemeInternalCSSVariables, ThemePublicCSSVariables } from "../common/Constants";
 import { IComponentBinding } from "../models/common/IComponentBinding";
 import { IThemeDefinition } from "../models/common/IThemeDefinition";
-import { isEqual, isObjectLike } from "lodash-es";
+import { isEmpty, isEqual, isObjectLike } from "lodash-es";
 import { ILocalizedString } from "../models/common/ILocalizedString";
 import { ScopedElementsMixin } from "@open-wc/scoped-elements";
 import "@open-wc/dedupe-mixin";
@@ -283,12 +283,14 @@ export abstract class BaseComponent extends ScopedElementsMixin(MgtTemplatedComp
     }
 
     private setFASTColors() {
-        
+
         const theme = this.getTheme();
 
         if (theme.isDarkMode) {
+            const primaryBackgroundColor = getComputedStyle(this).getPropertyValue(ThemeInternalCSSVariables.primaryBackgroundColorDark);
+
             baseLayerLuminance.setValueFor(this,StandardLuminance.DarkMode);
-            neutralFillRest.setValueFor(this, SwatchRGB.from(parseColorHexRGB(getComputedStyle(this).getPropertyValue(ThemeInternalCSSVariables.primaryBackgroundColorDark))));
+            neutralFillRest.setValueFor(this, SwatchRGB.from(parseColorHexRGB(primaryBackgroundColor) ? parseColorHexRGB(primaryBackgroundColor) : parseColorHexRGB(ThemeDefaultCSSVariablesValues.primaryBackgroundColorDark)));
             neutralFillStealthRest.setValueFor(this, neutralFillRest);
             neutralFillStealthRestFluent.setValueFor(this, neutralFillRest);
         } else {
@@ -298,15 +300,14 @@ export abstract class BaseComponent extends ScopedElementsMixin(MgtTemplatedComp
         }
 
         const primaryColor = getComputedStyle(this).getPropertyValue(ThemeInternalCSSVariables.colorPrimary);
-        let defaultColor = primaryColor;
-        if (!primaryColor) {
-            defaultColor = ThemeDefaultCSSVariablesValues.defaultColorPrimary;
+        const defaultPrimaryColor: string = !isEmpty(primaryColor) ? primaryColor : ThemeDefaultCSSVariablesValues.defaultColorPrimary.toString();
+
+        if (parseColorHexRGB(defaultPrimaryColor)) {
+            accentFillRest.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultPrimaryColor)));
+            accentFillHover.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultPrimaryColor)));
+            accentForegroundRest.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultPrimaryColor)));
+            accentFillActive.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultPrimaryColor)));
         }
-
-        accentFillRest.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultColor)));
-        accentFillHover.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultColor)));
-        accentForegroundRest.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultColor)));
-        accentFillActive.setValueFor(this, SwatchRGB.from(parseColorHexRGB(defaultColor)));
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/...es/components/src/components/search-filters/sub-components/filters/BaseFilterComponent.ts b/...es/components/src/components/search-filters/sub-components/filters/BaseFilterComponent.ts
@@ -141,7 +141,7 @@ export abstract class BaseFilterComponent extends BaseComponent {
                     </fast-button>
                    
                     <fast-anchored-region                             
-                        class=${`${this.isExpanded ? "visible " : "invisible"} z-10`}
+                        class=${`${this.isExpanded ? "visible " : "invisible"} z-10 border-style: solid`}
                         .anchorElement=${this.renderRoot.querySelector("[id='filter-anchor'")}
                         @mousedown=${(e: Event) => {
                             e.preventDefault();

diff --git a/...mponents/search-filters/sub-components/filters/checkbox-filter/CheckboxFilterComponent.ts b/...mponents/search-filters/sub-components/filters/checkbox-filter/CheckboxFilterComponent.ts
@@ -104,7 +104,7 @@ export class CheckboxFilterComponent extends BaseFilterComponent {
         
                 <div class="sticky top-0 flex flex-col space-y-2 bg-white dark:bg-primaryBackgroundColorDark dark:text-textColorDark"> 
                     <div class="border-b px-6 py-3 space-y-2">                  
-                        <label class="text-base">${this.filter.values.length} ${filterName}</label>
+                        <label class="text-base">${this.filteredValues.length} ${filterName}</label>
                         ${renderSearchBox}                        
                     </div>
 

diff --git a/...arch-filters/sub-components/filters/checkbox-filter/tests/CheckboxFilterComponent.test.ts b/...arch-filters/sub-components/filters/checkbox-filter/tests/CheckboxFilterComponent.test.ts
@@ -212,7 +212,7 @@ describe("pnp-checkbox-filter ", () => {
           item.click();
         });
 
-       el.requestUpdate();
+        el.requestUpdate();
         await elementUpdated(el);
 
         assert.isNotNull(getResetButton(el));
@@ -222,7 +222,7 @@ describe("pnp-checkbox-filter ", () => {
         onApplyFiltersSpy.resetHistory();
 
         // Needed to be able to click on the "apply" button (disabled otherwise)
-       el.requestUpdate();
+        el.requestUpdate();
         await elementUpdated(el);
 
         // Apply filters

diff --git a/...rc/components/search-filters/sub-components/search-sort/tests/SearchSortComponent.test.ts b/...rc/components/search-filters/sub-components/search-sort/tests/SearchSortComponent.test.ts
@@ -112,7 +112,7 @@ describe("pnp-search-sort", () => {
             `);
 
             getSortFieldOption(el, "Relevance")?.click();
-           el.requestUpdate();
+            el.requestUpdate();
             await elementUpdated(el);
 
             assert.isEmpty(onSort.getCall(0).args[0]); // Should be an empty array

diff --git a/packages/components/src/components/search-filters/tests/SearchFiltersComponent.test.ts b/packages/components/src/components/search-filters/tests/SearchFiltersComponent.test.ts
@@ -190,7 +190,7 @@ describe("pnp-search-filters", () => {
     assert.isNotNull(getDebugBarBtn(el));
     getDebugBarBtn(el)?.click();
 
-    await el.requestUpdate();
+    el.requestUpdate();
     await elementUpdated(el);
 
     assert.isNotNull(getMonacoEditor(el));
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
     }
     .logo {
-        width: 280px;
+        width: 150px;
     }
     .md-header {
@@ Expand Down @@