fix: review comments

deriv-com · May 15, 2024 · 6725844 · 6725844
1 parent 3a63788
commit 6725844
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 88 deletions.
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -32,9 +32,7 @@ const App = () => {
                                 icon: platformsConfig[0].buttonIcon,
                                 style: { padding: "0 16px" },
                             }}
-                            bottomLink={{
-                                text: "Looking for CFDs? Go to Trader’s Hub",
-                            }}
+                            bottomLinkLabel="Looking for CFDs? Go to Trader’s Hub"
                         >
                             {platformsConfig.map(
                                 ({ description, href, icon, active }) => (
@@ -104,9 +102,7 @@ const App = () => {
                                     buttonProps={{
                                         icon: platformsConfig[0].buttonIcon,
                                     }}
-                                    bottomLink={{
-                                        text: "Looking for CFDs? Go to Trader’s Hub",
-                                    }}
+                                    bottomLinkLabel="Looking for CFDs? Go to Trader’s Hub"
                                 >
                                     {platformsConfig.map(
                                         ({

diff --git a/playground/platformsConfig.tsx b/playground/platformsConfig.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import {
-    DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon,
-    DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon,
-    PartnersProductSmarttraderBrandLightLogoWordmarkIcon,
-    PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon,
+    DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon as DerivTraderLogo,
+    DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon as DerivBotLogo,
+    PartnersProductSmarttraderBrandLightLogoWordmarkIcon as SmarttraderLogo,
+    PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon as BinaryBotLogo,
 } from "@deriv/quill-icons/Logo";
 
 export type PlatformsConfig = {
@@ -22,73 +22,33 @@ export const platformsConfig: PlatformsConfig[] = [
         active: true,
         description:
             "A whole new trading experience on a powerful yet easy to use platform.",
-        icon: (
-            <DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
-                width={148}
-                height={32}
-            />
-        ),
-        buttonIcon: (
-            <DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
-                width={114.97}
-                height={25}
-            />
-        ),
+        icon: <DerivTraderLogo width={148} height={32} />,
+        buttonIcon: <DerivTraderLogo width={114.97} height={25} />,
     },
     {
         href: "https://app.deriv.com/bot",
         showInEU: false,
         active: false,
         description: "Automated trading at your fingertips. No coding needed.",
-        icon: (
-            <DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon
-                width={121}
-                height={32}
-            />
-        ),
-        buttonIcon: (
-            <DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon
-                width={91}
-                height={24}
-            />
-        ),
+        icon: <DerivBotLogo width={121} height={32} />,
+        buttonIcon: <DerivBotLogo width={91} height={24} />,
     },
     {
         href: "https://smarttrader.deriv.com",
         showInEU: false,
         active: false,
         description:
             "Trade the world’s markets with our popular user-friendly platform.",
-        icon: (
-            <PartnersProductSmarttraderBrandLightLogoWordmarkIcon
-                width={153}
-                height={32}
-            />
-        ),
-        buttonIcon: (
-            <PartnersProductSmarttraderBrandLightLogoWordmarkIcon
-                width={115}
-                height={24}
-            />
-        ),
+        icon: <SmarttraderLogo width={153} height={32} />,
+        buttonIcon: <SmarttraderLogo width={115} height={24} />,
     },
     {
         href: "https://bot.deriv.com",
         showInEU: false,
         active: false,
         description:
             "Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.",
-        icon: (
-            <PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon
-                width={133}
-                height={32}
-            />
-        ),
-        buttonIcon: (
-            <PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon
-                width={100}
-                height={24}
-            />
-        ),
+        icon: <BinaryBotLogo width={133} height={32} />,
+        buttonIcon: <BinaryBotLogo width={100} height={24} />,
     },
 ];
diff --git a/src/components/AppLayout/PlatformSwitcher/PlatformSwitcher.scss b/src/components/AppLayout/PlatformSwitcher/PlatformSwitcher.scss
@@ -42,7 +42,7 @@
         &:hover {
             background: var(--du-general-hover, #e6e9e9);
 
-            @media (max-width: 600px) {
+            @include mobile {
                 background: transparent;
             }
         }
@@ -54,7 +54,7 @@
         width: 360px;
         height: 132px;
 
-        @media (max-width: 600px) {
+        @include mobile {
             width: 263px;
         }
 
@@ -94,7 +94,7 @@
             animation-fill-mode: forwards;
         }
 
-        @media (max-width: 600px) {
+        @include mobile {
             display: none;
         }
     }
@@ -105,7 +105,7 @@
         top: 47px;
         background: var(--du-general-main-2, #fff);
 
-        @media (max-width: 600px) {
+        @include mobile {
             height: 100%;
             top: 123px;
         }
@@ -114,7 +114,7 @@
             padding: 32px;
             background: var(--du-general-main-2, #fff);
 
-            @media (max-width: 600px) {
+            @include mobile {
                 padding: 16px;
                 padding-top: 9px;
             }
@@ -126,7 +126,7 @@
             flex-wrap: wrap;
             gap: 32px;
 
-            @media (max-width: 600px) {
+            @include mobile {
                 flex-direction: column;
                 gap: 16px;
             }
@@ -141,7 +141,7 @@
             line-height: 20px;
             color: var(--du-brand-red-coral, #ff444f);
 
-            @media (max-width: 600px) {
+            @include mobile {
                 margin-top: 16px;
             }
         }

diff --git a/src/components/AppLayout/PlatformSwitcher/PlatformSwitcherButton.tsx b/src/components/AppLayout/PlatformSwitcher/PlatformSwitcherButton.tsx
@@ -6,24 +6,24 @@ import "./PlatformSwitcher.scss";
 type TPlatformSwitcherButton = ComponentProps<"button"> & {
     icon: ReactNode;
     isExpanded: boolean;
-    chevronIconSize?: number;
-    chevronIconClassName?: string;
+    iconSize?: number;
+    iconClassName?: string;
 };
 
 /**
  * PlatformSwitcherButton component renders a button with an icon and a chevron that indicates expansion state.
  * @param {TPlatformSwitcherButton} props - The properties passed to the component.
  * @property {ReactNode} icon - The icon to be displayed inside the button.
  * @property {boolean} isExpanded - Flag to determine if the switcher is expanded.
- * @property {number} [chevronIconSize=16] - Optional size for the chevron icon.
- * @property {string} [chevronIconClassName] - Optional additional class names for the chevron icon.
+ * @property {number} [iconSize=16] - Optional size for the chevron icon.
+ * @property {string} [iconClassName] - Optional additional class names for the chevron icon.
  * @returns {JSX.Element} The PlatformSwitcherButton component.
  */
 export const PlatformSwitcherButton = ({
     icon,
     className,
-    chevronIconSize = 16,
-    chevronIconClassName,
+    iconSize = 16,
+    iconClassName,
     isExpanded,
     ...props
 }: TPlatformSwitcherButton) => (
@@ -39,10 +39,10 @@ export const PlatformSwitcherButton = ({
                     "deriv-platform-switcher__button-chevron__expanded":
                         isExpanded,
                 },
-                chevronIconClassName,
+                iconClassName,
             )}
-            width={chevronIconSize}
-            height={chevronIconSize}
+            width={iconSize}
+            height={iconSize}
         />
     </button>
 );

diff --git a/src/components/AppLayout/PlatformSwitcher/__tests__/PlatformSwitcher.spec.tsx b/src/components/AppLayout/PlatformSwitcher/__tests__/PlatformSwitcher.spec.tsx
@@ -5,7 +5,7 @@ import { PlatformSwitcher } from "..";
 const PlatformSwitcherComponent = () => (
     <PlatformSwitcher
         buttonProps={{ icon: <span>icon</span> }}
-        bottomLink={{ text: "CFD link", href: "#" }}
+        bottomLinkLabel="CFD link"
     >
         <span>platform switcher child</span>
     </PlatformSwitcher>

diff --git a/src/components/AppLayout/PlatformSwitcher/__tests__/PlatformSwitcherButton.spec.tsx b/src/components/AppLayout/PlatformSwitcher/__tests__/PlatformSwitcherButton.spec.tsx
@@ -31,7 +31,7 @@ describe("PlatformSwitcherButton Component", () => {
             <PlatformSwitcherButton
                 icon={<TestIcon />}
                 isExpanded={false}
-                chevronIconClassName={customClassName}
+                iconClassName={customClassName}
             />,
         );
         expect(screen.getByRole("img")).toHaveClass(customClassName);

diff --git a/src/components/AppLayout/PlatformSwitcher/index.tsx b/src/components/AppLayout/PlatformSwitcher/index.tsx
@@ -16,29 +16,43 @@ type TPlatformSwitcher = {
         ComponentProps<typeof PlatformSwitcherButton>,
         "isExpanded" | "onClick"
     >;
-    bottomLink: ComponentProps<"a"> & { text: string | JSX.Element };
+    bottomLinkLabel?: string | JSX.Element;
+    bottomLinkProps?: ComponentProps<"a">;
 };
 
 /**
- * PlatformSwitcher component manages a dropdown-like interface for switching between different platforms or sections.
- * It includes a button to trigger expansion of the menu and a context menu that renders its children as items.
+ * PlatformSwitcher is a React component that renders a button which toggles the visibility of a context menu.
+ * It uses an `onClickOutside` hook to detect and handle clicks outside the component area, which toggles the expansion state of the context menu.
  *
- * @param {PropsWithChildren<TPlatformSwitcher>} props - The properties passed to the component.
- * @property {Omit<ComponentProps<typeof PlatformSwitcherButton>, "isExpanded" | "onClick">} buttonProps - Properties to pass to the PlatformSwitcherButton component, excluding 'isExpanded' and 'onClick'.
- * @property {ComponentProps<"a"> & { text: string | JSX.Element }} bottomLink - Properties for the bottom link element, including text content which can be a string or JSX.
- * @returns {JSX.Element} The PlatformSwitcher component wrapped in a div with overlay and context menu.
+ * @component
+ * @param {Object} props The properties passed to the component
+ * @param {Omit<ComponentProps<typeof PlatformSwitcherButton>, "isExpanded" | "onClick">} props.buttonProps - Props for the PlatformSwitcherButton, excluding `isExpanded` and `onClick`.
+ * @param {React.ReactNode} props.children - The children elements to be rendered inside the context menu. These could be additional links, buttons, or other interactive elements.
+ * @param {string | JSX.Element} [props.bottomLinkLabel] - Optional label for a bottom link in the context menu, can be a string or JSX element.
+ * @param {ComponentProps<"a">} [props.bottomLinkProps] - Optional props for the bottom link, assuming it's rendered as an `<a>` tag.
+ *
+ * @example
+ * <PlatformSwitcher
+ *   buttonProps={{ ariaLabel: 'Switch platforms' }}
+ *   bottomLinkLabel="More Options"
+ *   bottomLinkProps={{ href: '#', target: '_blank' }}
+ * >
+ *   <div>Option 1</div>
+ *   <div>Option 2</div>
+ * </PlatformSwitcher>
  */
 export const PlatformSwitcher = ({
     buttonProps,
     children,
-    bottomLink,
+    bottomLinkLabel,
+    bottomLinkProps,
 }: PropsWithChildren<TPlatformSwitcher>) => {
     const [isExpanded, setExpanded] = useState(false);
     const ref = useRef(null);
 
     useOnClickOutside(ref, (e) => {
         e.stopPropagation();
-        setExpanded(!isExpanded);
+        setExpanded((prevIsExpanded) => !prevIsExpanded);
     });
 
     return (
@@ -48,7 +62,7 @@ export const PlatformSwitcher = ({
                 onClick={(e) => {
                     if (!ref.current) {
                         e.stopPropagation();
-                        setExpanded(!isExpanded);
+                        setExpanded((prevIsExpanded) => !prevIsExpanded);
                     }
                 }}
                 {...buttonProps}
@@ -68,9 +82,9 @@ export const PlatformSwitcher = ({
                         {children}
                     </div>
 
-                    {bottomLink && (
+                    {bottomLinkLabel && (
                         <div className="deriv-platform-switcher__context-menu__link">
-                            <a {...bottomLink}>{bottomLink.text}</a>
+                            <a {...bottomLinkProps}>{bottomLinkLabel}</a>
                         </div>
                     )}
                 </div>