diff --git a/playground/index.tsx b/playground/index.tsx
index 5876abd6..194122d3 100644
--- a/playground/index.tsx
+++ b/playground/index.tsx
@@ -1,25 +1,89 @@
import React from "react";
import ReactDOM from "react-dom/client";
import {
- LegacyFullscreen1pxIcon,
- LegacyHandleMoreIcon,
+ LegacyReportsIcon,
+ LabelPairedHouseBlankMdRegularIcon,
+ LegacyChevronRight2pxIcon
} from "@deriv/quill-icons";
-import { Header } from "../src/main";
-import { Text } from "../src/main";
+import {
+ MenuItem,
+ useDevice,
+ Header,
+ Drawer,
+ DerivLogo,
+ Button,
+ Wrapper,
+} from "../src/main";
-const App = () => (
-
- }
- rightComponent={}
- >
-
- Home
-
-
-
-);
+const App = () => {
+ const { isMobile } = useDevice();
+ const [is_drawer_open, setDrawerOpen] = React.useState(false);
+ return (
+
+ {!isMobile ? (
+
+
+
+
+ }
+ >
+ Trader's Hub
+
+
+ }
+ >
+ Reports
+
+
+
+ ) : (
+ <>
+
+
setDrawerOpen(false)}
+ >
+ setDrawerOpen(false)}
+ >
+
+
+
+
+
+ }
+ rightComponent={}
+ >
+ Trader's Hub
+
+
+
+
+ This is a footer
+
+ >
+ )}
+
+ );
+};
ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/components/AppLayout/Header/DerivLogo/index.tsx b/src/components/AppLayout/DerivLogo/index.tsx
similarity index 100%
rename from src/components/AppLayout/Header/DerivLogo/index.tsx
rename to src/components/AppLayout/DerivLogo/index.tsx
diff --git a/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx b/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx
index 838073c5..845a5257 100644
--- a/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx
+++ b/src/components/AppLayout/Drawer/DrawerFooter/__test__/DrawerFooter.spec.tsx
@@ -22,7 +22,6 @@ describe("DrawerFooter Component", () => {
);
const contentElement = screen.getByText("some test content");
- screen.debug();
expect(contentElement).toBeInTheDocument();
expect(contentElement).toHaveClass("deriv-drawer__footer test-class");
});
diff --git a/src/components/AppLayout/Header/index.tsx b/src/components/AppLayout/Header/index.tsx
index 9ceb5526..d37d45d0 100644
--- a/src/components/AppLayout/Header/index.tsx
+++ b/src/components/AppLayout/Header/index.tsx
@@ -1,7 +1,5 @@
import { ComponentProps, PropsWithChildren } from "react";
import clsx from "clsx";
-import { DerivLogo } from "./DerivLogo";
-import { MenuItem } from "./MenuItem";
import "./Header.scss";
/**
@@ -21,7 +19,5 @@ export const Header = ({
);
-Header.DerivLogo = DerivLogo;
-Header.MenuItem = MenuItem;
Header.displayName = "Header";
diff --git a/src/components/AppLayout/Header/MenuItem/MenuItem.scss b/src/components/AppLayout/MenuItem/MenuItem.scss
similarity index 100%
rename from src/components/AppLayout/Header/MenuItem/MenuItem.scss
rename to src/components/AppLayout/MenuItem/MenuItem.scss
diff --git a/src/components/AppLayout/Header/MenuItem/index.tsx b/src/components/AppLayout/MenuItem/index.tsx
similarity index 100%
rename from src/components/AppLayout/Header/MenuItem/index.tsx
rename to src/components/AppLayout/MenuItem/index.tsx
diff --git a/src/components/AppLayout/__test__/DerivLogo.spec.tsx b/src/components/AppLayout/__test__/DerivLogo.spec.tsx
index 86d61019..90561f45 100644
--- a/src/components/AppLayout/__test__/DerivLogo.spec.tsx
+++ b/src/components/AppLayout/__test__/DerivLogo.spec.tsx
@@ -1,5 +1,5 @@
import { render, screen } from "@testing-library/react";
-import { DerivLogo } from "../Header/DerivLogo";
+import { DerivLogo } from "../DerivLogo";
describe("DerivLogo Component", () => {
it("renders default logo with correct size", () => {
diff --git a/src/components/AppLayout/__test__/MenuItem.spec.tsx b/src/components/AppLayout/__test__/MenuItem.spec.tsx
index c93c9486..28b60b5e 100644
--- a/src/components/AppLayout/__test__/MenuItem.spec.tsx
+++ b/src/components/AppLayout/__test__/MenuItem.spec.tsx
@@ -1,6 +1,6 @@
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
-import { MenuItem } from "../Header/MenuItem";
+import { MenuItem } from "../MenuItem";
describe("MenuItem Component", () => {
it('renders as a button when "as" prop is "button"', () => {
diff --git a/src/components/AppLayout/index.ts b/src/components/AppLayout/index.ts
index b01cea9d..884326ae 100644
--- a/src/components/AppLayout/index.ts
+++ b/src/components/AppLayout/index.ts
@@ -1,4 +1,6 @@
+export { DerivLogo } from "./DerivLogo";
export { Drawer } from "./Drawer";
export { Footer } from "./Footer";
export { Header } from "./Header";
+export { MenuItem } from "./MenuItem";
export { Wrapper } from "./Wrapper";
diff --git a/src/main.ts b/src/main.ts
index c66997b8..f3cfc8cd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,5 +23,5 @@ export { ToggleSwitch } from "./components/ToggleSwitch";
export { Tooltip } from "./components/Tooltip";
export { useDevice } from "./hooks";
export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";
-export { Header, Footer, Wrapper, Drawer } from "./components/AppLayout";
+export { Header, Footer, Wrapper, Drawer, DerivLogo, MenuItem } from "./components/AppLayout";
export { ContextMenu } from "./components/ContextMenu";
diff --git a/stories/ContextMenu.stories.tsx b/stories/ContextMenu.stories.tsx
index fdce32bf..aebc322f 100644
--- a/stories/ContextMenu.stories.tsx
+++ b/stories/ContextMenu.stories.tsx
@@ -1,7 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
-import { Button, ContextMenu } from "../src/main";
-import { useEffect, useState } from "react";
+import { ContextMenu } from "../src/main";
const meta = {
title: "Components/ContextMenu",
@@ -11,7 +10,7 @@ const meta = {
},
tags: ["autodocs"],
args: {
- isOpen: false,
+ isOpen: true,
},
argTypes: {
isOpen: {
@@ -28,21 +27,12 @@ type Story = StoryObj;
export const Default: Story = {
name: "Default ContextMenu",
- args: {
- isOpen: true,
- },
render: (args) => {
- const [isOpen, setIsOpen] = useState(args.isOpen);
-
- useEffect(() => {
- setIsOpen(args.isOpen);
- }, [args.isOpen]);
-
return (
- Item 1
@@ -50,13 +40,6 @@ export const Default: Story = {
- Item 3
-
);
},