Merge pull request #167 from farhan-nurzi-deriv/farhan/tablet-portrait

Farhan/add isTabletPortrait to useDevice

src/components/PageLayout/__test__/PageLayout.spec.tsx

@@ -1,42 +1,47 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { PageLayout } from "..";
-import * as hooks from "../../../hooks"
+import * as hooks from "../../../hooks";
 
 // Mocking the useDevice hook
 jest.mock("../../../hooks", () => ({
-  useDevice: jest.fn().mockReturnValue({isMobile:false}),
+    useDevice: jest.fn().mockReturnValue({ isMobile: false }),
 }));
 
 describe("PageLayout Component", () => {
-  it("renders children correctly", () => {
-    render(
-      <PageLayout>
-        <div>Content</div>
-      </PageLayout>
-    );
-    const content =screen.getByText("Content")
-    expect(content).toBeInTheDocument();
-  });
+    it("renders children correctly", () => {
+        render(
+            <PageLayout>
+                <div>Content</div>
+            </PageLayout>,
+        );
+        const content = screen.getByText("Content");
+        expect(content).toBeInTheDocument();
+    });
 
-  it("renders sidebar when provided and not on mobile", () => {
-    const sidebar = <div>Sidebar</div>;
-    render(<PageLayout sidebar={sidebar} />);
-    const sidebarContent =screen.getByText("Sidebar")
-    expect(sidebarContent).toBeInTheDocument();
-  });
+    it("renders sidebar when provided and not on mobile", () => {
+        const sidebar = <div>Sidebar</div>;
+        render(<PageLayout sidebar={sidebar} />);
+        const sidebarContent = screen.getByText("Sidebar");
+        expect(sidebarContent).toBeInTheDocument();
+    });
 
-  it("does not render sidebar on mobile", () => {
-    jest.spyOn(hooks,'useDevice').mockImplementation(()=>({isMobile:true, isDesktop:false, isTablet:false}))
-    const sidebar = <div>Sidebar</div>;
-    render(<PageLayout sidebar={sidebar} />);
-    const sidebarContent =screen.queryByText("Sidebar")
-    expect(sidebarContent).not.toBeInTheDocument()
-  });
+    it("does not render sidebar on mobile", () => {
+        jest.spyOn(hooks, "useDevice").mockImplementation(() => ({
+            isMobile: true,
+            isDesktop: false,
+            isTablet: false,
+            isTabletPortrait: false,
+        }));
+        const sidebar = <div>Sidebar</div>;
+        render(<PageLayout sidebar={sidebar} />);
+        const sidebarContent = screen.queryByText("Sidebar");
+        expect(sidebarContent).not.toBeInTheDocument();
+    });
 
-  it("does not render sidebar when not provided", () => {
-    render(<PageLayout />);
-    const sidebarContent=screen.queryByTestId("sidebar")
-    expect(sidebarContent).toBeNull();
-  });
+    it("does not render sidebar when not provided", () => {
+        render(<PageLayout />);
+        const sidebarContent = screen.queryByTestId("sidebar");
+        expect(sidebarContent).toBeNull();
+    });
 });

src/hooks/useDevice.ts

@@ -7,12 +7,17 @@ export const useDevice = () => {
     const isTablet = useMediaQuery(
         `(min-width: 601px) and (max-width: 1279px)`,
     );
+    const isTabletPortrait = useMediaQuery(
+        `(min-width: 601px) and (max-width: 1279px) and (orientation: portrait)`,
+    );
     return {
         /** returns Larger screen tablets [min-width: 1280px] */
         isDesktop,
         /**  returns Smaller screen tablets [max-width: 600px] */
         isMobile,
         /** returns Larger screen phones and smaller screen desktop [min-width: 601px and max-width: 1279px] */
         isTablet,
+        /** returns tablet screen with portrait orientation [min-width: 601px and max-width: 1279px and orientation: portrait] */
+        isTabletPortrait,
     };
 };