@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 0.4.19 to 0.4.20

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.4.19",
+    "version": "0.4.20",
     "description": "Docs Lightning web components for DSC",
@@ -17,3 +17,3 @@ "license": "MIT",
     },
-    "gitHead": "a73fcd169fe8cd97704e5acbab11ebdd664f0452"
+    "gitHead": "4053de6248384bc179c2ad243e29245b88747f85"
 }

src/modules/doc/header/__tests__/header.test.ts

@@ -13,3 +13,4 @@ import Button from "dx/button";
 
-const EXPECTED_QUERY = "(max-width: 800px)";
+const EXPECTED_QUERY_TABLET = "(max-width: 980px)";
+const EXPECTED_QUERY_MOBILE = "(max-width: 880px)";
 
@@ -20,2 +21,6 @@ const TAG = "doc-header";
 describe(TAG, () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
     describe("desktop", () => {
@@ -194,2 +199,42 @@ it("renders", () => {
 
+    describe("tablet", () => {
+        const oldMatchMedia = window.matchMedia;
+
+        beforeAll(() => {
+            window.matchMedia = createMediaMock(false, [false, true]);
+        });
+
+        afterAll(() => {
+            window.matchMedia = oldMatchMedia;
+        });
+
+        it("renders tablet specific elements", () => {
+            const element = render(mockPropsDevelopers);
+
+            const button: HTMLElement = element.shadowRoot.querySelector(
+                ".nav_menu-ctas .nav_menu-button"
+            );
+            expect(button).toBeNull();
+
+            const headerSearch = element.shadowRoot.querySelector(
+                "dx-header-search"
+            );
+            expect(headerSearch).not.toBeNull();
+            expect(headerSearch.mobile).toBe(true);
+
+            const signupDiv = element.shadowRoot.querySelector(
+                ".header-login-signup"
+            );
+            expect(signupDiv).not.toBeNull();
+
+            expect(window.matchMedia).toBeCalledTimes(2);
+            expect(window.matchMedia).toHaveBeenCalledWith(
+                EXPECTED_QUERY_MOBILE
+            );
+            expect(window.matchMedia).toHaveBeenLastCalledWith(
+                EXPECTED_QUERY_TABLET
+            );
+        });
+    });
+
     describe("mobile", () => {
@@ -220,4 +265,9 @@ const oldMatchMedia = window.matchMedia;
 
-            expect(window.matchMedia).toBeCalledTimes(1);
-            expect(window.matchMedia).toBeCalledWith(EXPECTED_QUERY);
+            expect(window.matchMedia).toBeCalledTimes(2);
+            expect(window.matchMedia).toHaveBeenCalledWith(
+                EXPECTED_QUERY_MOBILE
+            );
+            expect(window.matchMedia).toHaveBeenLastCalledWith(
+                EXPECTED_QUERY_TABLET
+            );
         });
@@ -224,0 +274,0 @@

src/modules/doc/header/__tests__/mockNavDevelopers.ts

 export default [
     {
+        id: "home",
+        label: "Home",
+        link: {
+            href: "/",
+            target: null
+        }
+    },
+    {
         id: "documentation",
@@ -4,0 +12,0 @@ label: "Documentation",

src/modules/doc/header/__tests__/mockProps.ts

@@ -39,3 +39,3 @@ import {
     navItems: mockNavDevelopers,
-    title: "Developers",
+    title: "Salesforce Developers",
     subtitle: "Apex Developer Guides",
@@ -42,0 +42,0 @@ ...coveoConfig

src/modules/doc/header/header.ts

@@ -7,2 +7,5 @@ import { api } from "lwc";
 
+const TABLET_MATCH = "980px";
+const MOBILE_MATCH = "880px";
+
 export default class Header extends HeaderBase {
@@ -19,5 +22,7 @@ @api
     private _scopedNavItems!: Option[];
+    private tabletMatchMedia!: MediaQueryList;
+    private tablet = false;
 
     protected mobileBreakpoint(): string {
-        return "800px";
+        return MOBILE_MATCH;
     }
@@ -33,2 +38,26 @@
 
+    private get showSignup(): boolean {
+        return (this.tablet && !this.isSearchOpen) || !this.tablet;
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.tabletMatchMedia = window.matchMedia(
+            `(max-width: ${TABLET_MATCH})`
+        );
+        this.onTabletChange(this.tabletMatchMedia);
+        this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.tabletMatchMedia.removeEventListener(
+            "change",
+            this.onTabletChange
+        );
+    }
+
+    private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.tablet = e.matches);
+
     protected additionalClasses(): string {
@@ -35,0 +64,0 @@ return cx(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

463392

increased by0.55%

Lines of code

9287

increased by0.79%

No dependency changes