Merge branch 'main' of github.com:deriv-com/ui into niloofar/deriv-logo

package.json

@@ -33,6 +33,7 @@
         "test:report": "jest --collectCoverage"
     },
     "dependencies": {
+        "@deriv/quill-icons": "^1.22.5",
         "@types/react-modal": "^3.16.3"
     },
     "devDependencies": {

playground/index.tsx

@@ -1,9 +1,34 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { Drawer, Button } from "../src/main";
 
+const App = () => {
+    const [isOpen, setIsOpen] = React.useState(false);
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <div>playground app</div>
-  </React.StrictMode>,
-)
+    const handleCloseDrawer = () => {
+        setIsOpen(false);
+    };
+
+    return (
+        <div>
+            <Drawer
+                width="300px"
+                isOpen={isOpen}
+                onCloseDrawer={handleCloseDrawer}
+            >
+                <Drawer.Header onCloseDrawer={handleCloseDrawer}>
+                    Menu
+                </Drawer.Header>
+                <Drawer.Content className="custom-content">this is the ss</Drawer.Content>
+                <Drawer.Footer className="custom-footer">Footer</Drawer.Footer>
+            </Drawer>
+            <Button size="sm" onClick={() => setIsOpen(!isOpen)}>Toggle Drawer</Button>
+        </div>
+    );
+};
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);

src/components/AppLayout/Drawer/Drawer.scss

@@ -0,0 +1,73 @@
+@keyframes openDrawer {
+    0% {
+        transform: translateX(-100%);
+    }
+    60%,
+    100% {
+        transform: translateX(0);
+    }
+    80% {
+        transform: translateX(-5%);
+    }
+}
+
+@keyframes closeDrawer {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes disappear {
+    0%{
+        opacity: 1;
+    }
+    100%{
+        opacity: 0;
+    }
+}
+
+.deriv-drawer__container {
+    background-color: white;
+    position: absolute;
+    width: 60%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    box-shadow:
+        0 16px 16px 0 rgba(0, 0, 0, 0.16),
+        0 0 16px 0 rgba(0, 0, 0, 0.16);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    will-change: transform;
+    transform: translateX(-100%);
+    animation-name: openDrawer;
+    animation-duration: 0.4s;
+    animation-fill-mode: forwards;
+    overflow: hidden;
+
+    &.exit {
+        animation: closeDrawer 0.3s;
+    }
+}
+
+.deriv-drawer__overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    overflow-y: hidden;
+    z-index: 9999;
+    will-change: transform;
+    transition-delay: 0.4s;
+
+    &.exit {
+        animation: disappear 0.3s;
+        opacity: 0;
+    }
+}
+
+

src/components/AppLayout/Drawer/DrawerContent/DrawerContent.scss

@@ -0,0 +1,4 @@
+.deriv-drawer__content {
+    flex: 1;
+    overflow-y: auto;
+}

src/components/AppLayout/Drawer/DrawerContent/__test__/DrawerContent.spec.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DrawerContent } from "../";
+
+describe("DrawerContent Component", () => {
+    it("renders the component correctly", () => {
+        render(
+            <DrawerContent>
+                <div>some test content</div>
+            </DrawerContent>,
+        );
+
+        const contentElement = screen.getByText("some test content");
+        expect(contentElement).toBeInTheDocument();
+    });
+
+    it("applies className correctly", () => {
+        render(
+            <DrawerContent className="test-class">
+                some test content
+            </DrawerContent>,
+        );
+
+        const contentElement = screen.getByText("some test content");
+        expect(contentElement).toBeInTheDocument();
+        expect(contentElement).toHaveClass("test-class");
+    });
+});

src/components/AppLayout/Drawer/DrawerContent/index.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps, PropsWithChildren } from "react";
+
+import "./DrawerContent.scss";
+import clsx from "clsx";
+
+type DrawerContentProps = ComponentProps<"div">;
+export const DrawerContent = ({
+    children,
+    className,
+    ...rest
+}: PropsWithChildren<DrawerContentProps>) => {
+    return (
+        <div className={clsx("deriv-drawer__content", className)} {...rest}>
+            {children}
+        </div>
+    );
+};
+
+DrawerContent.displayName = "DrawerContent";
+

src/components/AppLayout/Drawer/DrawerFooter/DrawerFooter.scss

@@ -0,0 +1,6 @@
+.deriv-drawer__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid var(--du-border-divider, #f2f3f4);
+}

src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DrawerFooter } from "../";
+
+describe("DrawerFooter Component", () => {
+    it("renders the component correctly", () => {
+        render(
+            <DrawerFooter>
+                <div>footer content</div>
+            </DrawerFooter>,
+        );
+
+        const contentElement = screen.getByText("footer content");
+        expect(contentElement).toBeInTheDocument();
+    });
+
+    it("applies className correctly", () => {
+        render(
+            <DrawerFooter className="test-class">
+                some test content
+            </DrawerFooter>,
+        );
+
+        const contentElement = screen.getByText("some test content");
+        screen.debug();
+        expect(contentElement).toBeInTheDocument();
+        expect(contentElement).toHaveClass("deriv-drawer__footer test-class");
+    });
+});

src/components/AppLayout/Drawer/DrawerFooter/index.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps, PropsWithChildren } from "react";
+
+import "./DrawerFooter.scss";
+import clsx from "clsx";
+
+type DrawerFooterProps = ComponentProps<"div">;
+export const DrawerFooter = ({
+    children,
+    className,
+    ...rest
+}: PropsWithChildren<DrawerFooterProps>) => {
+    return (
+        <div className={clsx("deriv-drawer__footer", className)} {...rest}>
+            {children}
+        </div>
+    );
+};
+
+DrawerFooter.displayName = "DrawerFooter";

src/components/AppLayout/Drawer/DrawerHeader/DrawerHeader.scss

@@ -0,0 +1,23 @@
+.deriv-drawer__header {
+    display: flex;
+    height: 50px;
+    z-index: 1001;
+    border-bottom: 1px solid var(--du-border-divider, #f2f3f4);
+
+
+    &__close-btn{
+        display: flex;
+        cursor: pointer;
+        padding: 12px;
+        border-right: 1px solid var(--du-border-divider, #f2f3f4);
+        align-items: center;
+        margin: 5px 12px 5px 0;
+    }
+
+    &__content {
+        display: flex;
+        flex: 1;
+        overflow-y: auto;
+        align-items: center;
+    }
+}